feat: add t-shirt sizing to the Radio pattern

adobe · Aug 19, 2022 · fc49343 · fc49343
1 parent de70d92
commit fc49343
Show file tree

Hide file tree

Showing 13 changed files with 699 additions and 384 deletions.
diff --git a/packages/field-group/package.json b/packages/field-group/package.json
@@ -62,7 +62,7 @@
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/fieldgroup": "^3.1.4"
+        "@spectrum-css/fieldgroup": "^3.1.5-beta.1"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/field-label/package.json b/packages/field-label/package.json
@@ -64,7 +64,7 @@
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/fieldlabel": "^4.0.29"
+        "@spectrum-css/fieldlabel": "^4.0.30-beta.1"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/progress-bar/package.json b/packages/progress-bar/package.json
@@ -62,7 +62,7 @@
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/progressbar": "^1.0.33"
+        "@spectrum-css/progressbar": "^1.0.34-beta.1"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/radio/package.json b/packages/radio/package.json
@@ -73,7 +73,7 @@
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/radio": "^3.0.24"
+        "@spectrum-css/radio": "^4.0.0-beta.1"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/radio/src/Radio.ts b/packages/radio/src/Radio.ts
@@ -14,6 +14,7 @@ import {
     CSSResultArray,
     html,
     PropertyValues,
+    SizedMixin,
     SpectrumElement,
     TemplateResult,
 } from '@spectrum-web-components/base';
@@ -34,7 +35,9 @@ import radioStyles from './radio.css.js';
  *
  * @fires change - When the input is interacted with and its state is changed
  */
-export class Radio extends FocusVisiblePolyfillMixin(SpectrumElement) {
+export class Radio extends SizedMixin(
+    FocusVisiblePolyfillMixin(SpectrumElement)
+) {
     public static override get styles(): CSSResultArray {
         return [radioStyles];
     }

diff --git a/packages/radio/src/spectrum-config.js b/packages/radio/src/spectrum-config.js
@@ -43,6 +43,29 @@ const config = {
                     name: 'emphasized',
                     selector: '.spectrum-Radio--emphasized',
                 },
+                {
+                    type: 'enum',
+                    name: 'size',
+                    forceOntoHost: true,
+                    values: [
+                        {
+                            name: 's',
+                            selector: '.spectrum-Radio--sizeS',
+                        },
+                        {
+                            name: 'm',
+                            selector: '.spectrum-Radio--sizeM',
+                        },
+                        {
+                            name: 'l',
+                            selector: '.spectrum-Radio--sizeL',
+                        },
+                        {
+                            name: 'xl',
+                            selector: '.spectrum-Radio--sizeXL',
+                        },
+                    ],
+                },
             ],
             ids: [
                 {
@@ -61,7 +84,8 @@ const config = {
             complexSelectors: [
                 {
                     replacement: ':host(:focus-visible) .spectrum-Radio-input',
-                    selector: /^.spectrum-Radio .spectrum-Radio-input.focus-ring/,
+                    selector:
+                        /^.spectrum-Radio .spectrum-Radio-input.focus-ring/,
                 },
                 {
                     replacement: ':focus-visible .spectrum-Radio-input',