Repository: CrowdStrike/glide-core
Pull request #884: Remove Dropdown's `size` attribute
Author: login: clintcs
Created: 2025-05-07T19:31:53Z | Merged: 2025-05-08T14:34:30Z

## 🚀 Description

<!--

  - Tell us about your changes and the motivation for them.
  - Write "N/A" if your changes are explained by the PR's title.

-->

> ### Minor
> Dropdown's `size` attribute has been removed. Dropdown is now always large. Please get in touch with us if you have a use for `size="small"`.


`size="small"` was initially mocked up, so we built it. But there doesn't appear to be a use case for it. So Design asked me to remove it. I searched through consumers' code and found no uses of it.

## 📋 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


The visual test report should have us covered. 

<!--

  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/.changeset/shiny-guests-protect.md b/.changeset/shiny-guests-protect.md
new file mode 100644
index 000000000..97d234d89
--- /dev/null
+++ b/.changeset/shiny-guests-protect.md
@@ -0,0 +1,5 @@
+---
+'@crowdstrike/glide-core': minor
+---
+
+Dropdown's `size` attribute has been removed. Dropdown is now always large. Please get in touch with us if you have a use for `size="small"`.
diff --git a/custom-elements.json b/custom-elements.json
index 19b8ab8d2..a964581e1 100644
--- a/custom-elements.json
+++ b/custom-elements.json
@@ -1477,15 +1477,6 @@
               "attribute": "private-disable-label-tooltip",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "privateSize",
-              "type": {
-                "text": "'large' | 'small'"
-              },
-              "default": "'large'",
-              "attribute": "private-size"
-            },
             {
               "kind": "field",
               "name": "privateSplit",
@@ -1802,14 +1793,6 @@
               "default": "false",
               "fieldName": "privateDisableLabelTooltip"
             },
-            {
-              "name": "private-size",
-              "type": {
-                "text": "'large' | 'small'"
-              },
-              "default": "'large'",
-              "fieldName": "privateSize"
-            },
             {
               "name": "privateSplit",
               "type": {
@@ -2220,16 +2203,6 @@
               "default": "false",
               "attribute": "private-multiple"
             },
-            {
-              "kind": "field",
-              "name": "privateSize",
-              "type": {
-                "text": "'large' | 'small'"
-              },
-              "default": "'large'",
-              "attribute": "private-size",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "role",
@@ -2406,14 +2379,6 @@
               "default": "false",
               "fieldName": "privateMultiple"
             },
-            {
-              "name": "private-size",
-              "type": {
-                "text": "'large' | 'small'"
-              },
-              "default": "'large'",
-              "fieldName": "privateSize"
-            },
             {
               "name": "role",
               "type": {
@@ -2721,16 +2686,6 @@
               "attribute": "multiple",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'large' | 'small'"
-              },
-              "default": "'large'",
-              "attribute": "size",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "tooltip",
@@ -3056,14 +3011,6 @@
               "default": "false",
               "fieldName": "multiple"
             },
-            {
-              "name": "size",
-              "type": {
-                "text": "'large' | 'small'"
-              },
-              "default": "'large'",
-              "fieldName": "size"
-            },
             {
               "name": "tooltip",
               "type": {
diff --git a/src/checkbox.styles.ts b/src/checkbox.styles.ts
index 23a2849ac..b2f764d49 100644
--- a/src/checkbox.styles.ts
+++ b/src/checkbox.styles.ts
@@ -9,22 +9,12 @@ export default [
   css`
     .label-and-input-and-checkbox {
       align-items: center;
+      column-gap: var(--glide-core-spacing-base-sm);
       display: flex;
+      font-family: var(--glide-core-typography-family-primary);
+      font-size: var(--glide-core-typography-size-body-default);
+      font-weight: var(--glide-core-typography-weight-regular);
       line-height: 100%;
-
-      &.large {
-        column-gap: var(--glide-core-spacing-base-sm);
-        font-family: var(--glide-core-typography-family-primary);
-        font-size: var(--glide-core-typography-size-body-default);
-        font-weight: var(--glide-core-typography-weight-regular);
-      }
-
-      &.small {
-        column-gap: var(--glide-core-spacing-base-xs);
-        font-family: var(--glide-core-typography-family-primary);
-        font-size: var(--glide-core-typography-size-body-small);
-        font-weight: var(--glide-core-typography-weight-regular);
-      }
     }
 
     .input-and-checkbox-and-summary {
@@ -214,8 +204,10 @@ export default [
       }
     }
 
-    .summary.disabled {
-      color: var(--glide-core-color-interactive-text-default--disabled);
+    .summary {
+      &.disabled {
+        color: var(--glide-core-color-interactive-text-default--disabled);
+      }
     }
 
     .validity-message {
diff --git a/src/checkbox.ts b/src/checkbox.ts
index b30868087..c26ff9058 100644
--- a/src/checkbox.ts
+++ b/src/checkbox.ts
@@ -175,10 +175,6 @@ export default class GlideCoreCheckbox
   })
   privateDisableLabelTooltip = false;
 
-  // Private because it's only meant to be used by Dropdown.
-  @property({ attribute: 'private-size' })
-  privateSize: 'large' | 'small' = 'large';
-
   // Private because it's only meant to be used by Form Controls Layout.
   @property()
   privateSplit?: 'left' | 'middle' | 'right';
@@ -329,10 +325,7 @@ export default class GlideCoreCheckbox
         this.privateVariant === 'minimal',
         () => html`
           <label
-            class=${classMap({
-              'label-and-input-and-checkbox': true,
-              [this.privateSize]: true,
-            })}
+            class="label-and-input-and-checkbox"
             part="private-label-and-input-and-checkbox"
           >
             <div
diff --git a/src/dropdown.option.styles.ts b/src/dropdown.option.styles.ts
index a5fd935b9..d59de3123 100644
--- a/src/dropdown.option.styles.ts
+++ b/src/dropdown.option.styles.ts
@@ -26,29 +26,15 @@ export default [
       color: var(--glide-core-color-static-text-default);
       display: flex;
       flex-grow: 1;
+      font-family: var(--glide-core-typography-family-primary);
+      font-size: var(--glide-core-typography-size-body-default);
+      font-weight: var(--glide-core-typography-weight-regular);
       overflow: hidden;
+      padding-inline-start: 0.625rem;
       user-select: none;
 
-      &.large {
-        font-family: var(--glide-core-typography-family-primary);
-        font-size: var(--glide-core-typography-size-body-default);
-        font-weight: var(--glide-core-typography-weight-regular);
-        padding-inline-start: 0.625rem;
-
-        &:not(.count, .editable) {
-          padding-inline-end: var(--glide-core-spacing-base-sm);
-        }
-      }
-
-      &.small {
-        font-family: var(--glide-core-typography-family-primary);
-        font-size: var(--glide-core-typography-size-body-small);
-        font-weight: var(--glide-core-typography-weight-regular);
-        padding-inline-start: var(--glide-core-spacing-base-sm);
-
-        &:not(.count, .editable) {
-          padding-inline-end: var(--glide-core-spacing-base-xs);
-        }
+      &:not(.count, .editable) {
+        padding-inline-end: var(--glide-core-spacing-base-sm);
       }
 
       &.disabled {
@@ -60,33 +46,16 @@ export default [
       flex-grow: 1;
       overflow: hidden;
 
-      &.large {
-        &::part(private-label-and-input-and-checkbox) {
-          padding-inline-start: var(--glide-core-spacing-base-sm);
-        }
-
-        &:not(.count, .editable) {
-          &::part(private-label-and-input-and-checkbox) {
-            padding-inline-end: var(--glide-core-spacing-base-sm);
-          }
-        }
+      &::part(private-label-and-input-and-checkbox) {
+        block-size: var(--private-option-height);
+        padding-inline-start: var(--glide-core-spacing-base-sm);
       }
 
-      &.small {
+      &:not(.count, .editable) {
         &::part(private-label-and-input-and-checkbox) {
-          padding-inline-start: var(--glide-core-spacing-base-xs);
-        }
-
-        &:not(.count, .editable) {
-          &::part(private-label-and-input-and-checkbox) {
-            padding-inline-end: var(--glide-core-spacing-base-xs);
-          }
+          padding-inline-end: var(--glide-core-spacing-base-sm);
         }
       }
-
-      &::part(private-label-and-input-and-checkbox) {
-        block-size: var(--private-option-height);
-      }
     }
 
     .indeterminate-icon {
@@ -94,47 +63,21 @@ export default [
     }
 
     .icon-slot {
-      &.large {
-        &::slotted(*) {
-          block-size: 1rem;
-          inline-size: 1rem;
-        }
-      }
-
-      &.small {
-        &::slotted(*) {
-          block-size: 0.75rem;
-          inline-size: 0.75rem;
-        }
-      }
-
       &::slotted(*) {
         align-items: center;
+        block-size: 1rem;
         display: flex;
+        inline-size: 1rem;
         padding-inline-end: var(--glide-core-spacing-base-xs);
       }
     }
 
     .checkbox-icon-slot {
-      &.large {
-        &::slotted(*) {
-          block-size: 1rem;
-          inline-size: 1rem;
-        }
-      }
-
-      &.small {
-        &::slotted(*) {
-          block-size: 0.75rem;
-          inline-size: 0.75rem;
-        }
-      }
-
       &::slotted(*) {
         align-items: center;
-        block-size: 0.75rem;
+        block-size: 1rem;
         display: flex;
-        inline-size: 0.75rem;
+        inline-size: 1rem;
       }
     }
 
@@ -181,13 +124,7 @@ export default [
       }
 
       &:not(.count) {
-        &.large {
-          padding-inline-end: var(--glide-core-spacing-base-sm);
-        }
-
-        &.small {
-          padding-inline-end: var(--glide-core-spacing-base-xs);
-        }
+        padding-inline-end: var(--glide-core-spacing-base-sm);
       }
 
       &:focus {
diff --git a/src/dropdown.option.ts b/src/dropdown.option.ts
index 96859e5f9..4ad9ccfd6 100644
--- a/src/dropdown.option.ts
+++ b/src/dropdown.option.ts
@@ -153,10 +153,6 @@ export default class GlideCoreDropdownOption extends LitElement {
   @property({ attribute: 'private-multiple', type: Boolean })
   privateMultiple = false;
 
-  // Private because it's only meant to be used by Dropdown.
-  @property({ attribute: 'private-size', reflect: true, useDefault: true })
-  privateSize: 'large' | 'small' = 'large';
-
   @property({ reflect: true })
   override readonly role = 'option';
 
@@ -301,7 +297,6 @@ export default class GlideCoreDropdownOption extends LitElement {
         component: true,
         active: this.privateActive,
         disabled: this.disabled,
-        [this.privateSize]: true,
       })}
       data-test="component"
       ${ref(this.#componentElementRef)}
@@ -314,13 +309,11 @@ export default class GlideCoreDropdownOption extends LitElement {
               class=${classMap({
                 checkbox: true,
                 editable: this.editable,
-                [this.privateSize]: true,
               })}
               data-test="checkbox"
               label=${this.label ?? ''}
               tabindex="-1"
               private-label-tooltip-offset=${12}
-              private-size=${this.privateSize}
               private-variant="minimal"
               value=${this.value}
               @click=${this.#onCheckboxClick}
@@ -331,14 +324,7 @@ export default class GlideCoreDropdownOption extends LitElement {
               ?private-disable-label-tooltip=${this.disabled}
               ${ref(this.#checkboxElementRef)}
             >
-              <slot
-                class=${classMap({
-                  'checkbox-icon-slot': true,
-                  [this.privateSize]: true,
-                })}
-                name="icon"
-                slot="private-icon"
-              >
+              <slot class="checkbox-icon-slot" name="icon" slot="private-icon">
                 <!--
                   An icon before the label
                   @type {Element}
@@ -355,7 +341,6 @@ export default class GlideCoreDropdownOption extends LitElement {
                   count: Boolean(this.count),
                   disabled: this.disabled,
                   multiple: Boolean(this.isMultiple),
-                  [this.privateSize]: true,
                 })}
                 data-test="edit-button"
                 type="button"
@@ -370,7 +355,6 @@ export default class GlideCoreDropdownOption extends LitElement {
                 class=${classMap({
                   'count-container': true,
                   disabled: this.disabled,
-                  [this.privateSize]: true,
                 })}
                 data-test="count-container"
               >
@@ -394,12 +378,10 @@ export default class GlideCoreDropdownOption extends LitElement {
             count: Boolean(this.count),
             disabled: this.disabled,
             editable: this.editable,
-            [this.privateSize]: true,
           })}
           >
               <slot class=${classMap({
                 'icon-slot': true,
-                [this.privateSize]: true,
               })} name="icon">
               <!--
                 An icon before the label
@@ -446,7 +428,6 @@ export default class GlideCoreDropdownOption extends LitElement {
                     active: this.privateActive && this.privateIsEditActive,
                     count: Boolean(this.count),
                     disabled: this.disabled,
-                    [this.privateSize]: true,
                   })}
                   data-test="edit-button"
                   type="button"
@@ -462,7 +443,6 @@ export default class GlideCoreDropdownOption extends LitElement {
                   class=${classMap({
                     'count-container': true,
                     disabled: this.disabled,
-                    [this.privateSize]: true,
                   })}
                   data-test="count-container"
                 >
diff --git a/src/dropdown.stories.ts b/src/dropdown.stories.ts
index ae75f8174..dc9c4c86d 100644
--- a/src/dropdown.stories.ts
+++ b/src/dropdown.stories.ts
@@ -56,7 +56,6 @@ const meta: Meta = {
     'select-all': false,
     'setCustomValidity(message)': '',
     'setValidity(flags, message)': '',
-    size: 'large',
     'slot="description"': '',
     'slot="icon:<value>"': '',
     tooltip: '',
@@ -286,14 +285,6 @@ async (query: string): Promise<GlideCoreDropdownOption[] | void> => {
         type: { summary: 'string' },
       },
     },
-    size: {
-      control: { type: 'radio' },
-      options: ['large', 'small'],
-      table: {
-        defaultValue: { summary: '"large"' },
-        type: { summary: '"large" | "small"' },
-      },
-    },
     value: {
       table: {
         defaultValue: { summary: '[]' },
@@ -510,7 +501,6 @@ async (query: string): Promise<GlideCoreDropdownOption[] | void> => {
         ? 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}
@@ -604,8 +594,6 @@ export const WithIcons: StoryObj = {
         ? 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}
       ?filterable=${arguments_.filterable}
diff --git a/src/dropdown.styles.ts b/src/dropdown.styles.ts
index 5649a0bd3..ea91ac149 100644
--- a/src/dropdown.styles.ts
+++ b/src/dropdown.styles.ts
@@ -148,6 +148,8 @@ export default [
     }
 
     .options {
+      --private-option-height: 1.75rem;
+
       box-sizing: border-box;
       max-block-size: calc(
         var(--private-option-height) * 9 + var(--glide-core-spacing-base-xxxs) *
@@ -156,14 +158,6 @@ export default [
       overflow: auto;
       scroll-behavior: smooth;
 
-      &.large {
-        --private-option-height: 1.75rem;
-      }
-
-      &.small {
-        --private-option-height: 1.25rem;
-      }
-
       &.hidden {
         display: none;
       }
@@ -193,35 +187,23 @@ export default [
     }
 
     .add-button {
+      --private-size: 1rem;
+
       align-items: center;
       background-color: transparent;
       border: none;
       border-radius: var(--glide-core-rounding-base-radius-md);
+      column-gap: 0.625rem;
       display: flex;
       font-family: var(--glide-core-typography-family-primary);
+      font-size: var(--glide-core-typography-size-body-default);
       font-weight: var(--glide-core-typography-weight-regular);
       inline-size: 100%;
       line-height: 100%;
+      padding-block: 0.375rem;
+      padding-inline: var(--glide-core-spacing-base-sm);
       text-align: start;
 
-      &.large {
-        --private-size: 1rem;
-
-        column-gap: 0.625rem;
-        font-size: var(--glide-core-typography-size-body-default);
-        padding-block: 0.375rem;
-        padding-inline: var(--glide-core-spacing-base-sm);
-      }
-
-      &.small {
-        --private-size: 0.875rem;
-
-        column-gap: var(--glide-core-spacing-base-xs);
-        font-size: var(--glide-core-typography-size-body-small);
-        padding-block: var(--glide-core-spacing-base-xxxs);
-        padding-inline: var(--glide-core-spacing-base-xs);
-      }
-
       &:focus {
         outline: none;
       }
diff --git a/src/dropdown.test.interactions.ts b/src/dropdown.test.interactions.ts
index dc1004aeb..5da0e66aa 100644
--- a/src/dropdown.test.interactions.ts
+++ b/src/dropdown.test.interactions.ts
@@ -930,22 +930,6 @@ it('does not wrap on ArrowDown', async () => {
   expect(options[1]?.privateActive).to.be.true;
 });
 
-it('updates `privateSize` on every option when `size` is set programmatically', async () => {
-  const host = await fixture<GlideCoreDropdown>(
-    html`<glide-core-dropdown label="Label">
-      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
-      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
-    </glide-core-dropdown>`,
-  );
-
-  host.size = 'small';
-
-  const options = host.querySelectorAll('glide-core-dropdown-option');
-
-  expect(options[0]?.privateSize).to.equal('small');
-  expect(options[1]?.privateSize).to.equal('small');
-});
-
 it('opens when something other than its primary button is clicked', async () => {
   const host = await fixture<GlideCoreDropdown>(
     html`<glide-core-dropdown label="Label" placeholder="Placeholder">
diff --git a/src/dropdown.test.visuals.ts b/src/dropdown.test.visuals.ts
index fec187ba9..1cac34356 100644
--- a/src/dropdown.test.visuals.ts
+++ b/src/dropdown.test.visuals.ts
@@ -205,106 +205,6 @@ for (const story of stories.Dropdown) {
           );
         });
 
-        test.describe('size="large"', () => {
-          test('multiple=${true}', async ({ page }, test) => {
-            await page.goto(`?id=${story.id}&globals=theme:${theme}`);
-
-            await page
-              .locator('glide-core-dropdown')
-              .evaluate<void, GlideCoreDropdown>((element) => {
-                element.multiple = true;
-                element.open = true;
-              });
-
-            await page
-              .locator('glide-core-dropdown-option')
-              .first()
-              .evaluate<void, GlideCoreDropdownOption>((element) => {
-                element.selected = true;
-                element.count = 1000;
-                element.editable = true;
-              });
-
-            await expect(page).toHaveScreenshot(
-              `${test.titlePath.join('.')}.png`,
-            );
-          });
-
-          test('multiple=${false}', async ({ page }, test) => {
-            await page.goto(`?id=${story.id}&globals=theme:${theme}`);
-
-            await page
-              .locator('glide-core-dropdown')
-              .evaluate<void, GlideCoreDropdown>((element) => {
-                element.open = true;
-              });
-
-            await page
-              .locator('glide-core-dropdown-option')
-              .first()
-              .evaluate<void, GlideCoreDropdownOption>((element) => {
-                element.selected = true;
-                element.count = 1000;
-                element.editable = true;
-              });
-
-            await expect(page).toHaveScreenshot(
-              `${test.titlePath.join('.')}.png`,
-            );
-          });
-        });
-
-        test.describe('size="small"', () => {
-          test('multiple=${true}', async ({ page }, test) => {
-            await page.goto(`?id=${story.id}&globals=theme:${theme}`);
-
-            await page
-              .locator('glide-core-dropdown')
-              .evaluate<void, GlideCoreDropdown>((element) => {
-                element.multiple = true;
-                element.open = true;
-                element.size = 'small';
-              });
-
-            await page
-              .locator('glide-core-dropdown-option')
-              .first()
-              .evaluate<void, GlideCoreDropdownOption>((element) => {
-                element.selected = true;
-                element.count = 1000;
-                element.editable = true;
-              });
-
-            await expect(page).toHaveScreenshot(
-              `${test.titlePath.join('.')}.png`,
-            );
-          });
-
-          test('multiple=${false}', async ({ page }, test) => {
-            await page.goto(`?id=${story.id}&globals=theme:${theme}`);
-
-            await page
-              .locator('glide-core-dropdown')
-              .evaluate<void, GlideCoreDropdown>((element) => {
-                element.open = true;
-                element.size = 'small';
-              });
-
-            await page
-              .locator('glide-core-dropdown-option')
-              .first()
-              .evaluate<void, GlideCoreDropdownOption>((element) => {
-                element.selected = true;
-                element.count = 1000;
-                element.editable = true;
-              });
-
-            await expect(page).toHaveScreenshot(
-              `${test.titlePath.join('.')}.png`,
-            );
-          });
-        });
-
         test('slot="description"', async ({ page }, test) => {
           await page.goto(`?id=${story.id}&globals=theme:${theme}`);
 
diff --git a/src/dropdown.ts b/src/dropdown.ts
index 4219120e1..599ddc5c3 100644
--- a/src/dropdown.ts
+++ b/src/dropdown.ts
@@ -50,7 +50,6 @@ declare global {
  * @attr {boolean} [readonly=false]
  * @attr {boolean} [required=false]
  * @attr {boolean} [select-all=false]
- * @attr {'large'|'small'} [size='large']
  * @attr {string} [tooltip]
  * @attr {string[]} [value=[]]
  * @attr {'quiet'} [variant]
@@ -289,24 +288,6 @@ export default class GlideCoreDropdown
     }
   }
 
-  /**
-   * @default 'large'
-   */
-  @property({ reflect: true })
-  get size(): 'large' | 'small' {
-    return this.#size;
-  }
-
-  set size(size: 'large' | 'small') {
-    this.#size = size;
-
-    if (this.#optionElementsIncludingSelectAll) {
-      for (const option of this.#optionElementsIncludingSelectAll) {
-        option.privateSize = size;
-      }
-    }
-  }
-
   @property({ reflect: true })
   tooltip?: string;
 
@@ -726,7 +707,7 @@ export default class GlideCoreDropdown
                         data-id=${id}
                         label=${ifDefined(label)}
                         removable
-                        size=${this.size}
+                        size="large"
                         ?disabled=${this.disabled || this.readonly}
                         ?private-editable=${editable}
                         @edit=${this.#onTagEdit}
@@ -977,7 +958,6 @@ export default class GlideCoreDropdown
                   this.hasNoAvailableOptions ||
                   this.hasNoMatchingOptions ||
                   this.loading,
-                [this.size]: true,
               })}
               data-test="options"
               id="options"
@@ -998,7 +978,6 @@ export default class GlideCoreDropdown
                 class="select-all"
                 data-test="select-all"
                 label=${this.#localize.term('selectAll')}
-                private-size=${this.size}
                 private-multiple
                 ?hidden=${!this.selectAll || !this.multiple || this.isFiltering}
                 ?private-indeterminate=${this.isSomeSelected &&
@@ -1048,10 +1027,7 @@ export default class GlideCoreDropdown
               })}
             >
               <button
-                class=${classMap({
-                  'add-button': true,
-                  [this.size]: true,
-                })}
+                class="add-button"
                 data-test="add-button"
                 type="button"
                 @click=${this.#onAddButtonClick}
@@ -1309,8 +1285,6 @@ export default class GlideCoreDropdown
 
   #shadowRoot?: ShadowRoot;
 
-  #size: 'large' | 'small' = 'large';
-
   #tagsElementRef = createRef<HTMLElement>();
 
   #value: string[] = [];
@@ -1412,9 +1386,8 @@ export default class GlideCoreDropdown
     this.hasNoAvailableOptions = this.#optionElements.length === 0;
 
     for (const option of this.#optionElements) {
-      // Both here and in the `this.size` setter because no assignment happens on
+      // Both here and in the `this.multiple` setter because no assignment happens on
       // initial render.
-      option.privateSize = this.size;
       option.privateMultiple = this.multiple;
     }
 


Reviews:
user: login: clintcs
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-07T19:40:21Z
user: login: ynotdraw
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-05-08T11:55:34Z
user: login: danwenzel
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-05-08T14:21:08Z

Review comments:
diff_hunk: @@ -26,29 +26,15 @@ export default [
       color: var(--glide-core-color-static-text-default);
       display: flex;
       flex-grow: 1;
+      font-family: var(--glide-core-typography-family-primary);
+      font-size: var(--glide-core-typography-size-body-default);
+      font-weight: var(--glide-core-typography-weight-regular);
       overflow: hidden;
+      padding-inline-start: 0.625rem;
       user-select: none;
 
-      &.large {
path: src/dropdown.option.styles.ts
user: login: clintcs
body: Scrolling through this, I'm surprised how much weight `size` added.
created_at: 2025-05-07T19:40:21Z
author_association: COLLABORATOR

PR comments:
user: login: changeset-bot[bot]
created_at: 2025-05-07T19:31:56Z
body: ###  🦋  Changeset detected

Latest commit: 01675260278b024a1e60a6f24808f4fc8f15b877

**The changes in this PR will be included in the next version bump.**

<details><summary>This PR includes changesets to release 1 package</summary>

  | Name                    | Type  |
| ----------------------- | ----- |
| @crowdstrike/glide-core | Minor |

</details>

Not sure what this means? [Click here  to learn what changesets are](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add another changeset to this PR](https://github.com/CrowdStrike/glide-core/new/remove-dropdown-size-attribute?filename=.changeset/slow-bees-protect.md&value=---%0A%22%40crowdstrike%2Fglide-core%22%3A%20patch%0A---%0A%0ARemove%20Dropdown's%20%60size%60%20attribute%0A)


author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-07T19:40:41Z
body: ## Storybook
https://glide-core.crowdstrike-ux.workers.dev/remove-dropdown-size-attribute
<!-- Sticky Pull Request Commentstorybook -->
author_association: CONTRIBUTOR
user: login: github-actions[bot]
created_at: 2025-05-07T19:42:53Z
body: ## ✅ Visual Test Report
https://glide-core.crowdstrike-ux.workers.dev/remove-dropdown-size-attribute/visual-test-report
<!-- Sticky Pull Request Commentvisual-test-report -->
author_association: CONTRIBUTOR