From 9abf267432bc47f4df16bdd7d0a1039d3e45c42d Mon Sep 17 00:00:00 2001 From: Zhihao Cui <5257855+origami-z@users.noreply.github.com> Date: Tue, 9 Jul 2024 15:49:39 +0100 Subject: [PATCH] Make `SaltProviderNext` stable (#3714) --- .changeset/ten-spoons-drive.md | 7 ++ .storybook/preview.tsx | 22 ++-- docs/components/QAContainer.tsx | 10 +- docs/decorators/withTheme.tsx | 5 +- .../ag-grid-theme/src/examples/HDCompact.tsx | 8 +- .../__e2e__/salt-provider/SaltProvider.cy.tsx | 72 +++++++++---- .../__e2e__/utils/useFloatingUI.cy.tsx | 14 +-- .../core/src/salt-provider/SaltProvider.tsx | 101 +++++++++++------- packages/core/src/theme/Accent.ts | 8 +- packages/core/src/theme/ActionFont.ts | 8 +- packages/core/src/theme/Corner.ts | 8 +- packages/core/src/theme/HeadingFont.ts | 8 +- .../src/utils/useFloatingUI/useFloatingUI.tsx | 10 +- .../core/stories/avatar/avatar.qa.stories.tsx | 15 ++- .../core/stories/badge/badge.qa.stories.tsx | 15 ++- .../core/stories/banner/banner.qa.stories.tsx | 17 ++- .../core/stories/button/button.qa.stories.tsx | 15 ++- .../core/stories/card/card.qa.stories.tsx | 15 ++- .../stories/checkbox/checkbox.qa.stories.tsx | 15 ++- .../combo-box/combo-box.qa.stories.tsx | 2 +- .../stories/dropdown/dropdown.qa.stories.tsx | 2 +- .../file-drop-zone.qa.stories.tsx | 15 ++- .../core/stories/input/input.qa.stories.tsx | 2 +- .../multiline-input.qa.stories.tsx | 2 +- .../core/stories/panel/panel.qa.stories.tsx | 15 ++- .../core/stories/pill/pill.qa.stories.tsx | 16 ++- .../salt-provider/salt-provider-next.mdx | 12 +-- .../segmented-button-group.qa.stories.tsx | 2 +- .../core/stories/switch/switch.qa.stories.tsx | 32 +++++- .../core/stories/text/text.qa.stories.tsx | 2 +- .../core/stories/toast/toast.qa.stories.tsx | 15 ++- .../toggle-button-group.qa.stories.tsx | 15 ++- .../toggle-button.qa.stories.tsx | 16 ++- .../stories/tooltip/tooltip.qa.stories.tsx | 15 ++- .../kitchen-sink/kitchen-sink.stories.tsx | 20 ++-- 35 files changed, 410 insertions(+), 146 deletions(-) create mode 100644 .changeset/ten-spoons-drive.md diff --git a/.changeset/ten-spoons-drive.md b/.changeset/ten-spoons-drive.md new file mode 100644 index 00000000000..e3133ac662f --- /dev/null +++ b/.changeset/ten-spoons-drive.md @@ -0,0 +1,7 @@ +--- +"@salt-ds/core": minor +--- + +Marked `SaltProviderNext` being stable. + +If you're using existing type or variable with `UNSTABLE_` prefix, they are now deprecated but will still work. diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index ff879249762..74e8d029941 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,22 +1,22 @@ -import type { ArgTypes, GlobalTypes, Parameters } from "@storybook/types"; -import "@salt-ds/theme/index.css"; -import "@salt-ds/theme/css/theme-next.css"; -import "@fontsource/open-sans/300.css"; import "@fontsource/open-sans/300-italic.css"; -import "@fontsource/open-sans/400.css"; +import "@fontsource/open-sans/300.css"; import "@fontsource/open-sans/400-italic.css"; -import "@fontsource/open-sans/500.css"; +import "@fontsource/open-sans/400.css"; import "@fontsource/open-sans/500-italic.css"; -import "@fontsource/open-sans/600.css"; +import "@fontsource/open-sans/500.css"; import "@fontsource/open-sans/600-italic.css"; -import "@fontsource/open-sans/700.css"; +import "@fontsource/open-sans/600.css"; import "@fontsource/open-sans/700-italic.css"; -import "@fontsource/open-sans/800.css"; +import "@fontsource/open-sans/700.css"; import "@fontsource/open-sans/800-italic.css"; +import "@fontsource/open-sans/800.css"; import "@fontsource/pt-mono"; +import "@salt-ds/theme/css/theme-next.css"; +import "@salt-ds/theme/index.css"; +import type { ArgTypes, GlobalTypes, Parameters } from "@storybook/types"; import "./styles.css"; -import { SaltProvider, UNSTABLE_SaltProviderNext } from "@salt-ds/core"; +import { SaltProvider, SaltProviderNext } from "@salt-ds/core"; import { DocsContainer } from "@storybook/addon-docs"; import { withDateMock } from "docs/decorators/withDateMock"; import { withResponsiveWrapper } from "docs/decorators/withResponsiveWrapper"; @@ -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 499b34e8439..1f4d45abebc 100644 --- a/docs/components/QAContainer.tsx +++ b/docs/components/QAContainer.tsx @@ -1,7 +1,7 @@ import { type Mode, SaltProvider, - UNSTABLE_SaltProviderNext, + SaltProviderNext, makePrefixer, useTheme, } from "@salt-ds/core"; @@ -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 f4d715ac132..40d8941a85f 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, type 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 7ceea0b5179..eb97fd5109c 100644 --- a/packages/core/src/__tests__/__e2e__/salt-provider/SaltProvider.cy.tsx +++ b/packages/core/src/__tests__/__e2e__/salt-provider/SaltProvider.cy.tsx @@ -1,6 +1,6 @@ import { SaltProvider, - UNSTABLE_SaltProviderNext, + SaltProviderNext, ownerWindow, useAriaAnnouncer, useDensity, @@ -22,9 +22,14 @@ const TestComponent = ({ const { theme, mode, + themeNext, + corner, + accent, + actionFont, + headingFont, + // Test backwards compatibilty using `UNSTABLE_` variables UNSTABLE_corner, UNSTABLE_accent, - themeNext, UNSTABLE_actionFont, UNSTABLE_headingFont, } = useTheme(); @@ -39,11 +44,16 @@ const TestComponent = ({ data-theme={theme} data-mode={mode} data-announcer={announcerPresent} - data-corner={UNSTABLE_corner} - data-accent={UNSTABLE_accent} - data-heading-font={UNSTABLE_headingFont} - data-action-font={UNSTABLE_actionFont} + data-corner={corner} + data-accent={accent} + data-heading-font={headingFont} + data-action-font={actionFont} data-themeNext={themeNext} + // Test backwards compatibilty using `UNSTABLE_` variables + data-unstable-corner={UNSTABLE_corner} + data-unstable-accent={UNSTABLE_accent} + data-unstable-heading-font={UNSTABLE_headingFont} + data-unstable-action-font={UNSTABLE_actionFont} /> ); }; @@ -312,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); @@ -332,20 +342,24 @@ describe("Given a SaltProviderNext", () => { }); it("should read correct default values from provider and add an AriaAnnouncer", () => { mount( - + - , + , ); cy.get("#test-1") .should("exist") .and("have.attr", "data-density", "medium") .and("have.attr", "data-mode", "light") .and("have.attr", "data-announcer", "true") + .and("have.attr", "data-themeNext", "true") .and("have.attr", "data-corner", "sharp") .and("have.attr", "data-accent", "blue") .and("have.attr", "data-heading-font", "Open Sans") .and("have.attr", "data-action-font", "Open Sans") - .and("have.attr", "data-themeNext", "true"); + .and("have.attr", "data-unstable-corner", "sharp") + .and("have.attr", "data-unstable-accent", "blue") + .and("have.attr", "data-unstable-heading-font", "Open Sans") + .and("have.attr", "data-unstable-action-font", "Open Sans"); cy.get("[aria-live]").should("exist"); }); }); @@ -353,7 +367,7 @@ describe("Given a SaltProviderNext", () => { describe("with props set", () => { it("should allow pass in multiple theme names", () => { mount( - { theme="custom-theme-1 custom-theme-2" > - , + , ); cy.get("html") @@ -389,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); @@ -415,6 +429,10 @@ describe("Given a SaltProviderNext", () => { .and("have.attr", "data-accent", "teal") .and("have.attr", "data-heading-font", "Amplitude") .and("have.attr", "data-action-font", "Amplitude") + .and("have.attr", "data-unstable-corner", "rounded") + .and("have.attr", "data-unstable-accent", "teal") + .and("have.attr", "data-unstable-heading-font", "Amplitude") + .and("have.attr", "data-unstable-action-font", "Amplitude") .and("have.attr", "data-announcer", "true"); cy.get("#test-2") @@ -425,11 +443,15 @@ describe("Given a SaltProviderNext", () => { .and("have.attr", "data-accent", "teal") .and("have.attr", "data-heading-font", "Amplitude") .and("have.attr", "data-action-font", "Amplitude") + .and("have.attr", "data-unstable-corner", "rounded") + .and("have.attr", "data-unstable-accent", "teal") + .and("have.attr", "data-unstable-heading-font", "Amplitude") + .and("have.attr", "data-unstable-action-font", "Amplitude") .and("have.attr", "data-announcer", "true"); }); it("should take different values set as props", () => { mount( - { actionFont="Amplitude" > - { actionFont="Open Sans" > - - , + + , ); cy.get("html.salt-theme-next").should("have.length", 1); @@ -461,6 +483,10 @@ describe("Given a SaltProviderNext", () => { .and("have.attr", "data-accent", "teal") .and("have.attr", "data-heading-font", "Amplitude") .and("have.attr", "data-action-font", "Amplitude") + .and("have.attr", "data-unstable-corner", "rounded") + .and("have.attr", "data-unstable-accent", "teal") + .and("have.attr", "data-unstable-heading-font", "Amplitude") + .and("have.attr", "data-unstable-action-font", "Amplitude") .and("have.attr", "data-announcer", "true"); cy.get("#test-2") @@ -471,6 +497,10 @@ describe("Given a SaltProviderNext", () => { .and("have.attr", "data-accent", "blue") .and("have.attr", "data-heading-font", "Open Sans") .and("have.attr", "data-action-font", "Open Sans") + .and("have.attr", "data-unstable-corner", "sharp") + .and("have.attr", "data-unstable-accent", "blue") + .and("have.attr", "data-unstable-heading-font", "Open Sans") + .and("have.attr", "data-unstable-action-font", "Open Sans") .and("have.attr", "data-announcer", "true"); }); }); diff --git a/packages/core/src/__tests__/__e2e__/utils/useFloatingUI.cy.tsx b/packages/core/src/__tests__/__e2e__/utils/useFloatingUI.cy.tsx index fb8446c8fd2..e2d89260d73 100644 --- a/packages/core/src/__tests__/__e2e__/utils/useFloatingUI.cy.tsx +++ b/packages/core/src/__tests__/__e2e__/utils/useFloatingUI.cy.tsx @@ -1,6 +1,6 @@ import { SaltProvider, - UNSTABLE_SaltProviderNext, + SaltProviderNext, useFloatingComponent, 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 73e7d43649e..21ca9313daa 100644 --- a/packages/core/src/salt-provider/SaltProvider.tsx +++ b/packages/core/src/salt-provider/SaltProvider.tsx @@ -1,11 +1,16 @@ +import { + StyleInjectionProvider, + useComponentCssInjection, +} from "@salt-ds/styles"; +import { type WindowContextType, useWindow } from "@salt-ds/window"; import { clsx } from "clsx"; import React, { createContext, + useContext, + useMemo, type HTMLAttributes, type ReactElement, type ReactNode, - useContext, - useMemo, } from "react"; import { AriaAnnouncerProvider } from "../aria-announcer"; import { @@ -14,40 +19,47 @@ import { DEFAULT_BREAKPOINTS, useMatchedBreakpoints, } from "../breakpoints"; -import type { Density, Mode, ThemeName, UNSTABLE_ActionFont } from "../theme"; +import type { + Accent, + ActionFont, + Corner, + Density, + HeadingFont, + Mode, + ThemeName, +} from "../theme"; import { useIsomorphicLayoutEffect } from "../utils"; import { ViewportProvider } from "../viewport"; - -import { - StyleInjectionProvider, - useComponentCssInjection, -} from "@salt-ds/styles"; -import { type WindowContextType, useWindow } from "@salt-ds/window"; -import type { UNSTABLE_Accent } from "../theme/Accent"; -import type { UNSTABLE_Corner } from "../theme/Corner"; -import type { UNSTABLE_HeadingFont } from "../theme/HeadingFont"; import saltProviderCss from "./SaltProvider.css"; 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: UNSTABLE_Corner = "sharp"; -const DEFAULT_HEADING_FONT: UNSTABLE_HeadingFont = "Open Sans"; -const DEFAULT_ACCENT: UNSTABLE_Accent = "blue"; -const DEFAULT_ACTION_FONT: UNSTABLE_ActionFont = "Open Sans"; +const DEFAULT_CORNER: Corner = "sharp"; +const DEFAULT_HEADING_FONT: HeadingFont = "Open Sans"; +const DEFAULT_ACCENT: Accent = "blue"; +const DEFAULT_ACTION_FONT: ActionFont = "Open Sans"; export interface ThemeContextProps { theme: ThemeName; mode: Mode; window?: WindowContextType; /** Only available when using SaltProviderNext. */ themeNext: boolean; - UNSTABLE_corner: UNSTABLE_Corner; - UNSTABLE_headingFont: UNSTABLE_HeadingFont; - UNSTABLE_accent: UNSTABLE_Accent; - UNSTABLE_actionFont: UNSTABLE_ActionFont; + corner: Corner; + /** @deprecated use `corner`*/ + UNSTABLE_corner: Corner; + headingFont: HeadingFont; + /** @deprecated use `headingFont` */ + UNSTABLE_headingFont: HeadingFont; + accent: Accent; + /** @deprecated use `accent` */ + UNSTABLE_accent: Accent; + actionFont: ActionFont; + /** @deprecated use `actionFont` */ + UNSTABLE_actionFont: ActionFont; } export const DensityContext = createContext(DEFAULT_DENSITY); @@ -56,9 +68,13 @@ export const ThemeContext = createContext({ theme: "", mode: DEFAULT_MODE, themeNext: false, + corner: DEFAULT_CORNER, UNSTABLE_corner: DEFAULT_CORNER, + headingFont: DEFAULT_HEADING_FONT, UNSTABLE_headingFont: DEFAULT_HEADING_FONT, + accent: DEFAULT_ACCENT, UNSTABLE_accent: DEFAULT_ACCENT, + actionFont: DEFAULT_ACTION_FONT, UNSTABLE_actionFont: DEFAULT_ACTION_FONT, }); @@ -74,8 +90,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); } return themeName === DEFAULT_THEME_NAME ? themeName @@ -104,7 +120,7 @@ const createThemedChildren = ({ mode: Mode; applyClassesTo?: TargetElement; } & ThemeNextProps & - UNSTABLE_SaltProviderNextAdditionalProps) => { + SaltProviderNextAdditionalProps) => { const themeNamesString = getThemeNames(themeName, themeNext); const themeNextProps = { "data-corner": corner, @@ -226,7 +242,7 @@ function InternalSaltProvider({ accent: accentProp, actionFont: actionFontProp, }: Omit< - SaltProviderProps & ThemeNextProps & UNSTABLE_SaltProviderNextProps, + SaltProviderProps & ThemeNextProps & SaltProviderNextProps, "enableStyleInjection" >) { const inheritedDensity = useContext(DensityContext); @@ -234,10 +250,10 @@ function InternalSaltProvider({ theme: inheritedTheme, mode: inheritedMode, window: inheritedWindow, - UNSTABLE_corner: inheritedCorner, - UNSTABLE_headingFont: inheritedHeadingFont, - UNSTABLE_accent: inheritedAccent, - UNSTABLE_actionFont: inheritedActionFont, + corner: inheritedCorner, + headingFont: inheritedHeadingFont, + accent: inheritedAccent, + actionFont: inheritedActionFont, } = useContext(ThemeContext); const isRootProvider = inheritedTheme === undefined || inheritedTheme === ""; @@ -269,6 +285,11 @@ function InternalSaltProvider({ mode, window: targetWindow, themeNext: Boolean(themeNext), + corner: corner, + headingFont: headingFont, + accent: accent, + actionFont: actionFont, + // Backward compatilibty UNSTABLE_corner: corner, UNSTABLE_headingFont: headingFont, UNSTABLE_accent: accent, @@ -385,20 +406,22 @@ export function SaltProvider({ ); } -interface UNSTABLE_SaltProviderNextAdditionalProps { - corner?: UNSTABLE_Corner; - headingFont?: UNSTABLE_HeadingFont; - accent?: UNSTABLE_Accent; - actionFont?: UNSTABLE_ActionFont; +interface SaltProviderNextAdditionalProps { + corner?: Corner; + headingFont?: HeadingFont; + accent?: Accent; + actionFont?: ActionFont; } -export type UNSTABLE_SaltProviderNextProps = SaltProviderProps & - UNSTABLE_SaltProviderNextAdditionalProps; +export type SaltProviderNextProps = SaltProviderProps & + SaltProviderNextAdditionalProps; +/** @deprecated use `SaltProviderNextProps` */ +export type UNSTABLE_SaltProviderNextProps = SaltProviderNextProps; -export function UNSTABLE_SaltProviderNext({ +export function SaltProviderNext({ enableStyleInjection, ...restProps -}: UNSTABLE_SaltProviderNextProps) { +}: SaltProviderNextProps) { return ( {/* Leveraging InternalSaltProvider being not exported, so we can pass more props than previously supported */} @@ -406,6 +429,8 @@ export function UNSTABLE_SaltProviderNext({ ); } +/** @deprecated use `SaltProviderNext` */ +export const UNSTABLE_SaltProviderNext = SaltProviderNext; export const useTheme = (): ThemeContextProps => { const { window, ...contextWithoutWindow } = useContext(ThemeContext); diff --git a/packages/core/src/theme/Accent.ts b/packages/core/src/theme/Accent.ts index 50a12136c6c..8bcb984458a 100644 --- a/packages/core/src/theme/Accent.ts +++ b/packages/core/src/theme/Accent.ts @@ -1,3 +1,7 @@ -export const UNSTABLE_AccentValues = ["blue", "teal"] as const; +export const AccentValues = ["blue", "teal"] as const; +/** @deprecated use `AccentValues` */ +export const UNSTABLE_AccentValues = AccentValues; -export type UNSTABLE_Accent = (typeof UNSTABLE_AccentValues)[number]; +export type Accent = (typeof AccentValues)[number]; +/** @deprecated use `Accent` */ +export type UNSTABLE_Accent = Accent; diff --git a/packages/core/src/theme/ActionFont.ts b/packages/core/src/theme/ActionFont.ts index 7fc5e11ab84..4119f52bded 100644 --- a/packages/core/src/theme/ActionFont.ts +++ b/packages/core/src/theme/ActionFont.ts @@ -1,3 +1,7 @@ -export const UNSTABLE_ActionFontValues = ["Open Sans", "Amplitude"] as const; +export const ActionFontValues = ["Open Sans", "Amplitude"] as const; +/** @deprecated use `ActionFontValues` */ +export const UNSTABLE_ActionFontValues = ActionFontValues; -export type UNSTABLE_ActionFont = (typeof UNSTABLE_ActionFontValues)[number]; +export type ActionFont = (typeof ActionFontValues)[number]; +/** @deprecated use `ActionFont` */ +export type UNSTABLE_ActionFont = ActionFont; diff --git a/packages/core/src/theme/Corner.ts b/packages/core/src/theme/Corner.ts index 3d89fa066ce..5ef234856d5 100644 --- a/packages/core/src/theme/Corner.ts +++ b/packages/core/src/theme/Corner.ts @@ -1,3 +1,7 @@ -export const UNSTABLE_CornerValues = ["sharp", "rounded"] as const; +export const CornerValues = ["sharp", "rounded"] as const; +/** @deprecated use `CornerValues` */ +export const UNSTABLE_CornerValues = CornerValues; -export type UNSTABLE_Corner = (typeof UNSTABLE_CornerValues)[number]; +export type Corner = (typeof CornerValues)[number]; +/** @deprecated Use `Corner` */ +export type UNSTABLE_Corner = Corner; diff --git a/packages/core/src/theme/HeadingFont.ts b/packages/core/src/theme/HeadingFont.ts index ca37cc49ec3..462bea02951 100644 --- a/packages/core/src/theme/HeadingFont.ts +++ b/packages/core/src/theme/HeadingFont.ts @@ -1,3 +1,7 @@ -export const UNSTABLE_HeadingFontValues = ["Open Sans", "Amplitude"] as const; +export const HeadingFontValues = ["Open Sans", "Amplitude"] as const; +/** @deprecated use `HeadingFontValues` */ +export const UNSTABLE_HeadingFontValues = HeadingFontValues; -export type UNSTABLE_HeadingFont = (typeof UNSTABLE_HeadingFontValues)[number]; +export type HeadingFont = (typeof HeadingFontValues)[number]; +/** @deprecated Use `HeadingFont` */ +export type UNSTABLE_HeadingFont = HeadingFont; diff --git a/packages/core/src/utils/useFloatingUI/useFloatingUI.tsx b/packages/core/src/utils/useFloatingUI/useFloatingUI.tsx index 2c2e5f28880..1f6a45e358d 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"> { @@ -73,9 +69,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/avatar/avatar.qa.stories.tsx b/packages/core/stories/avatar/avatar.qa.stories.tsx index 417eb9edb12..8a6a6c5b56e 100644 --- a/packages/core/stories/avatar/avatar.qa.stories.tsx +++ b/packages/core/stories/avatar/avatar.qa.stories.tsx @@ -22,7 +22,20 @@ export const AllVariantsGrid: StoryFn = (props) => ( ); AllVariantsGrid.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { + disableSnapshot: false, + modes: { + theme: { + themeNext: "disable", + }, + themeNext: { + themeNext: "enable", + corner: "rounded", + accent: "teal", + // Ignore headingFont given font is not loaded + }, + }, + }, }; export const NoStyleInjectionGrid: StoryFn = ( diff --git a/packages/core/stories/badge/badge.qa.stories.tsx b/packages/core/stories/badge/badge.qa.stories.tsx index 151b88e3346..a86063c9cc6 100644 --- a/packages/core/stories/badge/badge.qa.stories.tsx +++ b/packages/core/stories/badge/badge.qa.stories.tsx @@ -53,7 +53,20 @@ export const AllExamples: StoryFn = (props) => ( ); AllExamples.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { + disableSnapshot: false, + modes: { + theme: { + themeNext: "disable", + }, + themeNext: { + themeNext: "enable", + corner: "rounded", + accent: "teal", + // Ignore headingFont given font is not loaded + }, + }, + }, }; export const NoStyleInjectionGrid: StoryFn = ( diff --git a/packages/core/stories/banner/banner.qa.stories.tsx b/packages/core/stories/banner/banner.qa.stories.tsx index f3d0099bfb6..eb5b8c1cc12 100644 --- a/packages/core/stories/banner/banner.qa.stories.tsx +++ b/packages/core/stories/banner/banner.qa.stories.tsx @@ -5,8 +5,6 @@ import { type BannerProps, Button, Link, - SaltProvider, - StackLayout, } from "@salt-ds/core"; import { CloseIcon } from "@salt-ds/icons"; import type { Meta, StoryFn } from "@storybook/react"; @@ -52,7 +50,20 @@ export const ExamplesGrid: StoryFn = (props) => ( ); ExamplesGrid.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { + disableSnapshot: false, + modes: { + theme: { + themeNext: "disable", + }, + themeNext: { + themeNext: "enable", + corner: "rounded", + accent: "teal", + // Ignore headingFont given font is not loaded + }, + }, + }, }; export const NoStyleInjectionGrid: StoryFn = ( diff --git a/packages/core/stories/button/button.qa.stories.tsx b/packages/core/stories/button/button.qa.stories.tsx index ea07cfef3a2..600b3375346 100644 --- a/packages/core/stories/button/button.qa.stories.tsx +++ b/packages/core/stories/button/button.qa.stories.tsx @@ -44,7 +44,20 @@ export const AllVariantsGrid: StoryFn = (props) => ( ); AllVariantsGrid.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { + disableSnapshot: false, + modes: { + theme: { + themeNext: "disable", + }, + themeNext: { + themeNext: "enable", + corner: "rounded", + accent: "teal", + // Ignore headingFont given font is not loaded + }, + }, + }, }; export const NoStyleInjectionGrid: StoryFn = ( diff --git a/packages/core/stories/card/card.qa.stories.tsx b/packages/core/stories/card/card.qa.stories.tsx index 88f1bb594ac..c52ed8d5112 100644 --- a/packages/core/stories/card/card.qa.stories.tsx +++ b/packages/core/stories/card/card.qa.stories.tsx @@ -45,7 +45,20 @@ export const AllExamplesUsingText: StoryFn< ); }; AllExamplesUsingText.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { + disableSnapshot: false, + modes: { + theme: { + themeNext: "disable", + }, + themeNext: { + themeNext: "enable", + corner: "rounded", + accent: "teal", + // Ignore headingFont given font is not loaded + }, + }, + }, }; export const NoStyleInjectionGrid: StoryFn = ( diff --git a/packages/core/stories/checkbox/checkbox.qa.stories.tsx b/packages/core/stories/checkbox/checkbox.qa.stories.tsx index 4a6ffa5a45d..c8c9ab0e31f 100644 --- a/packages/core/stories/checkbox/checkbox.qa.stories.tsx +++ b/packages/core/stories/checkbox/checkbox.qa.stories.tsx @@ -77,7 +77,20 @@ export const AllExamplesGrid: StoryFn = (props) => { }; AllExamplesGrid.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { + disableSnapshot: false, + modes: { + theme: { + themeNext: "disable", + }, + themeNext: { + themeNext: "enable", + corner: "rounded", + accent: "teal", + // Ignore headingFont given font is not loaded + }, + }, + }, }; export const NoStyleInjectionGrid: StoryFn = ( diff --git a/packages/core/stories/combo-box/combo-box.qa.stories.tsx b/packages/core/stories/combo-box/combo-box.qa.stories.tsx index 89f03f01299..b71221ece6c 100644 --- a/packages/core/stories/combo-box/combo-box.qa.stories.tsx +++ b/packages/core/stories/combo-box/combo-box.qa.stories.tsx @@ -205,7 +205,7 @@ ClosedExamples.parameters = { disableSnapshot: false, modes: { theme: { - themeNext: "disabled", + themeNext: "disable", }, themeNext: { themeNext: "enable", diff --git a/packages/core/stories/dropdown/dropdown.qa.stories.tsx b/packages/core/stories/dropdown/dropdown.qa.stories.tsx index b0d490f8078..eaa60c85ca4 100644 --- a/packages/core/stories/dropdown/dropdown.qa.stories.tsx +++ b/packages/core/stories/dropdown/dropdown.qa.stories.tsx @@ -128,7 +128,7 @@ ClosedExamples.parameters = { disableSnapshot: false, modes: { theme: { - themeNext: "disabled", + themeNext: "disable", }, themeNext: { themeNext: "enable", diff --git a/packages/core/stories/file-drop-zone/file-drop-zone.qa.stories.tsx b/packages/core/stories/file-drop-zone/file-drop-zone.qa.stories.tsx index 6459f02cbe3..b63d7a46703 100644 --- a/packages/core/stories/file-drop-zone/file-drop-zone.qa.stories.tsx +++ b/packages/core/stories/file-drop-zone/file-drop-zone.qa.stories.tsx @@ -24,5 +24,18 @@ export const AllExamplesGrid: StoryFn = () => { }; AllExamplesGrid.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { + disableSnapshot: false, + modes: { + theme: { + themeNext: "disable", + }, + themeNext: { + themeNext: "enable", + corner: "rounded", + accent: "teal", + // Ignore headingFont given font is not loaded + }, + }, + }, }; diff --git a/packages/core/stories/input/input.qa.stories.tsx b/packages/core/stories/input/input.qa.stories.tsx index 8cb7250a7d2..0aee495cbc2 100644 --- a/packages/core/stories/input/input.qa.stories.tsx +++ b/packages/core/stories/input/input.qa.stories.tsx @@ -146,7 +146,7 @@ AllVariantsGrid.parameters = { disableSnapshot: false, modes: { theme: { - themeNext: "disabled", + themeNext: "disable", }, themeNext: { themeNext: "enable", diff --git a/packages/core/stories/multiline-input/multiline-input.qa.stories.tsx b/packages/core/stories/multiline-input/multiline-input.qa.stories.tsx index d532db38101..151b2cee48a 100644 --- a/packages/core/stories/multiline-input/multiline-input.qa.stories.tsx +++ b/packages/core/stories/multiline-input/multiline-input.qa.stories.tsx @@ -178,7 +178,7 @@ AllVariantsGrid.parameters = { disableSnapshot: false, modes: { theme: { - themeNext: "disabled", + themeNext: "disable", }, themeNext: { themeNext: "enable", diff --git a/packages/core/stories/panel/panel.qa.stories.tsx b/packages/core/stories/panel/panel.qa.stories.tsx index 9194f6801bc..9d4333425e1 100644 --- a/packages/core/stories/panel/panel.qa.stories.tsx +++ b/packages/core/stories/panel/panel.qa.stories.tsx @@ -21,7 +21,20 @@ export const ExamplesGrid: StoryFn = (props) => ( ); ExamplesGrid.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { + disableSnapshot: false, + modes: { + theme: { + themeNext: "disable", + }, + themeNext: { + themeNext: "enable", + corner: "rounded", + accent: "teal", + // Ignore headingFont given font is not loaded + }, + }, + }, }; export const NoStyleInjectionGrid: StoryFn = ( diff --git a/packages/core/stories/pill/pill.qa.stories.tsx b/packages/core/stories/pill/pill.qa.stories.tsx index c8a5618933f..4a507a8177f 100644 --- a/packages/core/stories/pill/pill.qa.stories.tsx +++ b/packages/core/stories/pill/pill.qa.stories.tsx @@ -28,5 +28,19 @@ export const ExamplesGrid: StoryFn = (props) => { }; ExamplesGrid.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { + disableSnapshot: false, + + modes: { + theme: { + themeNext: "disable", + }, + themeNext: { + themeNext: "enable", + corner: "rounded", + accent: "teal", + // Ignore headingFont given font is not loaded + }, + }, + }, }; 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 diff --git a/packages/core/stories/segmented-button-group/segmented-button-group.qa.stories.tsx b/packages/core/stories/segmented-button-group/segmented-button-group.qa.stories.tsx index 740b3dcb44c..b406d72a853 100644 --- a/packages/core/stories/segmented-button-group/segmented-button-group.qa.stories.tsx +++ b/packages/core/stories/segmented-button-group/segmented-button-group.qa.stories.tsx @@ -42,7 +42,7 @@ Default.parameters = { disableSnapshot: false, modes: { theme: { - themeNext: "disabled", + themeNext: "disable", }, themeNext: { themeNext: "enable", diff --git a/packages/core/stories/switch/switch.qa.stories.tsx b/packages/core/stories/switch/switch.qa.stories.tsx index a7cfe5ca3e2..d1288fd4212 100644 --- a/packages/core/stories/switch/switch.qa.stories.tsx +++ b/packages/core/stories/switch/switch.qa.stories.tsx @@ -38,7 +38,21 @@ export const AllExamplesGrid: StoryFn< }; AllExamplesGrid.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { + disableSnapshot: false, + + modes: { + theme: { + themeNext: "disable", + }, + themeNext: { + themeNext: "enable", + corner: "rounded", + accent: "teal", + // Ignore headingFont given font is not loaded + }, + }, + }, }; export const FormFieldAlignments: StoryFn = (props) => ( @@ -66,7 +80,21 @@ export const FormFieldAlignments: StoryFn = (props) => ( ); FormFieldAlignments.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { + disableSnapshot: false, + + modes: { + theme: { + themeNext: "disable", + }, + themeNext: { + themeNext: "enable", + corner: "rounded", + accent: "teal", + // Ignore headingFont given font is not loaded + }, + }, + }, }; export const NoStyleInjectionGrid: StoryFn< diff --git a/packages/core/stories/text/text.qa.stories.tsx b/packages/core/stories/text/text.qa.stories.tsx index 48c8f9deebc..8a94cf7dac6 100644 --- a/packages/core/stories/text/text.qa.stories.tsx +++ b/packages/core/stories/text/text.qa.stories.tsx @@ -99,7 +99,7 @@ AllVariantsGrid.parameters = { disableSnapshot: false, modes: { theme: { - themeNext: "disabled", + themeNext: "disable", }, themeNext: { themeNext: "enable", diff --git a/packages/core/stories/toast/toast.qa.stories.tsx b/packages/core/stories/toast/toast.qa.stories.tsx index 172deb74bd2..c3cd13dbd05 100644 --- a/packages/core/stories/toast/toast.qa.stories.tsx +++ b/packages/core/stories/toast/toast.qa.stories.tsx @@ -79,7 +79,20 @@ export const ExamplesGrid: StoryFn = (props) => ( ); ExamplesGrid.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { + disableSnapshot: false, + modes: { + theme: { + themeNext: "disable", + }, + themeNext: { + themeNext: "enable", + corner: "rounded", + accent: "teal", + // Ignore headingFont given font is not loaded + }, + }, + }, }; export const NoStyleInjectionGrid: StoryFn = ( diff --git a/packages/core/stories/toggle-button-group/toggle-button-group.qa.stories.tsx b/packages/core/stories/toggle-button-group/toggle-button-group.qa.stories.tsx index 1b9aceeedb6..470f5a74cd5 100644 --- a/packages/core/stories/toggle-button-group/toggle-button-group.qa.stories.tsx +++ b/packages/core/stories/toggle-button-group/toggle-button-group.qa.stories.tsx @@ -47,7 +47,20 @@ export const AllVariantsGrid: StoryFn = (props) => ( ); AllVariantsGrid.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { + disableSnapshot: false, + modes: { + theme: { + themeNext: "disable", + }, + themeNext: { + themeNext: "enable", + corner: "rounded", + accent: "teal", + // Ignore headingFont given font is not loaded + }, + }, + }, }; export const NoStyleInjectionGrid: StoryFn = ( diff --git a/packages/core/stories/toggle-button/toggle-button.qa.stories.tsx b/packages/core/stories/toggle-button/toggle-button.qa.stories.tsx index 3955ec0cbb1..1a4f0525165 100644 --- a/packages/core/stories/toggle-button/toggle-button.qa.stories.tsx +++ b/packages/core/stories/toggle-button/toggle-button.qa.stories.tsx @@ -35,7 +35,21 @@ export const AllVariantsGrid: StoryFn = (props) => ( ); AllVariantsGrid.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { + disableSnapshot: false, + + modes: { + theme: { + themeNext: "disable", + }, + themeNext: { + themeNext: "enable", + corner: "rounded", + accent: "teal", + // Ignore headingFont given font is not loaded + }, + }, + }, }; export const NoStyleInjectionGrid: StoryFn = ( diff --git a/packages/core/stories/tooltip/tooltip.qa.stories.tsx b/packages/core/stories/tooltip/tooltip.qa.stories.tsx index 90ceee1c0ed..c90be95a4db 100644 --- a/packages/core/stories/tooltip/tooltip.qa.stories.tsx +++ b/packages/core/stories/tooltip/tooltip.qa.stories.tsx @@ -50,7 +50,20 @@ export const AllExamplesGrid: StoryFn = (props) => { }; AllExamplesGrid.parameters = { - chromatic: { disableSnapshot: false }, + chromatic: { + disableSnapshot: false, + modes: { + theme: { + themeNext: "disable", + }, + themeNext: { + themeNext: "enable", + corner: "rounded", + accent: "teal", + // Ignore headingFont given font is not loaded + }, + }, + }, }; export const NoStyleInjectionGrid: StoryFn = ( diff --git a/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx b/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx index aa54b124898..21e750cb2ed 100644 --- a/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx +++ b/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx @@ -159,7 +159,7 @@ export const Example1 = () => { Warning body copy Success body copy Info body copy - Default link text + Default link text Code example 123 @@ -174,7 +174,7 @@ export const Example1 = () => { Warning body copy Success body copy Info body copy - Default link text + Default link text Code example 123 @@ -191,7 +191,7 @@ export const Example1 = () => { Success body copy Info body copy - Default link text + Default link text Code example 123 @@ -208,7 +208,7 @@ export const Example1 = () => { Success body copy Info body copy - Default link text + Default link text Code example 123 @@ -229,10 +229,14 @@ export const Example1 = () => { - Link - Link - Link - + Link + Link + Link + Link + Link + Link + Link + Link