feat: add t-shirt sizing to the Radio pattern

.circleci/config.yml

@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: 1c2080150323a1989ad3af30e706a570ef280f23
+        default: 6dc6af331a25eb51bf40892702e95ea3e84eb3fe
 commands:
     downstream:
         steps:

packages/action-button/package.json

@@ -64,7 +64,7 @@
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/actionbutton": "^2.1.1"
+        "@spectrum-css/actionbutton": "^2.1.3"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

packages/close-button/package.json

@@ -46,7 +46,7 @@
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/closebutton": "^2.0.0"
+        "@spectrum-css/closebutton": "^2.0.2"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

packages/help-text/package.json

@@ -82,7 +82,7 @@
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/helptext": "^2.0.2"
+        "@spectrum-css/helptext": "^2.0.4"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

packages/radio/README.md

@@ -30,17 +30,63 @@ import {
 } from '@spectrum-web-components/radio';
 ```
 
-### Example
+## Sizes
+
+<sp-tabs selected="m" auto label="Size Attribute Options">
+<sp-tab value="s">Small</sp-tab>
+<sp-tab-panel value="s">
 
 ```html
 <sp-radio-group selected="first" name="example">
-    <sp-radio value="first">Option 1</sp-radio>
-    <sp-radio value="second">Option 2</sp-radio>
-    <sp-radio value="third">Option 3</sp-radio>
-    <sp-radio value="fourth">Option 4</sp-radio>
+    <sp-radio value="first" size="s">Option 1</sp-radio>
+    <sp-radio value="second" size="s">Option 2</sp-radio>
+    <sp-radio value="third" size="s">Option 3</sp-radio>
+    <sp-radio value="fourth" size="s">Option 4</sp-radio>
 </sp-radio-group>
 ```
 
+</sp-tab-panel>
+<sp-tab value="m">Medium</sp-tab>
+<sp-tab-panel value="m">
+
+```html
+<sp-radio-group selected="first" name="example">
+    <sp-radio value="first" size="m">Option 1</sp-radio>
+    <sp-radio value="second" size="m">Option 2</sp-radio>
+    <sp-radio value="third" size="m">Option 3</sp-radio>
+    <sp-radio value="fourth" size="m">Option 4</sp-radio>
+</sp-radio-group>
+```
+
+</sp-tab-panel>
+<sp-tab value="l">Large</sp-tab>
+<sp-tab-panel value="l">
+
+```html
+<sp-radio-group selected="first" name="example">
+    <sp-radio value="first" size="l">Option 1</sp-radio>
+    <sp-radio value="second" size="l">Option 2</sp-radio>
+    <sp-radio value="third" size="l">Option 3</sp-radio>
+    <sp-radio value="fourth" size="l">Option 4</sp-radio>
+</sp-radio-group>
+```
+
+</sp-tab-panel>
+<sp-tab value="xl">Extra Large</sp-tab>
+<sp-tab-panel value="xl">
+
+```html
+<sp-radio-group selected="first" name="example">
+    <sp-radio value="first" size="xl">Option 1</sp-radio>
+    <sp-radio value="second" size="xl">Option 2</sp-radio>
+    <sp-radio value="third" size="xl">Option 3</sp-radio>
+    <sp-radio value="fourth" size="xl">Option 4</sp-radio>
+</sp-radio-group>
+```
+
+</sp-tab-panel>
+</sp-tabs>
+
 ### Standard radio buttons
 
 Standard radio buttons are the default style for radio buttons. They are optimal for application panels where all visual elements are monochrome in order to direct focus to the content.

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"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

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];
     }

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',