Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make SaltProviderNext stable #3714

Merged
merged 4 commits into from
Jul 9, 2024
Merged

Make SaltProviderNext stable #3714

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9264b42
Make `SaltProviderNext` stable
origami-z Jul 4, 2024
055ce39
Use SaltProviderNext
origami-z Jul 4, 2024
ce13af7
biome fix
origami-z Jul 9, 2024
f26b00d
Adds href to kitchen sink to fix cursor
origami-z Jul 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/ten-spoons-drive.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
22 changes: 11 additions & 11 deletions .storybook/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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 (
<DocsContainer context={context} {...rest}>
Expand Down
10 changes: 3 additions & 7 deletions docs/components/QAContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {
type Mode,
SaltProvider,
UNSTABLE_SaltProviderNext,
SaltProviderNext,
makePrefixer,
useTheme,
} from "@salt-ds/core";
Expand Down Expand Up @@ -44,7 +44,7 @@
}}
>
{Children.map(children, (child, i) => (
<div className="background-item-wrapper" key={i}>

Check warning on line 47 in docs/components/QAContainer.tsx

View workflow job for this annotation

GitHub Actions / lint

lint/suspicious/noArrayIndexKey 

Avoid using the index of an array as key property in an element.
{child}
</div>
))}
Expand All @@ -60,9 +60,7 @@
mode: Mode;
}) => {
const { themeNext } = useTheme();
const ChosenSaltProvider = themeNext
? UNSTABLE_SaltProviderNext
: SaltProvider;
const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider;

return (
<BackgroundBlock background={mode === "light" ? "white" : undefined}>
Expand Down Expand Up @@ -99,9 +97,7 @@
} as CSSProperties;

const { themeNext } = useTheme();
const ChosenSaltProvider = themeNext
? UNSTABLE_SaltProviderNext
: SaltProvider;
const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider;

return (
<div
Expand All @@ -114,7 +110,7 @@
{transposeDensity ? (
<>
{Children.map(children, (child, i) => (
<DensityBlock key={i} mode="light">

Check warning on line 113 in docs/components/QAContainer.tsx

View workflow job for this annotation

GitHub Actions / lint

lint/suspicious/noArrayIndexKey 

Avoid using the index of an array as key property in an element.
{child}
</DensityBlock>
))}
Expand Down
5 changes: 2 additions & 3 deletions docs/decorators/withTheme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import {
ModeValues,
Panel,
SaltProvider,
UNSTABLE_SaltProviderNext,
SaltProviderNext,
getCharacteristicValue,
useTheme,
} from "@salt-ds/core";
Expand Down Expand Up @@ -77,8 +77,7 @@ export const withTheme: Decorator = (StoryFn, context) => {
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";
Expand Down
8 changes: 2 additions & 6 deletions packages/ag-grid-theme/src/examples/HDCompact.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -27,7 +23,7 @@ const HDCompact = (props: AgGridReactProps) => {
density: "high",
});

const Provider = themeNext ? UNSTABLE_SaltProviderNext : SaltProvider;
const Provider = themeNext ? SaltProviderNext : SaltProvider;

return (
<Provider density="high">
Expand Down
72 changes: 51 additions & 21 deletions packages/core/src/__tests__/__e2e__/salt-provider/SaltProvider.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {
SaltProvider,
UNSTABLE_SaltProviderNext,
SaltProviderNext,
ownerWindow,
useAriaAnnouncer,
useDensity,
Expand All @@ -22,9 +22,14 @@ const TestComponent = ({
const {
theme,
mode,
themeNext,
corner,
accent,
actionFont,
headingFont,
// Test backwards compatibilty using `UNSTABLE_` variables
UNSTABLE_corner,
joshwooding marked this conversation as resolved.
Show resolved Hide resolved
UNSTABLE_accent,
themeNext,
UNSTABLE_actionFont,
UNSTABLE_headingFont,
} = useTheme();
Expand All @@ -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}
/>
);
};
Expand Down Expand Up @@ -312,9 +322,9 @@ describe("Given a SaltProviderNext", () => {
describe("with no props set", () => {
it("should apply default theme attributes to the html element", () => {
mount(
<UNSTABLE_SaltProviderNext>
<SaltProviderNext>
<TestComponent />
</UNSTABLE_SaltProviderNext>,
</SaltProviderNext>,
);

cy.get("div.salt-provider").should("have.length", 0);
Expand All @@ -332,36 +342,40 @@ describe("Given a SaltProviderNext", () => {
});
it("should read correct default values from provider and add an AriaAnnouncer", () => {
mount(
<UNSTABLE_SaltProviderNext>
<SaltProviderNext>
<TestComponent />
</UNSTABLE_SaltProviderNext>,
</SaltProviderNext>,
);
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");
});
});

describe("with props set", () => {
it("should allow pass in multiple theme names", () => {
mount(
<UNSTABLE_SaltProviderNext
<SaltProviderNext
density="high"
mode="dark"
corner="rounded"
accent="teal"
theme="custom-theme-1 custom-theme-2"
>
<TestComponent />
</UNSTABLE_SaltProviderNext>,
</SaltProviderNext>,
);

cy.get("html")
Expand Down Expand Up @@ -389,7 +403,7 @@ describe("Given a SaltProviderNext", () => {
describe("when nested", () => {
it("should inherit values not passed as props", () => {
mount(
<UNSTABLE_SaltProviderNext
<SaltProviderNext
density="high"
mode="dark"
corner="rounded"
Expand All @@ -398,10 +412,10 @@ describe("Given a SaltProviderNext", () => {
actionFont="Amplitude"
>
<TestComponent />
<UNSTABLE_SaltProviderNext density="medium">
<SaltProviderNext density="medium">
<TestComponent id="test-2" />
</UNSTABLE_SaltProviderNext>
</UNSTABLE_SaltProviderNext>,
</SaltProviderNext>
</SaltProviderNext>,
);

cy.get("html.salt-theme-next").should("have.length", 1);
Expand All @@ -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")
Expand All @@ -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(
<UNSTABLE_SaltProviderNext
<SaltProviderNext
density="high"
mode="dark"
corner="rounded"
Expand All @@ -438,16 +460,16 @@ describe("Given a SaltProviderNext", () => {
actionFont="Amplitude"
>
<TestComponent />
<UNSTABLE_SaltProviderNext
<SaltProviderNext
density="medium"
corner="sharp"
accent="blue"
headingFont="Open Sans"
actionFont="Open Sans"
>
<TestComponent id="test-2" />
</UNSTABLE_SaltProviderNext>
</UNSTABLE_SaltProviderNext>,
</SaltProviderNext>
</SaltProviderNext>,
);

cy.get("html.salt-theme-next").should("have.length", 1);
Expand All @@ -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")
Expand All @@ -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");
});
});
Expand Down
14 changes: 7 additions & 7 deletions packages/core/src/__tests__/__e2e__/utils/useFloatingUI.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {
SaltProvider,
UNSTABLE_SaltProviderNext,
SaltProviderNext,
useFloatingComponent,
useFloatingUI,
} from "@salt-ds/core";
Expand Down Expand Up @@ -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(
<UNSTABLE_SaltProviderNext>
<SaltProviderNext>
<TestComponent focusManager={false} />
</UNSTABLE_SaltProviderNext>,
</SaltProviderNext>,
);

cy.get("html.salt-theme.salt-theme-next").should("have.length", 1);
Expand All @@ -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(
<UNSTABLE_SaltProviderNext>
<SaltProviderNext>
<TestComponent focusManager={true} />
</UNSTABLE_SaltProviderNext>,
</SaltProviderNext>,
);

cy.get("html.salt-theme.salt-theme-next").should("have.length", 1);
Expand Down
Loading
Loading