feat(TabGroup): add inverse variant treatment (#1960)

- add `variant` prop - use default `default` and provide `inverse` - add story and update snapshots.
chanzuckerberg · May 23, 2024 · 402e433 · 402e433
1 parent 72daa0b
commit 402e433
Show file tree

Hide file tree

Showing 4 changed files with 313 additions and 69 deletions.
diff --git a/src/components/TabGroup/TabGroup.module.css b/src/components/TabGroup/TabGroup.module.css
@@ -68,8 +68,7 @@
   list-style: none;
   display: flex;
   gap: 0.5rem;
-  border-bottom: calc(var(--eds-theme-border-width) * 1px) solid
-    var(--eds-theme-color-border-utility-default-low-emphasis);
+  border-bottom: calc(var(--eds-theme-border-width) * 1px) solid;
   font: var(--eds-theme-typography-tab-lg);
   line-height: 1.429;
 
@@ -137,7 +136,6 @@
   text-align: center;
 
   text-decoration: none;
-  color: var(--eds-theme-color-text-utility-interactive-primary);
 
   /* use ellipsis */
   overflow: hidden;
@@ -152,18 +150,9 @@
     box-shadow: inset 0 0 0 0.125rem var(--eds-theme-color-border-utility-focus);
   }
 
-
   @media screen and (prefers-reduced-motion) {
     transition: none;
   }
-
-  &:hover {
-    background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-hover);
-  }
-
-  &:active {
-    background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-active);
-  }
 }
 
 .tab__icon {
@@ -188,8 +177,6 @@
     bottom: 0;
     height: 0.25rem;
     width: 100%;
-
-    background-color: var(--eds-theme-color-text-utility-interactive-primary);
   }
 
   .tabs__item .tabs__link:focus-visible & {
@@ -207,3 +194,50 @@
   }
 }
 
+.tabs__list--variant-default {
+  border-color: var(--eds-theme-color-border-utility-default-low-emphasis);
+
+  .tabs__link {
+    color: var(--eds-theme-color-text-utility-interactive-primary);
+
+    &:focus-visible {
+      box-shadow: inset 0 0 0 0.125rem var(--eds-theme-color-border-utility-focus);
+    }
+
+    &:hover {
+      background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-hover);
+    }
+
+    &:active {
+      background-color: var(--eds-theme-color-background-utility-interactive-no-emphasis-active);
+    }
+  }
+
+  .tabs__item.eds-is-active .tab__highlight {
+    background-color: var(--eds-theme-color-text-utility-interactive-primary);
+  }
+}
+
+.tabs__list--variant-inverse {
+  border-color: var(--eds-theme-color-border-utility-default-low-emphasis);
+
+  .tabs__link {
+    color: var(--eds-theme-color-text-utility-inverse);
+
+    &:focus-visible {
+      box-shadow: inset 0 0 0 0.125rem var(--eds-theme-color-border-utility-inverse);
+    }
+
+    &:hover {
+      background-color: var(--eds-theme-color-background-utility-inverse-no-emphasis-hover);
+    }
+
+    &:active {
+      background-color: var(--eds-theme-color-background-utility-inverse-no-emphasis-active);
+    }
+  }
+
+  .tabs__item.eds-is-active .tab__highlight {
+    background-color: var(--eds-theme-color-background-utility-inverse-high-emphasis);
+  }
+}
diff --git a/src/components/TabGroup/TabGroup.stories.tsx b/src/components/TabGroup/TabGroup.stories.tsx
@@ -96,6 +96,84 @@ export const Default: StoryObj<Args> = {
   },
 };
 
+/**
+ * TabGroups have an inverted variant, for use on dark backgrounds. Depending on how the background is applied, you can use
+ * text color tokens to style the individual tabs in the group.
+ */
+export const Inverted: StoryObj<Args> = {
+  args: {
+    variant: 'inverse',
+    children: (
+      <>
+        <TabGroup.Tab title="Tab Title 1">
+          <div className="max-w-xl text-utility-inverse">
+            <Heading as="h3" className="mb-6">
+              Tab 1
+            </Heading>
+            <Text>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex{' '}
+            </Text>
+          </div>
+        </TabGroup.Tab>
+
+        <TabGroup.Tab title="Tab Title 2">
+          <div className="max-w-xl text-utility-inverse">
+            <Heading as="h3" className="mb-6">
+              Tab 2
+            </Heading>
+            <Text>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex{' '}
+            </Text>
+          </div>
+        </TabGroup.Tab>
+
+        <TabGroup.Tab title="Tab Title 3">
+          <div className="max-w-xl text-utility-inverse">
+            <Heading as="h3" className="mb-6">
+              Tab 3
+            </Heading>
+            <Text>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex{' '}
+            </Text>
+          </div>
+        </TabGroup.Tab>
+
+        <TabGroup.Tab title="Tab Title 4">
+          <div className="max-w-xl text-utility-inverse">
+            <Heading as="h3" className="mb-6">
+              Tab 4
+            </Heading>
+            <Text>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex{' '}
+            </Text>
+          </div>
+        </TabGroup.Tab>
+      </>
+    ),
+  },
+  // TODO: find a cleaner way to decorate with unavailable tokens using parameters:backgounds:
+  decorators: [
+    (Story) => (
+      <div className="bg-[var(--eds-color-blue-850)] p-1">{Story()}</div>
+    ),
+  ],
+  parameters: {
+    ...Default.parameters,
+  },
+};
+
 export const Centered: StoryObj<Args> = {
   args: {
     align: 'center',

diff --git a/src/components/TabGroup/TabGroup.tsx b/src/components/TabGroup/TabGroup.tsx
@@ -71,6 +71,12 @@ export interface TabGroupProps {
    * **Default is `"auto"`**.
    */
   tabWidth?: 'auto' | 'full';
+  /**
+   * Controls whether we are using the default or inverted pallet for this component
+   *
+   * **Default is `"default"`**.
+   */
+  variant?: 'default' | 'inverse';
 }
 
 export interface TabProps {
@@ -138,6 +144,7 @@ export const TabGroup = ({
   isSticky = false,
   onChange,
   tabWidth = 'auto',
+  variant = 'default',
   ...other
 }: TabGroupProps) => {
   const activeTabPanelId = useId();
@@ -287,6 +294,7 @@ export const TabGroup = ({
             styles['tabs__list'],
             hasDivider && styles['tabs--has-divider'],
             align && styles[`tabs__list--align-${align}`],
+            variant && styles[`tabs__list--variant-${variant}`],
           )}
           role="tablist"
         >