Radio button fix (#1524)

* fix formatting

* fix radio button spacing; fixes #1523

docs/pages/resources/changelog.md

@@ -12,6 +12,10 @@ Components with the <sl-badge variant="warning" pill>Experimental</sl-badge> bad
 
 New versions of Shoelace are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style).
 
+## Next
+
+- Fixed a regression that caused `<sl-radio-button>` to render incorrectly with gaps [#1523]
+
 ## 2.7.0
 
 - Added the experimental `<sl-copy-button>` component [#1473]

package.json

@@ -25,15 +25,8 @@
     "./dist/react/*": "./dist/react/*",
     "./dist/translations/*": "./dist/translations/*"
   },
-  "files": [
-    "dist",
-    "cdn"
-  ],
-  "keywords": [
-    "web components",
-    "custom elements",
-    "components"
-  ],
+  "files": ["dist", "cdn"],
+  "keywords": ["web components", "custom elements", "components"],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/shoelace-style/shoelace.git"
@@ -140,9 +133,6 @@
     "user-agent-data-types": "^0.3.0"
   },
   "lint-staged": {
-    "*.{ts,js}": [
-      "eslint --max-warnings 0 --cache --fix",
-      "prettier --write"
-    ]
+    "*.{ts,js}": ["eslint --max-warnings 0 --cache --fix", "prettier --write"]
   }
 }

src/components/button-group/button-group.component.ts

@@ -54,7 +54,7 @@ export default class SlButtonGroup extends ShoelaceElement {
       const index = slottedElements.indexOf(el);
       const button = findButton(el);
 
-      if (button !== null) {
+      if (button) {
         button.classList.add('sl-button-group__button');
         button.classList.toggle('sl-button-group__button--first', index === 0);
         button.classList.toggle('sl-button-group__button--inner', index > 0 && index < slottedElements.length - 1);

src/components/radio-button/radio-button.test.ts

@@ -20,4 +20,26 @@ describe('<sl-radio-button>', () => {
     expect(radio1.checked).to.be.true;
     expect(radio2.checked).to.be.false;
   });
+
+  it('should receive positional classes from <sl-button-group>', async () => {
+    const radioGroup = await fixture<SlRadioGroup>(html`
+      <sl-radio-group value="1">
+        <sl-radio-button id="radio-1" value="1"></sl-radio-button>
+        <sl-radio-button id="radio-2" value="2"></sl-radio-button>
+        <sl-radio-button id="radio-3" value="3"></sl-radio-button>
+      </sl-radio-group>
+    `);
+    const radio1 = radioGroup.querySelector<SlRadioButton>('#radio-1')!;
+    const radio2 = radioGroup.querySelector<SlRadioButton>('#radio-2')!;
+    const radio3 = radioGroup.querySelector<SlRadioButton>('#radio-3')!;
+
+    await Promise.all([radioGroup.updateComplete, radio1.updateComplete, radio2.updateComplete, radio3.updateComplete]);
+
+    expect(radio1.classList.contains('sl-button-group__button')).to.be.true;
+    expect(radio1.classList.contains('sl-button-group__button--first')).to.be.true;
+    expect(radio2.classList.contains('sl-button-group__button')).to.be.true;
+    expect(radio2.classList.contains('sl-button-group__button--inner')).to.be.true;
+    expect(radio3.classList.contains('sl-button-group__button')).to.be.true;
+    expect(radio3.classList.contains('sl-button-group__button--last')).to.be.true;
+  });
 });

src/components/radio-group/radio-group.component.ts

@@ -327,11 +327,8 @@ export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFor
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
-
     const defaultSlot = html`
-      <span @click=${this.handleRadioClick} @keydown=${this.handleKeyDown} role="presentation">
-        <slot @slotchange=${this.syncRadios}></slot>
-      </span>
+      <slot @slotchange=${this.syncRadios} @click=${this.handleRadioClick} @keydown=${this.handleKeyDown}></slot>
     `;
 
     return html`
@@ -378,7 +375,7 @@ export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFor
 
           ${this.hasButtonGroup
             ? html`
-                <sl-button-group part="button-group" exportparts="base:button-group__base">
+                <sl-button-group part="button-group" exportparts="base:button-group__base" role="presentation">
                   ${defaultSlot}
                 </sl-button-group>
               `
@@ -395,6 +392,5 @@ export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFor
         </div>
       </fieldset>
     `;
-    /* eslint-enable lit-a11y/click-events-have-key-events */
   }
 }