Add a loading button

.changeset/config.json

@@ -7,5 +7,8 @@
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
   "ignore": [],
-  "privatePackages": false
+  "privatePackages": false,
+  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
+    "onlyUpdatePeerDependentsWhenOutOfRange": true
+  }
 }

.changeset/fresh-brooms-explain.md

@@ -0,0 +1,9 @@
+---
+"@salt-ds/core": minor
+---
+
+Added support for multiple themes to be passed to `SaltProvider`, e.g.,
+
+```
+<SaltProvider theme="theme-1 theme-2">
+```

.changeset/hip-mirrors-attend.md

@@ -0,0 +1,11 @@
+---
+"@salt-ds/lab": minor
+---
+
+Updated styling of date picker and calendar
+
+- Corner radius support for date picker panel in theme next
+- Corner radius support for calendar selected days in theme next
+- Use accent color for today indicator and highlight color in calendar
+
+Closes #3530.

.changeset/unlucky-cats-add.md

@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": patch
+---
+
+Fixed `Tooltip` not having correct height.

.github/workflows/build-storybook.yml

@@ -5,6 +5,11 @@ on:
       - main
   pull_request:
     types: [opened, synchronize, reopened, ready_for_review]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   build-storybook:
     runs-on: ubuntu-latest

.github/workflows/chromatic.yml

@@ -8,6 +8,7 @@ on:
 
 jobs:
   chromatic-deployment:
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -60,7 +61,7 @@ jobs:
           run-id: ${{ github.event.workflow_run.id }}
       - name: Publish to Chromatic
         if: ${{ steps.chromatic_branch.outputs.draft != 'true' }}
-        uses: chromaui/action@v11
+        uses: chromaui/action@v11.3.5
         # Chromatic GitHub Action options
         with:
           # 👇 Chromatic projectToken, refer to the manage page to obtain it.

.github/workflows/publish-storybook.yml

@@ -8,6 +8,7 @@ on:
 
 jobs:
   deploy:
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
     runs-on: ubuntu-latest
 
     permissions:

.github/workflows/release.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+      - release-ag-grid-theme-v1
 
 permissions:
   contents: write

.gitignore

@@ -45,4 +45,5 @@ yarn-error.log*
 
 # Autogenerated CSS
 /docs/css/salt-core.css
-/docs/css/salt-lab.css
+/docs/css/salt-lab.css
+/docs/css/salt-countries.css

.storybook/manager.ts

@@ -1,6 +1,16 @@
-import { addons } from "@storybook/manager-api";
+import { addons, types } from "@storybook/manager-api";
 import saltTheme from "./SaltTheme";
+import { ThemeNextToolbar } from "./toolbar/ThemeNextToolbar";
 
 addons.setConfig({
   theme: saltTheme,
 });
+
+addons.register("theme-next-addon", () => {
+  addons.add("theme-next-addon/toolbar", {
+    title: "Theme next toolbar",
+    //👇 Sets the type of UI element in Storybook
+    type: types.TOOL,
+    render: ThemeNextToolbar,
+  });
+});

.storybook/preview.tsx

@@ -22,10 +22,12 @@ import { withResponsiveWrapper } from "docs/decorators/withResponsiveWrapper";
 import { WithTextSpacingWrapper } from "docs/decorators/withTextSpacingWrapper";
 import { withScaffold } from "docs/decorators/withScaffold";
 import { withDateMock } from "docs/decorators/withDateMock";
-import { SaltProvider } from "@salt-ds/core";
+import { SaltProvider, UNSTABLE_SaltProviderNext } from "@salt-ds/core";
 import { DocsContainer } from "@storybook/addon-docs";
 import { initialize, mswLoader } from "msw-storybook-addon";
 
+import { globalOptions as themeNextGlobals } from "./toolbar/ThemeNextToolbar";
+
 const densities = ["touch", "low", "medium", "high"];
 const DEFAULT_DENSITY = "medium";
 const DEFAULT_MODE = "light";
@@ -107,47 +109,7 @@ export const globalTypes: GlobalTypes = {
       title: "Component Style Injection",
     },
   },
-  themeNext: {
-    name: "Experimental theme next",
-    description: "Turn on/off theme next",
-    defaultValue: "disable",
-    toolbar: {
-      icon: "beaker",
-      items: ["disable", "enable"],
-      title: "Theme Next",
-    },
-  },
-  corner: {
-    name: "Experimental corner",
-    description: "Switch corner to sharp / rounded",
-    defaultValue: "sharp",
-    // if: { global: "themeNext", eq: "enable" }, // todo: why if doesn't work?
-    toolbar: {
-      icon: "beaker",
-      items: ["sharp", "rounded"],
-      title: "Corner",
-    },
-  },
-  headingFont: {
-    name: "Experimental heading font",
-    description: "Switch heading font to open sans / amplitude",
-    defaultValue: "Open Sans",
-    toolbar: {
-      icon: "beaker",
-      items: ["Open Sans", "Amplitude"],
-      title: "Heading font",
-    },
-  },
-  accent: {
-    name: "Experimental accent",
-    description: "Switch accent to blue / teal",
-    defaultValue: "blue",
-    toolbar: {
-      icon: "beaker",
-      items: ["blue", "teal"],
-      title: "Accent",
-    },
-  },
+  ...themeNextGlobals,
 };
 
 export const argTypes: ArgTypes = {
@@ -185,20 +147,29 @@ export const parameters: Parameters = {
       children,
       context,
       ...rest
-    }: ComponentProps<typeof DocsContainer>) => (
-      <DocsContainer context={context} {...rest}>
-        <SaltProvider
-          /* @ts-ignore Waiting for https://github.com/storybookjs/storybook/issues/12982 */
-          mode={context.store.globals.globals?.mode}
-          enableStyleInjection={
+    }: ComponentProps<typeof DocsContainer>) => {
+      const ChosenProvider =
+        /* @ts-ignore Waiting for https://github.com/storybookjs/storybook/issues/12982 */
+        context.store.globals.globals?.themeNext === "enable"
+          ? UNSTABLE_SaltProviderNext
+          : SaltProvider;
+      return (
+        <DocsContainer context={context} {...rest}>
+          <ChosenProvider
             /* @ts-ignore Waiting for https://github.com/storybookjs/storybook/issues/12982 */
-            context.store.globals.globals?.styleInjection === "enable"
-          }
-        >
-          {children}
-        </SaltProvider>
-      </DocsContainer>
-    ),
+            mode={context.store.globals.globals?.mode}
+            enableStyleInjection={
+              /* @ts-ignore Waiting for https://github.com/storybookjs/storybook/issues/12982 */
+              context.store.globals.globals?.styleInjection === "enable"
+            }
+            /* @ts-ignore Waiting for https://github.com/storybookjs/storybook/issues/12982 */
+            accent={context.store.globals.globals?.accent}
+          >
+            {children}
+          </ChosenProvider>
+        </DocsContainer>
+      );
+    },
   },
   // disables snapshotting on a global level
   chromatic: { disableSnapshot: true },

.storybook/toolbar/ThemeNextToolbar.css

@@ -0,0 +1,9 @@
+/* Custom Toolbar */
+.theme-next-toolbar-group-wrapper {
+  cursor: not-allowed;
+}
+
+.theme-next-toolbar-group-wrapper > span > span {
+  font-weight: bold;
+  color: darkgray;
+}

.storybook/toolbar/ThemeNextToolbar.tsx

@@ -0,0 +1,120 @@
+import type { TooltipLinkListLink } from "@storybook/components";
+import {
+  IconButton,
+  Separator,
+  TooltipLinkList,
+  WithTooltip,
+} from "@storybook/components";
+import { BeakerIcon, CheckIcon } from "@storybook/icons";
+import { useGlobals } from "@storybook/manager-api";
+import { clsx } from "clsx";
+import React, { AnchorHTMLAttributes } from "react";
+
+import "./ThemeNextToolbar.css";
+
+const description = "Theme next controls";
+
+const camelCaseToWords = (s: string) => {
+  const result = s.replace(/([A-Z])/g, " $1");
+  return result.charAt(0).toUpperCase() + result.slice(1);
+};
+
+export const globalOptions: Record<
+  string,
+  { name: string; description: string; defaultValue: string; items: string[] }
+> = {
+  themeNext: {
+    name: "Experimental theme next",
+    description: "Turn on/off theme next",
+    defaultValue: "disable",
+    items: ["enable", "disable"],
+  },
+  corner: {
+    name: "Experimental corner",
+    description: "Switch corner to sharp / rounded",
+    defaultValue: "sharp",
+    items: ["sharp", "rounded"],
+  },
+  headingFont: {
+    name: "Experimental heading font",
+    description: "Switch heading font to open sans / amplitude",
+    defaultValue: "Open Sans",
+    items: ["Open Sans", "Amplitude"],
+  },
+  accent: {
+    name: "Experimental accent",
+    description: "Switch accent to blue / teal",
+    defaultValue: "blue",
+    items: ["blue", "teal"],
+  },
+  actionFont: {
+    name: "Experimental action font",
+    description: "Switch action font to open sans / amplitude",
+    defaultValue: "Open Sans",
+    items: ["Open Sans", "Amplitude"],
+  },
+};
+
+const GroupWrapper = ({
+  className,
+  children,
+}: AnchorHTMLAttributes<HTMLAnchorElement>) => {
+  return (
+    <div
+      className={clsx(className, "theme-next-toolbar-group-wrapper")}
+      children={children}
+    />
+  );
+};
+
+export const ThemeNextToolbar = ({ active }: { active?: boolean }) => {
+  const [globals, updateGlobals] = useGlobals();
+
+  const items: TooltipLinkListLink[] = Object.keys(globalOptions).flatMap(
+    (globalKey) => {
+      return [
+        {
+          id: `theme-next-${globalKey}-header`,
+          title: camelCaseToWords(globalKey),
+          LinkWrapper: GroupWrapper, // Custom wrapper to render group
+          href: "#", // Without href, `LinkWrapper` will not work
+        },
+        ...globalOptions[globalKey].items.map((value) => {
+          const disabled =
+            globalKey === "themeNext"
+              ? false
+              : globals["themeNext"] !== "enable";
+          const active = globals[globalKey] === value;
+
+          return {
+            id: `theme-next-${globalKey}-${value}`,
+            right: active ? (
+              <CheckIcon style={{ fill: "inherit" }} />
+            ) : undefined,
+            active,
+            title: camelCaseToWords(value),
+            onClick: () => {
+              !disabled && updateGlobals({ [globalKey]: value });
+            },
+            disabled,
+          };
+        }),
+      ];
+    }
+  );
+
+  return (
+    <>
+      <Separator />
+      <WithTooltip
+        tooltip={() => <TooltipLinkList links={items} />}
+        trigger="click"
+        closeOnOutsideClick
+      >
+        <IconButton title={description} active={active}>
+          <BeakerIcon /> Theme Next
+        </IconButton>
+      </WithTooltip>
+    </>
+  );
+};