From a12a6009bb130c3caa3c8d385cddd3b7e7acb09f Mon Sep 17 00:00:00 2001 From: Andrew Martin Date: Tue, 12 Nov 2019 15:13:20 -0800 Subject: [PATCH 01/24] updating splitbutton --- .../components/SplitButton/SplitButton.tsx | 7 +-- .../SplitButton/splitButtonStyles.ts | 47 ++++++------------- .../SplitButton/splitButtonVariables.ts | 20 ++------ 3 files changed, 21 insertions(+), 53 deletions(-) diff --git a/packages/react/src/components/SplitButton/SplitButton.tsx b/packages/react/src/components/SplitButton/SplitButton.tsx index 299342d58f..a6be953627 100644 --- a/packages/react/src/components/SplitButton/SplitButton.tsx +++ b/packages/react/src/components/SplitButton/SplitButton.tsx @@ -125,7 +125,7 @@ class SplitButton extends AutoControlledComponent, static defaultProps = { accessibility: splitButtonBehavior, - as: 'span', + as: 'div', toggleButton: {}, } @@ -174,7 +174,7 @@ class SplitButton extends AutoControlledComponent, const { button, disabled, menu, primary, secondary, toggleButton } = this.props const trigger = Button.create(button, { defaultProps: () => ({ - styles: styles.button, + styles: styles.menuButton, primary, secondary, disabled, @@ -202,9 +202,10 @@ class SplitButton extends AutoControlledComponent, )} {Button.create(toggleButton, { defaultProps: () => ({ + styles: styles.toggleButton, className: SplitButton.slotClassNames.toggleButton, disabled, - icon: 'stardust-arrow-down', + icon: 'chevron-down-medium', iconOnly: true, primary, secondary, diff --git a/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts b/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts index 6c97cf2472..07f1ef1870 100644 --- a/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts +++ b/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts @@ -1,51 +1,32 @@ import { ICSSInJSStyle } from '../../../types' -import getBorderFocusStyles from '../../getBorderFocusStyles' -import SplitButton from '../../../../components/SplitButton/SplitButton' const splitButtonStyles = { - button: ({ variables: v }): ICSSInJSStyle => ({ - border: 0, - padding: v.padding, + menuButton: ({ variables: v }): ICSSInJSStyle => ({ + borderTopRightRadius: '0', + borderBottomRightRadius: '0', + borderRightWidth: '0', - ':focus-visible': { - '::before': { border: 0 }, - '::after': { border: 0 }, + ':active': { + animationName: '0', }, - ':active': { backgroundColor: v.backgroundColorActive }, }), - root: ({ props: p, variables: v, theme: { siteVariables } }): ICSSInJSStyle => { - const { borderWidth } = siteVariables - const borderFocusStyles = getBorderFocusStyles({ - siteVariables, - }) + toggleButton: ({ props: p, variables: v }): ICSSInJSStyle => ({ + borderTopLeftRadius: '0', + borderBottomLeftRadius: '0', + borderColor: p.primary ? v.borderColorPrimary : v.borderColor, + }), + + root: ({ props: p, variables: v, theme: { siteVariables } }): ICSSInJSStyle => { return { - border: `${borderWidth} solid ${v.borderColor}`, - borderRadius: v.borderRadius, position: 'relative', - display: 'inline-block', - - [`& .${SplitButton.slotClassNames.toggleButton}`]: { - borderRight: 0, - borderTop: 0, - borderBottom: 0, - }, ':focus-within': { - boxShadow: 'none', ...(p.isFromKeyboard ? { - [`& .${SplitButton.slotClassNames.toggleButton}`]: { - color: p.primary ? v.primaryColorFocus : v.colorFocus, - backgroundColor: p.primary ? v.primaryBackgroundColorFocus : v.backgroundColorFocus, - borderColor: siteVariables.colors.white, - }, - color: v.colorFocus, - backgroundColor: v.backgroundColorFocus, - ...borderFocusStyles[':focus-visible'], } - : { ':active': { backgroundColor: v.backgroundColorActive } }), + : { ':active': { backgroundColor: 'auto' } }), }, } }, diff --git a/packages/react/src/themes/teams/components/SplitButton/splitButtonVariables.ts b/packages/react/src/themes/teams/components/SplitButton/splitButtonVariables.ts index fe8e213465..6fc3ef6919 100644 --- a/packages/react/src/themes/teams/components/SplitButton/splitButtonVariables.ts +++ b/packages/react/src/themes/teams/components/SplitButton/splitButtonVariables.ts @@ -1,29 +1,15 @@ import { SiteVariablesPrepared } from '../../../types' -import { pxToRem } from '../../../../lib' - export interface SplitButtonVariables { borderRadius: string - backgroundColorFocus: string - boxShadow: string + borderColorPrimary: string borderColor: string - colorFocus: string - primaryBackgroundColorFocus: string - primaryColorFocus: string - padding: string - iconMargin: string } export default (siteVars: SiteVariablesPrepared): SplitButtonVariables => { return { borderRadius: siteVars.borderRadius, - backgroundColorFocus: siteVars.colors.grey[200], - boxShadow: siteVars.shadowLevel1, - borderColor: siteVars.colors.grey[200], - colorFocus: siteVars.colors.grey[750], - primaryBackgroundColorFocus: siteVars.colors.brand[800], - primaryColorFocus: siteVars.colors.white, - padding: `0 ${pxToRem(16)}`, - iconMargin: `0 0 ${pxToRem(8)} 0`, + borderColorPrimary: siteVars.colors.brand[500], + borderColor: siteVars.colorScheme.default.border, } } From 3a11b5b177f0acf6d72dc0c12680e355071a1305 Mon Sep 17 00:00:00 2001 From: Andrew Martin Date: Wed, 13 Nov 2019 15:52:44 -0800 Subject: [PATCH 02/24] putting the border on the content instead of container --- .../themes/teams/components/SplitButton/splitButtonStyles.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts b/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts index 07f1ef1870..5f10829822 100644 --- a/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts +++ b/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts @@ -15,6 +15,9 @@ const splitButtonStyles = { borderTopLeftRadius: '0', borderBottomLeftRadius: '0', borderColor: p.primary ? v.borderColorPrimary : v.borderColor, + ':active': { + animationName: '0', + }, }), root: ({ props: p, variables: v, theme: { siteVariables } }): ICSSInJSStyle => { From 63a3f829e412266edae6ca353229065b83fce5e1 Mon Sep 17 00:00:00 2001 From: Andrew Martin Date: Fri, 15 Nov 2019 15:28:14 -0800 Subject: [PATCH 03/24] adding small button --- .../components/SplitButton/Types/index.tsx | 5 +++++ .../components/SplitButton/SplitButton.tsx | 3 +++ .../SplitButton/splitButtonStyles.ts | 19 ++++++++++++++++++- .../SplitButton/splitButtonVariables.ts | 9 +++++++++ 4 files changed, 35 insertions(+), 1 deletion(-) diff --git a/docs/src/examples/components/SplitButton/Types/index.tsx b/docs/src/examples/components/SplitButton/Types/index.tsx index ed770049b6..df170ca5ea 100644 --- a/docs/src/examples/components/SplitButton/Types/index.tsx +++ b/docs/src/examples/components/SplitButton/Types/index.tsx @@ -14,6 +14,11 @@ const SplitButton = () => ( description="A SplitButton can be formatted to show primary level of emphasis." examplePath="components/SplitButton/Types/SplitButtonExamplePrimary" /> + ) diff --git a/packages/react/src/components/SplitButton/SplitButton.tsx b/packages/react/src/components/SplitButton/SplitButton.tsx index a6be953627..7d9baee2c8 100644 --- a/packages/react/src/components/SplitButton/SplitButton.tsx +++ b/packages/react/src/components/SplitButton/SplitButton.tsx @@ -84,6 +84,9 @@ export interface SplitButtonProps /** A split button can be formatted to show different levels of emphasis. */ secondary?: boolean + /** A split button can be small */ + small?: boolean + /** Shorthand for the toggle button. */ toggleButton?: ShorthandValue } diff --git a/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts b/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts index 5f10829822..8d7ea95a20 100644 --- a/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts +++ b/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts @@ -1,11 +1,19 @@ import { ICSSInJSStyle } from '../../../types' +import getIconFillOrOutlineStyles from '../../getIconFillOrOutlineStyles' const splitButtonStyles = { - menuButton: ({ variables: v }): ICSSInJSStyle => ({ + menuButton: ({ props: p, variables: v }): ICSSInJSStyle => ({ borderTopRightRadius: '0', borderBottomRightRadius: '0', borderRightWidth: '0', + ...(p.small && { + height: v.smallDimension, + padding: v.smallPadding, + minWidth: v.smallMinWidth, + boxShadow: v.smallBoxShadow, + }), + ':active': { animationName: '0', }, @@ -15,6 +23,15 @@ const splitButtonStyles = { borderTopLeftRadius: '0', borderBottomLeftRadius: '0', borderColor: p.primary ? v.borderColorPrimary : v.borderColor, + ...getIconFillOrOutlineStyles({ outline: true }), + + ...(p.small && { + height: v.smallDimension, + width: v.smallDimension, + minWidth: v.smallMinWidth, + boxShadow: v.smallBoxShadow, + }), + ':active': { animationName: '0', }, diff --git a/packages/react/src/themes/teams/components/SplitButton/splitButtonVariables.ts b/packages/react/src/themes/teams/components/SplitButton/splitButtonVariables.ts index 6fc3ef6919..573e11f6db 100644 --- a/packages/react/src/themes/teams/components/SplitButton/splitButtonVariables.ts +++ b/packages/react/src/themes/teams/components/SplitButton/splitButtonVariables.ts @@ -1,9 +1,14 @@ import { SiteVariablesPrepared } from '../../../types' +import { pxToRem } from '../../../../lib' export interface SplitButtonVariables { borderRadius: string borderColorPrimary: string borderColor: string + smallDimension: string + smallPadding: string + smallMinWidth: string + smallBoxShadow: string } export default (siteVars: SiteVariablesPrepared): SplitButtonVariables => { @@ -11,5 +16,9 @@ export default (siteVars: SiteVariablesPrepared): SplitButtonVariables => { borderRadius: siteVars.borderRadius, borderColorPrimary: siteVars.colors.brand[500], borderColor: siteVars.colorScheme.default.border, + smallDimension: pxToRem(24), + smallPadding: `0 ${pxToRem(8)}`, + smallMinWidth: '0', + smallBoxShadow: 'none', } } From b40ae4fa0a3a235e86b6676158cdfb0d11bc719d Mon Sep 17 00:00:00 2001 From: Andrew Martin Date: Fri, 15 Nov 2019 15:35:13 -0800 Subject: [PATCH 04/24] adding small documentation --- .../SplitButtonExampleSmall.shorthand.tsx | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 docs/src/examples/components/SplitButton/Types/SplitButtonExampleSmall.shorthand.tsx diff --git a/docs/src/examples/components/SplitButton/Types/SplitButtonExampleSmall.shorthand.tsx b/docs/src/examples/components/SplitButton/Types/SplitButtonExampleSmall.shorthand.tsx new file mode 100644 index 0000000000..cb46c38545 --- /dev/null +++ b/docs/src/examples/components/SplitButton/Types/SplitButtonExampleSmall.shorthand.tsx @@ -0,0 +1,26 @@ +import * as React from 'react' +import { SplitButton } from '@stardust-ui/react' + +const SplitButtonExampleSmallShorthand = () => ( + <> + alert('button was clicked')} + /> + + +) + +export default SplitButtonExampleSmallShorthand From 14ea6d6ae3543ef564c731d171750a009069e346 Mon Sep 17 00:00:00 2001 From: Andrew Martin Date: Mon, 18 Nov 2019 15:35:08 -0800 Subject: [PATCH 05/24] fixing styles for split button --- .../components/SplitButton/SplitButton.tsx | 1 - .../SplitButton/splitButtonStyles.ts | 27 +++++++++---------- .../SplitButton/splitButtonVariables.ts | 8 +++++- 3 files changed, 19 insertions(+), 17 deletions(-) diff --git a/packages/react/src/components/SplitButton/SplitButton.tsx b/packages/react/src/components/SplitButton/SplitButton.tsx index 7d9baee2c8..3f06aefd1d 100644 --- a/packages/react/src/components/SplitButton/SplitButton.tsx +++ b/packages/react/src/components/SplitButton/SplitButton.tsx @@ -212,7 +212,6 @@ class SplitButton extends AutoControlledComponent, iconOnly: true, primary, secondary, - ...accessibility.attributes.toggleButton, }), overrideProps: (predefinedProps: ButtonProps) => ({ onClick: (e: React.SyntheticEvent, buttonProps: ButtonProps) => { diff --git a/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts b/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts index 8d7ea95a20..f9d9b81a70 100644 --- a/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts +++ b/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts @@ -6,6 +6,7 @@ const splitButtonStyles = { borderTopRightRadius: '0', borderBottomRightRadius: '0', borderRightWidth: '0', + padding: v.padding, ...(p.small && { height: v.smallDimension, @@ -22,9 +23,19 @@ const splitButtonStyles = { toggleButton: ({ props: p, variables: v }): ICSSInJSStyle => ({ borderTopLeftRadius: '0', borderBottomLeftRadius: '0', - borderColor: p.primary ? v.borderColorPrimary : v.borderColor, + borderColor: v.borderColor, ...getIconFillOrOutlineStyles({ outline: true }), + ...(p.primary && { + borderWidth: v.borderWidthLeftOnly, + borderColor: v.borderColorPrimary, + }), + + ...(p.disabled && { + borderWidth: v.borderWidthLeftOnly, + borderColor: v.borderColorDisabled, + }), + ...(p.small && { height: v.smallDimension, width: v.smallDimension, @@ -36,20 +47,6 @@ const splitButtonStyles = { animationName: '0', }, }), - - root: ({ props: p, variables: v, theme: { siteVariables } }): ICSSInJSStyle => { - return { - position: 'relative', - - ':focus-within': { - ...(p.isFromKeyboard - ? { - color: v.colorFocus, - } - : { ':active': { backgroundColor: 'auto' } }), - }, - } - }, } export default splitButtonStyles diff --git a/packages/react/src/themes/teams/components/SplitButton/splitButtonVariables.ts b/packages/react/src/themes/teams/components/SplitButton/splitButtonVariables.ts index 573e11f6db..0d449c52df 100644 --- a/packages/react/src/themes/teams/components/SplitButton/splitButtonVariables.ts +++ b/packages/react/src/themes/teams/components/SplitButton/splitButtonVariables.ts @@ -5,20 +5,26 @@ export interface SplitButtonVariables { borderRadius: string borderColorPrimary: string borderColor: string + borderColorDisabled: string + borderWidthLeftOnly: string smallDimension: string smallPadding: string smallMinWidth: string smallBoxShadow: string + padding: string } export default (siteVars: SiteVariablesPrepared): SplitButtonVariables => { return { borderRadius: siteVars.borderRadius, - borderColorPrimary: siteVars.colors.brand[500], borderColor: siteVars.colorScheme.default.border, + borderColorPrimary: siteVars.colors.brand[500], + borderColorDisabled: siteVars.colorScheme.brand.foregroundDisabled, + borderWidthLeftOnly: '0 0 0 .1rem', smallDimension: pxToRem(24), smallPadding: `0 ${pxToRem(8)}`, smallMinWidth: '0', smallBoxShadow: 'none', + padding: `0 ${pxToRem(16)}`, } } From 161877c7f51a8db15cc524e17e9bef95f41e5fff Mon Sep 17 00:00:00 2001 From: Andrew Martin Date: Mon, 18 Nov 2019 16:26:03 -0800 Subject: [PATCH 06/24] updating changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 07055f97e0..ca724f302c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -30,6 +30,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Add necessary `-ms-grid-` styles to `Layout` for IE11 @jurokapsiar ([#2106](https://github.com/microsoft/fluent-ui-react/pull/2106)) - Accessibility `splitButton` & `menuButton` - screen reader fixes @kolaps33 ([#2090](https://github.com/microsoft/fluent-ui-react/pull/2090)) - Accessibility `menuButton` add aria-controls attribute based on `open` prop @kolaps33 ([#2107](https://github.com/microsoft/fluent-ui-react/pull/2107)) +- Updating `splitButton` component to match Teams redlines @notandrew ([#2108](https://github.com/microsoft/fluent-ui-react/pull/2108)) ### Features - Add `Table` component base implementation @pompomon ([#2099](https://github.com/microsoft/fluent-ui-react/pull/2099)) From d32fcc1e6b3971ca86408e185130762d584a2042 Mon Sep 17 00:00:00 2001 From: Andrew Martin Date: Fri, 22 Nov 2019 14:59:10 -0800 Subject: [PATCH 07/24] updating button --- .../SplitButton/Types/SplitButtonExampleSmall.shorthand.tsx | 2 +- packages/react/src/components/SplitButton/SplitButton.tsx | 1 + .../themes/teams/components/SplitButton/splitButtonStyles.ts | 5 +++-- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/src/examples/components/SplitButton/Types/SplitButtonExampleSmall.shorthand.tsx b/docs/src/examples/components/SplitButton/Types/SplitButtonExampleSmall.shorthand.tsx index cb46c38545..038406a8c6 100644 --- a/docs/src/examples/components/SplitButton/Types/SplitButtonExampleSmall.shorthand.tsx +++ b/docs/src/examples/components/SplitButton/Types/SplitButtonExampleSmall.shorthand.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { SplitButton } from '@stardust-ui/react' +import { SplitButton } from '@fluentui/react' const SplitButtonExampleSmallShorthand = () => ( <> diff --git a/packages/react/src/components/SplitButton/SplitButton.tsx b/packages/react/src/components/SplitButton/SplitButton.tsx index 3f1e1426e8..9f855eda59 100644 --- a/packages/react/src/components/SplitButton/SplitButton.tsx +++ b/packages/react/src/components/SplitButton/SplitButton.tsx @@ -212,6 +212,7 @@ class SplitButton extends AutoControlledComponent, iconOnly: true, primary, secondary, + ...accessibility.attributes.toggleButton, }), overrideProps: (predefinedProps: ButtonProps) => ({ onClick: (e: React.SyntheticEvent, buttonProps: ButtonProps) => { diff --git a/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts b/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts index f9d9b81a70..41fa50b1e9 100644 --- a/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts +++ b/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts @@ -16,7 +16,7 @@ const splitButtonStyles = { }), ':active': { - animationName: '0', + animationName: 'unset', }, }), @@ -44,7 +44,8 @@ const splitButtonStyles = { }), ':active': { - animationName: '0', + animationName: 'unset', + animationDuration: 'unset', }, }), } From b150d8d201d3d92b087a44e2ae2ec6ea483dd560 Mon Sep 17 00:00:00 2001 From: Andrew Martin Date: Mon, 25 Nov 2019 11:48:00 -0800 Subject: [PATCH 08/24] fixing styles --- .../SplitButton/splitButtonStyles.ts | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts b/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts index 41fa50b1e9..03f60072f7 100644 --- a/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts +++ b/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts @@ -1,5 +1,7 @@ import { ICSSInJSStyle } from '../../../types' +import getBorderFocusStyles from '../../getBorderFocusStyles' import getIconFillOrOutlineStyles from '../../getIconFillOrOutlineStyles' +import SplitButton from '../../../../components/SplitButton/SplitButton' const splitButtonStyles = { menuButton: ({ props: p, variables: v }): ICSSInJSStyle => ({ @@ -48,6 +50,26 @@ const splitButtonStyles = { animationDuration: 'unset', }, }), + + root: ({ props: p, variables: v, theme: { siteVariables } }): ICSSInJSStyle => { + const borderFocusStyles = getBorderFocusStyles({ + siteVariables, + }) + + return { + position: 'relative', + display: 'inline-block', + ...borderFocusStyles, + + ':focus-within': { + boxShadow: 'none', + + [`& .${SplitButton.slotClassNames.toggleButton}`]: { + borderColor: 'transparent', + }, + }, + } + }, } export default splitButtonStyles From ca1b8539dfbcaca157ee639a62a11ba598347b7c Mon Sep 17 00:00:00 2001 From: Andrew Martin Date: Tue, 3 Dec 2019 16:04:46 -0800 Subject: [PATCH 09/24] updating focus state --- .../SplitButton/splitButtonStyles.ts | 42 +++++++++++++------ 1 file changed, 30 insertions(+), 12 deletions(-) diff --git a/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts b/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts index 03f60072f7..fe2d9e5aac 100644 --- a/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts +++ b/packages/react/src/themes/teams/components/SplitButton/splitButtonStyles.ts @@ -1,13 +1,12 @@ import { ICSSInJSStyle } from '../../../types' import getBorderFocusStyles from '../../getBorderFocusStyles' import getIconFillOrOutlineStyles from '../../getIconFillOrOutlineStyles' -import SplitButton from '../../../../components/SplitButton/SplitButton' const splitButtonStyles = { menuButton: ({ props: p, variables: v }): ICSSInJSStyle => ({ - borderTopRightRadius: '0', - borderBottomRightRadius: '0', - borderRightWidth: '0', + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + borderRightWidth: 0, padding: v.padding, ...(p.small && { @@ -17,14 +16,27 @@ const splitButtonStyles = { boxShadow: v.smallBoxShadow, }), + ':focus-visible': { + borderRightWidth: 0, + + ':before': { + borderRightWidth: 0, + }, + + ':after': { + borderRightWidth: 0, + }, + }, + ':active': { animationName: 'unset', + animationDuration: 'unset', }, }), toggleButton: ({ props: p, variables: v }): ICSSInJSStyle => ({ - borderTopLeftRadius: '0', - borderBottomLeftRadius: '0', + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, borderColor: v.borderColor, ...getIconFillOrOutlineStyles({ outline: true }), @@ -45,6 +57,16 @@ const splitButtonStyles = { boxShadow: v.smallBoxShadow, }), + ':focus-visible': { + ':before': { + borderLeftWidth: 0, + }, + + ':after': { + borderLeftWidth: 0, + }, + }, + ':active': { animationName: 'unset', animationDuration: 'unset', @@ -57,16 +79,12 @@ const splitButtonStyles = { }) return { + borderRadius: v.borderRadius, position: 'relative', display: 'inline-block', - ...borderFocusStyles, ':focus-within': { - boxShadow: 'none', - - [`& .${SplitButton.slotClassNames.toggleButton}`]: { - borderColor: 'transparent', - }, + ...borderFocusStyles[':focus-visible'], }, } }, From c1b5322f6ad3be81826808b52f548955608bb134 Mon Sep 17 00:00:00 2001 From: Andrew Martin Date: Wed, 4 Dec 2019 12:31:18 -0800 Subject: [PATCH 10/24] updating proptypes --- .../SplitButton/Types/SplitButtonExampleSmall.shorthand.tsx | 2 +- packages/react/src/components/SplitButton/SplitButton.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/src/examples/components/SplitButton/Types/SplitButtonExampleSmall.shorthand.tsx b/docs/src/examples/components/SplitButton/Types/SplitButtonExampleSmall.shorthand.tsx index 038406a8c6..04d3579a13 100644 --- a/docs/src/examples/components/SplitButton/Types/SplitButtonExampleSmall.shorthand.tsx +++ b/docs/src/examples/components/SplitButton/Types/SplitButtonExampleSmall.shorthand.tsx @@ -14,7 +14,7 @@ const SplitButtonExampleSmallShorthand = () => ( 'aria-describedby': 'instruction-message', }} small - toggleButton={{ 'aria-label': 'options' }} + toggleButton={{ 'aria-label': 'expand options menu' }} onMainButtonClick={() => alert('button was clicked')} />