Skip to content

Commit 90d59d3

Browse files
committed
feat(ui-popover, ui-select): allow overriding Select's dropdown border
1 parent e38bce2 commit 90d59d3

File tree

7 files changed

+21
-8
lines changed

7 files changed

+21
-8
lines changed

packages/shared-types/src/ComponentThemeVariables.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1175,6 +1175,7 @@ export type SelectTheme = {
11751175
largeIconSize: Typography['fontSizeMedium']
11761176
color: Colors['contrasts']['grey125125']
11771177
background: Colors['contrasts']['white1010']
1178+
popoverBorderWidth: Border['widthSmall']
11781179
}
11791180

11801181
export type SourceCodeEditorTheme = {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -584,7 +584,7 @@ class Popover extends Component<PopoverProps, PopoverState> {
584584
} else {
585585
viewProps = {
586586
...viewProps,
587-
borderWidth: 'small',
587+
borderWidth: this.props.borderWidth || 'small',
588588
borderRadius: 'medium',
589589
...(color === 'primary-inverse' && { borderColor: 'transparent' })
590590
} as Partial<ViewProps> & { ref: any }

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import React from 'react'
2525
import PropTypes from 'prop-types'
2626

2727
import { element } from '@instructure/ui-prop-types'
28-
import { ThemeablePropTypes } from '@instructure/emotion'
28+
import { ThemeablePropTypes, BorderWidth } from '@instructure/emotion'
2929
import { PositionPropTypes } from '@instructure/ui-position'
3030

3131
import type { Shadow, Stacking, WithStyleProps } from '@instructure/emotion'
@@ -275,6 +275,11 @@ type PopoverOwnProps = {
275275
* Provides a reference to the underlying HTML root element
276276
*/
277277
elementRef?: (element: Element | null) => void
278+
/**
279+
* 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).
280+
* Only applies to a Popover without an arrow.
281+
*/
282+
borderWidth?: BorderWidth
278283
}
279284

280285
type PopoverProps = PopoverOwnProps &
@@ -344,7 +349,8 @@ const propTypes: PropValidators<PropKeys> = {
344349
onMouseOut: PropTypes.func,
345350
renderTrigger: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
346351
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
347-
elementRef: PropTypes.func
352+
elementRef: PropTypes.func,
353+
borderWidth: ThemeablePropTypes.borderWidth
348354
}
349355

350356
const allowedProps: AllowedPropKeys = [
@@ -389,7 +395,8 @@ const allowedProps: AllowedPropKeys = [
389395
'onMouseOut',
390396
'renderTrigger',
391397
'children',
392-
'elementRef'
398+
'elementRef',
399+
'borderWidth'
393400
]
394401

395402
export type { PopoverOwnProps, PopoverProps, PopoverState, PopoverStyle }

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ import type {
6060
SelectableRender
6161
} from '@instructure/ui-selectable'
6262

63-
import { withStyle, jsx } from '@instructure/emotion'
63+
import { withStyle, jsx, BorderWidth } from '@instructure/emotion'
6464

6565
import generateStyle from './styles'
6666
import generateComponentTheme from './theme'
@@ -713,6 +713,7 @@ class Select extends Component<SelectProps> {
713713
isShowingContent={isShowingOptions}
714714
shouldReturnFocus={false}
715715
withArrow={false}
716+
borderWidth={styles?.popoverBorderWidth as BorderWidth}
716717
>
717718
{this.renderList({
718719
getListProps,

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -273,7 +273,9 @@ type SelectProps = SelectOwnProps &
273273
> &
274274
WithDeterministicIdProps
275275

276-
type SelectStyle = ComponentStyle<'select' | 'icon' | 'assistiveText'>
276+
type SelectStyle = ComponentStyle<
277+
'select' | 'icon' | 'assistiveText' | 'popoverBorderWidth'
278+
>
277279

278280
const propTypes: PropValidators<PropKeys> = {
279281
renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,8 @@ const generateStyle = (
5959
assistiveText: {
6060
label: 'select__assistiveText',
6161
display: 'none'
62-
}
62+
},
63+
popoverBorderWidth: componentTheme.popoverBorderWidth
6364
}
6465
}
6566

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@ const generateComponentTheme = (theme: Theme): SelectTheme => {
4242
largeIconSize: typography?.fontSizeMedium,
4343

4444
color: colors?.contrasts?.grey125125,
45-
background: colors?.contrasts?.white1010
45+
background: colors?.contrasts?.white1010,
46+
popoverBorderWidth: 'small'
4647
}
4748

4849
return {

0 commit comments

Comments
 (0)