fix(sbb-radio-button-group, sbb-checkbox-group): fix disabled and req…

…uired state exchange (#2273)
sbb-design-systems · Dec 7, 2023 · 8608c99 · 8608c99
1 parent 2c4cf25
commit 8608c99
Show file tree

Hide file tree

Showing 26 changed files with 242 additions and 327 deletions.
diff --git a/config/custom-elements-manifest.config.js b/config/custom-elements-manifest.config.js
@@ -4,16 +4,27 @@
 export default {
   litelement: true,
   globs: ['src/components/**/*.ts'],
-  exclude: ['**/*.spec.ts', '**/*.e2e.ts', '**/*.stories.tsx'],
+  exclude: ['**/*.spec.ts', '**/*.e2e.ts', '**/*.stories.ts'],
   outdir: 'dist/components',
   dependencies: false,
   packagejson: false,
   plugins: [
     {
       packageLinkPhase({ customElementsManifest }) {
-        customElementsManifest.modules.forEach(
-          (m) => (m.path = m.path.replace(/^src\/components\//, '').replace(/\/[^/.]+.ts$/, '')),
-        );
+        for (const module of customElementsManifest.modules) {
+          module.path = module.path.replace(/^src\/components\//, '').replace(/\/[^/.]+.ts$/, '');
+          for (const declaration of module.declarations.filter((d) => d.kind === 'class')) {
+            for (const member of declaration.members) {
+              if (member.name.startsWith('_') && member.default) {
+                const publicName = member.name.replace(/^_/, '');
+                const publicMember = declaration.members.find((m) => m.name === publicName);
+                if (publicMember) {
+                  publicMember.default = member.default;
+                }
+              }
+            }
+          }
+        }
       },
     },
   ],

diff --git a/src/components/accordion/readme.md b/src/components/accordion/readme.md
@@ -45,9 +45,9 @@ In the following example, all the `sbb-expansion-panel-header` would be wrapped
 
 | Name               | Attribute           | Privacy | Type                 | Default | Description                                                                 |
 | ------------------ | ------------------- | ------- | -------------------- | ------- | --------------------------------------------------------------------------- |
-| `titleLevel`       | `title-level`       | public  | `TitleLevel \| null` |         | The heading level for the sbb-expansion-panel-headers within the component. |
+| `titleLevel`       | `title-level`       | public  | `TitleLevel \| null` | `null`  | The heading level for the sbb-expansion-panel-headers within the component. |
 | `disableAnimation` | `disable-animation` | public  | `boolean`            | `false` | Whether the animation should be disabled.                                   |
-| `multi`            | `multi`             | public  | `boolean`            |         | Whether more than one sbb-expansion-panel can be open at the same time.     |
+| `multi`            | `multi`             | public  | `boolean`            | `false` | Whether more than one sbb-expansion-panel can be open at the same time.     |
 
 ## Slots
 

diff --git a/src/components/card/card-action/readme.md b/src/components/card/card-action/readme.md
@@ -28,7 +28,7 @@ as it is used for search engines and screen-reader users.
 
 | Name       | Attribute  | Privacy | Type                                                 | Default | Description                                                                     |
 | ---------- | ---------- | ------- | ---------------------------------------------------- | ------- | ------------------------------------------------------------------------------- |
-| `active`   | `active`   | public  | `boolean`                                            |         | Whether the card is active.                                                     |
+| `active`   | `active`   | public  | `boolean`                                            | `false` | Whether the card is active.                                                     |
 | `href`     | `href`     | public  | `string \| undefined`                                |         | The href value you want to link to.                                             |
 | `target`   | `target`   | public  | `LinkTargetType \| string \| undefined \| undefined` |         | Where to display the linked URL.                                                |
 | `rel`      | `rel`      | public  | `string \| undefined \| undefined`                   |         | The relationship of the linked URL as space-separated link types.               |

diff --git a/src/components/checkbox/checkbox-group/checkbox-group.e2e.ts b/src/components/checkbox/checkbox-group/checkbox-group.e2e.ts
@@ -38,14 +38,12 @@ describe('sbb-checkbox-group', () => {
     await waitForLitRender(element);
     expect(element).to.have.attribute('disabled');
 
-    expect(checkboxOne).to.have.attribute('data-group-disabled');
-    expect(checkboxTwo).to.have.attribute('data-group-disabled');
+    expect(checkboxOne).to.have.attribute('disabled');
     expect(checkboxTwo).to.have.attribute('disabled');
-    expect(checkboxThree).to.have.attribute('data-group-disabled');
+    expect(checkboxThree).to.have.attribute('disabled');
 
     element.removeAttribute('disabled');
     await waitForLitRender(element);
-    expect(checkboxTwo).not.to.have.attribute('data-group-disabled');
     expect(checkboxTwo).to.have.attribute('disabled');
   });
 
@@ -82,9 +80,9 @@ describe('sbb-checkbox-group', () => {
     element.setAttribute('required', 'true');
     await waitForLitRender(element);
     expect(element).to.have.attribute('required');
-    expect(checkboxOne).to.have.attribute('data-group-required');
-    expect(checkboxTwo).to.have.attribute('data-group-required');
-    expect(checkboxThree).to.have.attribute('data-group-required');
+    expect(checkboxOne).to.have.attribute('required');
+    expect(checkboxTwo).to.have.attribute('required');
+    expect(checkboxThree).to.have.attribute('required');
   });
 
   it('arrow navigation', async () => {

diff --git a/src/components/checkbox/checkbox-group/checkbox-group.ts b/src/components/checkbox/checkbox-group/checkbox-group.ts
@@ -1,13 +1,13 @@
-import { CSSResultGroup, html, LitElement, nothing, TemplateResult, PropertyValues } from 'lit';
+import { CSSResultGroup, html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
-import { isArrowKeyPressed, getNextElementIndex, interactivityChecker } from '../../core/a11y';
+import { getNextElementIndex, interactivityChecker, isArrowKeyPressed } from '../../core/a11y';
 import { toggleDatasetEntry } from '../../core/dom';
 import {
+  ConnectedAbortController,
   createNamedSlotState,
   HandlerRepository,
   namedSlotChangeHandlerAspect,
-  ConnectedAbortController,
 } from '../../core/eventing';
 import { SbbHorizontalFrom, SbbOrientation } from '../../core/interfaces';
 import type { SbbCheckboxElement, SbbCheckboxSize } from '../checkbox';
@@ -41,6 +41,13 @@ export class SbbCheckboxGroupElement extends LitElement {
   @property({ reflect: true })
   public orientation: SbbOrientation = 'horizontal';
 
+  /** List of contained checkbox elements. */
+  public get checkboxes(): SbbCheckboxElement[] {
+    return Array.from(this.querySelectorAll?.('sbb-checkbox') ?? []).filter(
+      (el: SbbCheckboxElement) => el.closest('sbb-checkbox-group') === this,
+    );
+  }
+
   /** State of listed named slots, by indicating whether any element for a named slot is defined. */
   @state() private _namedSlots = createNamedSlotState('error');
 
@@ -49,60 +56,35 @@ export class SbbCheckboxGroupElement extends LitElement {
     namedSlotChangeHandlerAspect((m) => (this._namedSlots = m(this._namedSlots))),
   );
 
-  private _didLoad = false;
   private _abort: ConnectedAbortController = new ConnectedAbortController(this);
 
-  private _updateDisabled(): void {
-    for (const checkbox of this._checkboxes) {
-      toggleDatasetEntry(checkbox, 'groupDisabled', this.disabled);
-    }
-  }
-
-  private _updateRequired(): void {
-    for (const checkbox of this._checkboxes) {
-      toggleDatasetEntry(checkbox, 'groupRequired', this.required);
-    }
-  }
-
-  private _updateSize(): void {
-    for (const checkbox of this._checkboxes) {
-      checkbox.size = this.size;
-    }
-  }
-
   public override connectedCallback(): void {
     super.connectedCallback();
     const signal = this._abort.signal;
     this.addEventListener('keydown', (e) => this._handleKeyDown(e), { signal });
     toggleDatasetEntry(this, 'hasSelectionPanel', !!this.querySelector?.('sbb-selection-panel'));
     this._handlerRepository.connect();
-    this._updateCheckboxes();
   }
 
   protected override willUpdate(changedProperties: PropertyValues<this>): void {
     if (changedProperties.has('disabled')) {
-      this._updateDisabled();
+      this.checkboxes.forEach((c) => c.requestUpdate?.('disabled'));
     }
     if (changedProperties.has('required')) {
-      this._updateRequired();
+      this.checkboxes.forEach((c) => c.requestUpdate?.('required'));
     }
     if (changedProperties.has('size')) {
-      this._updateSize();
+      this.checkboxes.forEach((c) => c.requestUpdate?.('size'));
     }
   }
 
-  protected override firstUpdated(): void {
-    this._didLoad = true;
-    this._updateCheckboxes();
-  }
-
   public override disconnectedCallback(): void {
     super.disconnectedCallback();
     this._handlerRepository.disconnect();
   }
 
   private _handleKeyDown(evt: KeyboardEvent): void {
-    const enabledCheckboxes: SbbCheckboxElement[] = this._checkboxes.filter(
+    const enabledCheckboxes: SbbCheckboxElement[] = this.checkboxes.filter(
       (checkbox: SbbCheckboxElement) =>
         !checkbox.disabled && interactivityChecker.isVisible(checkbox),
     );
@@ -126,30 +108,10 @@ export class SbbCheckboxGroupElement extends LitElement {
     }
   }
 
-  private _updateCheckboxes(): void {
-    if (!this._didLoad) {
-      return;
-    }
-
-    const checkboxes = this._checkboxes;
-
-    for (const checkbox of checkboxes) {
-      checkbox.size = this.size;
-      toggleDatasetEntry(checkbox, 'groupDisabled', this.disabled);
-      toggleDatasetEntry(checkbox, 'groupRequired', this.required);
-    }
-  }
-
-  private get _checkboxes(): SbbCheckboxElement[] {
-    return Array.from(this.querySelectorAll?.('sbb-checkbox') ?? []).filter(
-      (el: SbbCheckboxElement) => el.closest('sbb-checkbox-group') === this,
-    );
-  }
-
   protected override render(): TemplateResult {
     return html`
       <div class="sbb-checkbox-group">
-        <slot @slotchange=${() => this._updateCheckboxes()}></slot>
+        <slot></slot>
       </div>
       ${this._namedSlots.error
         ? html`<div class="sbb-checkbox-group__error">

diff --git a/src/components/checkbox/checkbox-group/readme.md b/src/components/checkbox/checkbox-group/readme.md
@@ -80,6 +80,7 @@ Two values are available, `s` and `m`, which is the default
 | `size`           | `size`            | public  | `SbbCheckboxSize`                | `'m'`          | Size variant, either m or s.                                                   |
 | `horizontalFrom` | `horizontal-from` | public  | `SbbHorizontalFrom \| undefined` |                | Overrides the behaviour of `orientation` property.                             |
 | `orientation`    | `orientation`     | public  | `SbbOrientation`                 | `'horizontal'` | Indicates the orientation of the checkboxes inside the `<sbb-checkbox-group>`. |
+| `checkboxes`     | -                 | public  | `SbbCheckboxElement[]`           |                | List of contained checkbox elements.                                           |
 
 ## Slots
 

diff --git a/src/components/checkbox/checkbox/checkbox.scss b/src/components/checkbox/checkbox/checkbox.scss
@@ -18,7 +18,7 @@
   outline: none !important;
 }
 
-:host(:is([data-group-disabled], [disabled])) {
+:host([disabled]) {
   --sbb-checkbox-label-color: var(--sbb-color-charcoal-default);
   --sbb-checkbox-cursor: default;
   --sbb-checkbox-subtext-color: var(--sbb-color-smoke-default);