Merge pull request #581 from ably/tab-menu-default-animated-fix

[WEB-4100] TabMenu animation delay and root/contents class modifiers
ably · Dec 17, 2024 · ec3d114 · ec3d114
2 parents 9cdcbf7 + d96b56b
commit ec3d114
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "15.1.8",
+  "version": "15.1.9",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

diff --git a/src/core/Icon/__snapshots__/Icon.stories.tsx.snap b/src/core/Icon/__snapshots__/Icon.stories.tsx.snap
@@ -1526,6 +1526,29 @@ exports[`Components/Icon EncapsulatedIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
+      icon-product-platform
+    </code>
+    <div class="border inline-flex flex-0">
+      <div class="flex pi-checkered-bg">
+        <div class="p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b from-neutral-400 dark:from-neutral-900"
+             style="width: 40px; height: 40px;"
+        >
+          <div class="flex items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-1100"
+               style="height: 38px;"
+          >
+            <svg class
+                 style="width: 28px; height: 28px;"
+            >
+              <use xlink:href="#sprite-icon-product-platform">
+              </use>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
     <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-product-pubsub-mono
@@ -2548,6 +2571,21 @@ exports[`Components/Icon ProductIcons smoke-test 1`] = `
       </div>
     </div>
   </div>
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
+    <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
+      icon-product-platform
+    </code>
+    <div class="border inline-flex flex-0">
+      <div class="flex pi-checkered-bg">
+        <svg class="text-cool-black hover:text-active-orange"
+             style="width: 1.5rem; height: 1.5rem;"
+        >
+          <use xlink:href="#sprite-icon-product-platform">
+          </use>
+        </svg>
+      </div>
+    </div>
+  </div>
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12 rounded-lg">
     <code class="ui-text-code text-neutral-1300 dark:text-neutral-000 mb-8 block">
       icon-product-pubsub-mono

diff --git a/src/core/TabMenu.tsx b/src/core/TabMenu.tsx
@@ -27,6 +27,16 @@ export type TabMenuProps = {
    */
   tabClassName?: string;
 
+  /**
+   * An optional class name to apply to the Tabs.Root element.
+   */
+  rootClassName?: string;
+
+  /**
+   * An optional class name to apply to the Tabs.Content element.
+   */
+  contentClassName?: string;
+
   /**
    * Optional configuration options for the TabMenu.
    */
@@ -58,24 +68,37 @@ export type TabMenuProps = {
   };
 };
 
+const DEFAULT_TAILWIND_ANIMATION_DURATION = 150;
+
 const TabMenu: React.FC<TabMenuProps> = ({
   tabs = [],
   contents = [],
   tabOnClick,
   tabClassName,
+  rootClassName,
+  contentClassName,
   options,
 }) => {
   const {
     defaultTabIndex = 0,
     underline = true,
-    animated = true,
+    animated: animatedOption = true,
     flexibleTabWidth = false,
     flexibleTabHeight = false,
   } = options ?? {};
 
   const listRef = React.useRef<HTMLDivElement>(null);
+  const [animated, setAnimated] = React.useState(false);
   const [highlight, setHighlight] = React.useState({ offset: 0, width: 0 });
 
+  useEffect(() => {
+    if (animatedOption && highlight.width > 0) {
+      setTimeout(() => {
+        setAnimated(true);
+      }, DEFAULT_TAILWIND_ANIMATION_DURATION);
+    }
+  }, [animatedOption, highlight.width]);
+
   useEffect(() => {
     const handleResize = throttle(() => {
       const activeTabElement =
@@ -118,7 +141,7 @@ const TabMenu: React.FC<TabMenuProps> = ({
   return (
     <Tabs.Root
       defaultValue={`tab-${defaultTabIndex}`}
-      className={cn({ "h-full": flexibleTabHeight })}
+      className={cn({ "h-full": flexibleTabHeight }, rootClassName)}
     >
       <Tabs.List
         ref={listRef}
@@ -159,7 +182,11 @@ const TabMenu: React.FC<TabMenuProps> = ({
         ></div>
       </Tabs.List>
       {contents.map((content, index) => (
-        <Tabs.Content key={`tab-${index}`} value={`tab-${index}`}>
+        <Tabs.Content
+          key={`tab-${index}`}
+          value={`tab-${index}`}
+          className={contentClassName}
+        >
           {content}
         </Tabs.Content>
       ))}

diff --git a/src/core/icons/icon-product-platform.svg b/src/core/icons/icon-product-platform.svg
diff --git a/src/core/styles/buttons.css b/src/core/styles/buttons.css
@@ -28,19 +28,19 @@
   }
 
   .ui-button-priority-base {
-    @apply bg-gradient-priority-button bg-[size:200%] bg-left hover:bg-right active:bg-right transition-[background-position] disabled:bg-none ui-button-disabled-base;
+    @apply bg-gradient-priority-button bg-[size:200%] bg-left hover:bg-right active:bg-right text-neutral-000 hover:text-neutral-000 active:text-neutral-000 transition-[background-position] disabled:bg-none ui-button-disabled-base;
   }
 
   .ui-theme-dark .ui-button-priority-base {
-    @apply bg-gradient-priority-button bg-[size:200%] bg-left hover:bg-right active:bg-right transition-[background-position] disabled:bg-none ui-button-disabled-base-dark;
+    @apply bg-gradient-priority-button bg-[size:200%] bg-left hover:bg-right active:bg-right text-neutral-000 hover:text-neutral-000 active:text-neutral-000 transition-[background-position] disabled:bg-none ui-button-disabled-base-dark;
   }
 
   .ui-button-primary-base {
-    @apply bg-neutral-1300 text-neutral-000 hover:bg-neutral-1100 active:bg-neutral-1200 ui-button-disabled-base;
+    @apply bg-neutral-1300 text-neutral-000 hover:bg-neutral-1100 hover:text-neutral-200 active:bg-neutral-1200 active:text-neutral-100 ui-button-disabled-base;
   }
 
   .ui-theme-dark .ui-button-primary-base {
-    @apply bg-neutral-000 text-neutral-1300 hover:bg-neutral-200 active:bg-neutral-100 ui-button-disabled-base-dark;
+    @apply bg-neutral-000 text-neutral-1300 hover:bg-neutral-200 hover:text-neutral-1100 active:bg-neutral-100 active:text-neutral-1200 ui-button-disabled-base-dark;
   }
 
   .ui-button-secondary-base {