Skip to content

Commit 3666861

Browse files
dpellierdpellier
committed
feat(tabs): add switch variant & deprecate Switch
1 parent d689add commit 3666861

File tree

19 files changed

+562
-78
lines changed

19 files changed

+562
-78
lines changed

‎packages/ods-react/src/components/switch/src/components/switch/Switch.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ToggleGroup, type ToggleGroupValueChangeDetails } from '@ark-ui/react/toggle-group';
22
import classNames from 'classnames';
3-
import { type ComponentPropsWithRef, type FC, type JSX, forwardRef } from 'react';
3+
import { type ComponentPropsWithRef, type FC, type JSX, forwardRef, useEffect } from 'react';
44
import { SWITCH_SIZE, type SwitchSize } from '../../constants/switch-size';
55
import style from './switch.module.scss';
66

@@ -40,6 +40,10 @@ const Switch: FC<SwitchProp> = forwardRef(({
4040
value,
4141
...props
4242
}, ref): JSX.Element => {
43+
useEffect(() => {
44+
console.warn('[DEPRECATED]: Switch component is not recommended anymore and will be removed in a next major release. Check the documentation for correct alternative.');
45+
}, []);
46+
4347
function onSwitchValueChange(detail: ToggleGroupValueChangeDetails): void {
4448
if (onValueChange) {
4549
onValueChange({ value: detail.value[0] });

‎packages/ods-react/src/components/tabs/src/components/tab-list/TabList.tsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const TabList: FC<TabListProp> = forwardRef(({
1414
className,
1515
...props
1616
}, ref): JSX.Element => {
17-
const { withArrows, setScrollContainerRef } = useTabs();
17+
const { setScrollContainerRef, size, variant, withArrows } = useTabs();
1818
const [isLeftButtonDisabled, setIsLeftButtonDisabled] = useState(false);
1919
const [isRightButtonDisabled, setIsRightButtonDisabled] = useState(false);
2020
const scrollRef = useRef<HTMLDivElement>(null);
@@ -27,7 +27,7 @@ const TabList: FC<TabListProp> = forwardRef(({
2727

2828
const updateScrollButtonState = useCallback(() => {
2929
setIsLeftButtonDisabled(scrollRef.current ? scrollRef.current.scrollLeft === 0 : false);
30-
setIsRightButtonDisabled(scrollRef.current ? scrollRef.current.scrollLeft === scrollRef.current.scrollWidth - scrollRef.current.offsetWidth : false);
30+
setIsRightButtonDisabled(scrollRef.current ? Math.ceil(scrollRef.current.scrollLeft) >= scrollRef.current.scrollWidth - scrollRef.current.offsetWidth : false);
3131
}, []);
3232

3333
const debouncedUpdateScrollButtonState = useMemo(() => {
@@ -73,7 +73,10 @@ const TabList: FC<TabListProp> = forwardRef(({
7373

7474
return (
7575
<div
76-
className={ classNames(style['tab-list'], className) }
76+
className={ classNames(
77+
style['tab-list'],
78+
className,
79+
)}
7780
data-ods="tab-list"
7881
ref={ ref }
7982
{ ...props }>
@@ -84,6 +87,7 @@ const TabList: FC<TabListProp> = forwardRef(({
8487
{ [style['tab-list__left-arrow--active']]: !isLeftButtonDisabled },
8588
)}>
8689
<Button
90+
className={ style['tab-list__left-arrow__button'] }
8791
disabled={ isLeftButtonDisabled }
8892
onClick={ onLeftScrollClick }
8993
size={ BUTTON_SIZE.xs }
@@ -95,7 +99,11 @@ const TabList: FC<TabListProp> = forwardRef(({
9599
}
96100

97101
<div
98-
className={ style['tab-list__container'] }
102+
className={ classNames(
103+
style['tab-list__container'],
104+
style[`tab-list__container--${size}`],
105+
style[`tab-list__container--${variant}`],
106+
)}
99107
onScroll={ debouncedUpdateScrollButtonState }
100108
ref={ scrollRef }
101109
tabIndex={ -1 }>
@@ -111,6 +119,7 @@ const TabList: FC<TabListProp> = forwardRef(({
111119
{ [style['tab-list__right-arrow--active']]: !isRightButtonDisabled },
112120
)}>
113121
<Button
122+
className={ style['tab-list__right-arrow__button'] }
114123
disabled={ isRightButtonDisabled }
115124
onClick={ onRightScrollClick }
116125
size={ BUTTON_SIZE.xs }

‎packages/ods-react/src/components/tabs/src/components/tab-list/tabList.module.scss‎

Lines changed: 41 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
@use '../../../../../style/button';
2+
@use '../../../../../style/font';
23
@use '../../../../../style/scroll';
34

45
$tab-list-border-bottom-size: 2px;
56

67
@layer ods-molecules {
78
.tab-list {
9+
--ods-tab-list-background-color-switch: var(--ods-color-neutral-050);
810
--ods-tab-list-border-color: var(--ods-color-neutral-100);
11+
--ods-tab-list-border-radius-switch-md: calc(var(--ods-theme-border-radius) * 1.25);
12+
--ods-tab-list-border-radius-switch-sm: calc(var(--ods-theme-border-radius) * 0.75);
13+
--ods-tab-list-border-radius-switch-xs: calc(var(--ods-theme-border-radius) / 2);
14+
--ods-tab-list-border-width: #{$tab-list-border-bottom-size};
915

1016
display: flex;
1117
position: relative;
@@ -25,12 +31,16 @@ $tab-list-border-bottom-size: 2px;
2531
bottom: 0;
2632
transition: opacity ease .3s;
2733
opacity: 0;
28-
z-index: 1;
34+
z-index: 10;
2935
width: 60px;
3036
height: 100%;
3137
content: '';
3238
pointer-events: none;
3339
}
40+
41+
&__button {
42+
font-size: font.px-to-rem(10px);
43+
}
3444
}
3545

3646
&__left-arrow {
@@ -60,25 +70,46 @@ $tab-list-border-bottom-size: 2px;
6070
}
6171

6272
&__container {
73+
$container: &;
74+
6375
@include scroll.hide-scrollbar();
6476

6577
display: inline-block;
6678
position: relative;
67-
width: 100%;
6879
overflow: auto hidden;
6980
white-space: nowrap;
7081

71-
&::after {
72-
position: absolute;
73-
right: 0;
74-
bottom: 0;
75-
left: 0;
76-
border-bottom: solid $tab-list-border-bottom-size var(--ods-tab-list-border-color);
77-
content: '';
82+
&--default {
83+
width: 100%;
84+
85+
&::after {
86+
position: absolute;
87+
right: 0;
88+
bottom: 0;
89+
left: 0;
90+
border-bottom: solid var(--ods-tab-list-border-width) var(--ods-tab-list-border-color);
91+
content: '';
92+
}
93+
}
94+
95+
&--switch {
96+
background-color: var(--ods-tab-list-background-color-switch);
97+
98+
&#{$container}--md {
99+
border-radius: var(--ods-tab-list-border-radius-switch-md);
100+
}
101+
102+
&#{$container}--sm {
103+
border-radius: var(--ods-tab-list-border-radius-switch-sm);
104+
}
105+
106+
&#{$container}--xs {
107+
border-radius: var(--ods-tab-list-border-radius-switch-xs);
108+
}
78109
}
79110

80111
&__tabs {
81-
display: flex;
112+
display: inline-flex;
82113
}
83114
}
84115
}

‎packages/ods-react/src/components/tabs/src/components/tab/Tab.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const Tab: FC<TabProp> = forwardRef(({
1818
...props
1919
}, ref): JSX.Element => {
2020
const { focusedValue } = useTabsContext();
21-
const { scrollContainerRef } = useTabs();
21+
const { scrollContainerRef, size, variant } = useTabs();
2222
const innerRef = useRef<HTMLButtonElement>(null);
2323

2424
useImperativeHandle(ref, () => innerRef.current!, [innerRef]);
@@ -43,7 +43,12 @@ const Tab: FC<TabProp> = forwardRef(({
4343

4444
return (
4545
<Tabs.Trigger
46-
className={ classNames(style['tab'], className) }
46+
className={ classNames(
47+
style['tab'],
48+
style[`tab--${size}`],
49+
style[`tab--${variant}`],
50+
className,
51+
)}
4752
data-ods="tab"
4853
ref={ innerRef }
4954
value={ value }

‎packages/ods-react/src/components/tabs/src/components/tab/tab.module.scss‎

Lines changed: 103 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,54 @@
11
@use '../../../../../style/focus';
2+
@use '../../../../../style/font';
23
@use '../../../../../style/state';
3-
@use '../tab-list/tabList.module' as tab-list;
44

55
@layer ods-molecules {
66
.tab {
7+
$tab: &;
8+
9+
--ods-tab-margin-horizontal-switch-md: calc(var(--ods-theme-padding-horizontal) / 2);
10+
--ods-tab-margin-horizontal-switch-sm: calc(var(--ods-theme-padding-horizontal) / 2);
11+
--ods-tab-margin-horizontal-switch-xs: calc(var(--ods-theme-padding-horizontal) / 4);
12+
--ods-tab-margin-vertical-switch-md: calc(var(--ods-theme-padding-vertical) / 2);
13+
--ods-tab-margin-vertical-switch-sm: calc(var(--ods-theme-padding-vertical) / 2);
14+
--ods-tab-margin-vertical-switch-xs: calc(var(--ods-theme-padding-vertical) / 4);
715
--ods-tab-padding-horizontal: calc(var(--ods-theme-padding-horizontal) * 2);
16+
--ods-tab-padding-horizontal-switch-md: calc(var(--ods-theme-padding-horizontal) * 1.5);
17+
--ods-tab-padding-horizontal-switch-sm: var(--ods-theme-padding-horizontal);
18+
--ods-tab-padding-horizontal-switch-xs: calc(var(--ods-theme-padding-horizontal) * 0.75);
819
--ods-tab-padding-vertical: calc(var(--ods-theme-padding-vertical) / 4);
20+
--ods-tab-padding-vertical-switch-md: var(--ods-theme-padding-horizontal);
21+
--ods-tab-padding-vertical-switch-sm: calc(var(--ods-theme-padding-horizontal) * 0.75);
22+
--ods-tab-padding-vertical-switch-xs: calc(var(--ods-theme-padding-horizontal) / 2);
923
--ods-tab-background-color-hover: var(--ods-color-neutral-050);
24+
--ods-tab-background-color-selected-switch: var(--ods-color-neutral-000);
25+
--ods-tab-background-color-selected-disabled-switch: var(--ods-color-neutral-500);
1026
--ods-tab-border-color: var(--ods-tab-list-border-color);
1127
--ods-tab-border-color-disabled: var(--ods-color-neutral-100);
1228
--ods-tab-border-color-hover: var(--ods-color-neutral-050);
1329
--ods-tab-border-color-selected: var(--ods-color-primary-500);
1430
--ods-tab-border-color-selected-disabled: var(--ods-color-neutral-500);
31+
--ods-tab-border-color-selected-disabled-switch: var(--ods-color-neutral-000);
32+
--ods-tab-border-radius-switch-md: var(--ods-theme-border-radius);
33+
--ods-tab-border-radius-switch-sm: calc(var(--ods-theme-border-radius) / 2);
34+
--ods-tab-border-radius-switch-xs: calc(var(--ods-theme-border-radius) / 4);
35+
--ods-tab-text-color-hover-switch: var(--ods-color-primary-700);
1536
--ods-tab-text-color-selected: var(--ods-color-primary-500);
1637

1738
display: block;
1839
z-index: 1;
19-
border-top: none;
20-
border-right: none;
21-
border-bottom: solid tab-list.$tab-list-border-bottom-size var(--ods-tab-border-color);
22-
border-left: none;
23-
border-top-left-radius: var(--ods-theme-border-radius);
24-
border-top-right-radius: var(--ods-theme-border-radius);
2540
background: none;
2641
cursor: pointer;
27-
padding: var(--ods-tab-padding-vertical) var(--ods-tab-padding-horizontal);
2842
text-align: center;
2943
white-space: nowrap;
3044
color: var(--ods-theme-text-color);
3145
font-family: inherit;
32-
font-size: inherit;
3346
font-weight: 600;
3447

3548
&:focus-visible {
3649
@include focus.ods-focus();
3750

3851
z-index: 2;
39-
outline-offset: calc(var(--ods-theme-outline-offset) * -1);
40-
}
41-
42-
&:focus-visible:not([disabled], [aria-selected="true"]),
43-
&:hover:not([disabled], [aria-selected="true"]) {
44-
border-color: var(--ods-tab-border-color-hover);
45-
background-color: var(--ods-tab-background-color-hover);
4652
}
4753

4854
&[disabled] {
@@ -52,15 +58,90 @@
5258
background-color: inherit;
5359
}
5460

55-
&[aria-selected="true"] {
56-
&:not([disabled]) {
57-
border-color: var(--ods-tab-border-color-selected);
58-
color: var(--ods-tab-text-color-selected);
61+
&--default {
62+
border-top: none;
63+
border-right: none;
64+
border-bottom: solid var(--ods-tab-list-border-width) var(--ods-tab-border-color);
65+
border-left: none;
66+
border-top-left-radius: var(--ods-theme-border-radius);
67+
border-top-right-radius: var(--ods-theme-border-radius);
68+
padding: var(--ods-tab-padding-vertical) var(--ods-tab-padding-horizontal);
69+
70+
&:focus-visible:focus-visible {
71+
outline-offset: calc(var(--ods-theme-outline-offset) * -1);
72+
}
73+
74+
&:focus-visible:not([disabled], [aria-selected="true"]),
75+
&:hover:not([disabled], [aria-selected="true"]) {
76+
border-color: var(--ods-tab-border-color-hover);
77+
background-color: var(--ods-tab-background-color-hover);
78+
}
79+
80+
&[aria-selected="true"] {
81+
&:not([disabled]) {
82+
border-color: var(--ods-tab-border-color-selected);
83+
color: var(--ods-tab-text-color-selected);
84+
}
85+
86+
&[disabled] {
87+
border-color: var(--ods-tab-border-color-selected-disabled);
88+
}
89+
}
90+
}
91+
92+
&--switch {
93+
border: 0;
94+
95+
&[aria-selected="true"] {
96+
&:not([disabled]) {
97+
background-color: var(--ods-tab-background-color-selected-switch);
98+
color: var(--ods-tab-text-color-selected);
99+
100+
&:focus-visible,
101+
&:hover {
102+
color: var(--ods-tab-text-color-hover-switch);
103+
}
104+
}
105+
106+
&[disabled] {
107+
background-color: var(--ods-tab-background-color-selected-disabled-switch);
108+
color: var(--ods-tab-border-color-selected-disabled-switch);
109+
}
110+
}
111+
112+
&#{$tab}--md {
113+
margin: var(--ods-tab-margin-vertical-switch-md) var(--ods-tab-margin-horizontal-switch-md);
114+
border-radius: var(--ods-tab-border-radius-switch-md);
115+
padding: var(--ods-tab-padding-vertical-switch-md) var(--ods-tab-padding-horizontal-switch-md);
59116
}
60117

61-
&[disabled] {
62-
border-color: var(--ods-tab-border-color-selected-disabled);
118+
&#{$tab}--sm {
119+
margin: var(--ods-tab-margin-vertical-switch-sm) var(--ods-tab-margin-horizontal-switch-sm);
120+
border-radius: var(--ods-tab-border-radius-switch-sm);
121+
padding: var(--ods-tab-padding-vertical-switch-sm) var(--ods-tab-padding-horizontal-switch-sm);
122+
}
123+
124+
&#{$tab}--xs {
125+
margin: var(--ods-tab-margin-vertical-switch-xs) var(--ods-tab-margin-horizontal-switch-xs);
126+
border-radius: var(--ods-tab-border-radius-switch-xs);
127+
padding: var(--ods-tab-padding-vertical-switch-xs) var(--ods-tab-padding-horizontal-switch-xs);
128+
129+
&:focus-visible:focus-visible {
130+
outline-offset: 0;
131+
}
63132
}
64133
}
134+
135+
&--md {
136+
font-size: font.px-to-rem(16px);
137+
}
138+
139+
&--sm {
140+
font-size: font.px-to-rem(14px);
141+
}
142+
143+
&--xs {
144+
font-size: font.px-to-rem(12px);
145+
}
65146
}
66147
}

‎packages/ods-react/src/components/tabs/src/components/tabs/Tabs.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
import { Tabs as VendorTabs } from '@ark-ui/react/tabs';
22
import { type ComponentPropsWithRef, type FC, type JSX, forwardRef, useEffect } from 'react';
3+
import { TABS_SIZE } from '../../constants/tabs-size';
4+
import { TABS_VARIANT } from '../../constants/tabs-variant';
35
import { TabsProvider, type TabsRootProp } from '../../contexts/useTabs';
46

5-
/**
6-
* @inheritDoc TabsRootProp
7-
*/
87
interface TabsProp extends Omit<ComponentPropsWithRef<'div'>, 'defaultValue'>, TabsRootProp {}
98

109
const Tabs: FC<TabsProp> = forwardRef(({
1110
children,
1211
className,
1312
defaultValue,
1413
onValueChange,
14+
size = TABS_SIZE.md,
1515
value,
16+
variant = TABS_VARIANT.default,
1617
withArrows,
1718
...props
1819
}, ref): JSX.Element => {
@@ -23,7 +24,10 @@ const Tabs: FC<TabsProp> = forwardRef(({
2324
}, [value, defaultValue]);
2425

2526
return (
26-
<TabsProvider withArrows={ withArrows }>
27+
<TabsProvider
28+
size={ size }
29+
variant={ variant }
30+
withArrows={ withArrows }>
2731
<VendorTabs.Root
2832
className={ className }
2933
data-ods="tabs"

0 commit comments

Comments
 (0)