feat(Tabs)!: Add support for additional customization settings (#903)

* Add customization vars for hover/disabled states and shadow on selected tab

* Add support for "full width" to the `<TabList>` component

* Add support for "alignment" to the `<TabList>` component

* Add support for animating tab selection

* Fix import error

* Add `exceptionallySetClassName` support to `<TabList>` component

* Add storybook example for selected tab animation

* review: Map the `align` to `justifyContent` with a variable for readability

* review: Fix tab width/position when the viewport is resized

* review: Add missing CSS properties to some classes

* review: Add missing customization vars and use fill/tint naming

* review: No need to repeat this property (already set on `.tab`)

* review: Split tab border radius (for tab and track)

Author: rfgamaral

src/tabs/tabs.module.css

@@ -1,17 +1,31 @@
 :root {
-    --reactist-tab-themed-background: var(--reactist-bg-default);
-    --reactist-tab-themed-foreground: #006f85;
-    --reactist-tab-themed-unselected: #006f85;
+    --reactist-tab-themed-selected-tint: #006f85;
+    --reactist-tab-themed-selected-fill: var(--reactist-bg-default);
+    --reactist-tab-themed-unselected-tint: #006f85;
+    --reactist-tab-themed-unselected-fill: transparent;
+    --reactist-tab-themed-hover-tint: #006f85;
+    --reactist-tab-themed-hover-fill: transparent;
+    --reactist-tab-themed-disabled-tint: #006f85;
+    --reactist-tab-themed-disabled-fill: transparent;
     --reactist-tab-themed-track: rgb(242, 246, 247);
     --reactist-tab-themed-border: var(--reactist-divider-secondary);
+    --reactist-tab-themed-shadow: none;
 
-    --reactist-tab-neutral-background: var(--reactist-bg-default);
-    --reactist-tab-neutral-foreground: var(--reactist-content-primary);
-    --reactist-tab-neutral-unselected: var(--reactist-content-tertiary);
+    --reactist-tab-neutral-selected-tint: var(--reactist-content-primary);
+    --reactist-tab-neutral-selected-fill: var(--reactist-bg-default);
+    --reactist-tab-neutral-unselected-tint: var(--reactist-content-tertiary);
+    --reactist-tab-neutral-unselected-fill: transparent;
+    --reactist-tab-neutral-hover-tint: var(--reactist-content-tertiary);
+    --reactist-tab-neutral-hover-fill: transparent;
+    --reactist-tab-neutral-disabled-tint: var(--reactist-content-tertiary);
+    --reactist-tab-neutral-disabled-fill: transparent;
     --reactist-tab-neutral-track: var(--reactist-framework-fill-selected);
     --reactist-tab-neutral-border: var(--reactist-divider-primary);
+    --reactist-tab-neutral-shadow: none;
 
+    --reactist-tab-track-border-radius: 20px;
     --reactist-tab-track-border-width: 2px;
+    --reactist-tab-selected-transition: none;
     --reactist-tab-border-radius: 20px;
     --reactist-tab-border-width: 1px;
     --reactist-tab-padding-x: var(--reactist-spacing-medium);
@@ -34,41 +48,76 @@
     border-radius: var(--reactist-tab-border-radius);
 }
 
+.fullTabList .tab {
+    flex: 1;
+}
+
 .track {
     position: absolute;
     top: calc(-1 * var(--reactist-tab-track-border-width));
     right: calc(-1 * var(--reactist-tab-track-border-width));
     bottom: calc(-1 * var(--reactist-tab-track-border-width));
     left: calc(-1 * var(--reactist-tab-track-border-width));
-    border-radius: var(--reactist-tab-border-radius);
+    border-radius: var(--reactist-tab-track-border-radius);
     border-width: var(--reactist-tab-track-border-width);
     border-style: solid;
 }
 
+.selected {
+    position: absolute;
+    z-index: 0;
+    top: 0;
+    height: 100%;
+    border: var(--reactist-tab-border-width) solid transparent;
+    border-radius: var(--reactist-tab-border-radius);
+    transition: var(--reactist-tab-selected-transition);
+}
+
 /*
  * Variant options
  */
 
 .tab,
 .tab-neutral {
-    color: var(--reactist-tab-neutral-unselected);
+    background-color: var(--reactist-tab-neutral-unselected-fill);
+    color: var(--reactist-tab-neutral-unselected-tint);
 }
 
 .tab[aria-selected='true'],
 .tab-neutral[aria-selected='true'] {
-    background-color: var(--reactist-tab-neutral-background);
-    color: var(--reactist-tab-neutral-foreground);
-    border-color: var(--reactist-tab-neutral-border);
+    color: var(--reactist-tab-neutral-selected-tint);
+}
+
+.tab[aria-selected='false']:hover,
+.tab-neutral[aria-selected='false']:hover {
+    background-color: var(--reactist-tab-neutral-hover-fill);
+    color: var(--reactist-tab-neutral-hover-tint);
+}
+
+.tab[aria-disabled='true'],
+.tab-neutral[aria-disabled='true'] {
+    background-color: var(--reactist-tab-neutral-disabled-fill);
+    color: var(--reactist-tab-neutral-disabled-tint);
+    cursor: not-allowed;
 }
 
 .tab-themed {
-    color: var(--reactist-tab-themed-unselected);
+    background-color: var(--reactist-tab-themed-unselected-fill);
+    color: var(--reactist-tab-themed-unselected-tint);
 }
 
 .tab-themed[aria-selected='true'] {
-    background-color: var(--reactist-tab-themed-background);
-    color: var(--reactist-tab-themed-foreground);
-    border-color: var(--reactist-tab-themed-border);
+    color: var(--reactist-tab-themed-selected-tint);
+}
+
+.tab-themed[aria-selected='false']:hover {
+    background-color: var(--reactist-tab-themed-hover-fill);
+    color: var(--reactist-tab-themed-hover-tint);
+}
+
+.tab-themed[aria-disabled='true'] {
+    background-color: var(--reactist-tab-themed-disabled-fill);
+    color: var(--reactist-tab-themed-disabled-tint);
 }
 
 .track,
@@ -81,3 +130,16 @@
     background: var(--reactist-tab-themed-track);
     border-color: var(--reactist-tab-themed-track);
 }
+
+.selected,
+.selected-neutral {
+    background-color: var(--reactist-tab-neutral-selected-fill);
+    border-color: var(--reactist-tab-neutral-border);
+    box-shadow: var(--reactist-tab-neutral-shadow);
+}
+
+.selected-themed {
+    background-color: var(--reactist-tab-themed-selected-fill);
+    border-color: var(--reactist-tab-themed-border);
+    box-shadow: var(--reactist-tab-themed-shadow);
+}

src/tabs/tabs.stories.mdx

@@ -127,22 +127,35 @@ export const Template = ({
 The following CSS custom properties are available so that the tabs' colors can be customized:
 
 ```
---reactist-tab-neutral-background
---reactist-tab-neutral-foreground
---reactist-tab-neutral-unselected
+--reactist-tab-neutral-selected-tint
+--reactist-tab-neutral-selected-fill
+--reactist-tab-neutral-unselected-tint
+--reactist-tab-neutral-unselected-fill
+--reactist-tab-neutral-hover-tint
+--reactist-tab-neutral-hover-fill
+--reactist-tab-neutral-disabled-tint
+--reactist-tab-neutral-disabled-fill
 --reactist-tab-neutral-track
 --reactist-tab-neutral-border
 
---reactist-tab-themed-background
---reactist-tab-themed-foreground
---reactist-tab-themed-unselected
+--reactist-tab-themed-selected-tint
+--reactist-tab-themed-selected-fill
+--reactist-tab-themed-unselected-tint
+--reactist-tab-themed-unselected-fill
+--reactist-tab-themed-hover-tint
+--reactist-tab-themed-hover-fill
+--reactist-tab-themed-disabled-tint
+--reactist-tab-themed-disabled-fill
 --reactist-tab-themed-track
 --reactist-tab-themed-border
 ```
 
-Their size can also be customized with:
+## Sizes
+
+The following CSS custom properties are available so that the tabs' sizes can be customized:
 
 ```
+--reactist-tab-track-border-radius
 --reactist-tab-track-border-width
 --reactist-tab-border-radius
 --reactist-tab-border-width
@@ -151,6 +164,18 @@ Their size can also be customized with:
 --reactist-tab-line-height
 ```
 
+## Other
+
+The following CSS custom properties are also available to customize other tabs' styles:
+
+```
+--reactist-tab-neutral-shadow
+
+--reactist-tab-themed-shadow
+
+--reactist-tab-selected-transition
+```
+
 ## Stories
 
 ### Themed variant
@@ -168,6 +193,102 @@ Their size can also be customized with:
     </Story>
 </Canvas>
 
+### Full container width tabs
+
+<Canvas withToolbar>
+    <Story parameters={{ docs: { source: { type: 'code' } } }} name="Full container width tabs">
+        <Tabs>
+            <TabList aria-label="Full width tabs example" width="full">
+                <Tab id="tab1">Tab 1</Tab>
+                <Tab id="tab2">Tab 2</Tab>
+                <Tab id="tab3">Tab 3</Tab>
+            </TabList>
+            <TabPanel id="tab1">
+                <Box paddingX="small" paddingY="xlarge">
+                    <Text>Content of tab 1</Text>
+                </Box>
+            </TabPanel>
+            <TabPanel id="tab2">
+                <Box paddingX="small" paddingY="xlarge">
+                    <Text>Content of tab 2</Text>
+                </Box>
+            </TabPanel>
+            <TabPanel id="tab3">
+                <Box paddingX="small" paddingY="xlarge">
+                    <Text>Content of tab 3</Text>
+                </Box>
+            </TabPanel>
+        </Tabs>
+    </Story>
+</Canvas>
+
+### Tabs aligned to the center
+
+<Canvas withToolbar>
+    <Story parameters={{ docs: { source: { type: 'code' } } }} name="Tabs aligned to the center">
+        <Tabs>
+            <TabList aria-label="Full width tabs example" align="center">
+                <Tab id="tab1">Tab 1</Tab>
+                <Tab id="tab2">Tab 2</Tab>
+                <Tab id="tab3">Tab 3</Tab>
+            </TabList>
+            <TabPanel id="tab1">
+                <Box paddingX="small" paddingY="xlarge">
+                    <Text>Content of tab 1</Text>
+                </Box>
+            </TabPanel>
+            <TabPanel id="tab2">
+                <Box paddingX="small" paddingY="xlarge">
+                    <Text>Content of tab 2</Text>
+                </Box>
+            </TabPanel>
+            <TabPanel id="tab3">
+                <Box paddingX="small" paddingY="xlarge">
+                    <Text>Content of tab 3</Text>
+                </Box>
+            </TabPanel>
+        </Tabs>
+    </Story>
+</Canvas>
+
+### Selected tab with slide animation
+
+<Canvas withToolbar>
+    <Story
+        parameters={{ docs: { source: { type: 'code' } } }}
+        name="Selected tab with slide animation"
+        style={{ border: '1px solid red' }}
+    >
+        <Tabs>
+            <style>
+                {
+                    '.transition { --reactist-tab-selected-transition: left 0.3s ease, width 0.3s ease; }'
+                }
+            </style>
+            <TabList aria-label="Full width tabs example" exceptionallySetClassName="transition">
+                <Tab id="tab1">Tab 1</Tab>
+                <Tab id="tab2">Tab 2</Tab>
+                <Tab id="tab3">Tab 3</Tab>
+            </TabList>
+            <TabPanel id="tab1">
+                <Box paddingX="small" paddingY="xlarge">
+                    <Text>Content of tab 1</Text>
+                </Box>
+            </TabPanel>
+            <TabPanel id="tab2">
+                <Box paddingX="small" paddingY="xlarge">
+                    <Text>Content of tab 2</Text>
+                </Box>
+            </TabPanel>
+            <TabPanel id="tab3">
+                <Box paddingX="small" paddingY="xlarge">
+                    <Text>Content of tab 3</Text>
+                </Box>
+            </TabPanel>
+        </Tabs>
+    </Story>
+</Canvas>
+
 ### Using the `<TabAwareSlot>` component
 
 <Canvas withToolbar>