diff --git a/change/@fluentui-react-f6466949-fe16-46ab-a50a-0548dd53baef.json b/change/@fluentui-react-f6466949-fe16-46ab-a50a-0548dd53baef.json new file mode 100644 index 00000000000000..6d0d5e79b42185 --- /dev/null +++ b/change/@fluentui-react-f6466949-fe16-46ab-a50a-0548dd53baef.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: Fix people picker focused styles", + "packageName": "@fluentui/react", + "email": "mgodbolt@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-style-utilities-86219b72-da1a-4e91-8042-417d42500c69.json b/change/@fluentui-style-utilities-86219b72-da1a-4e91-8042-417d42500c69.json new file mode 100644 index 00000000000000..0bfb4899f5d488 --- /dev/null +++ b/change/@fluentui-style-utilities-86219b72-da1a-4e91-8042-417d42500c69.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: Add radius option to getFocusStyles", + "packageName": "@fluentui/style-utilities", + "email": "mgodbolt@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.styles.ts b/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.styles.ts index 639c6a60ec193f..a3e07899af24ef 100644 --- a/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.styles.ts +++ b/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.styles.ts @@ -17,6 +17,7 @@ const GlobalClassNames = { }; const REMOVE_BUTTON_SIZE = 24; +const PICKER_PERSONA_RADIUS = 15; export function getStyles(props: IPeoplePickerItemSelectedStyleProps): IPeoplePickerItemSelectedStyles { const { className, theme, selected, invalid, disabled } = props; @@ -91,7 +92,7 @@ export function getStyles(props: IPeoplePickerItemSelectedStyleProps): IPeoplePi classNames.root, getFocusStyle(theme, { inset: -2 }), { - borderRadius: 15, + borderRadius: PICKER_PERSONA_RADIUS, display: 'inline-flex', alignItems: 'center', background: palette.neutralLighter, @@ -144,7 +145,7 @@ export function getStyles(props: IPeoplePickerItemSelectedStyleProps): IPeoplePi removeButton: [ classNames.removeButton, { - borderRadius: 15, + borderRadius: PICKER_PERSONA_RADIUS, color: palette.neutralPrimary, flex: '0 0 auto', width: REMOVE_BUTTON_SIZE, @@ -157,6 +158,13 @@ export function getStyles(props: IPeoplePickerItemSelectedStyleProps): IPeoplePi }, }, selected && [ + getFocusStyle(theme, { + inset: 2, + borderColor: 'transparent', + highContrastStyle: { inset: 2, left: 1, top: 1, bottom: 1, right: 1, outlineColor: 'ButtonText' }, + outlineColor: palette.white, + borderRadius: PICKER_PERSONA_RADIUS, + }), { color: palette.white, selectors: { diff --git a/packages/style-utilities/etc/style-utilities.api.md b/packages/style-utilities/etc/style-utilities.api.md index d282c234e27dbc..c41fbce161d80e 100644 --- a/packages/style-utilities/etc/style-utilities.api.md +++ b/packages/style-utilities/etc/style-utilities.api.md @@ -110,7 +110,7 @@ export function getFocusOutlineStyle(theme: ITheme, inset?: number, width?: numb export function getFocusStyle(theme: ITheme, options?: IGetFocusStylesOptions): IRawStyle; // @public @deprecated -export function getFocusStyle(theme: ITheme, inset?: number, position?: 'relative' | 'absolute', highContrastStyle?: IRawStyle | undefined, borderColor?: string, outlineColor?: string, isFocusedOnly?: boolean): IRawStyle; +export function getFocusStyle(theme: ITheme, inset?: number, position?: 'relative' | 'absolute', highContrastStyle?: IRawStyle | undefined, borderColor?: string, outlineColor?: string, isFocusedOnly?: boolean, borderRadius?: string | number | undefined): IRawStyle; // @public export function getGlobalClassNames(classNames: GlobalClassNames, theme: ITheme, disableGlobalClassNames?: boolean): GlobalClassNames; @@ -175,6 +175,7 @@ export { IFontWeight } // @public (undocumented) export interface IGetFocusStylesOptions { borderColor?: string; + borderRadius?: string | number | undefined; highContrastStyle?: IRawStyle; inset?: number; isFocusedOnly?: boolean; diff --git a/packages/style-utilities/src/interfaces/IGetFocusStyles.ts b/packages/style-utilities/src/interfaces/IGetFocusStyles.ts index 89e3c99d121956..53d3d0ad0284c7 100644 --- a/packages/style-utilities/src/interfaces/IGetFocusStyles.ts +++ b/packages/style-utilities/src/interfaces/IGetFocusStyles.ts @@ -42,4 +42,9 @@ export interface IGetFocusStylesOptions { * @defaultvalue true */ isFocusedOnly?: boolean; + + /** + * If the style should include a rounded border. + */ + borderRadius?: string | number | undefined; } diff --git a/packages/style-utilities/src/styles/getFocusStyle.ts b/packages/style-utilities/src/styles/getFocusStyle.ts index b1070b1fc91276..56a45bcb033ff1 100644 --- a/packages/style-utilities/src/styles/getFocusStyle.ts +++ b/packages/style-utilities/src/styles/getFocusStyle.ts @@ -23,6 +23,7 @@ export function getFocusStyle(theme: ITheme, options?: IGetFocusStylesOptions): * @param borderColor - Color of the border. * @param outlineColor - Color of the outline. * @param isFocusedOnly - If the styles should apply on focus or not. + * @param borderRadius - If the style should include a rounded border. * @returns The style object. * @deprecated Use the object parameter version instead. */ @@ -34,6 +35,7 @@ export function getFocusStyle( borderColor?: string, outlineColor?: string, isFocusedOnly?: boolean, + borderRadius?: string | number | undefined, ): IRawStyle; export function getFocusStyle( theme: ITheme, @@ -43,6 +45,7 @@ export function getFocusStyle( borderColor?: string, outlineColor?: string, isFocusedOnly?: boolean, + borderRadius?: string | number | undefined, ): IRawStyle { if (typeof insetOrOptions === 'number' || !insetOrOptions) { return _getFocusStyleInternal(theme, { @@ -52,6 +55,7 @@ export function getFocusStyle( borderColor, outlineColor, isFocusedOnly, + borderRadius, }); } else { return _getFocusStyleInternal(theme, insetOrOptions); @@ -60,6 +64,7 @@ export function getFocusStyle( function _getFocusStyleInternal(theme: ITheme, options: IGetFocusStylesOptions = {}): IRawStyle { const { + borderRadius, inset = 0, width = 1, position = 'relative', @@ -94,6 +99,7 @@ function _getFocusStyleInternal(theme: ITheme, options: IGetFocusStylesOptions = border: `${width}px solid ${borderColor}`, outline: `${width}px solid ${outlineColor}`, zIndex: ZIndexes.FocusStyle, + borderRadius: borderRadius, selectors: { [HighContrastSelector]: highContrastStyle, },