fixes #1071

2026-01-12 04:09:12 +00:00 · 2022-12-13 09:28:12 -05:00
parent 3675787ddd
commit 752f5cff55
12 changed files with 193 additions and 32 deletions
--- a/docs/components/checkbox.md
+++ b/docs/components/checkbox.md
@@ -58,6 +58,32 @@ import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
 const App = () => <SlCheckbox disabled>Disabled</SlCheckbox>;
 ```

+## Sizes
+
+Use the `size` attribute to change a checkbox's size.
+
+```html preview
+<sl-checkbox size="small">Small</sl-checkbox>
+<br />
+<sl-checkbox size="medium">Medium</sl-checkbox>
+<br />
+<sl-checkbox size="large">Large</sl-checkbox>
+```
+
+```jsx react
+import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlCheckbox size="small">Small</SlCheckbox>
+    <br />
+    <SlCheckbox size="medium">Medium</SlCheckbox>
+    <br />
+    <SlCheckbox size="large">Large</SlCheckbox>
+  </>
+);
+```
+
 ### Custom Validity

 Use the `setCustomValidity()` method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.
--- a/docs/components/radio.md
+++ b/docs/components/radio.md
@@ -78,4 +78,28 @@ const App = () => (
 );
 ```

+## Sizes
+
+Use the `size` attribute to change a radio's size.
+
+```html preview
+<sl-radio size="small">Small</sl-radio>
+<sl-radio size="medium">Medium</sl-radio>
+<sl-radio size="large">Large</sl-radio>
+```
+
+```jsx react
+import { SlRadio } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlRadio size="small">Small</SlRadio>
+    <br />
+    <SlRadio size="medium">Medium</SlRadio>
+    <br />
+    <SlRadio size="large">Large</SlRadio>
+  </>
+);
+```
+
 [component-metadata:sl-radio]
--- a/docs/components/switch.md
+++ b/docs/components/switch.md
@@ -44,12 +44,38 @@ import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
 const App = () => <SlSwitch disabled>Disabled</SlSwitch>;
 ```

-### Custom Size
+## Sizes

-Use the available custom properties to make the switch a different size.
+Use the `size` attribute to change a switch's size.

 ```html preview
-<sl-switch style="--width: 80px; --height: 32px; --thumb-size: 26px;">Really big</sl-switch>
+<sl-switch size="small">Small</sl-switch>
+<br />
+<sl-switch size="medium">Medium</sl-switch>
+<br />
+<sl-switch size="large">Large</sl-switch>
+```
+
+```jsx react
+import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <SlSwitch size="small">Small</SlSwitch>
+    <br />
+    <SlSwitch size="medium">Medium</SlSwitch>
+    <br />
+    <SlSwitch size="large">Large</SlSwitch>
+  </>
+);
+```
+
+### Custom Styles
+
+Use the available custom properties to change how the switch is styled.
+
+```html preview
+<sl-switch style="--width: 80px; --height: 40px; --thumb-size: 36px;">Really big</sl-switch>
 ```

 ```jsx react
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -10,12 +10,17 @@ New versions of Shoelace are released as-needed and generally occur when a criti

 ## Next

+- 🚨 BREAKING: changed the default size of medium checkboxes, radios, and switches to 18px instead of 16px
+- 🚨 BREAKING: renamed the `--sl-toggle-size` design token to `--sl-toggle-size-medium`
+- Added the `--sl-toggle-size-small` and `--sl-toggle-size-large` design tokens
+- Added the `size` attribute to `<sl-checkbox>`, `<sl-radio>`, and `<sl-switch>` [#1071](https://github.com/shoelace-style/shoelace/issues/1071)
 - Added the `sl-input` event to `<sl-checkbox>`, `<sl-color-picker>`, `<sl-radio>`, `<sl-range>`, and `<sl-switch>`
 - Fixed a bug in `<sl-color-picker>` that sometimes prevented the color from updating when clicking or tapping on the controls
 - Fixed a bug in `<sl-color-picker>` that prevented text from being entered in the color input
 - Fixed a bug in `<sl-input>` that caused the `sl-change` event to be incorrectly emitted when the value was set programmatically [#917](https://github.com/shoelace-style/shoelace/issues/917)
 - Fixed a bug in `<sl-input>` and `<sl-textarea>` that made it impossible to disable spell checking [#1061](https://github.com/shoelace-style/shoelace/issues/1061)
 - Fixed non-modal behaviors in `<sl-drawer>` when using the `contained` attribute [#1051](https://github.com/shoelace-style/shoelace/issues/1051)
+- Fixed a bug in `<sl-checkbox>` and `<sl-radio>` that caused the checked icons to not scale property when resized
 - Removed the `formdata` event polyfill since it's now available in the last two versions of all major browsers

 ## 2.0.0-beta.86
--- a/src/components/checkbox/checkbox.styles.ts
+++ b/src/components/checkbox/checkbox.styles.ts
@@ -12,21 +12,35 @@ export default css`
    display: inline-flex;
    align-items: top;
    font-family: var(--sl-input-font-family);
-    font-size: var(--sl-input-font-size-medium);
    font-weight: var(--sl-input-font-weight);
    color: var(--sl-input-color);
    vertical-align: middle;
    cursor: pointer;
  }

+  .checkbox--small {
+    --toggle-size: var(--sl-toggle-size-small);
+    font-size: var(--sl-input-font-size-small);
+  }
+
+  .checkbox--medium {
+    --toggle-size: var(--sl-toggle-size-medium);
+    font-size: var(--sl-input-font-size-medium);
+  }
+
+  .checkbox--large {
+    --toggle-size: var(--sl-toggle-size-large);
+    font-size: var(--sl-input-font-size-large);
+  }
+
  .checkbox__control {
    flex: 0 0 auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
-    width: var(--sl-toggle-size);
-    height: var(--sl-toggle-size);
+    width: var(--toggle-size);
+    height: var(--toggle-size);
    border: solid var(--sl-input-border-width) var(--sl-input-border-color);
    border-radius: 2px;
    background-color: var(--sl-input-background-color);
@@ -43,10 +57,11 @@ export default css`
    pointer-events: none;
  }

-  .checkbox__control .checkbox__icon {
+  .checkbox__checked-icon,
+  .checkbox__indeterminate-icon {
    display: inline-flex;
-    width: var(--sl-toggle-size);
-    height: var(--sl-toggle-size);
+    width: var(--toggle-size);
+    height: var(--toggle-size);
  }

  /* Hover */
@@ -91,7 +106,7 @@ export default css`
  .checkbox__label {
    display: inline-block;
    color: var(--sl-input-label-color);
-    line-height: var(--sl-toggle-size);
+    line-height: var(--toggle-size);
    margin-inline-start: 0.5em;
    user-select: none;
  }
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -58,6 +58,9 @@ export default class SlCheckbox extends ShoelaceElement implements ShoelaceFormC
  /** The current value of the checkbox, submitted as a name/value pair with form data. */
  @property() value: string;

+  /** The checkbox's size. */
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+
  /** Disables the checkbox. */
  @property({ type: Boolean, reflect: true }) disabled = false;

@@ -158,7 +161,10 @@ export default class SlCheckbox extends ShoelaceElement implements ShoelaceFormC
          'checkbox--checked': this.checked,
          'checkbox--disabled': this.disabled,
          'checkbox--focused': this.hasFocus,
-          'checkbox--indeterminate': this.indeterminate
+          'checkbox--indeterminate': this.indeterminate,
+          'checkbox--small': this.size === 'small',
+          'checkbox--medium': this.size === 'medium',
+          'checkbox--large': this.size === 'large'
        })}
      >
        <input
@@ -179,9 +185,20 @@ export default class SlCheckbox extends ShoelaceElement implements ShoelaceFormC
        />

        <span part="control" class="checkbox__control">
-          ${this.checked ? html` <sl-icon part="checked-icon" library="system" name="check"></sl-icon> ` : ''}
+          ${this.checked
+            ? html`
+                <sl-icon part="checked-icon" class="checkbox__checked-icon" library="system" name="check"></sl-icon>
+              `
+            : ''}
          ${!this.checked && this.indeterminate
-            ? html` <sl-icon part="indeterminate-icon" library="system" name="indeterminate"></sl-icon> `
+            ? html`
+                <sl-icon
+                  part="indeterminate-icon"
+                  class="checkbox__indeterminate-icon"
+                  library="system"
+                  name="indeterminate"
+                ></sl-icon>
+              `
            : ''}
        </span>

--- a/src/components/radio/radio.styles.ts
+++ b/src/components/radio/radio.styles.ts
@@ -23,15 +23,25 @@ export default css`
    cursor: pointer;
  }

-  .radio__icon {
-    display: inline-flex;
-    width: var(--sl-toggle-size);
-    height: var(--sl-toggle-size);
+  .radio--small {
+    --toggle-size: var(--sl-toggle-size-small);
+    font-size: var(--sl-input-font-size-small);
  }

-  .radio__icon svg {
-    width: 100%;
-    height: 100%;
+  .radio--medium {
+    --toggle-size: var(--sl-toggle-size-medium);
+    font-size: var(--sl-input-font-size-medium);
+  }
+
+  .radio--large {
+    --toggle-size: var(--sl-toggle-size-large);
+    font-size: var(--sl-input-font-size-large);
+  }
+
+  .radio__checked-icon {
+    display: inline-flex;
+    width: var(--toggle-size);
+    height: var(--toggle-size);
  }

  .radio__control {
@@ -40,8 +50,8 @@ export default css`
    display: inline-flex;
    align-items: center;
    justify-content: center;
-    width: var(--sl-toggle-size);
-    height: var(--sl-toggle-size);
+    width: var(--toggle-size);
+    height: var(--toggle-size);
    border: solid var(--sl-input-border-width) var(--sl-input-border-color);
    border-radius: 50%;
    background-color: var(--sl-input-background-color);
@@ -97,7 +107,7 @@ export default css`
  .radio__label {
    display: inline-block;
    color: var(--sl-input-label-color);
-    line-height: var(--sl-toggle-size);
+    line-height: var(--toggle-size);
    margin-inline-start: 0.5em;
    user-select: none;
  }
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -36,6 +36,9 @@ export default class SlRadio extends ShoelaceElement {
  /** The radio's value. When selected, the radio group will receive this value. */
  @property() value: string;

+  /** The radio's size. */
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+
  /** Disables the radio. */
  @property({ type: Boolean, reflect: true }) disabled = false;

@@ -92,11 +95,16 @@ export default class SlRadio extends ShoelaceElement {
          radio: true,
          'radio--checked': this.checked,
          'radio--disabled': this.disabled,
-          'radio--focused': this.hasFocus
+          'radio--focused': this.hasFocus,
+          'radio--small': this.size === 'small',
+          'radio--medium': this.size === 'medium',
+          'radio--large': this.size === 'large'
        })}
      >
        <span part="${`control${this.checked ? ' control--checked' : ''}`}" class="radio__control">
-          ${this.checked ? html` <sl-icon part="checked-icon" library="system" name="radio"></sl-icon> ` : ''}
+          ${this.checked
+            ? html` <sl-icon part="checked-icon" class="radio__checked-icon" library="system" name="radio"></sl-icon> `
+            : ''}
        </span>

        <slot part="label" class="radio__label"></slot>
--- a/src/components/switch/switch.styles.ts
+++ b/src/components/switch/switch.styles.ts
@@ -5,18 +5,38 @@ export default css`
  ${componentStyles}

  :host {
-    --height: var(--sl-toggle-size);
-    --thumb-size: calc(var(--sl-toggle-size) + 4px);
+    display: inline-block;
+  }
+
+  :host([size='small']) {
+    --height: var(--sl-toggle-size-small);
+    --thumb-size: calc(var(--sl-toggle-size-small) + 4px);
    --width: calc(var(--height) * 2);

-    display: inline-block;
+    font-size: var(--sl-input-font-size-small);
+  }
+
+  :host([size='medium']) {
+    --height: var(--sl-toggle-size-medium);
+    --thumb-size: calc(var(--sl-toggle-size-medium) + 4px);
+    --width: calc(var(--height) * 2);
+
+    font-size: var(--sl-input-font-size-medium);
+  }
+
+  :host([size='large']) {
+    --height: var(--sl-toggle-size-large);
+    --thumb-size: calc(var(--sl-toggle-size-large) + 4px);
+    --width: calc(var(--height) * 2);
+
+    font-size: var(--sl-input-font-size-large);
  }

  .switch {
    display: inline-flex;
    align-items: center;
    font-family: var(--sl-input-font-family);
-    font-size: var(--sl-input-font-size-medium);
+    font-size: inherit;
    font-weight: var(--sl-input-font-weight);
    color: var(--sl-input-color);
    vertical-align: middle;
--- a/src/components/switch/switch.ts
+++ b/src/components/switch/switch.ts
@@ -56,6 +56,9 @@ export default class SlSwitch extends ShoelaceElement implements ShoelaceFormCon
  /** The current value of the switch, submitted as a name/value pair with form data. */
  @property() value: string;

+  /** The switch's size. */
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+
  /** Disables the switch. */
  @property({ type: Boolean, reflect: true }) disabled = false;

@@ -159,7 +162,10 @@ export default class SlSwitch extends ShoelaceElement implements ShoelaceFormCon
          switch: true,
          'switch--checked': this.checked,
          'switch--disabled': this.disabled,
-          'switch--focused': this.hasFocus
+          'switch--focused': this.hasFocus,
+          'switch--small': this.size === 'small',
+          'switch--medium': this.size === 'medium',
+          'switch--large': this.size === 'large'
        })}
      >
        <input
--- a/src/themes/dark.css
+++ b/src/themes/dark.css
@@ -487,7 +487,9 @@
  --sl-input-help-text-color: var(--sl-color-neutral-500);

  /* Toggles (checkboxes, radios, switches) */
-  --sl-toggle-size: 1rem;
+  --sl-toggle-size-small: 0.875rem; /* 14px @ 16px base  */
+  --sl-toggle-size-medium: 1.125rem; /* 18px @ 16px base */
+  --sl-toggle-size-large: 1.375rem; /* 22px @ 16px base */

  /*
   * Overlays
--- a/src/themes/light.css
+++ b/src/themes/light.css
@@ -487,7 +487,9 @@
  --sl-input-help-text-color: var(--sl-color-neutral-500);

  /* Toggles (checkboxes, radios, switches) */
-  --sl-toggle-size: 1rem;
+  --sl-toggle-size-small: 0.875rem; /* 14px @ 16px base  */
+  --sl-toggle-size-medium: 1.125rem; /* 18px @ 16px base */
+  --sl-toggle-size-large: 1.375rem; /* 22px @ 16px base */

  /*
   * Overlays