feat(ui-popover, ui-select): allow overriding Select's dropdown border

Author: ToMESSKa

packages/shared-types/src/ComponentThemeVariables.ts

@@ -1175,6 +1175,7 @@ export type SelectTheme = {
   largeIconSize: Typography['fontSizeMedium']
   color: Colors['contrasts']['grey125125']
   background: Colors['contrasts']['white1010']
+  popoverBorderWidth: Border['widthSmall']
 }
 
 export type SourceCodeEditorTheme = {

packages/ui-popover/src/Popover/index.tsx

@@ -584,7 +584,7 @@ class Popover extends Component<PopoverProps, PopoverState> {
       } else {
         viewProps = {
           ...viewProps,
-          borderWidth: 'small',
+          borderWidth: this.props.borderWidth || 'small',
           borderRadius: 'medium',
           ...(color === 'primary-inverse' && { borderColor: 'transparent' })
         } as Partial<ViewProps> & { ref: any }

packages/ui-popover/src/Popover/props.ts

@@ -25,7 +25,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import { element } from '@instructure/ui-prop-types'
-import { ThemeablePropTypes } from '@instructure/emotion'
+import { ThemeablePropTypes, BorderWidth } from '@instructure/emotion'
 import { PositionPropTypes } from '@instructure/ui-position'
 
 import type { Shadow, Stacking, WithStyleProps } from '@instructure/emotion'
@@ -275,6 +275,11 @@ type PopoverOwnProps = {
    * Provides a reference to the underlying HTML root element
    */
   elementRef?: (element: Element | null) => void
+  /**
+   * Accepts the familiar CSS shorthand to designate border widths corresponding to edges with the following values: 'none', 'small', 'medium','large'(e.g. 'none large none large).
+   * Only applies to a Popover without an arrow.
+   */
+  borderWidth?: BorderWidth
 }
 
 type PopoverProps = PopoverOwnProps &
@@ -344,7 +349,8 @@ const propTypes: PropValidators<PropKeys> = {
   onMouseOut: PropTypes.func,
   renderTrigger: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  elementRef: PropTypes.func
+  elementRef: PropTypes.func,
+  borderWidth: ThemeablePropTypes.borderWidth
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -389,7 +395,8 @@ const allowedProps: AllowedPropKeys = [
   'onMouseOut',
   'renderTrigger',
   'children',
-  'elementRef'
+  'elementRef',
+  'borderWidth'
 ]
 
 export type { PopoverOwnProps, PopoverProps, PopoverState, PopoverStyle }

packages/ui-select/src/Select/index.tsx

@@ -60,7 +60,7 @@ import type {
   SelectableRender
 } from '@instructure/ui-selectable'
 
-import { withStyle, jsx } from '@instructure/emotion'
+import { withStyle, jsx, BorderWidth } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
@@ -713,6 +713,7 @@ class Select extends Component<SelectProps> {
               isShowingContent={isShowingOptions}
               shouldReturnFocus={false}
               withArrow={false}
+              borderWidth={styles?.popoverBorderWidth as BorderWidth}
             >
               {this.renderList({
                 getListProps,

packages/ui-select/src/Select/props.ts

@@ -273,7 +273,9 @@ type SelectProps = SelectOwnProps &
   > &
   WithDeterministicIdProps
 
-type SelectStyle = ComponentStyle<'select' | 'icon' | 'assistiveText'>
+type SelectStyle = ComponentStyle<
+  'select' | 'icon' | 'assistiveText' | 'popoverBorderWidth'
+>
 
 const propTypes: PropValidators<PropKeys> = {
   renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,

packages/ui-select/src/Select/styles.ts

@@ -59,7 +59,8 @@ const generateStyle = (
     assistiveText: {
       label: 'select__assistiveText',
       display: 'none'
-    }
+    },
+    popoverBorderWidth: componentTheme.popoverBorderWidth
   }
 }
 

packages/ui-select/src/Select/theme.ts

@@ -42,7 +42,8 @@ const generateComponentTheme = (theme: Theme): SelectTheme => {
     largeIconSize: typography?.fontSizeMedium,
 
     color: colors?.contrasts?.grey125125,
-    background: colors?.contrasts?.white1010
+    background: colors?.contrasts?.white1010,
+    popoverBorderWidth: 'small'
   }
 
   return {