From fdaff9a03b6d07577f6848936a98c970dc3fc970 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Thu, 4 Jul 2024 15:38:25 +0100 Subject: [PATCH] Use SaltProviderNext --- .storybook/preview.tsx | 4 +-- docs/components/QAContainer.tsx | 10 +++---- docs/decorators/withTheme.tsx | 5 ++-- .../ag-grid-theme/src/examples/HDCompact.tsx | 8 ++---- .../__e2e__/salt-provider/SaltProvider.cy.tsx | 26 +++++++++---------- .../__e2e__/utils/useFloatingUI.cy.tsx | 14 +++++----- .../core/src/salt-provider/SaltProvider.tsx | 8 +++--- .../src/utils/useFloatingUI/useFloatingUI.tsx | 10 ++----- .../salt-provider/salt-provider-next.mdx | 12 ++++----- 9 files changed, 41 insertions(+), 56 deletions(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index db85e47e509..70d11b1402e 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -22,7 +22,7 @@ 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, UNSTABLE_SaltProviderNext } from "@salt-ds/core"; +import { SaltProvider, SaltProviderNext } from "@salt-ds/core"; import { DocsContainer } from "@storybook/addon-docs"; import { initialize, mswLoader } from "msw-storybook-addon"; @@ -151,7 +151,7 @@ export const parameters: Parameters = { const ChosenProvider = /* @ts-ignore Waiting for https://github.com/storybookjs/storybook/issues/12982 */ context.store.globals.globals?.themeNext === "enable" - ? UNSTABLE_SaltProviderNext + ? SaltProviderNext : SaltProvider; return ( diff --git a/docs/components/QAContainer.tsx b/docs/components/QAContainer.tsx index 03698ed105a..50b276ba131 100644 --- a/docs/components/QAContainer.tsx +++ b/docs/components/QAContainer.tsx @@ -2,7 +2,7 @@ import { makePrefixer, Mode, SaltProvider, - UNSTABLE_SaltProviderNext, + SaltProviderNext, useTheme, } from "@salt-ds/core"; import { clsx } from "clsx"; @@ -60,9 +60,7 @@ const DensityBlock = ({ mode: Mode; }) => { const { themeNext } = useTheme(); - const ChosenSaltProvider = themeNext - ? UNSTABLE_SaltProviderNext - : SaltProvider; + const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider; return ( @@ -99,9 +97,7 @@ export const QAContainer = ({ } as CSSProperties; const { themeNext } = useTheme(); - const ChosenSaltProvider = themeNext - ? UNSTABLE_SaltProviderNext - : SaltProvider; + const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider; return (
{ actionFont, } = context.globals; - const Provider = - themeNext === "enable" ? UNSTABLE_SaltProviderNext : SaltProvider; + const Provider = themeNext === "enable" ? SaltProviderNext : SaltProvider; if (mode === "side-by-side" || mode === "stacked") { const isStacked = mode === "stacked"; diff --git a/packages/ag-grid-theme/src/examples/HDCompact.tsx b/packages/ag-grid-theme/src/examples/HDCompact.tsx index f22d495de3a..3a209649adf 100644 --- a/packages/ag-grid-theme/src/examples/HDCompact.tsx +++ b/packages/ag-grid-theme/src/examples/HDCompact.tsx @@ -1,8 +1,4 @@ -import { - SaltProvider, - UNSTABLE_SaltProviderNext, - useTheme, -} from "@salt-ds/core"; +import { SaltProvider, SaltProviderNext, useTheme } from "@salt-ds/core"; import { AgGridReact, AgGridReactProps } from "ag-grid-react"; import dataGridExampleColumns from "../dependencies/dataGridExampleColumns"; import dataGridExampleData from "../dependencies/dataGridExampleData"; @@ -27,7 +23,7 @@ const HDCompact = (props: AgGridReactProps) => { density: "high", }); - const Provider = themeNext ? UNSTABLE_SaltProviderNext : SaltProvider; + const Provider = themeNext ? SaltProviderNext : SaltProvider; return ( diff --git a/packages/core/src/__tests__/__e2e__/salt-provider/SaltProvider.cy.tsx b/packages/core/src/__tests__/__e2e__/salt-provider/SaltProvider.cy.tsx index 5840ea38e81..23695949e8a 100644 --- a/packages/core/src/__tests__/__e2e__/salt-provider/SaltProvider.cy.tsx +++ b/packages/core/src/__tests__/__e2e__/salt-provider/SaltProvider.cy.tsx @@ -4,7 +4,7 @@ import { useAriaAnnouncer, useDensity, useTheme, - UNSTABLE_SaltProviderNext, + SaltProviderNext, } from "@salt-ds/core"; import { mount } from "cypress/react18"; import { WindowProvider } from "@salt-ds/window"; @@ -322,9 +322,9 @@ describe("Given a SaltProviderNext", () => { describe("with no props set", () => { it("should apply default theme attributes to the html element", () => { mount( - + - + ); cy.get("div.salt-provider").should("have.length", 0); @@ -342,9 +342,9 @@ describe("Given a SaltProviderNext", () => { }); it("should read correct default values from provider and add an AriaAnnouncer", () => { mount( - + - + ); cy.get("#test-1") .should("exist") @@ -403,7 +403,7 @@ describe("Given a SaltProviderNext", () => { describe("when nested", () => { it("should inherit values not passed as props", () => { mount( - { actionFont="Amplitude" > - + - - + + ); cy.get("html.salt-theme-next").should("have.length", 1); @@ -451,7 +451,7 @@ describe("Given a SaltProviderNext", () => { }); it("should take different values set as props", () => { mount( - { actionFont="Amplitude" > - { actionFont="Open Sans" > - - + + ); cy.get("html.salt-theme-next").should("have.length", 1); diff --git a/packages/core/src/__tests__/__e2e__/utils/useFloatingUI.cy.tsx b/packages/core/src/__tests__/__e2e__/utils/useFloatingUI.cy.tsx index 45599cf5850..392a4fd3f0c 100644 --- a/packages/core/src/__tests__/__e2e__/utils/useFloatingUI.cy.tsx +++ b/packages/core/src/__tests__/__e2e__/utils/useFloatingUI.cy.tsx @@ -2,7 +2,7 @@ import { mount } from "cypress/react18"; import { useFloatingComponent, SaltProvider, - UNSTABLE_SaltProviderNext, + SaltProviderNext, useFloatingUI, } from "@salt-ds/core"; @@ -45,11 +45,11 @@ describe("Use useFloatingComponent", () => { cy.get("html.salt-theme").should("have.length", 1); cy.get("div.salt-provider.salt-theme").should("have.length", 1); }); - it("should render a nested UNSTABLE_SaltProviderNext when used within another", () => { + it("should render a nested SaltProviderNext when used within another", () => { mount( - + - + ); cy.get("html.salt-theme.salt-theme-next").should("have.length", 1); @@ -70,11 +70,11 @@ describe("Use useFloatingComponent", () => { cy.get("html.salt-theme").should("have.length", 1); cy.get("div.salt-provider.salt-theme").should("have.length", 1); }); - it("should render a nested UNSTABLE_SaltProviderNext when used within another", () => { + it("should render a nested SaltProviderNext when used within another", () => { mount( - + - + ); cy.get("html.salt-theme.salt-theme-next").should("have.length", 1); diff --git a/packages/core/src/salt-provider/SaltProvider.tsx b/packages/core/src/salt-provider/SaltProvider.tsx index 5e2fe4c1061..55a1eb9e6b5 100644 --- a/packages/core/src/salt-provider/SaltProvider.tsx +++ b/packages/core/src/salt-provider/SaltProvider.tsx @@ -36,7 +36,7 @@ import { export const DEFAULT_DENSITY = "medium"; const DEFAULT_THEME_NAME = "salt-theme"; -const UNSTABLE_ADDITIONAL_THEME_NAME = "salt-theme-next"; +const DEFAULT_THEME_NAME_NEXT = "salt-theme-next"; const DEFAULT_MODE = "light"; const DEFAULT_CORNER: Corner = "sharp"; @@ -91,8 +91,8 @@ const getThemeNames = ( ): ThemeName => { if (themeNext) { return themeName === DEFAULT_THEME_NAME - ? clsx(DEFAULT_THEME_NAME, UNSTABLE_ADDITIONAL_THEME_NAME) - : clsx(DEFAULT_THEME_NAME, UNSTABLE_ADDITIONAL_THEME_NAME, themeName); + ? clsx(DEFAULT_THEME_NAME, DEFAULT_THEME_NAME_NEXT) + : clsx(DEFAULT_THEME_NAME, DEFAULT_THEME_NAME_NEXT, themeName); } else { return themeName === DEFAULT_THEME_NAME ? themeName @@ -246,7 +246,7 @@ function InternalSaltProvider({ accent: accentProp, actionFont: actionFontProp, }: Omit< - SaltProviderProps & ThemeNextProps & UNSTABLE_SaltProviderNextProps, + SaltProviderProps & ThemeNextProps & SaltProviderNextProps, "enableStyleInjection" >) { const inheritedDensity = useContext(DensityContext); diff --git a/packages/core/src/utils/useFloatingUI/useFloatingUI.tsx b/packages/core/src/utils/useFloatingUI/useFloatingUI.tsx index a64cc45b6f6..fea7da38950 100644 --- a/packages/core/src/utils/useFloatingUI/useFloatingUI.tsx +++ b/packages/core/src/utils/useFloatingUI/useFloatingUI.tsx @@ -21,11 +21,7 @@ import { useContext, useMemo, } from "react"; -import { - SaltProvider, - UNSTABLE_SaltProviderNext, - useTheme, -} from "../../salt-provider"; +import { SaltProvider, SaltProviderNext, useTheme } from "../../salt-provider"; export interface FloatingComponentProps extends ComponentPropsWithoutRef<"div"> { @@ -75,9 +71,7 @@ const DefaultFloatingComponent = forwardRef< const { themeNext } = useTheme(); - const ChosenSaltProvider = themeNext - ? UNSTABLE_SaltProviderNext - : SaltProvider; + const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider; if (focusManagerProps && open) { return ( diff --git a/packages/core/stories/salt-provider/salt-provider-next.mdx b/packages/core/stories/salt-provider/salt-provider-next.mdx index 4da6e717910..bce9daf23c2 100644 --- a/packages/core/stories/salt-provider/salt-provider-next.mdx +++ b/packages/core/stories/salt-provider/salt-provider-next.mdx @@ -24,11 +24,11 @@ density). Additional props will be made available to switch between different look. To use the new Salt Provider, you need to swap any existing `SaltProvider` to -use the new `UNSTABLE_SaltProviderNext`, and also import a new theme CSS. +use the new `SaltProviderNext`, and also import a new theme CSS. ```js static // Swap out existing SaltProvider -import { UNSTABLE_SaltProviderNext } from "@salt-ds/core"; +import { SaltProviderNext } from "@salt-ds/core"; ``` ```js static @@ -93,7 +93,7 @@ either blue or teal color palette, such as CTA button, checkbox, radio button, etc. ```tsx - + ``` Under the hood, a new `data-accent` attribute is added alongside other style option @@ -125,7 +125,7 @@ The `corner` prop can be used to toggle between `"sharp"` (default) and `"rounded"`. ```tsx - + ``` ### Token Structure @@ -200,7 +200,7 @@ A new `headingFont` prop is added to switch display and heading font family between Open Sans and Amplitude. ``` - + ``` When Amplitude is used, default heading font weight is set to medium (instead @@ -231,7 +231,7 @@ A new `actionFont` prop is added to switch action font family between Open Sans and Amplitude, which impacts Button, Toggle Button and Segmented Button Group. ``` - + ``` Like `headingFont` option above, you'll need the same font declaration for Amplitude