Repository: CrowdStrike/glide-core
Pull request #850: Remove argument defaults in stories instead of `preview.js`
Author: login: clintcs
Created: 2025-04-17T14:58:10Z | Merged: 2025-04-17T19:27:34Z

## 🚀 Description

<!--

  - Tell us about your changes and the motivation for them.
  - Write "N/A" if your changes are explained by the PR's title.

-->

While working on some [changes](https://github.com/CrowdStrike/glide-core/pull/847) to Toasts, I ran into a situation where I would have had to rework `preview.js` to get an attribute at its default value remoevd from Toasts' code example. What I ended up doing was [this](https://github.com/CrowdStrike/glide-core/pull/847/files#diff-e0509877cd4a4c5dedd559866f580a1064c09704cceda178618dc4bd327a75f1R196-R200).

It got me thinking that we should in every story what I did for Toasts, letting us remove some of the complexity of `preview.js`—which is untyped and super imperative. So that's what I've done here.

Handling removing attributes at their default value in each story isn't automatic like `preview.js`. But it is simpler, and I was at a fork in the road where I had to decide whether to complicate `preview.js` more or hit eject on it. Let me know what you think. 

## 📋 Checklist

<!-- Do the following before adding reviewers: -->

- I have followed the [Contributing Guidelines](https://github.com/crowdstrike/glide-core/blob/main/CONTRIBUTING.md).
- I have added tests to cover new or updated functionality.
- I have added or updated Storybook stories.
- I have [localized](https://github.com/CrowdStrike/glide-core/blob/main/CONTRIBUTING.md#translations-and-static-strings) new strings.
- I have followed the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/patterns/) or met with the Accessibility Team.
- I have included a [changeset](https://github.com/CrowdStrike/glide-core/blob/main/CONTRIBUTING.md#versioning-a-package).
- I have scheduled a design review.
- I have reviewed the Storybook and Visual Test Report links below.

## 🔬 Testing

Spotcheck every story. Verify that attributes with a default value aren't rendered in code examples.

<!--

  Tell us how to reproduce and verify your changes:

  1. Navigate to Checkbox in Storybook.
  1. Click the label.
  1. Verify Checkbox is checked.

-->



Diff:
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 375006d64..91e44462f 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -50,6 +50,11 @@ export default {
       },
       source: {
         format: 'html',
+        theme: create({
+          base: 'light',
+          fontBase: '"Nunito", sans-serif',
+          fontCode: 'monospace',
+        }),
         transform(code, context) {
           if (!code) {
             return;
@@ -65,62 +70,6 @@ export default {
             `glide-core-${context.componentId.replace(' ', '-').toLowerCase()}`,
           );
 
-          // Now go through all the arguments. If the argument's value is at its default,
-          // then remove it so people don't copy unnecessary code.
-          //
-          // As an aside, the reason arguments are set to their defaults in stories is so
-          // the default value is selected in the controls table.
-          for (const [argumentKey, argumentValue] of Object.entries(
-            context.args,
-          )) {
-            const { defaultValue } = context.argTypes[argumentKey].table ?? {};
-
-            // "<glide-core-split-button-primary-button>.label"
-            const isSubcomponent = argumentKey.startsWith('<');
-
-            if (isSubcomponent) {
-              if (
-                defaultValue &&
-                argumentValue === context.initialArgs[argumentKey]
-              ) {
-                // <glide-core-split-button-primary-button>.label" → "label"
-                const argumentKeyWithoutSubcomponent = argumentKey.slice(
-                  argumentKey.indexOf('.') + 1,
-                );
-
-                // "<glide-core-split-button-primary-button>.label" → "glide-core-split-button-primary-button"
-                const selector = argumentKey.slice(1, argumentKey.indexOf('>'));
-
-                for (const $subcomponent of $container.querySelectorAll(
-                  selector,
-                )) {
-                  const value = $subcomponent.getAttribute(
-                    argumentKeyWithoutSubcomponent,
-                  );
-
-                  // People using Storybook often interact with form controls and inspect their
-                  // `value` using DevTools. However, without a `value` on each Checkbox, for
-                  // example, Checkbox Group's `value` will be an empty string, leading to confusion
-                  // or a bug report. So `value` is always left alone.
-                  if (
-                    value === argumentValue &&
-                    argumentKeyWithoutSubcomponent !== 'value'
-                  ) {
-                    $subcomponent.removeAttribute(
-                      argumentKeyWithoutSubcomponent,
-                    );
-                  }
-                }
-              }
-            } else if (
-              defaultValue &&
-              argumentValue === context.initialArgs[argumentKey] &&
-              argumentKey !== 'value'
-            ) {
-              $component?.removeAttribute(argumentKey);
-            }
-          }
-
           // Now strip out the rest. These are elements inside component slots used primarily
           // for styling.
           for (const $element of $container.querySelectorAll('*')) {
@@ -238,6 +187,7 @@ export default {
               'glide-core-dropdown-option',
             )) {
               $option.removeAttribute('aria-selected');
+              $option.removeAttribute('role');
             }
           }
 
@@ -275,11 +225,6 @@ export default {
           return $container.innerHTML.replaceAll('=""', '');
         },
       },
-      theme: create({
-        base: 'light',
-        fontBase: '"Nunito", sans-serif',
-        fontCode: 'monospace',
-      }),
     },
   },
 };
diff --git a/src/button-group.stories.ts b/src/button-group.stories.ts
index cb94efd7b..980f34a43 100644
--- a/src/button-group.stories.ts
+++ b/src/button-group.stories.ts
@@ -57,8 +57,10 @@ const meta: Meta = {
     return html`
       <glide-core-button-group
         label=${arguments_.label || nothing}
-        orientation=${arguments_.orientation || nothing}
-        variant=${arguments_.variant || nothing || nothing}
+        orientation=${arguments_.orientation === 'horizontal'
+          ? nothing
+          : arguments_.horizontal}
+        variant=${arguments_.variant || nothing}
       >
         ${when(
           arguments_.variant === 'icon-only',
@@ -282,7 +284,9 @@ export const WithIcons: StoryObj = {
     return html`
       <glide-core-button-group
         label=${arguments_.label || nothing}
-        orientation=${arguments_.orientation}
+        orientation=${arguments_.orientation === 'horizontal'
+          ? nothing
+          : arguments_.horizontal}
         variant=${arguments_.variant || nothing}
       >
         <glide-core-button-group-button
diff --git a/src/button.stories.ts b/src/button.stories.ts
index 31a5d1135..10c7fcfa0 100644
--- a/src/button.stories.ts
+++ b/src/button.stories.ts
@@ -25,16 +25,18 @@ const meta: Meta = {
     },
   },
   render(arguments_) {
-    /* eslint-disable @typescript-eslint/no-unsafe-argument, unicorn/explicit-length-check, @typescript-eslint/prefer-nullish-coalescing */
+    /* eslint-disable @typescript-eslint/no-unsafe-argument, @typescript-eslint/prefer-nullish-coalescing */
     return html`
       <glide-core-button
         label=${arguments_.label || nothing}
         name=${arguments_.name || nothing}
-        size=${arguments_.size || nothing}
+        size=${arguments_.size === 'large' ? nothing : arguments_.size}
         tooltip=${arguments_.tooltip || nothing}
-        type=${arguments_.type || nothing}
+        type=${arguments_.type === 'button' ? nothing : arguments_.type}
         value=${arguments_.value || nothing}
-        variant=${arguments_.variant || nothing}
+        variant=${arguments_.variant === 'primary'
+          ? nothing
+          : arguments_.variant}
         ?disabled=${arguments_.disabled || nothing}
       >
         ${unsafeHTML(arguments_['slot="default"'])}
@@ -169,12 +171,14 @@ export const WithIcons: StoryObj = {
       <glide-core-button
         label=${arguments_.label || nothing}
         name=${arguments_.name || nothing}
-        size=${arguments_.size || nothing}
+        size=${arguments_.size === 'large' ? nothing : arguments_.size}
         tooltip=${arguments_.tooltip || nothing}
-        type=${arguments_.type || nothing}
+        type=${arguments_.type === 'button' ? nothing : arguments_.type}
         value=${arguments_.value || nothing}
-        variant=${arguments_.variant || nothing}
-        ?disabled=${arguments_.disabled}
+        variant=${arguments_.variant === 'primary'
+          ? nothing
+          : arguments_.variant}
+        ?disabled=${arguments_.disabled || nothing}
       >
         ${arguments_['slot="default"']}
 
diff --git a/src/checkbox-group.stories.ts b/src/checkbox-group.stories.ts
index ad12aa594..0bf09c503 100644
--- a/src/checkbox-group.stories.ts
+++ b/src/checkbox-group.stories.ts
@@ -254,7 +254,11 @@ const meta: Meta = {
         <glide-core-checkbox-group
           label=${arguments_.label || nothing}
           name=${arguments_.name || nothing}
-          orientation=${arguments_.orientation}
+          orientation=${
+            arguments_.orientation === 'horizontal'
+              ? nothing
+              : arguments_.horizontal
+          }
           tooltip=${arguments_.tooltip || nothing}
           ?disabled=${arguments_.disabled}
           ?hide-label=${arguments_['hide-label'] || nothing}
diff --git a/src/checkbox.stories.ts b/src/checkbox.stories.ts
index 7c35284d0..c48091367 100644
--- a/src/checkbox.stories.ts
+++ b/src/checkbox.stories.ts
@@ -236,7 +236,9 @@ const meta: Meta = {
       <glide-core-checkbox
         label=${arguments_.label || nothing}
         name=${arguments_.name || nothing}
-        orientation=${arguments_.orientation || nothing}
+        orientation=${arguments_.orientation === 'horizontal'
+          ? nothing
+          : arguments_.orientation}
         summary=${arguments_.summary || nothing}
         tooltip=${arguments_.tooltip || nothing}
         value=${arguments_.value || nothing}
diff --git a/src/dropdown.stories.ts b/src/dropdown.stories.ts
index 9b7aa688f..492348012 100644
--- a/src/dropdown.stories.ts
+++ b/src/dropdown.stories.ts
@@ -493,9 +493,11 @@ async (query: string): Promise<GlideCoreDropdownOption[]> {
       add-button-label=${arguments_['add-button-label'] || nothing}
       label=${arguments_.label || nothing}
       name=${arguments_.name || nothing}
-      orientation=${arguments_.orientation}
+      orientation=${arguments_.orientation === 'horizontal'
+        ? nothing
+        : arguments_.orientation}
       placeholder=${arguments_.placeholder || nothing}
-      size=${arguments_.size}
+      size=${arguments_.size === 'large' ? nothing : arguments_.size}
       tooltip=${arguments_.tooltip || nothing}
       variant=${arguments_.variant || nothing}
       ?disabled=${arguments_.disabled}
@@ -584,9 +586,11 @@ export const WithIcons: StoryObj = {
       add-button-label=${arguments_['add-button-label'] || nothing}
       label=${arguments_.label || nothing}
       name=${arguments_.name || nothing}
-      orientation=${arguments_.orientation}
-      placeholder=${arguments_.placeholder}
-      size=${arguments_.size}
+      orientation=${arguments_.orientation === 'horizontal'
+        ? nothing
+        : arguments_.orientation}
+      placeholder=${arguments_.placeholder || nothing}
+      size=${arguments_.size === 'large' ? nothing : arguments_.size}
       tooltip=${arguments_.tooltip || nothing}
       variant=${arguments_.variant || nothing}
       ?disabled=${arguments_.disabled}
diff --git a/src/form-controls-layout.stories.ts b/src/form-controls-layout.stories.ts
index a56f1f8e7..e43b49279 100644
--- a/src/form-controls-layout.stories.ts
+++ b/src/form-controls-layout.stories.ts
@@ -217,7 +217,9 @@ const meta: Meta = {
   render(arguments_) {
     /* eslint-disable @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/prefer-nullish-coalescing */
     return html`
-      <glide-core-form-controls-layout split=${arguments_.split}>
+      <glide-core-form-controls-layout
+        split=${arguments_.split === 'left' ? nothing : arguments_.split}
+      >
         <glide-core-checkbox-group label="Label">
           <glide-core-checkbox
             label="One"
@@ -244,7 +246,6 @@ const meta: Meta = {
 
         <glide-core-dropdown
           label="Label"
-          placeholder="Placeholder"
           ?open=${arguments_['<glide-core-dropdown>.open']}
         >
           <glide-core-dropdown-option
@@ -274,7 +275,6 @@ const meta: Meta = {
 
         <glide-core-input
           label="Label"
-          placeholder="Placeholder"
           value=${arguments_['<glide-core-input>.value'] || nothing}
         ></glide-core-input>
 
@@ -302,7 +302,6 @@ const meta: Meta = {
 
         <glide-core-textarea
           label="Label"
-          placeholder="Placeholder"
           value=${arguments_['<glide-core-textarea>.value'] || nothing}
         ></glide-core-textarea>
       </glide-core-form-controls-layout>
diff --git a/src/icon-button.stories.ts b/src/icon-button.stories.ts
index 5c053944c..c8ef7f50f 100644
--- a/src/icon-button.stories.ts
+++ b/src/icon-button.stories.ts
@@ -27,7 +27,9 @@ const meta: Meta = {
     return html`
       <glide-core-icon-button
         label=${arguments_.label || nothing}
-        variant=${arguments_.variant || nothing}
+        variant=${arguments_.variant === 'primary'
+          ? nothing
+          : arguments_.variant}
         ?disabled=${arguments_.disabled}
       >
         <glide-core-example-icon name="clipboard"></glide-core-example-icon>
diff --git a/src/inline-alert.stories.ts b/src/inline-alert.stories.ts
index a5900c17f..7a0c58267 100644
--- a/src/inline-alert.stories.ts
+++ b/src/inline-alert.stories.ts
@@ -1,5 +1,5 @@
 import './inline-alert.js';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { withActions } from '@storybook/addon-actions/decorator';
 import type { Meta, StoryObj } from '@storybook/web-components';
 
@@ -74,7 +74,9 @@ const meta: Meta = {
   render(arguments_) {
     return html`
       <glide-core-inline-alert
-        variant=${arguments_.variant}
+        variant=${arguments_.variant === 'informational'
+          ? nothing
+          : arguments_.variant}
         ?removable=${arguments_.removable}
       >
         ${arguments_['slot="default"']}
diff --git a/src/input.stories.ts b/src/input.stories.ts
index 0398b709f..b66a2c12d 100644
--- a/src/input.stories.ts
+++ b/src/input.stories.ts
@@ -92,17 +92,25 @@ const meta: Meta = {
     /* eslint-disable @typescript-eslint/no-unsafe-argument, @typescript-eslint/prefer-nullish-coalescing */
     return html`
       <glide-core-input
-        autocapitalize=${arguments_.autocapitalize}
-        autocomplete=${arguments_.autocomplete}
+        autocapitalize=${arguments_.autocapitalize === 'on'
+          ? nothing
+          : arguments_.autocapitalize}
+        autocomplete=${arguments_.autocomplete === 'on'
+          ? nothing
+          : arguments_.autocomplete}
         label=${arguments_.label || nothing}
         maxlength=${arguments_.maxlength || nothing}
         name=${arguments_.name || nothing}
-        orientation=${arguments_.orientation}
+        orientation=${arguments_.orientation === 'horizontal'
+          ? nothing
+          : arguments_.orientation}
         pattern=${arguments_.pattern || nothing}
         placeholder=${arguments_.placeholder || nothing}
-        spellcheck=${arguments_.spellcheck}
+        spellcheck=${arguments_.spellcheck === 'false'
+          ? nothing
+          : arguments_.spellcheck}
         tooltip=${arguments_.tooltip || nothing}
-        type=${arguments_.type || nothing}
+        type=${arguments_.type === 'text' ? nothing : arguments_.type}
         value=${arguments_.value || nothing}
         ?clearable=${arguments_.clearable}
         ?disabled=${arguments_.disabled}
@@ -369,16 +377,25 @@ export const WithIcons: StoryObj = {
     /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
     return html`
       <glide-core-input
-        autocapitalize=${arguments_.autocapitalize}
-        autocomplete=${arguments_.autocomplete}
+        autocapitalize=${arguments_.autocapitalize === 'on'
+          ? nothing
+          : arguments_.autocapitalize}
+        autocomplete=${arguments_.autocomplete === 'on'
+          ? nothing
+          : arguments_.autocomplete}
         label=${arguments_.label || nothing}
         maxlength=${arguments_.maxlength || nothing}
         name=${arguments_.name || nothing}
-        orientation=${arguments_.orientation}
+        orientation=${arguments_.orientation === 'horizontal'
+          ? nothing
+          : arguments_.orientation}
+        pattern=${arguments_.pattern || nothing}
         placeholder=${arguments_.placeholder || nothing}
-        spellcheck=${arguments_.spellcheck}
+        spellcheck=${arguments_.spellcheck === 'false'
+          ? nothing
+          : arguments_.spellcheck}
         tooltip=${arguments_.tooltip || nothing}
-        type=${arguments_.type}
+        type=${arguments_.type === 'text' ? nothing : arguments_.type}
         value=${arguments_.value || nothing}
         ?clearable=${arguments_.clearable}
         ?disabled=${arguments_.disabled}
diff --git a/src/menu.stories.ts b/src/menu.stories.ts
index 44de0b7cf..e8ec36cdf 100644
--- a/src/menu.stories.ts
+++ b/src/menu.stories.ts
@@ -256,11 +256,12 @@ const meta: Meta = {
       });
   },
   render(arguments_) {
-    /* eslint-disable unicorn/explicit-length-check, @typescript-eslint/prefer-nullish-coalescing */
     return html`<glide-core-menu
-      offset=${arguments_.offset}
-      placement=${arguments_.placement}
-      size=${arguments_.size || nothing}
+      offset=${arguments_.offset === 4 ? nothing : arguments_.offset}
+      placement=${arguments_.placement === 'bottom-start'
+        ? nothing
+        : arguments_.placement}
+      size=${arguments_.size === 'large' ? nothing : arguments_.size}
       ?open=${arguments_.open}
     >
       <glide-core-button label="Target" slot="target"></glide-core-button>
@@ -290,9 +291,11 @@ export const Menu: StoryObj = {
 export const WithIcons: StoryObj = {
   render(arguments_) {
     return html`<glide-core-menu
-      offset=${arguments_.offset}
-      placement=${arguments_.placement}
-      size=${arguments_.size || nothing}
+      offset=${arguments_.offset === 4 ? nothing : arguments_.offset}
+      placement=${arguments_.placement === 'bottom-start'
+        ? nothing
+        : arguments_.placement}
+      size=${arguments_.size === 'large' ? nothing : arguments_.size}
       ?open=${arguments_.open}
     >
       <glide-core-button label="Target" slot="target"></glide-core-button>
diff --git a/src/modal.stories.ts b/src/modal.stories.ts
index 752c8fb65..4d26f789b 100644
--- a/src/modal.stories.ts
+++ b/src/modal.stories.ts
@@ -79,7 +79,7 @@ const meta: Meta = {
       <glide-core-modal
         label=${arguments_.label || nothing}
         severity=${arguments_.severity || nothing}
-        size=${arguments_.size}
+        size=${arguments_.size === 'medium' ? nothing : arguments_.size}
         ?back-button=${arguments_['back-button']}
         ?open=${arguments_.open}
       >
@@ -245,6 +245,7 @@ export const WithHeaderActions: StoryObj = {
       <glide-core-modal
         label=${arguments_.label || nothing}
         severity=${arguments_.severity || nothing}
+        size=${arguments_.size === 'medium' ? nothing : arguments_.size}
         ?back-button="${arguments_['back-button']}"
         ?open=${arguments_.open}
       >
@@ -276,6 +277,7 @@ export const WithPrimaryButton: StoryObj = {
       <glide-core-modal
         label=${arguments_.label || nothing}
         severity=${arguments_.severity || nothing}
+        size=${arguments_.size === 'medium' ? nothing : arguments_.size}
         ?back-button="${arguments_['back-button']}"
         ?open=${arguments_.open}
       >
@@ -298,6 +300,7 @@ export const WithSecondaryButton: StoryObj = {
       <glide-core-modal
         label=${arguments_.label || nothing}
         severity=${arguments_.severity || nothing}
+        size=${arguments_.size === 'medium' ? nothing : arguments_.size}
         ?back-button="${arguments_['back-button']}"
         ?open=${arguments_.open}
       >
@@ -324,6 +327,7 @@ export const WithTertiaryTooltipAndButton: StoryObj = {
       <glide-core-modal
         label=${arguments_.label || nothing}
         severity=${arguments_.severity || nothing}
+        size=${arguments_.size === 'medium' ? nothing : arguments_.size}
         ?back-button="${arguments_['back-button']}"
         ?open=${arguments_.open}
       >
@@ -356,6 +360,7 @@ export const KitchenSink: StoryObj = {
       <glide-core-modal
         label=${arguments_.label || nothing}
         severity=${arguments_.severity || nothing}
+        size=${arguments_.size === 'medium' ? nothing : arguments_.size}
         ?back-button="${arguments_['back-button']}"
         ?open=${arguments_.open}
       >
diff --git a/src/popover.stories.ts b/src/popover.stories.ts
index 4a8bc7afa..0df0ef033 100644
--- a/src/popover.stories.ts
+++ b/src/popover.stories.ts
@@ -1,7 +1,7 @@
 import './icons/storybook.js';
 import { UPDATE_STORY_ARGS } from '@storybook/core-events';
 import { addons } from '@storybook/preview-api';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { withActions } from '@storybook/addon-actions/decorator';
@@ -161,8 +161,10 @@ const meta: Meta = {
     /* eslint-disable @typescript-eslint/no-unsafe-argument */
     return html`
       <glide-core-popover
-        offset=${arguments_.offset}
-        placement=${arguments_.placement}
+        offset=${arguments_.offset === 4 ? nothing : arguments_.offset}
+        placement=${arguments_.placement === 'bottom'
+          ? nothing
+          : arguments_.placement}
         ?disabled=${arguments_.disabled}
         ?open=${arguments_.open}
       >
diff --git a/src/radio-group.stories.ts b/src/radio-group.stories.ts
index 9480bcd45..fd634c3a8 100644
--- a/src/radio-group.stories.ts
+++ b/src/radio-group.stories.ts
@@ -79,7 +79,9 @@ const meta: Meta = {
       <glide-core-radio-group
         label=${arguments_.label || nothing}
         name=${arguments_.name || nothing}
-        orientation=${arguments_.orientation}
+        orientation=${arguments_.orientation === 'horizontal'
+          ? nothing
+          : arguments_.orientation}
         tooltip=${arguments_.tooltip || nothing}
         value=${arguments_.value || nothing}
         ?disabled=${arguments_.disabled}
diff --git a/src/spinner.stories.ts b/src/spinner.stories.ts
index f532844a3..c5bddc82e 100644
--- a/src/spinner.stories.ts
+++ b/src/spinner.stories.ts
@@ -16,11 +16,11 @@ const meta: Meta = {
     `,
   ],
   render(arguments_) {
-    /* eslint-disable unicorn/explicit-length-check, @typescript-eslint/prefer-nullish-coalescing */
+    /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
     return html`
       <glide-core-spinner
         label=${arguments_.label || nothing}
-        size=${arguments_.size || nothing}
+        size=${arguments_.size === 'medium' ? nothing : arguments_.size}
       ></glide-core-spinner>
     `;
   },
diff --git a/src/split-button.stories.ts b/src/split-button.stories.ts
index 33698ae1a..37813aee9 100644
--- a/src/split-button.stories.ts
+++ b/src/split-button.stories.ts
@@ -82,8 +82,10 @@ const meta: Meta = {
     /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
     return html`
       <glide-core-split-button
-        size=${arguments_.size}
-        variant=${arguments_.variant}
+        size=${arguments_.size === 'large' ? nothing : arguments_.size}
+        variant=${arguments_.variant === 'primary'
+          ? nothing
+          : arguments_.variant}
       >
         <glide-core-split-button-primary-button
           label=${arguments_[
@@ -100,7 +102,11 @@ const meta: Meta = {
           ] || nothing}
           menu-placement=${arguments_[
             '<glide-core-split-button-secondary-button>.menu-placement'
-          ]}
+          ] === 'bottom-end'
+            ? nothing
+            : arguments_[
+                '<glide-core-split-button-secondary-button>.menu-placement'
+              ]}
           slot="secondary-button"
           ?disabled=${arguments_[
             '<glide-core-split-button-secondary-button>.disabled'
@@ -352,8 +358,10 @@ export const WithIcon: StoryObj = {
   render(arguments_) {
     return html`
       <glide-core-split-button
-        size=${arguments_.size}
-        variant=${arguments_.variant}
+        size=${arguments_.size === 'large' ? nothing : arguments_.size}
+        variant=${arguments_.variant === 'primary'
+          ? nothing
+          : arguments_.variant}
       >
         <glide-core-split-button-primary-button
           label=${arguments_[
@@ -378,7 +386,11 @@ export const WithIcon: StoryObj = {
           ]}
           menu-placement=${arguments_[
             '<glide-core-split-button-secondary-button>.menu-placement'
-          ]}
+          ] === 'bottom-end'
+            ? nothing
+            : arguments_[
+                '<glide-core-split-button-secondary-button>.menu-placement'
+              ]}
           slot="secondary-button"
           ?disabled=${arguments_[
             '<glide-core-split-button-secondary-button>.disabled'
@@ -397,8 +409,10 @@ export const WithPrimaryLink: StoryObj = {
   render(arguments_) {
     return html`
       <glide-core-split-button
-        size=${arguments_.size}
-        variant=${arguments_.variant}
+        size=${arguments_.size === 'large' ? nothing : arguments_.size}
+        variant=${arguments_.variant === 'primary'
+          ? nothing
+          : arguments_.variant}
       >
         <glide-core-split-button-primary-link
           label=${arguments_['<glide-core-split-button-primary-link>.label']}
@@ -418,7 +432,11 @@ export const WithPrimaryLink: StoryObj = {
           ]}
           menu-placement=${arguments_[
             '<glide-core-split-button-secondary-button>.menu-placement'
-          ]}
+          ] === 'bottom-end'
+            ? nothing
+            : arguments_[
+                '<glide-core-split-button-secondary-button>.menu-placement'
+              ]}
           slot="secondary-button"
           ?disabled=${arguments_[
             '<glide-core-split-button-secondary-button>.disabled'
diff --git a/src/tab.group.stories.ts b/src/tab.group.stories.ts
index 6d3af6d4b..5a8abd89e 100644
--- a/src/tab.group.stories.ts
+++ b/src/tab.group.stories.ts
@@ -3,7 +3,7 @@ import './tab.group.js';
 import './tab.panel.js';
 import { UPDATE_STORY_ARGS } from '@storybook/core-events';
 import { addons } from '@storybook/preview-api';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { withActions } from '@storybook/addon-actions/decorator';
@@ -117,14 +117,18 @@ const meta: Meta = {
 
         <glide-core-tab-panel
           name="1"
-          style=${styleMap({
-            '--padding-inline-end':
-              arguments_['<glide-core-tab-panel>[--padding-inline-end]'] ||
-              null,
-            '--padding-inline-start':
-              arguments_['<glide-core-tab-panel>[--padding-inline-start]'] ||
-              null,
-          })}
+          style=${arguments_['<glide-core-tab-panel>[--padding-inline-end]'] ||
+          arguments_['<glide-core-tab-panel>[--padding-inline-start]']
+            ? styleMap({
+                '--padding-inline-end':
+                  arguments_['<glide-core-tab-panel>[--padding-inline-end]'] ||
+                  null,
+                '--padding-inline-start':
+                  arguments_[
+                    '<glide-core-tab-panel>[--padding-inline-start]'
+                  ] || null,
+              })
+            : nothing}
         >
           ${unsafeHTML(arguments_['<glide-core-tab-panel>[slot="default"]'])}
         </glide-core-tab-panel>
diff --git a/src/tag.stories.ts b/src/tag.stories.ts
index 1131bb191..6bf64dc4a 100644
--- a/src/tag.stories.ts
+++ b/src/tag.stories.ts
@@ -27,7 +27,7 @@ const meta: Meta = {
       <glide-core-tag
         label=${arguments_.label || nothing}
         color=${arguments_.color || nothing}
-        size=${arguments_.size}
+        size=${arguments_.size === 'medium' ? nothing : arguments_.size}
         ?disabled=${arguments_.disabled}
         ?removable=${arguments_.removable}
       >
@@ -129,7 +129,7 @@ export const WithIcon: StoryObj = {
       <glide-core-tag
         label=${arguments_.label || nothing}
         color=${arguments_.color || nothing}
-        size=${arguments_.size}
+        size=${arguments_.size === 'medium' ? nothing : arguments_.size}
         ?disabled=${arguments_.disabled}
         ?removable=${arguments_.removable}
       >
diff --git a/src/textarea.stories.ts b/src/textarea.stories.ts
index 9d8185cc6..84f3eaa73 100644
--- a/src/textarea.stories.ts
+++ b/src/textarea.stories.ts
@@ -263,14 +263,22 @@ const meta: Meta = {
     /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
     return html`
       <glide-core-textarea
-        autocapitalize=${arguments_.autocapitalize}
-        autocomplete=${arguments_.autocomplete}
+        autocapitalize=${arguments_.autocapitalize === 'on'
+          ? nothing
+          : arguments_.autocapitalize}
+        autocomplete=${arguments_.autocomplete === 'on'
+          ? nothing
+          : arguments_.autocomplete}
         label=${arguments_.label || nothing}
         maxlength=${arguments_.maxlength || nothing}
         name=${arguments_.name || nothing}
-        orientation=${arguments_.orientation}
+        orientation=${arguments_.orientation === 'horizontal'
+          ? nothing
+          : arguments_.orientation}
         placeholder=${arguments_.placeholder || nothing}
-        spellcheck=${arguments_.spellcheck}
+        spellcheck=${arguments_.spellcheck === 'false'
+          ? nothing
+          : arguments_.spellcheck}
         tooltip=${arguments_.tooltip || nothing}
         value=${arguments_.value || nothing}
         ?disabled=${arguments_.disabled}
diff --git a/src/toggle.stories.ts b/src/toggle.stories.ts
index a92426dd4..4622ce2b2 100644
--- a/src/toggle.stories.ts
+++ b/src/toggle.stories.ts
@@ -122,7 +122,9 @@ const meta: Meta = {
     /* eslint-disable @typescript-eslint/no-unsafe-argument, @typescript-eslint/prefer-nullish-coalescing */
     return html`<glide-core-toggle
       label=${arguments_.label || nothing}
-      orientation=${arguments_.orientation || nothing}
+      orientation=${arguments_.orientation === 'horizontal'
+        ? nothing
+        : arguments_.orientation}
       summary=${arguments_.summary || nothing}
       tooltip=${arguments_.tooltip || nothing}
       ?checked=${arguments_.checked}
diff --git a/src/tooltip.stories.ts b/src/tooltip.stories.ts
index 17af8a556..379b3a98f 100644
--- a/src/tooltip.stories.ts
+++ b/src/tooltip.stories.ts
@@ -1,7 +1,7 @@
 import './icons/storybook.js';
 import { UPDATE_STORY_ARGS } from '@storybook/core-events';
 import { addons } from '@storybook/preview-api';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { withActions } from '@storybook/addon-actions/decorator';
@@ -184,8 +184,10 @@ const meta: Meta = {
     return html`
       <glide-core-tooltip
         label=${arguments_.label}
-        offset=${arguments_.offset}
-        placement=${arguments_.placement}
+        offset=${arguments_.offset === 4 ? nothing : arguments_.offset}
+        placement=${arguments_.placement === 'bottom'
+          ? nothing
+          : arguments_.placement}
         ?disabled=${arguments_.disabled}
         ?open=${arguments_.open}
         ?screenreader-hidden=${arguments_['screenreader-hidden']}


Reviews:
user: login: clintcs
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-17T17:37:24Z
user: login: clintcs
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-17T17:38:44Z
user: login: clintcs
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-17T17:41:31Z
user: login: clintcs
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-17T17:55:18Z
user: login: ynotdraw
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-17T17:59:13Z

Review comments:
diff_hunk: @@ -50,6 +50,11 @@ export default {
       },
       source: {
         format: 'html',
+        theme: create({
+          base: 'light',
+          fontBase: '"Nunito", sans-serif',
+          fontCode: 'monospace',
+        }),
path: .storybook/preview.js
user: login: clintcs
body: Moved this up from the bottom so it doesn't get lost among all the code below.
created_at: 2025-04-17T17:37:24Z
author_association: COLLABORATOR
diff_hunk: @@ -238,6 +187,7 @@ export default {
               'glide-core-dropdown-option',
             )) {
               $option.removeAttribute('aria-selected');
+              $option.removeAttribute('role');
path: .storybook/preview.js
user: login: clintcs
body: ## Before

<img width="997" alt="image" src="https://github.com/user-attachments/assets/1e3e6033-91eb-47ea-8dd2-53a3597b3e0e" />


## After

<img width="992" alt="image" src="https://github.com/user-attachments/assets/1260275e-83cb-45cb-83ab-9b829565a8b9" />

created_at: 2025-04-17T17:38:44Z
author_association: COLLABORATOR
diff_hunk: @@ -244,7 +246,6 @@ const meta: Meta = {
 
         <glide-core-dropdown
           label="Label"
-          placeholder="Placeholder"
path: src/form-controls-layout.stories.ts
user: login: clintcs
body: Elsewhere, we don't give optional attributes a value.
created_at: 2025-04-17T17:41:31Z
author_association: COLLABORATOR
diff_hunk: @@ -117,14 +117,18 @@ const meta: Meta = {
 
         <glide-core-tab-panel
           name="1"
-          style=${styleMap({
-            '--padding-inline-end':
-              arguments_['<glide-core-tab-panel>[--padding-inline-end]'] ||
-              null,
-            '--padding-inline-start':
-              arguments_['<glide-core-tab-panel>[--padding-inline-start]'] ||
-              null,
-          })}
+          style=${arguments_['<glide-core-tab-panel>[--padding-inline-end]'] ||
path: src/tab.group.stories.ts
user: login: clintcs
body: ## Before

<img width="992" alt="image" src="https://github.com/user-attachments/assets/ec8bb7a8-401b-4669-81b7-4bd4d1810e12" />


## After

<img width="994" alt="image" src="https://github.com/user-attachments/assets/f254c297-f14e-4807-99f5-562cebb778e2" />

created_at: 2025-04-17T17:55:18Z
author_association: COLLABORATOR

PR comments:
user: login: changeset-bot[bot]
created_at: 2025-04-17T14:58:14Z
body: ###  ⚠️  No Changeset found

Latest commit: 9492620528667d58347780dbb3f4563c261d0b7a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/CrowdStrike/glide-core/new/remove-argument-defaults?filename=.changeset/nine-wombats-nail.md&value=---%0A%22%40crowdstrike%2Fglide-core%22%3A%20patch%0A---%0A%0ARemove%20argument%20defaults%20in%20stories%20instead%20of%20%60preview.js%60%0A)


author_association: NONE
user: login: github-actions[bot]
created_at: 2025-04-17T14:59:56Z
body: ## Storybook
https://glide-core.crowdstrike-ux.workers.dev/remove-argument-defaults
<!-- Sticky Pull Request Commentstorybook -->
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-04-17T15:01:48Z
body: ## ⚠️ Visual Test Report
https://glide-core.crowdstrike-ux.workers.dev/remove-argument-defaults/visual-test-report
<!-- Sticky Pull Request Commentvisual-test-report -->
author_association: CONTRIBUTOR