Skip to content

fix: do not use outlineStyle: none in createCustomFocusIndicatorStyle #26089

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
ling1726 merged 13 commits into from
May 5, 2023
Merged

fix: do not use outlineStyle: none in createCustomFocusIndicatorStyle #26089

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
d50ea32
fix: use outlineColor instead of outlineStyle to avoid overriding HCM…
smhigley Dec 22, 2022
a743bc4
fix: createCustomFocusIndicatorStyle sets outlineColor: transparent i…
smhigley Dec 22, 2022
59a2f4e
change files
smhigley Dec 22, 2022
e6cabc2
update createCustomFocusIndicatorStyle to not disabled outline, moved…
smhigley Dec 27, 2022
29f1400
change files
smhigley Dec 27, 2022
1df7247
update api
smhigley Dec 27, 2022
1f9cbb4
deprecate enableOutline, remove enableOutline logic from focusOutline…
smhigley Jan 11, 2023
a35f9af
update api
smhigley Jan 11, 2023
c77072f
add enableOutline back to createFocusOutlineStyle
smhigley Jan 27, 2023
620ac7e
remove now-unneeded enableOutline internal use, at outline:none to cu…
smhigley Jan 30, 2023
3bd1cde
change files
smhigley Jan 30, 2023
2622352
Merge branch 'master' into focus-overrides
ling1726 Mar 8, 2023
7bc671c
Merge branch 'master' into focus-overrides
smhigley May 4, 2023
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-button-89e3c9da-c4ca-426b-9429-0f3dff1d42e7.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "chore: use outline shorthand instead of compound prop for consistency",
"packageName": "@fluentui/react-button",
"email": "sarah.higley@microsoft.com",
"dependentChangeType": "patch"
}
7 changes: 7 additions & 0 deletions change/@fluentui-react-tabster-febe226f-524c-446a-a2b1-769b8ba7180f.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
Comment thread
ling1726 marked this conversation as resolved.
"type": "minor",
"comment": "fix: move `outlineStyle: none` out of createCustomFocusIndicatorStyle and to createFocusOutlineStyle",
"packageName": "@fluentui/react-tabster",
"email": "sarah.higley@microsoft.com",
"dependentChangeType": "patch"
}
2 changes: 1 addition & 1 deletion packages/react-components/react-button/src/components/Button/useButtonStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,11 +108,11 @@ const useRootBaseClassName = makeResetStyles({
...createCustomFocusIndicatorStyle({
borderColor: tokens.colorTransparentStroke,
borderRadius: tokens.borderRadiusMedium,
outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,
boxShadow: `
${tokens.shadow4},
0 0 0 2px ${tokens.colorStrokeFocus2}
`,
...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorTransparentStroke),
zIndex: 1,
}),
});
Expand Down
12 changes: 1 addition & 11 deletions packages/react-components/react-tabster/src/focus/createCustomFocusIndicatorStyle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,19 +24,9 @@ export interface CreateCustomFocusIndicatorStyleOptions {
*/
export function createCustomFocusIndicatorStyle<TStyle extends GriffelStyle | GriffelResetStyle>(
style: TStyle,
{
selector = defaultOptions.selector,
enableOutline = false,
}: CreateCustomFocusIndicatorStyleOptions = defaultOptions,
{ selector = defaultOptions.selector }: CreateCustomFocusIndicatorStyleOptions = defaultOptions,
Comment thread
smhigley marked this conversation as resolved.
): TStyle extends GriffelStyle ? GriffelStyle : GriffelResetStyle {
return {
':focus': {
Comment thread
ling1726 marked this conversation as resolved.
outlineStyle: enableOutline ? undefined : 'none',
},
':focus-visible': {
outlineStyle: enableOutline ? undefined : 'none',
},

...(selector === 'focus' && {
[`&[${FOCUS_VISIBLE_ATTR}]`]: style,
}),
Expand Down
15 changes: 12 additions & 3 deletions packages/react-components/react-tabster/src/focus/createFocusOutlineStyle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,10 +66,18 @@ const getFocusOutlineStyles = (options: FocusOutlineStyleOptions): GriffelStyle
* @returns focus outline styles object for @see makeStyles
*/
export const createFocusOutlineStyle = ({
enableOutline = false,
Comment thread
smhigley marked this conversation as resolved.
selector = defaultOptions.selector,
style = defaultOptions.style,
}: CreateFocusOutlineStyleOptions = defaultOptions): GriffelStyle =>
createCustomFocusIndicatorStyle(
}: CreateFocusOutlineStyleOptions = defaultOptions): GriffelStyle => ({
':focus': {
outlineStyle: enableOutline ? undefined : 'none',
},
':focus-visible': {
outlineStyle: enableOutline ? undefined : 'none',
},

...createCustomFocusIndicatorStyle(
getFocusOutlineStyles({
outlineColor: tokens.colorStrokeFocus2,
outlineRadius: tokens.borderRadiusMedium,
Expand All @@ -78,4 +86,5 @@ export const createFocusOutlineStyle = ({
...style,
}),
{ selector },
);
),
});