Skip to content

Commit

Permalink
Merge pull request #324 from vrk-kpa/fix/focus-style-align-with-style…
Browse files Browse the repository at this point in the history 
…guide

[Fix] Focus style align with style guide
  • Loading branch information
@aappoalander
aappoalander authored May 7, 2020
2 parents 0b26739 + 086b7bf commit eb6c5ae
Show file tree
Hide file tree
Showing 15 changed files with 132 additions and 120 deletions.
14 changes: 7 additions & 7 deletions src/core/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
View file
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
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
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
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
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
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
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
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
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
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
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
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
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export const radius = {
basic: '2px',
focus: '4px',
focus: '2px',
};
2 changes: 1 addition & 1 deletion src/core/theme/utils/focus.ts
View file
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

0 comments on commit eb6c5ae

Please sign in to comment.