From 1e58431683c8d3ad6de6898d55842ed19e1d9797 Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Fri, 3 Jan 2025 11:49:53 -0500
Subject: [PATCH] fix: use new tag to hide storybook foundations stories
Storybook foundations pages now display as a single page instead of in
folders with their example stories appearing.
These now use the newer !dev tag to hide them. The old custom
"foundation" tag was previously used to hide them, but this tag is no
longer used.
Also fixes some linter errors encountered during commit; a couple
unused variables and incorrect typeof comparisons.
---
.changeset/plenty-trees-act.md | 5 +++++
.../action-button-corner-rounding.stories.js | 2 +-
.../corner-rounding/checkbox-corner-rounding.stories.js | 8 ++------
.../corner-rounding/corner-rounding.stories.js | 4 ++--
.../foundations/down-state/button-down-state.stories.js | 2 +-
.../foundations/down-state/checkbox-down-state.stories.js | 2 +-
.storybook/foundations/drop-shadow/drop-shadow.stories.js | 6 +++---
7 files changed, 15 insertions(+), 14 deletions(-)
create mode 100644 .changeset/plenty-trees-act.md
diff --git a/.changeset/plenty-trees-act.md b/.changeset/plenty-trees-act.md
new file mode 100644
index 00000000000..793194dceab
--- /dev/null
+++ b/.changeset/plenty-trees-act.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/preview": patch
+---
+
+Updates the tags used by the stories in the "Foundations" documentation, so hidden stories remain hidden on the sidebar.
diff --git a/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js b/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js
index 3903c4b6d41..c944ca467ab 100644
--- a/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js
+++ b/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js
@@ -14,7 +14,7 @@ export default {
handles: ["click .spectrum-ActionButton:not([disabled])"],
},
},
- tags: ['foundation'],
+ tags: ['!dev'],
};
const ActionButton = (args, context) => html`
diff --git a/.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js b/.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js
index 8f86e535d71..96aa3ce69c4 100644
--- a/.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js
+++ b/.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js
@@ -15,14 +15,10 @@ export default {
handles: ['click input[type="checkbox"]'],
},
},
- tags: ['foundation'],
+ tags: ['!dev'],
};
-const Checkbox = ({
- customStyles = {},
- isChecked = false,
- ...args
-} = {}, context = {}) => html`
+const Checkbox = (args = {}, context = {}) => html`
${Template({ ...args, iconName: undefined }, context)}
diff --git a/.storybook/foundations/corner-rounding/corner-rounding.stories.js b/.storybook/foundations/corner-rounding/corner-rounding.stories.js
index f413dbccff1..1080abdf4d3 100644
--- a/.storybook/foundations/corner-rounding/corner-rounding.stories.js
+++ b/.storybook/foundations/corner-rounding/corner-rounding.stories.js
@@ -10,10 +10,10 @@ export default {
args: {
rootClass: "spectrum-Foundations-Example-CornerRounding",
},
- tags: ["foundation"],
+ tags: ["!dev"],
};
-const CornerRadiusGroup = ({ customStyles = {}, ...args }, context) => html`
+const CornerRadiusGroup = (args = {}, context = {}) => html`
diff --git a/.storybook/foundations/down-state/button-down-state.stories.js b/.storybook/foundations/down-state/button-down-state.stories.js
index 2f4f0d6e39e..0d85100133e 100644
--- a/.storybook/foundations/down-state/button-down-state.stories.js
+++ b/.storybook/foundations/down-state/button-down-state.stories.js
@@ -13,7 +13,7 @@ export default {
handles: ["click .spectrum-Button"],
},
},
- tags: ["foundation"],
+ tags: ["!dev"],
};
export const ButtonDownState = Template.bind({});
diff --git a/.storybook/foundations/down-state/checkbox-down-state.stories.js b/.storybook/foundations/down-state/checkbox-down-state.stories.js
index 039b99faf20..88ca9f3a5d9 100644
--- a/.storybook/foundations/down-state/checkbox-down-state.stories.js
+++ b/.storybook/foundations/down-state/checkbox-down-state.stories.js
@@ -13,7 +13,7 @@ export default {
handles: ["click input[type=\"checkbox\"]"],
},
},
- tags: ["foundation"],
+ tags: ["!dev"],
};
export const CheckboxDownState = Template.bind({});
diff --git a/.storybook/foundations/drop-shadow/drop-shadow.stories.js b/.storybook/foundations/drop-shadow/drop-shadow.stories.js
index 2c85a1d7169..6d936af9411 100644
--- a/.storybook/foundations/drop-shadow/drop-shadow.stories.js
+++ b/.storybook/foundations/drop-shadow/drop-shadow.stories.js
@@ -7,7 +7,7 @@ export default {
description:
"Drop shadows draw attention and give the appearance of depth. By default, this style is used to show elevation, when content appears on top of other content.",
component: "Drop shadow",
- tags: ["foundation"],
+ tags: ["!dev"],
};
const DropShadowSwatch = ({
@@ -19,9 +19,9 @@ const DropShadowSwatch = ({
class=${classMap({
[rootClass]: true,
[`${rootClass}--${variant}-drop-shadow`]:
- typeof variant !== undefined && !!isDropShadow,
+ typeof variant !== "undefined" && !!isDropShadow,
[`${rootClass}--${variant}-box-shadow`]:
- typeof variant !== undefined && !isDropShadow,
+ typeof variant !== "undefined" && !isDropShadow,
})}
>
`;