Skip to content

Commit

Permalink
add new variant for tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
@YieldRay
YieldRay committed Jun 13, 2024
1 parent a525547 commit 4f91652
Show file tree
Hide file tree
Showing 4 changed files with 130 additions and 24 deletions.
34 changes: 17 additions & 17 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,35 +21,35 @@
},
"devDependencies": {
"@chromatic-com/storybook": "1",
"@floating-ui/react": "^0.26.16",
"@floating-ui/react": "^0.26.17",
"@ianvs/prettier-plugin-sort-imports": "^4.2.1",
"@material/material-color-utilities": "^0.2.7",
"@mdi/js": "^7.4.47",
"@mdi/react": "^1.6.1",
"@storybook/addon-essentials": "^8.1.3",
"@storybook/addon-interactions": "^8.1.3",
"@storybook/addon-links": "^8.1.3",
"@storybook/blocks": "^8.1.3",
"@storybook/react": "^8.1.3",
"@storybook/react-vite": "^8.1.3",
"@storybook/addon-essentials": "^8.1.8",
"@storybook/addon-interactions": "^8.1.8",
"@storybook/addon-links": "^8.1.8",
"@storybook/blocks": "^8.1.8",
"@storybook/react": "^8.1.8",
"@storybook/react-vite": "^8.1.8",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^7.10.0",
"@typescript-eslint/parser": "^7.10.0",
"@vitejs/plugin-react": "^4.3.0",
"chromatic": "^11.4.0",
"@typescript-eslint/eslint-plugin": "^7.13.0",
"@typescript-eslint/parser": "^7.13.0",
"@vitejs/plugin-react": "^4.3.1",
"chromatic": "^11.5.4",
"clsx": "^2.1.1",
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.7",
"eslint-plugin-storybook": "^0.8.0",
"glob": "^10.4.0",
"prettier": "^3.2.5",
"sass": "^1.77.2",
"storybook": "^8.1.3",
"styled-jsx": "^5.1.3",
"glob": "^10.4.1",
"prettier": "^3.3.2",
"sass": "^1.77.5",
"storybook": "^8.1.8",
"styled-jsx": "^5.1.6",
"typescript": "^5.4.5",
"vite": "^5.2.11",
"vite": "^5.2.13",
"vite-plugin-dts": "^3.9.1"
},
"publishConfig": {
Expand Down
36 changes: 36 additions & 0 deletions src/components/tabs/Tabs.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,3 +129,39 @@ export const Block: Story = {
],
},
}

export const Text: Story = {
args: {
variant: 'text',
defaultValue: 'Tab 1',
items: [
{
value: 'Tab 1',
},
{
value: 'Tab 2',
},
{
value: 'Tab 3',
},
],
},
}

export const Rounded: Story = {
args: {
variant: 'rounded',
defaultValue: 'Tab 1',
items: [
{
value: 'Tab 1',
},
{
value: 'Tab 2',
},
{
value: 'Tab 3',
},
],
},
}
17 changes: 10 additions & 7 deletions src/components/tabs/Tabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const Tabs = forwardRef<
/**
* @default "primary"
*/
variant?: 'primary' | 'secondary' | 'block'
variant?: 'primary' | 'secondary' | 'block' | 'text' | 'rounded'
full?: boolean
}>
>(function Tab(
Expand Down Expand Up @@ -69,7 +69,9 @@ export const Tabs = forwardRef<
if (!item) return

const indicatorWidth =
variant === 'secondary' || variant === 'block'
variant === 'secondary' ||
variant === 'block' ||
variant === 'rounded'
? item.clientWidth
: 36
setWidth(`${indicatorWidth}px`)
Expand All @@ -80,8 +82,7 @@ export const Tabs = forwardRef<
left -
tabs.scrollLeft -
/** previous */ (item.previousElementSibling?.clientWidth ||
0) /
2 /** make sure the previous item is able to click */ <=
0) /** make sure the previous item is able to click */ <=
0
) {
// scroll to left
Expand All @@ -90,8 +91,8 @@ export const Tabs = forwardRef<
left +
item.clientWidth -
tabs.scrollLeft +
/** next */ (item.nextElementSibling?.clientWidth || 0) /
2 /** make sure the next item is able to click */ >=
/** next */ (item.nextElementSibling?.clientWidth ||
0) /** make sure the next item is able to click */ >=
tabs.clientWidth
) {
// scroll to right
Expand Down Expand Up @@ -135,7 +136,9 @@ export const Tabs = forwardRef<
as="div"
className="sd-tabs-item"
rippleColor={
variant === 'block' ? 'transparent' : undefined
variant === 'block' || variant === 'rounded'
? 'transparent'
: undefined
}
style={{ flexDirection }}
key={item.value}
Expand Down
67 changes: 67 additions & 0 deletions src/components/tabs/tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,11 @@
overflow-x: auto;
// hide the scrollbar
scrollbar-width: none;

&::-webkit-scrollbar {
display: none;
}

scroll-behavior: smooth;
-webkit-tap-highlight-color: transparent; // remove webkit blue tap effect

Expand All @@ -34,6 +36,7 @@
@include background-hover(var(--md-sys-color-primary));
}
}

&:active {
@include background-pressed(var(--md-sys-color-primary));
}
Expand All @@ -45,6 +48,7 @@

&-icon {
transition: all 200ms;

svg {
height: 20px;
display: grid;
Expand Down Expand Up @@ -76,6 +80,7 @@
}

position: relative;

&-active_indicator {
transition: left 200ms;
position: absolute;
Expand All @@ -86,11 +91,13 @@
bottom: -3px;
// left: calc in js
}

&[data-sd-variant='primary'] {
.sd-tabs-active_indicator {
clip-path: inset(0 0 50% 0);
}
}

&[data-sd-variant='secondary'] {
.sd-tabs-active_indicator {
// width: calc in js
Expand All @@ -99,11 +106,13 @@
bottom: 0;
}
}

&[data-sd-variant='block'] {
--radius: 8px;
border-radius: var(--radius);
overflow: hidden;
background-color: var(--md-sys-color-surface-container-highest);

.sd-tabs-item {
background-color: transparent;
z-index: 1;
Expand All @@ -114,6 +123,7 @@
@include background-focus(var(--md-sys-color-primary));
}
}

.sd-tabs-active_indicator {
inset: 0;
transform: scale(0.95, 0.9);
Expand All @@ -126,4 +136,61 @@
-1px -1px rgba(0 0 0 / 0.04);
}
}

&[data-sd-variant='text'] {
--radius: 8px;
overflow: hidden;
background-color: unset;

.sd-tabs-item {
border-radius: var(--radius);
background-color: transparent;
padding-bottom: 0.5rem; // reset

&[data-sd-active='false'] > .sd-tabs-item-label_text {
color: var(--md-sys-color-outline);
}
&:focus-visible {
outline: none;
@include background-focus(var(--md-sys-color-primary));
}
}
.sd-tabs-active_indicator {
display: none;
}
}

&[data-sd-variant='rounded'] {
--radius: 16px;
border-radius: var(--radius);
overflow: hidden;
background-color: unset;

.sd-tabs-item {
.sd-tabs-item-label_text {
font-weight: 400;
color: var(--md-sys-color-on-secondary-container);
}
&[data-sd-active='false'] > .sd-tabs-item-label_text {
color: var(--md-sys-color-outline);
}
background-color: transparent;
z-index: 1;
padding-bottom: 0.5rem; // reset

&:focus-visible {
outline: none;
@include background-focus(var(--md-sys-color-primary));
}
}

.sd-tabs-active_indicator {
inset: 0;
transform: scale(0.95, 0.9);
height: 100%;
width: 100%;
border-radius: var(--radius);
background: var(--md-sys-color-secondary-container);
}
}
}

0 comments on commit 4f91652

Please sign in to comment.