diff --git a/package.json b/package.json
index 44f09a8be..555c7b0e8 100644
--- 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
index 884381b56..d2dfcc971 100644
--- 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`] = `
+
+
+ icon-product-platform
+
+
+
icon-product-pubsub-mono
@@ -2548,6 +2571,21 @@ exports[`Components/Icon ProductIcons smoke-test 1`] = `
+
+
+ icon-product-platform
+
+
+
icon-product-pubsub-mono
diff --git a/src/core/TabMenu.tsx b/src/core/TabMenu.tsx
index e75937c8f..f515eb3da 100644
--- 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 = ({
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(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 = ({
return (
= ({
>
{contents.map((content, index) => (
-
+
{content}
))}
diff --git a/src/core/icons/icon-product-platform.svg b/src/core/icons/icon-product-platform.svg
new file mode 100644
index 000000000..67ccc1783
--- /dev/null
+++ b/src/core/icons/icon-product-platform.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/core/styles/buttons.css b/src/core/styles/buttons.css
index d5177ae5f..873f98cb8 100644
--- 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 {