Skip to content

Update PeoplePicker focus styles for the close button - Add borderRadius to getFocusStyle #24596

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Micah Godbolt (micahgodbolt) merged 3 commits into from
Aug 31, 2022
Merged

Update PeoplePicker focus styles for the close button - Add borderRadius to getFocusStyle #24596

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
04e4762
Add radius to getFocusStyle and update people picker focus styles
micahgodbolt Aug 30, 2022
bb8a7b9
change file
micahgodbolt Aug 30, 2022
e11c64c
add inset to high contrast styles to match
micahgodbolt Aug 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-react-f6466949-fe16-46ab-a50a-0548dd53baef.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "chore: Fix people picker focused styles",
"packageName": "@fluentui/react",
"email": "mgodbolt@microsoft.com",
"dependentChangeType": "patch"
}
7 changes: 7 additions & 0 deletions change/@fluentui-style-utilities-86219b72-da1a-4e91-8042-417d42500c69.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "chore: Add radius option to getFocusStyles",
"packageName": "@fluentui/style-utilities",
"email": "mgodbolt@microsoft.com",
"dependentChangeType": "patch"
}
12 changes: 10 additions & 2 deletions ...es/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand All @@ -157,6 +158,13 @@ export function getStyles(props: IPeoplePickerItemSelectedStyleProps): IPeoplePi
},
},
selected && [
getFocusStyle(theme, {
inset: 2,
borderColor: 'transparent',
highContrastStyle: { left: 1, top: 1, bottom: 1, right: 1, outlineColor: 'ButtonText' },

@smhigley Sarah Higley (smhigley) Aug 31, 2022

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

very minor nit: since we use inset above, it might be nice to use inset: 1 here too

@micahgodbolt Micah Godbolt (micahgodbolt) Aug 31, 2022

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

outlineColor: palette.white,
borderRadius: PICKER_PERSONA_RADIUS,
}),
{
color: palette.white,
selectors: {
Expand Down
3 changes: 2 additions & 1 deletion packages/style-utilities/etc/style-utilities.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<T>(classNames: GlobalClassNames<T>, theme: ITheme, disableGlobalClassNames?: boolean): GlobalClassNames<T>;
Expand Down Expand Up @@ -175,6 +175,7 @@ export { IFontWeight }
// @public (undocumented)
export interface IGetFocusStylesOptions {
borderColor?: string;
borderRadius?: string | number | undefined;
highContrastStyle?: IRawStyle;
inset?: number;
isFocusedOnly?: boolean;
Expand Down
5 changes: 5 additions & 0 deletions packages/style-utilities/src/interfaces/IGetFocusStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,4 +42,9 @@ export interface IGetFocusStylesOptions {
* @defaultvalue true
*/
isFocusedOnly?: boolean;

/**
* If the style should include a rounded border.
*/
borderRadius?: string | number | undefined;
}
6 changes: 6 additions & 0 deletions packages/style-utilities/src/styles/getFocusStyle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand All @@ -34,6 +35,7 @@ export function getFocusStyle(
borderColor?: string,
outlineColor?: string,
isFocusedOnly?: boolean,
borderRadius?: string | number | undefined,
): IRawStyle;
export function getFocusStyle(
theme: ITheme,
Expand All @@ -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, {
Expand All @@ -52,6 +55,7 @@ export function getFocusStyle(
borderColor,
outlineColor,
isFocusedOnly,
borderRadius,
});
} else {
return _getFocusStyleInternal(theme, insetOrOptions);
Expand All @@ -60,6 +64,7 @@ export function getFocusStyle(

function _getFocusStyleInternal(theme: ITheme, options: IGetFocusStylesOptions = {}): IRawStyle {
const {
borderRadius,
inset = 0,
width = 1,
position = 'relative',
Expand Down Expand Up @@ -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,

@spmonahan Sean Monahan (spmonahan) Aug 31, 2022

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this also allow the shorthand, e.g.:

border-radius: 1px 2px 3px 4px?

@micahgodbolt Micah Godbolt (micahgodbolt) Aug 31, 2022

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it allows string or number

@micahgodbolt Micah Godbolt (micahgodbolt) Aug 31, 2022

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

selectors: {
[HighContrastSelector]: highContrastStyle,
},
Expand Down