Merge pull request #646 from universal-ember/switch-component-needs-to-have-configurable-thumb-button

NullVoxPopuli · web-flow · commit 516db7a9e819 · 2026-01-13T23:55:15.000-05:00
Switch needs configurable thumb
diff --git a/docs-app/app/routes/application.ts b/docs-app/app/routes/application.ts
@@ -145,6 +145,18 @@ export default class Application extends Route {
             };
           },
           'reactiveweb/remote-data': () => import('reactiveweb/remote-data'),
+          'reactiveweb/debounce': () => import('reactiveweb/debounce'),
+          'reactiveweb/sync': () => import('reactiveweb/sync'),
+          'reactiveweb/throttle': () => import('reactiveweb/throttle'),
+          'reactiveweb/link': () => import('reactiveweb/link'),
+          'reactiveweb/document-head': () => import('reactiveweb/document-head'),
+          'reactiveweb/effect': () => import('reactiveweb/effect'),
+          'reactiveweb/fps': () => import('reactiveweb/fps'),
+          'reactiveweb/function': () => import('reactiveweb/function'),
+          'reactiveweb/get-promise-state': () => import('reactiveweb/get-promise-state'),
+          'reactiveweb/image': () => import('reactiveweb/image'),
+          'reactiveweb/keep-latest': () => import('reactiveweb/keep-latest'),
+          'reactiveweb/wait-until': () => import('reactiveweb/wait-until'),
           'ember-focus-trap/modifiers/focus-trap': () =>
             // @ts-expect-error - no types provided
             import('ember-focus-trap/modifiers/focus-trap'),
diff --git a/docs-app/public/docs/3-ui/switch.md b/docs-app/public/docs/3-ui/switch.md
@@ -11,7 +11,8 @@ The Switch component is a user interface element used for toggling between two s
 See [Bootstrap Switch](https://getbootstrap.com/docs/5.3/forms/checks-radios/#switches) docs.
 
 ```gjs live preview
-import { Switch, Shadowed } from 'ember-primitives';
+import { Switch } from 'ember-primitives/components/switch';
+import { Shadowed } from 'ember-primitives/components/shadowed';
 
 <template>
   <Shadowed>
@@ -29,8 +30,7 @@ import { Switch, Shadowed } from 'ember-primitives';
 ```
 
 </details>
-
-<details><summary><h3>Dark/Light Theme Switch</h3></summary>
+<details open><summary><h3>Dark/Light Theme Switch</h3></summary>
 
 CSS inspired/taken from [this Codepen](https://codepen.io/Umer_Farooq/pen/eYJgKGN?editors=1100)
 
@@ -47,93 +47,156 @@ const toggleTheme = (e) =>
       <s.Control {{on 'change' toggleTheme}} />
       <s.Label>
         <span class="sr-only">Toggle between light and dark mode</span>
-        <Moon />
-        <Sun />
-        <span class="ball"></span>
+        <span class="ball" data-state={{if s.isChecked "on" "off"}}>
+          {{#if s.isChecked}}
+            <Moon />
+          {{else}}
+            <Sun />
+          {{/if}}
+      </span>
       </s.Label>
     </Switch>
 
     <style>
-      @import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
-
       * {box-sizing: border-box;}
 
-      div {
-        padding: 1rem;
-        font-family: "Montserrat", sans-serif;
-        background-color: #eee;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        text-align: center;
-        margin: 0;
-        transition: background 0.2s linear;
-      }
-
-      div.dark {background-color: #292c35;}
-      div.dark label { background-color: #9b59b6; }
-
-
-      input[type='checkbox'][role='switch'] {
-        opacity: 0;
-        position: absolute;
-      }
-
-      .sr-only {
-        width: 0px;
-        max-width: 0px;
-        height: 0px;
-        max-height: 0px;
-        overflow: hidden;
-        margin-left: -0.5rem;
+      @scope {
+        div {
+          padding: 1rem;
+          background-color: #eee;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+          text-align: center;
+          margin: 0;
+          transition: background 0.2s linear;
+          width: 100%;
+        }
+
+        div.dark {background-color: #292c35;}
+        div.dark label { background-color: #9b59b6; }
+
+
+        input[type='checkbox'][role='switch'] {
+          touch-action: pan-y;
+          opacity: 0;
+          position: absolute;
+        }
+
+        .sr-only {
+          width: 0px;
+          max-width: 0px;
+          height: 0px;
+          max-height: 0px;
+          overflow: hidden;
+          margin-left: -0.5rem;
+        }
+
+        label {
+          background-color: #aaaaff;
+          border: 1px solid;
+          width: 60px;
+          height: 32px;
+          border-radius: 50px;
+          position: relative;
+          padding: 5px;
+          cursor: pointer;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          gap: 0.5rem;
+        }
+
+        svg { fill: currentColor; position: absolute; top: 3px; left: 3px; }
+        .moon { color: #f1c4ff; }
+        .sun { color: #f39c12; }
+
+        label .ball {
+          background-color: #111;
+          width: 26px;
+          height: 26px;
+          position: absolute;
+          left: 2px;
+          top: 2px;
+          border-radius: 50%;
+          transition-property: transform filter;
+          transition-duration: 0.2s;
+          transition-timing-function: linear(0, 0.1, 0.25, 0.5, 0.68, 0.8, 0.88, 0.94, 0.98, 0.995, 1);;
+          border: 2px solid #f1c40f;
+
+          &[data-state="on"] {
+            border: 2px solid #f1c4ff;
+          }
+        }
+
+        label:hover .ball {
+          filter: drop-shadow(0 0 3px #f1c40f);
+        }
+        label:active .ball {
+          filter: drop-shadow(0 0 10px #f1c40f);
+        }
+        input[type='checkbox'][role='switch']:checked + label .ball {
+          transform: translateX(28px);
+        }
+        input[type='checkbox'][role='switch']:checked:hover + label .ball {
+          filter: drop-shadow(0 0 3px #f1c4ff);
+        }
+        input[type='checkbox'][role='switch']:checked:active + label .ball {
+          filter: drop-shadow(0 0 10px #f1c4ff);
+        }
       }
-
-      label {
-        background-color: #111;
-        width: 50px;
-        height: 26px;
-        border-radius: 50px;
-        position: relative;
-        padding: 5px;
-        cursor: pointer;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        gap: 0.5rem;
-      }
-
-      svg { fill: currentColor; }
-      .fa-moon { color: #f1c40f; }
-      .fa-sun { color: #f39c12; }
-
-      label .ball {
-        background-color: #fff;
-        width: 22px;
-        height: 22px;
-        position: absolute;
-        left: 2px;
-        top: 2px;
-        border-radius: 50%;
-        transition: transform 0.2s linear;
-      }
-
-      input[type='checkbox'][role='switch']:checked + label .ball {
-        transform: translateX(24px);
-      }
-
     </style>
   </Shadowed>
 </template>
 
 // 🎵 It's raining, it's pouring, ... 🎵
 // https://www.youtube.com/watch?v=ll5ykbAumD4
 const Sun = <template>
-  <svg class="fa-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">{{!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --}}<path d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"/></svg>
+  <svg
+    class="sun"
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <circle cx="8" cy="8" r="3.25" />
+    <line x1="8" y1="1" x2="8" y2="3" />
+    <line x1="8" y1="13" x2="8" y2="15" />
+    <line x1="1" y1="8" x2="3" y2="8" />
+    <line x1="13" y1="8" x2="15" y2="8" />
+    <line x1="3.05" y1="3.05" x2="4.47" y2="4.47" />
+    <line x1="11.53" y1="11.53" x2="12.95" y2="12.95" />
+    <line x1="11.53" y1="4.47" x2="12.95" y2="3.05" />
+    <line x1="3.05" y1="12.95" x2="4.47" y2="11.53" />
+  </svg>
 </template>;
 
 const Moon = <template>
-  <svg class="fa-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">{{!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --}}<path d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"/></svg>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class="moon"
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.5"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden="true"
+>
+  <path
+    transform="translate(-1 0)"
+    d="M11.5 2a5.5 5.5 0 1 0 2 9.5 4.5 4.5 0 0 1 -2 -9.5z"
+  />
+</svg>
 </template>;
 ```
 
@@ -234,3 +297,9 @@ Adheres to the `switch` [role requirements](https://www.w3.org/WAI/ARIA/apg/patt
 | <kbd>Enter</kbd> | Toggles the component's state |  
 
 In addition, a label is required so that users know what the switch is for.
+
+## References
+
+- https://web.dev/articles/building/a-switch-component
+- https://getbootstrap.com/docs/5.3/forms/checks-radios/#switches
+- https://web.dev/articles/building/a-switch-component
diff --git a/ember-primitives/src/components/-private/utils.ts b/ember-primitives/src/components/-private/utils.ts
@@ -3,14 +3,13 @@
  * otherwise fallback to the uncontrolled toggle
  */
 export function toggleWithFallback(
-  uncontrolledToggle: (...args: unknown[]) => void,
-
+  uncontrolledToggle: undefined | ((...args: any[]) => void) | (() => void),
   controlledToggle?: (...args: any[]) => void,
   ...args: unknown[]
 ) {
   if (controlledToggle) {
     return controlledToggle(...args);
   }
 
-  uncontrolledToggle(...args);
+  uncontrolledToggle?.(...args);
 }
diff --git a/ember-primitives/src/components/switch.gts b/ember-primitives/src/components/switch.gts
@@ -27,13 +27,27 @@ export interface Signature {
   Blocks: {
     default?: [
       {
+        /**
+         * The current state of the Switch.
+         *
+         * ```gjs
+         * import { Switch } from 'ember-primitives/components/switch';
+         *
+         * <template>
+         *   <Switch as |s|>
+         *     {{s.isChecked}}
+         *   </Switch>
+         * </template>
+         * ```
+         */
+        isChecked: boolean;
         /**
          * The Switch Element.
          * It has a pre-wired `id` so that the relevant Label is
          * appropriately associated via the `for` property of the Label.
          *
          * ```gjs
-         * import { Switch } from 'ember-primitives';
+         * import { Switch } from 'ember-primitives/components/switch';
          *
          * <template>
          *   <Switch as |s|>
@@ -48,7 +62,7 @@ export interface Signature {
          * the association to the Control by setting the `for` attribute to the `id` of the Control
          *
          * ```gjs
-         * import { Switch } from 'ember-primitives';
+         * import { Switch } from 'ember-primitive/components/switchs';
          *
          * <template>
          *   <Switch as |s|>
@@ -65,37 +79,42 @@ export interface Signature {
 
 interface ControlSignature {
   Element: HTMLInputElement;
-  Args: { id: string; checked?: boolean; onChange: () => void };
+  Args: { id: string; checked?: ReturnType<typeof cell<boolean>>; onChange: () => void };
 }
 
 const Checkbox: TOC<ControlSignature> = <template>
-  {{#let (cell @checked) as |checked|}}
-    <input
-      id={{@id}}
-      type="checkbox"
-      role="switch"
-      checked={{checked.current}}
-      aria-checked={{checked.current}}
-      data-state={{if checked.current "on" "off"}}
-      {{on "click" (fn toggleWithFallback checked.toggle @onChange)}}
-      ...attributes
-    />
-  {{/let}}
+  <input
+    id={{@id}}
+    type="checkbox"
+    role="switch"
+    checked={{@checked.current}}
+    aria-checked={{@checked.current}}
+    data-state={{if @checked.current "on" "off"}}
+    {{on "click" (fn toggleWithFallback @checked.toggle @onChange)}}
+    ...attributes
+  />
 </template>;
 
+function defaultFalse(value: unknown) {
+  return value ?? false;
+}
+
 /**
  * @public
  */
 export const Switch: TOC<Signature> = <template>
   <div ...attributes data-prim-switch>
-    {{! @glint-nocheck }}
     {{#let (uniqueId) as |id|}}
-      {{yield
-        (hash
-          Control=(component Checkbox checked=@checked id=id onChange=@onChange)
-          Label=(component Label for=id)
-        )
-      }}
+      {{#let (cell (defaultFalse @checked)) as |checked|}}
+        {{! @glint-nocheck }}
+        {{yield
+          (hash
+            isChecked=checked.current
+            Control=(component Checkbox checked=checked id=id onChange=@onChange)
+            Label=(component Label for=id)
+          )
+        }}
+      {{/let}}
     {{/let}}
   </div>
 </template>;
diff --git a/test-app/tests/switch/rendering-test.gts b/test-app/tests/switch/rendering-test.gts
