Skip to content
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

[Fix] Focus style align with style guide #324

Merged
merged 2 commits into from
May 7, 2020
Merged

[Fix] Focus style align with style guide #324

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2f1a0e2
Focus style aligned with styleguide. Support for offset background co…
aappoalander May 6, 2020
086b7bf
Snapshots updated to match updated focus styles.
aappoalander May 6, 2020
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
14 changes: 7 additions & 7 deletions src/core/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,15 +158,15 @@ exports[`calling render with the same component on the same container does not r
.c5:focus:after {
content: '';
position: absolute;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
border-radius: 4px;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
border-radius: 2px;
background-color: transparent;
border: 1px solid hsl(23,82%,53%);
border: 0px solid white;
box-sizing: border-box;
box-shadow: 0 0 10px 0 hsl(23,82%,53%);
box-shadow: 0 0 0 2px hsl(196,77%,55%);
z-index: 9999;
}
Expand Down
14 changes: 7 additions & 7 deletions src/core/Button/__snapshots__/Button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,15 +87,15 @@ exports[`calling render with the same component on the same container does not r
.c2:focus:after {
content: '';
position: absolute;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
border-radius: 4px;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
border-radius: 2px;
background-color: transparent;
border: 1px solid hsl(23,82%,53%);
border: 0px solid white;
box-sizing: border-box;
box-shadow: 0 0 10px 0 hsl(23,82%,53%);
box-shadow: 0 0 0 2px hsl(196,77%,55%);
z-index: 9999;
}
Expand Down
14 changes: 7 additions & 7 deletions src/core/Dropdown/__snapshots__/Dropdown.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,15 +61,15 @@ exports[`calling render with the same component on the same container does not r
.c1 > [data-reach-menu-button].fi-dropdown_button:focus:after {
content: '';
position: absolute;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
border-radius: 4px;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
border-radius: 2px;
background-color: transparent;
border: 1px solid hsl(23,82%,53%);
border: 0px solid white;
box-sizing: border-box;
box-shadow: 0 0 10px 0 hsl(23,82%,53%);
box-shadow: 0 0 0 2px hsl(196,77%,55%);
z-index: 9999;
}
Expand Down
14 changes: 7 additions & 7 deletions src/core/Expander/__snapshots__/Expander.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,15 +178,15 @@ exports[`calling render with the same component on the same container does not r
.c2 .fi-expander_title:focus:after {
content: '';
position: absolute;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
border-radius: 4px;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
border-radius: 2px;
background-color: transparent;
border: 1px solid hsl(23,82%,53%);
border: 0px solid white;
box-sizing: border-box;
box-shadow: 0 0 10px 0 hsl(23,82%,53%);
box-shadow: 0 0 0 2px hsl(196,77%,55%);
z-index: 9999;
}
Expand Down
14 changes: 7 additions & 7 deletions src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,15 +148,15 @@ exports[`calling render with the same component on the same container does not r
.c2 .fi-text-input_container:focus-within:after {
content: '';
position: absolute;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
border-radius: 4px;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
border-radius: 2px;
background-color: transparent;
border: 1px solid hsl(23,82%,53%);
border: 0px solid white;
box-sizing: border-box;
box-shadow: 0 0 10px 0 hsl(23,82%,53%);
box-shadow: 0 0 0 2px hsl(196,77%,55%);
z-index: 9999;
}
Expand Down
14 changes: 7 additions & 7 deletions src/core/Form/TextInput/__snapshots__/TextInput.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,15 +143,15 @@ exports[`calling render with the same component on the same container does not r
.c2 .fi-text-input_container:focus-within:after {
content: '';
position: absolute;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
border-radius: 4px;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
border-radius: 2px;
background-color: transparent;
border: 1px solid hsl(23,82%,53%);
border: 0px solid white;
box-sizing: border-box;
box-shadow: 0 0 10px 0 hsl(23,82%,53%);
box-shadow: 0 0 0 2px hsl(196,77%,55%);
z-index: 9999;
}
Expand Down
56 changes: 28 additions & 28 deletions src/core/Form/Toggle/__snapshots__/Toggle.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,15 +207,15 @@ exports[`Toggle variant default: calling render with the same component on the
.c1 + .fi-toggle--with-button:focus:after {
content: '';
position: absolute;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
border-radius: 4px;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
border-radius: 2px;
background-color: transparent;
border: 1px solid hsl(23,82%,53%);
border: 0px solid white;
box-sizing: border-box;
box-shadow: 0 0 10px 0 hsl(23,82%,53%);
box-shadow: 0 0 0 2px hsl(196,77%,55%);
z-index: 9999;
}
Expand All @@ -240,15 +240,15 @@ exports[`Toggle variant default: calling render with the same component on the
.c1 + .fi-toggle--with-input:focus-within:after {
content: '';
position: absolute;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
border-radius: 4px;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
border-radius: 2px;
background-color: transparent;
border: 1px solid hsl(23,82%,53%);
border: 0px solid white;
box-sizing: border-box;
box-shadow: 0 0 10px 0 hsl(23,82%,53%);
box-shadow: 0 0 0 2px hsl(196,77%,55%);
z-index: 9999;
}
Expand Down Expand Up @@ -721,15 +721,15 @@ exports[`Toggle variant withInput: calling render with the same component on th
.c1 + .fi-toggle--with-button:focus:after {
content: '';
position: absolute;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
border-radius: 4px;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
border-radius: 2px;
background-color: transparent;
border: 1px solid hsl(23,82%,53%);
border: 0px solid white;
box-sizing: border-box;
box-shadow: 0 0 10px 0 hsl(23,82%,53%);
box-shadow: 0 0 0 2px hsl(196,77%,55%);
z-index: 9999;
}
Expand All @@ -754,15 +754,15 @@ exports[`Toggle variant withInput: calling render with the same component on th
.c1 + .fi-toggle--with-input:focus-within:after {
content: '';
position: absolute;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
border-radius: 4px;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
border-radius: 2px;
background-color: transparent;
border: 1px solid hsl(23,82%,53%);
border: 0px solid white;
box-sizing: border-box;
box-shadow: 0 0 10px 0 hsl(23,82%,53%);
box-shadow: 0 0 0 2px hsl(196,77%,55%);
z-index: 9999;
}
Expand Down
14 changes: 7 additions & 7 deletions src/core/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,15 +47,15 @@ exports[`calling render with the same component on the same container does not r
.c1 > [data-reach-menu-button].fi-language-menu_button:focus:after {
content: '';
position: absolute;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
border-radius: 4px;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
border-radius: 2px;
background-color: transparent;
border: 1px solid hsl(23,82%,53%);
border: 0px solid white;
box-sizing: border-box;
box-shadow: 0 0 10px 0 hsl(23,82%,53%);
box-shadow: 0 0 0 2px hsl(196,77%,55%);
z-index: 9999;
}
Expand Down
14 changes: 7 additions & 7 deletions src/core/Link/__snapshots__/Link.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,15 +62,15 @@ exports[`calling render with the same component on the same container does not r
.c1:focus:after {
content: '';
position: absolute;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
border-radius: 4px;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
border-radius: 2px;
background-color: transparent;
border: 1px solid hsl(23,82%,53%);
border: 0px solid white;
box-sizing: border-box;
box-shadow: 0 0 10px 0 hsl(23,82%,53%);
box-shadow: 0 0 0 2px hsl(196,77%,55%);
z-index: 9999;
}
Expand Down
14 changes: 7 additions & 7 deletions src/core/Link/__snapshots__/LinkExternal.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,15 +110,15 @@ exports[`calling render with the same component on the same container does not r
.c1:focus:after {
content: '';
position: absolute;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
border-radius: 4px;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
border-radius: 2px;
background-color: transparent;
border: 1px solid hsl(23,82%,53%);
border: 0px solid white;
box-sizing: border-box;
box-shadow: 0 0 10px 0 hsl(23,82%,53%);
box-shadow: 0 0 0 2px hsl(196,77%,55%);
z-index: 9999;
}
Expand Down
42 changes: 21 additions & 21 deletions src/core/theme/__snapshots__/tokens.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,15 +118,15 @@ exports[`snapshot testing 1`] = `
.c5:focus:after {
content: '';
position: absolute;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
border-radius: 4px;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
border-radius: 2px;
background-color: transparent;
border: 1px solid hsl(23,82%,53%);
border: 0px solid white;
box-sizing: border-box;
box-shadow: 0 0 10px 0 hsl(23,82%,53%);
box-shadow: 0 0 0 2px hsl(196,77%,55%);
z-index: 9999;
}
Expand Down Expand Up @@ -202,15 +202,15 @@ exports[`snapshot testing 1`] = `
.c2 > .fi-expander-group_all-button:focus:after {
content: '';
position: absolute;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
border-radius: 4px;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
border-radius: 2px;
background-color: transparent;
border: 1px solid hsl(23,82%,53%);
border: 0px solid white;
box-sizing: border-box;
box-shadow: 0 0 10px 0 hsl(23,82%,53%);
box-shadow: 0 0 0 2px hsl(196,77%,55%);
z-index: 9999;
}
Expand Down Expand Up @@ -292,15 +292,15 @@ exports[`snapshot testing 1`] = `
.c6 .fi-expander_title:focus:after {
content: '';
position: absolute;
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
border-radius: 4px;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
border-radius: 2px;
background-color: transparent;
border: 1px solid hsl(23,82%,53%);
border: 0px solid white;
box-sizing: border-box;
box-shadow: 0 0 10px 0 hsl(23,82%,53%);
box-shadow: 0 0 0 2px hsl(196,77%,55%);
z-index: 9999;
}
Expand Down
7 changes: 4 additions & 3 deletions src/core/theme/colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,9 +117,10 @@ export const gradients = {
};

export const outlines = {
basic: boxshadowOutline({
color: colors.accentBase,
offset: '4px',
afterPseudo: boxshadowOutline({
color: colors.accentSecondary,
border: '0px',
offset: '2px',
zIndex: zindexes.focus,
}),
};
2 changes: 1 addition & 1 deletion src/core/theme/radius.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export const radius = {
basic: '2px',
focus: '4px',
focus: '2px',
Copy link
Collaborator

Choose a reason for hiding this comment

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

I think the 4px radius is closer to the current design if that's a viable value otherwise.

};
2 changes: 1 addition & 1 deletion src/core/theme/utils/focus.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const focus = ({
}) => {
const style = !!outline
? outline
: themeOrTokens(tokensOrTheme).outlines.basic;
: themeOrTokens(tokensOrTheme).outlines.afterPseudo;
return !!noPseudo
? style
: css`
Expand Down
Loading