Skip to content

Commit

Permalink
chore: work in progress
Browse files Browse the repository at this point in the history
  • Loading branch information
@cheton
cheton committed Sep 26, 2023
1 parent 053573e commit a951561
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 97 deletions.
105 changes: 42 additions & 63 deletions packages/react/src/tabs/__tests__/__snapshots__/Tabs.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,6 @@ exports[`Tabs should render correctly 1`] = `
padding: 0;
font-size: var(--tonic-fontSizes-sm);
line-height: var(--tonic-lineHeights-sm);
border-color: var(--tonic-colors-transparent);
border-style: solid;
border-width: var(--tonic-sizes-1h);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
Expand All @@ -45,40 +42,36 @@ exports[`Tabs should render correctly 1`] = `
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-left: var(--tonic-space-3x);
padding-right: var(--tonic-space-3x);
padding-top: var(--tonic-space-2x);
padding-bottom: var(--tonic-space-2x);
padding-left: var(--tonic-space-4x);
padding-right: var(--tonic-space-4x);
padding-top: calc(.5rem + .125rem);
padding-bottom: calc(.5rem + .125rem);
}
.emotion-4:focus-visible {
outline-color: var(--tonic-colors-red-60);
outline-width: var(--tonic-sizes-1h);
outline-style: solid;
outline-offset: calc(var(--tonic-space-1h) * -1);
color: var(--tonic-colors-white-primary);
}
.emotion-4[aria-selected=true],
.emotion-4[data-selected] {
border: none;
border-bottom-color: var(--tonic-colors-red-60);
border-bottom-style: solid;
border-bottom-width: var(--tonic-sizes-1h);
color: var(--tonic-colors-white-primary);
padding-left: calc(.75rem + .125rem);
padding-right: calc(.75rem + .125rem);
padding-top: calc(.5rem + .125rem);
}
.emotion-4:focus,
.emotion-4[data-focus] {
border-color: var(--tonic-colors-red-60);
color: var(--tonic-colors-white-primary);
padding-bottom: calc(1rem - .125rem);
}
.emotion-4:hover,
.emotion-4[data-hover] {
border: none;
border-bottom-color: var(--tonic-colors-red-60);
border-bottom-style: solid;
border-bottom-width: var(--tonic-sizes-1h);
color: var(--tonic-colors-white-primary);
padding-left: calc(.75rem + .125rem);
padding-right: calc(.75rem + .125rem);
padding-top: calc(.5rem + .125rem);
padding-bottom: calc(1rem - .125rem);
}
.emotion-6 {
Expand All @@ -93,9 +86,6 @@ exports[`Tabs should render correctly 1`] = `
padding: 0;
font-size: var(--tonic-fontSizes-sm);
line-height: var(--tonic-lineHeights-sm);
border-color: var(--tonic-colors-transparent);
border-style: solid;
border-width: var(--tonic-sizes-1h);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
Expand All @@ -104,40 +94,36 @@ exports[`Tabs should render correctly 1`] = `
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-left: var(--tonic-space-3x);
padding-right: var(--tonic-space-3x);
padding-top: var(--tonic-space-2x);
padding-bottom: var(--tonic-space-2x);
padding-left: var(--tonic-space-4x);
padding-right: var(--tonic-space-4x);
padding-top: calc(.5rem + .125rem);
padding-bottom: calc(.5rem + .125rem);
}
.emotion-6:focus-visible {
outline-color: var(--tonic-colors-blue-60);
outline-width: var(--tonic-sizes-1h);
outline-style: solid;
outline-offset: calc(var(--tonic-space-1h) * -1);
color: var(--tonic-colors-white-primary);
}
.emotion-6[aria-selected=true],
.emotion-6[data-selected] {
border: none;
border-bottom-color: var(--tonic-colors-red-60);
border-bottom-style: solid;
border-bottom-width: var(--tonic-sizes-1h);
color: var(--tonic-colors-white-primary);
padding-left: calc(.75rem + .125rem);
padding-right: calc(.75rem + .125rem);
padding-top: calc(.5rem + .125rem);
}
.emotion-6:focus,
.emotion-6[data-focus] {
border-color: var(--tonic-colors-blue-60);
color: var(--tonic-colors-white-primary);
padding-bottom: calc(1rem - .125rem);
}
.emotion-6:hover,
.emotion-6[data-hover] {
border: none;
border-bottom-color: var(--tonic-colors-gray-60);
border-bottom-style: solid;
border-bottom-width: var(--tonic-sizes-1h);
color: var(--tonic-colors-white-primary);
padding-left: calc(.75rem + .125rem);
padding-right: calc(.75rem + .125rem);
padding-top: calc(.5rem + .125rem);
padding-bottom: calc(1rem - .125rem);
}
.emotion-8 {
Expand All @@ -153,9 +139,6 @@ exports[`Tabs should render correctly 1`] = `
padding: 0;
font-size: var(--tonic-fontSizes-sm);
line-height: var(--tonic-lineHeights-sm);
border-color: var(--tonic-colors-transparent);
border-style: solid;
border-width: var(--tonic-sizes-1h);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
Expand All @@ -164,40 +147,36 @@ exports[`Tabs should render correctly 1`] = `
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-left: var(--tonic-space-3x);
padding-right: var(--tonic-space-3x);
padding-top: var(--tonic-space-2x);
padding-bottom: var(--tonic-space-2x);
padding-left: var(--tonic-space-4x);
padding-right: var(--tonic-space-4x);
padding-top: calc(.5rem + .125rem);
padding-bottom: calc(.5rem + .125rem);
}
.emotion-8:focus-visible {
outline-color: var(--tonic-colors-transparent);
outline-width: var(--tonic-sizes-1h);
outline-style: solid;
outline-offset: calc(var(--tonic-space-1h) * -1);
color: var(--tonic-colors-white-disabled);
}
.emotion-8[aria-selected=true],
.emotion-8[data-selected] {
border: none;
border-bottom-color: var(--tonic-colors-transparent);
border-bottom-style: solid;
border-bottom-width: var(--tonic-sizes-1h);
color: var(--tonic-colors-white-disabled);
padding-left: calc(.75rem + .125rem);
padding-right: calc(.75rem + .125rem);
padding-top: calc(.5rem + .125rem);
}
.emotion-8:focus,
.emotion-8[data-focus] {
border-color: var(--tonic-colors-transparent);
color: var(--tonic-colors-white-disabled);
padding-bottom: calc(1rem - .125rem);
}
.emotion-8:hover,
.emotion-8[data-hover] {
border: none;
border-bottom-color: var(--tonic-colors-transparent);
border-bottom-style: solid;
border-bottom-width: var(--tonic-sizes-1h);
color: var(--tonic-colors-white-disabled);
padding-left: calc(.75rem + .125rem);
padding-right: calc(.75rem + .125rem);
padding-top: calc(.5rem + .125rem);
padding-bottom: calc(1rem - .125rem);
}
.emotion-10 {
Expand Down
68 changes: 34 additions & 34 deletions packages/react/src/tabs/styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const useTabStyle = ({
if (variant === 'default') {
// border color
const disabledBorderColor = 'transparent';
const focusBorderColor = {
const focusVisibleBorderColor = {
dark: 'blue:60',
light: 'blue:60',
}[colorMode];
Expand Down Expand Up @@ -89,61 +89,61 @@ const useTabStyle = ({
return fallbackColor;
};

const selectedPaddingXKey = {
'horizontal': 'px',
'vertical': 'pr',
}[orientation];
const selectedPaddingYKey = {
'horizontal': 'pt',
'vertical': 'py',
}[orientation];
const selectedBorderColorKey = {
const borderColorKey = {
'horizontal': 'borderBottomColor',
'vertical': 'borderLeftColor',
}[orientation];
const selectedBorderStyleKey = {
const borderStyleKey = {
'horizontal': 'borderBottomStyle',
'vertical': 'borderLeftStyle',
}[orientation];
const selectedBorderWidthKey = {
const borderWidthKey = {
'horizontal': 'borderBottomWidth',
'vertical': 'borderLeftWidth',
}[orientation];

const paddingStyle = {};

if (orientation === 'horizontal') {
paddingStyle.px = '4x';
paddingStyle.pt = `calc(${sizes?.['2x']} + ${sizes?.['1h']})`;
paddingStyle.pb = '2x';
} else {
paddingStyle.pl = `calc(${sizes?.['4x']} - ${sizes?.['1h']})`;
paddingStyle.pr = '4x';
paddingStyle.py = `calc(${sizes?.['2x']} + ${sizes?.['1h']})`;
}

return {
fontSize: 'sm',
lineHeight: 'sm',
borderColor: 'transparent',
borderStyle: 'solid',
borderWidth: '1h',
color: getColorStyleWithFallback(color),
cursor: getCursorStyle(),
display: 'flex',
alignItems: 'center',
px: '3x',
py: '2x',
...paddingStyle,
[borderColorKey]: 'transparent',
[borderStyleKey]: 'solid',
[borderWidthKey]: '1h',
outline: (tabIndex < 0) ? 0 : undefined, // Remove the default outline for tabindex="-1"
_hover: {
border: 'none',
[selectedBorderColorKey]: getBorderColorStyleWithFallback(hoverBorderColor),
[selectedBorderStyleKey]: 'solid',
[selectedBorderWidthKey]: '1h',
[borderColorKey]: getBorderColorStyleWithFallback(hoverBorderColor),
[borderStyleKey]: 'solid',
[borderWidthKey]: '1h',
color: getColorStyleWithFallback(hoverColor),
[selectedPaddingXKey]: `calc(${sizes?.['3x']} + ${sizes?.['1h']})`,
[selectedPaddingYKey]: `calc(${sizes?.['2x']} + ${sizes?.['1h']})`,
},
_focus: {
borderColor: getBorderColorStyleWithFallback(focusBorderColor),
_focusVisible: {
outlineColor: getBorderColorStyleWithFallback(focusVisibleBorderColor),
outlineWidth: '1h',
outlineStyle: 'solid',
outlineOffset: '-1h',
color: getColorStyleWithFallback(focusColor),
},
_selected: {
border: 'none',
[selectedBorderColorKey]: getBorderColorStyleWithFallback(selectedBorderColor),
[selectedBorderStyleKey]: 'solid',
[selectedBorderWidthKey]: '1h',
[borderColorKey]: getBorderColorStyleWithFallback(selectedBorderColor),
[borderStyleKey]: 'solid',
[borderWidthKey]: '1h',
color: getColorStyleWithFallback(selectedColor),
[selectedPaddingXKey]: `calc(${sizes?.['3x']} + ${sizes?.['1h']})`,
[selectedPaddingYKey]: `calc(${sizes?.['2x']} + ${sizes?.['1h']})`,
},
};
}
Expand Down Expand Up @@ -180,7 +180,7 @@ const useTabStyle = ({
dark: 'gray:80',
light: 'gray:20',
}[colorMode];
const focusBorderColor = {
const focusVisibleBorderColor = {
dark: 'blue:60',
light: 'blue:60',
}[colorMode];
Expand Down Expand Up @@ -282,9 +282,9 @@ const useTabStyle = ({
borderColor: getBorderColorStyleWithFallback(hoverBorderColor),
color: getColorStyleWithFallback(hoverColor),
},
_focus: {
_focusVisible: {
backgroundColor: getBackgroundColorStyleWithFallback(focusBackgroundColor),
borderColor: getBorderColorStyleWithFallback(focusBorderColor),
borderColor: getBorderColorStyleWithFallback(focusVisibleBorderColor),
borderStyle: 'solid',
borderWidth: '1h',
color: getColorStyleWithFallback(focusColor),
Expand Down

0 comments on commit a951561

Please sign in to comment.