From bafaf5a224c48d09bd794a0e3003ced9337014ad Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Tue, 12 Mar 2024 10:12:46 +0100
Subject: [PATCH 01/67] feat: introduce base class for mini-button
---
.../button/mini-button/mini-button.stories.ts | 2 +-
.../button/mini-button/mini-button.ts | 21 ++++---------------
src/components/button/mini-button/readme.md | 2 +-
.../core/base-elements/button-base-element.ts | 18 +++++++++++++++-
4 files changed, 23 insertions(+), 20 deletions(-)
diff --git a/src/components/button/mini-button/mini-button.stories.ts b/src/components/button/mini-button/mini-button.stories.ts
index b57eff97bf..8f653832d1 100644
--- a/src/components/button/mini-button/mini-button.stories.ts
+++ b/src/components/button/mini-button/mini-button.stories.ts
@@ -58,7 +58,7 @@ const miniButtonDefaultArgs: Args = {
slot: slot.options[0],
};
-['size', 'text'].forEach((e: string) => {
+['size', 'text', 'tag'].forEach((e: string) => {
delete miniButtonDefaultArgTypes[e];
delete miniButtonDefaultArgs[e];
});
diff --git a/src/components/button/mini-button/mini-button.ts b/src/components/button/mini-button/mini-button.ts
index 7896129f0d..ffceb92605 100644
--- a/src/components/button/mini-button/mini-button.ts
+++ b/src/components/button/mini-button/mini-button.ts
@@ -1,10 +1,8 @@
-import type { CSSResultGroup, TemplateResult } from 'lit';
+import type { CSSResultGroup } from 'lit';
import { customElement } from 'lit/decorators.js';
-import { SbbButtonBaseElement } from '../../core/base-elements.js';
-import { SbbSlotStateController } from '../../core/controllers.js';
-import { SbbDisabledTabIndexActionMixin, SbbNegativeMixin } from '../../core/mixins.js';
-import { SbbIconNameMixin } from '../../icon.js';
+import { SbbMiniButtonBaseElement } from '../../core/base-elements.js';
+import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js';
import style from './mini-button.scss?lit&inline';
@@ -15,19 +13,8 @@ import style from './mini-button.scss?lit&inline';
* @slot icon - Slot used to display the icon, if one is set
*/
@customElement('sbb-mini-button')
-export class SbbMiniButtonElement extends SbbNegativeMixin(
- SbbIconNameMixin(SbbDisabledTabIndexActionMixin(SbbButtonBaseElement)),
-) {
+export class SbbMiniButtonElement extends SbbDisabledTabIndexActionMixin(SbbMiniButtonBaseElement) {
public static override styles: CSSResultGroup = style;
-
- public constructor() {
- super();
- new SbbSlotStateController(this);
- }
-
- protected override renderTemplate(): TemplateResult {
- return super.renderIconSlot();
- }
}
declare global {
diff --git a/src/components/button/mini-button/readme.md b/src/components/button/mini-button/readme.md
index 4d01e60bc5..021d86e036 100644
--- a/src/components/button/mini-button/readme.md
+++ b/src/components/button/mini-button/readme.md
@@ -76,9 +76,9 @@ Use the accessibility properties to describe the purpose of the `sbb-mini-button
| Name | Attribute | Privacy | Type | Default | Description |
| ---------- | ----------- | ------- | --------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. |
| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. |
| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. |
-| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. |
| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. |
| `name` | `name` | public | `string` | | The name of the button element. |
| `value` | `value` | public | `string` | | The value of the button element. |
diff --git a/src/components/core/base-elements/button-base-element.ts b/src/components/core/base-elements/button-base-element.ts
index 87a30d2056..a024102daf 100644
--- a/src/components/core/base-elements/button-base-element.ts
+++ b/src/components/core/base-elements/button-base-element.ts
@@ -1,8 +1,11 @@
-import { isServer } from 'lit';
+import { isServer, type TemplateResult } from 'lit';
import { property } from 'lit/decorators.js';
+import { SbbIconNameMixin } from '../../icon.js';
+import { SbbSlotStateController } from '../controllers.js';
import { hostAttributes } from '../decorators.js';
import { isEventPrevented } from '../eventing.js';
+import { SbbNegativeMixin } from '../mixins.js';
import { SbbActionBaseElement } from './action-base-element.js';
@@ -103,3 +106,16 @@ export abstract class SbbButtonBaseElement extends SbbActionBaseElement {
}
}
}
+
+export abstract class SbbMiniButtonBaseElement extends SbbNegativeMixin(
+ SbbIconNameMixin(SbbButtonBaseElement),
+) {
+ public constructor() {
+ super();
+ new SbbSlotStateController(this);
+ }
+
+ protected override renderTemplate(): TemplateResult {
+ return super.renderIconSlot();
+ }
+}
From 298706b8417f39aa379486049f29c701acacfb2a Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Wed, 13 Mar 2024 12:05:21 +0100
Subject: [PATCH 02/67] feat: autocomplete-grid 1st commit
---
.../autocomplete-grid-actions.spec.snap.js | 78 ++
.../autocomplete-grid-actions.e2e.ts | 16 +
.../autocomplete-grid-actions.scss | 10 +
.../autocomplete-grid-actions.spec.ts | 36 +
.../autocomplete-grid-actions.stories.ts | 94 +++
.../autocomplete-grid-actions.ts | 48 ++
.../autocomplete-grid-actions/index.ts | 1 +
.../autocomplete-grid-actions/readme.md | 50 ++
.../autocomplete-grid-button.spec.snap.js | 80 +++
.../autocomplete-grid-button.e2e.ts | 16 +
.../autocomplete-grid-button.scss | 13 +
.../autocomplete-grid-button.spec.ts | 36 +
.../autocomplete-grid-button.stories.ts | 187 +++++
.../autocomplete-grid-button.ts | 77 ++
.../autocomplete-grid-button/index.ts | 1 +
.../autocomplete-grid-button/readme.md | 68 ++
.../autocomplete-grid-option.spec.snap.js | 82 +++
.../autocomplete-grid-option.e2e.ts | 16 +
.../autocomplete-grid-option.scss | 133 ++++
.../autocomplete-grid-option.spec.ts | 33 +
.../autocomplete-grid-option.stories.ts | 25 +
.../autocomplete-grid-option.ts | 264 +++++++
.../autocomplete-grid-option/index.ts | 1 +
.../autocomplete-grid-option/readme.md | 80 +++
.../autocomplete-grid-row.spec.snap.js | 105 +++
.../autocomplete-grid-row.e2e.ts | 16 +
.../autocomplete-grid-row.scss | 13 +
.../autocomplete-grid-row.spec.ts | 36 +
.../autocomplete-grid-row.stories.ts | 49 ++
.../autocomplete-grid-row.ts | 60 ++
.../autocomplete-grid-row/index.ts | 1 +
.../autocomplete-grid-row/readme.md | 44 ++
.../autocomplete-grid.spec.snap.js | 134 ++++
.../autocomplete-grid.e2e.ts | 16 +
.../autocomplete-grid/autocomplete-grid.scss | 160 +++++
.../autocomplete-grid.spec.ts | 40 ++
.../autocomplete-grid.stories.ts | 286 ++++++++
.../autocomplete-grid/autocomplete-grid.ts | 674 ++++++++++++++++++
.../autocomplete-grid/index.ts | 1 +
.../autocomplete-grid/readme.md | 84 +++
src/components/autocomplete-grid/index.ts | 5 +
src/components/autocomplete/autocomplete.ts | 2 +-
.../overlay/overlay-trigger-attributes.ts | 3 +-
.../core/styles/mixins/buttons.scss | 7 +-
src/components/core/styles/typography.scss | 1 +
.../form-field/form-field/form-field.ts | 4 +-
.../option/option/option.stories.ts | 3 +-
src/components/option/option/option.ts | 4 +-
48 files changed, 3184 insertions(+), 9 deletions(-)
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-actions/__snapshots__/autocomplete-grid-actions.spec.snap.js
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.e2e.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.scss
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.spec.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.stories.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-actions/index.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-actions/readme.md
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.e2e.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.scss
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-button/index.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-button/readme.md
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.e2e.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-option/index.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-option/readme.md
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.spec.snap.js
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.e2e.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.scss
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.spec.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.stories.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-row/index.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-row/readme.md
create mode 100644 src/components/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.spec.snap.js
create mode 100644 src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.e2e.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.scss
create mode 100644 src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid/index.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid/readme.md
create mode 100644 src/components/autocomplete-grid/index.ts
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/__snapshots__/autocomplete-grid-actions.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-actions/__snapshots__/autocomplete-grid-actions.spec.snap.js
new file mode 100644
index 0000000000..90f1ad5e81
--- /dev/null
+++ b/src/components/autocomplete-grid/autocomplete-grid-actions/__snapshots__/autocomplete-grid-actions.spec.snap.js
@@ -0,0 +1,78 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-autocomplete-grid-actions Dom"] =
+`
+
+
+
+`;
+/* end snapshot sbb-autocomplete-grid-actions Dom */
+
+snapshots["sbb-autocomplete-grid-actions ShadowDom"] =
+`
+
+
+
+`;
+/* end snapshot sbb-autocomplete-grid-actions ShadowDom */
+
+snapshots["sbb-autocomplete-grid-actions A11y tree Chrome"] =
+`
+ {
+ "role": "WebArea",
+ "name": "",
+ "children": [
+ {
+ "role": "button",
+ "name": ""
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-autocomplete-grid-actions A11y tree Chrome */
+
+snapshots["sbb-autocomplete-grid-actions A11y tree Firefox"] =
+`
+ {
+ "role": "document",
+ "name": "",
+ "children": [
+ {
+ "role": "button",
+ "name": ""
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-autocomplete-grid-actions A11y tree Firefox */
+
+snapshots["sbb-autocomplete-grid-actions A11y tree Safari"] =
+`
+ {
+ "role": "WebArea",
+ "name": "",
+ "children": [
+ {
+ "role": "button",
+ "name": ""
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-autocomplete-grid-actions A11y tree Safari */
+
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.e2e.ts b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.e2e.ts
new file mode 100644
index 0000000000..a6d82d6a68
--- /dev/null
+++ b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.e2e.ts
@@ -0,0 +1,16 @@
+import { assert, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { SbbAutocompleteGridActionsElement } from './autocomplete-grid-actions';
+
+describe('sbb-autocomplete-grid-actions', () => {
+ let element: SbbAutocompleteGridActionsElement;
+
+ beforeEach(async () => {
+ element = await fixture(html` `);
+ });
+
+ it('renders', async () => {
+ assert.instanceOf(element, SbbAutocompleteGridActionsElement);
+ });
+});
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.scss b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.scss
new file mode 100644
index 0000000000..da287ce25d
--- /dev/null
+++ b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.scss
@@ -0,0 +1,10 @@
+@use '../../core/styles/index' as sbb;
+
+// Default component properties, defined for :host. Properties which can not
+// travel the shadow boundary are defined through this mixin
+@include sbb.host-component-properties;
+
+.sbb-autocomplete-grid-action {
+ display: flex;
+ column-gap: var(--sbb-spacing-responsive-xxxs);
+}
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.spec.ts
new file mode 100644
index 0000000000..23880f73fe
--- /dev/null
+++ b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.spec.ts
@@ -0,0 +1,36 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import type { SbbAutocompleteGridActionsElement } from './autocomplete-grid-actions';
+import '../autocomplete-grid';
+import '../autocomplete-grid-row';
+import '../autocomplete-grid-option';
+import './autocomplete-grid-actions';
+import '../autocomplete-grid-button';
+
+describe('sbb-autocomplete-grid-actions', () => {
+ let root: SbbAutocompleteGridActionsElement;
+ beforeEach(async () => {
+ root = (
+ await fixture(html`
+
+
+ Option 1
+
+
+
+
+
+
+ `)
+ ).querySelector('sbb-autocomplete-grid-actions')!;
+ });
+
+ it('Dom', async () => {
+ await expect(root).dom.to.be.equalSnapshot();
+ });
+
+ it('ShadowDom', async () => {
+ await expect(root).shadowDom.to.be.equalSnapshot();
+ });
+});
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.stories.ts b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.stories.ts
new file mode 100644
index 0000000000..22a04f891d
--- /dev/null
+++ b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.stories.ts
@@ -0,0 +1,94 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+import type { InputType } from '@storybook/types';
+import type {
+ Args,
+ ArgTypes,
+ Decorator,
+ Meta,
+ StoryContext,
+ StoryObj,
+} from '@storybook/web-components';
+import { html, type TemplateResult } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import { sbbSpread } from '../../core/dom';
+
+import readme from './readme.md?raw';
+import './autocomplete-grid-actions';
+import '../autocomplete-grid-button';
+
+const wrapperStyle = (context: StoryContext): Record => ({
+ 'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
+});
+
+const numberOfButtons: InputType = {
+ control: {
+ type: 'number',
+ },
+};
+
+const negative: InputType = {
+ control: {
+ type: 'boolean',
+ },
+};
+
+const defaultArgTypes: ArgTypes = {
+ numberOfButtons,
+ negative,
+};
+
+const defaultArgs: Args = {
+ numberOfButtons: 1,
+ negative: false,
+};
+
+const Template = ({ numberOfButtons, ...args }: Args): TemplateResult => html`
+
+ ${repeat(
+ new Array(numberOfButtons),
+ (_, i) => html`
+
+ `,
+ )}
+
+`;
+
+export const Default: StoryObj = {
+ render: Template,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs },
+};
+
+export const Multiple: StoryObj = {
+ render: Template,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs, numberOfButtons: 3 },
+};
+
+const meta: Meta = {
+ decorators: [
+ (story, context) => html`
+ ${story()}
+ `,
+ withActions as Decorator,
+ ],
+ parameters: {
+ actions: {
+ handles: ['click'],
+ },
+ backgrounds: {
+ disable: true,
+ },
+ docs: {
+ extractComponentDescription: () => readme,
+ },
+ },
+ title: 'components/sbb-autocomplete-grid/sbb-autocomplete-grid-actions',
+};
+
+export default meta;
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.ts b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.ts
new file mode 100644
index 0000000000..33f34f0dd0
--- /dev/null
+++ b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.ts
@@ -0,0 +1,48 @@
+import { type CSSResultGroup, html, LitElement, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import { hostAttributes } from '../../core/common-behaviors';
+import type { SbbAutocompleteGridButtonElement } from '../index';
+
+import style from './autocomplete-grid-actions.scss?lit&inline';
+
+/**
+ * A wrapper component for autocomplete-grid action buttons.
+ *
+ * @slot - Use the unnamed slot to add `sbb-mini-button` elements.
+ */
+@hostAttributes({
+ role: 'gridcell',
+})
+@customElement('sbb-autocomplete-grid-actions')
+export class SbbAutocompleteGridActionsElement extends LitElement {
+ public static override styles: CSSResultGroup = style;
+
+ private _setChildrenParameters(event: Event): void {
+ const elements = (event.target as HTMLSlotElement).assignedElements();
+ if (!elements.length) {
+ return;
+ }
+
+ elements
+ .filter(
+ (e): e is SbbAutocompleteGridButtonElement => e.tagName === 'SBB-AUTOCOMPLETE-GRID-BUTTON',
+ )
+ .forEach((element, index) => element.setAttribute('id', `${this.id}x${index}`));
+ }
+
+ protected override render(): TemplateResult {
+ return html`
+
+
+
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+ 'sbb-autocomplete-grid-actions': SbbAutocompleteGridActionsElement;
+ }
+}
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/index.ts b/src/components/autocomplete-grid/autocomplete-grid-actions/index.ts
new file mode 100644
index 0000000000..cf7f89d97e
--- /dev/null
+++ b/src/components/autocomplete-grid/autocomplete-grid-actions/index.ts
@@ -0,0 +1 @@
+export * from './autocomplete-grid-actions';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/readme.md b/src/components/autocomplete-grid/autocomplete-grid-actions/readme.md
new file mode 100644
index 0000000000..f2236dfad6
--- /dev/null
+++ b/src/components/autocomplete-grid/autocomplete-grid-actions/readme.md
@@ -0,0 +1,50 @@
+> Explain the use and the purpose of the component; add minor details if needed and provide a basic example.
+> If you reference other components, link their documentation at least once (the path must start from _/docs/..._ ).
+> For the examples, use triple backticks with file extension (` ```html ``` `).
+> The following list of paragraphs is only suggested; remove, create and adapt as needed.
+
+The `sbb-autocomplete-grid-actions` is a component . . .
+
+```html
+
+```
+
+## Slots
+
+> Describe slot naming and usage and provide an example of slotted content.
+
+## States
+
+> Describe the component states (`disabled`, `readonly`, etc.) and provide examples.
+
+## Style
+
+> Describe the properties which change the component visualization (`size`, `negative`, etc.) and provide examples.
+
+## Interactions
+
+> Describe how it's possible to interact with the component (open and close a `sbb-dialog`, dismiss a `sbb-alert`, etc.) and provide examples.
+
+## Events
+
+> Describe events triggered by the component and possibly how to get information from the payload.
+
+## Keyboard interaction
+
+> If the component has logic for keyboard navigation (as the `sbb-calendar` or the `sbb-select`) describe it.
+
+| Keyboard | Action |
+| -------------- | ------------- |
+| Key | What it does. |
+
+## Accessibility
+
+> Describe how accessibility is implemented and if there are issues or suggested best-practice for the consumers.
+
+
+
+## Slots
+
+| Name | Description |
+| ---- | ------------------------------------------------------- |
+| | Use the unnamed slot to add `sbb-mini-button` elements. |
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js
new file mode 100644
index 0000000000..47aa54461b
--- /dev/null
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js
@@ -0,0 +1,80 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-autocomplete-grid-button Dom"] =
+`
+
+`;
+/* end snapshot sbb-autocomplete-grid-button Dom */
+
+snapshots["sbb-autocomplete-grid-button ShadowDom"] =
+`
+
+
+
+
+
+`;
+/* end snapshot sbb-autocomplete-grid-button ShadowDom */
+
+snapshots["sbb-autocomplete-grid-button A11y tree Chrome"] =
+`
+ {
+ "role": "WebArea",
+ "name": "",
+ "children": [
+ {
+ "role": "button",
+ "name": ""
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-autocomplete-grid-button A11y tree Chrome */
+
+snapshots["sbb-autocomplete-grid-button A11y tree Firefox"] =
+`
+ {
+ "role": "document",
+ "name": "",
+ "children": [
+ {
+ "role": "button",
+ "name": ""
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-autocomplete-grid-button A11y tree Firefox */
+
+snapshots["sbb-autocomplete-grid-button A11y tree Safari"] =
+`
+ {
+ "role": "WebArea",
+ "name": "",
+ "children": [
+ {
+ "role": "button",
+ "name": ""
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-autocomplete-grid-button A11y tree Safari */
+
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.e2e.ts b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.e2e.ts
new file mode 100644
index 0000000000..20f317dfa1
--- /dev/null
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.e2e.ts
@@ -0,0 +1,16 @@
+import { assert, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { SbbAutocompleteGridButtonElement } from './autocomplete-grid-button';
+
+describe('sbb-autocomplete-grid-button', () => {
+ let element: SbbAutocompleteGridButtonElement;
+
+ beforeEach(async () => {
+ element = await fixture(html` `);
+ });
+
+ it('renders', async () => {
+ assert.instanceOf(element, SbbAutocompleteGridButtonElement);
+ });
+});
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.scss b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.scss
new file mode 100644
index 0000000000..dc6cbcb350
--- /dev/null
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.scss
@@ -0,0 +1,13 @@
+@use '../../core/styles/index' as sbb;
+
+// Default component properties, defined for :host. Properties which can not
+// travel the shadow boundary are defined through this mixin
+@include sbb.host-component-properties;
+
+:host {
+ // Use !important here to not interfere with Firefox focus ring definition
+ // which appears in normalize css of several frameworks.
+ outline: none !important;
+}
+
+@include sbb.icon-button('.sbb-autocomplete-grid-button', '::slotted(sbb-icon), sbb-icon');
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts
new file mode 100644
index 0000000000..476ceef94a
--- /dev/null
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts
@@ -0,0 +1,36 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import type { SbbAutocompleteGridButtonElement } from './autocomplete-grid-button';
+import '../autocomplete-grid';
+import '../autocomplete-grid-row';
+import '../autocomplete-grid-option';
+import '../autocomplete-grid-actions';
+import './autocomplete-grid-button';
+
+describe('sbb-autocomplete-grid-button', () => {
+ let root: SbbAutocompleteGridButtonElement;
+ beforeEach(async () => {
+ root = (
+ await fixture(html`
+
+
+ Option 1
+
+
+
+
+
+
+ `)
+ ).querySelector('sbb-autocomplete-grid-button')!;
+ });
+
+ it('Dom', async () => {
+ await expect(root).dom.to.be.equalSnapshot();
+ });
+
+ it('ShadowDom', async () => {
+ await expect(root).shadowDom.to.be.equalSnapshot();
+ });
+});
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts
new file mode 100644
index 0000000000..6b5f0f8d2b
--- /dev/null
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts
@@ -0,0 +1,187 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+import type { InputType } from '@storybook/types';
+import type {
+ Args,
+ ArgTypes,
+ Decorator,
+ Meta,
+ StoryContext,
+ StoryObj,
+} from '@storybook/web-components';
+import { html, type TemplateResult } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import { sbbSpread } from '../../core/dom';
+
+import readme from './readme.md?raw';
+import './autocomplete-grid-button';
+
+const wrapperStyle = (context: StoryContext): Record => ({
+ 'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
+});
+
+const type: InputType = {
+ control: {
+ type: 'select',
+ },
+ options: ['button', 'reset', 'submit'],
+ table: {
+ category: 'Button',
+ },
+};
+
+const disabled: InputType = {
+ control: {
+ type: 'boolean',
+ },
+ table: {
+ category: 'Button',
+ },
+};
+
+const name: InputType = {
+ control: {
+ type: 'text',
+ },
+ table: {
+ category: 'Button',
+ },
+};
+
+const value: InputType = {
+ control: {
+ type: 'text',
+ },
+ table: {
+ category: 'Button',
+ },
+};
+
+const form: InputType = {
+ control: {
+ type: 'text',
+ },
+ table: {
+ category: 'Button',
+ },
+};
+
+const negative: InputType = {
+ control: {
+ type: 'boolean',
+ },
+};
+
+const iconName: InputType = {
+ control: {
+ type: 'text',
+ },
+ table: {
+ category: 'Icon',
+ },
+};
+
+const ariaLabel: InputType = {
+ control: {
+ type: 'text',
+ },
+};
+
+const active: InputType = {
+ control: {
+ type: 'text',
+ },
+};
+
+const focusVisible: InputType = {
+ control: {
+ type: 'text',
+ },
+};
+
+const defaultArgTypes: ArgTypes = {
+ type,
+ disabled,
+ name,
+ value,
+ form,
+ negative,
+ 'icon-name': iconName,
+ 'aria-label': ariaLabel,
+ active,
+ focusVisible,
+};
+
+const defaultArgs: Args = {
+ type: type.options[0],
+ disabled: false,
+ name: 'Button Name',
+ value: undefined,
+ form: undefined,
+ negative: false,
+ 'icon-name': 'arrow-right-small',
+ 'aria-label': 'arrow-right-small',
+ active: false,
+ focusVisible: false,
+};
+
+const Template = ({ active, focusVisible, ...args }: Args): TemplateResult => html`
+
+`;
+
+export const Default: StoryObj = {
+ render: Template,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs },
+};
+
+export const Negative: StoryObj = {
+ render: Template,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs, negative: true },
+};
+
+export const Disabled: StoryObj = {
+ render: Template,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs, disabled: true },
+};
+
+export const Active: StoryObj = {
+ render: Template,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs, active: true },
+};
+
+export const FocusVisible: StoryObj = {
+ render: Template,
+ argTypes: defaultArgTypes,
+ args: { ...defaultArgs, focusVisible: true },
+};
+
+const meta: Meta = {
+ decorators: [
+ (story, context) => html`
+ ${story()}
+ `,
+ withActions as Decorator,
+ ],
+ parameters: {
+ actions: {
+ handles: ['click'],
+ },
+ backgrounds: {
+ disable: true,
+ },
+ docs: {
+ extractComponentDescription: () => readme,
+ },
+ },
+ title: 'components/sbb-autocomplete-grid/sbb-autocomplete-grid-button',
+};
+
+export default meta;
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
new file mode 100644
index 0000000000..02d1b2afa8
--- /dev/null
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
@@ -0,0 +1,77 @@
+import { type CSSResultGroup, type TemplateResult } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+
+import {
+ hostAttributes,
+ SbbDisabledMixin,
+ SbbMiniButtonBaseElement,
+} from '../../core/common-behaviors';
+import { isValidAttribute, setAttribute } from '../../core/dom';
+import { AgnosticMutationObserver } from '../../core/observers';
+
+import style from './autocomplete-grid-button.scss?lit&inline';
+
+/** Configuration for the attribute to look at if component is nested in a sbb-optgroup */
+const buttonObserverConfig: MutationObserverInit = {
+ attributeFilter: ['data-group-disabled', 'data-negative'], // fixme negative
+};
+
+/**
+ * It displays an icon-only button that can be used in `sbb-autocomplete-grid`.
+ *
+ * @slot icon - Slot used to display the icon, if one is set
+ */
+@hostAttributes({
+ tabindex: null,
+})
+@customElement('sbb-autocomplete-grid-button')
+export class SbbAutocompleteGridButtonElement extends SbbDisabledMixin(SbbMiniButtonBaseElement) {
+ public static override styles: CSSResultGroup = style;
+
+ /** Whether the component must be set disabled due disabled attribute on sbb-optgroup. */
+ @state() private _disabledFromGroup = false;
+
+ /** MutationObserver on data attributes. */
+ private _optionAttributeObserver = new AgnosticMutationObserver((mutationsList) =>
+ this._onOptionAttributesChange(mutationsList),
+ );
+
+ /** Observe changes on data attributes and set the appropriate values. */
+ private _onOptionAttributesChange(mutationsList: MutationRecord[]): void {
+ for (const mutation of mutationsList) {
+ if (mutation.attributeName === 'data-group-disabled') {
+ this._disabledFromGroup = isValidAttribute(this, 'data-group-disabled');
+ }
+ }
+ }
+
+ public override connectedCallback(): void {
+ super.connectedCallback();
+ const parentGroup = this.closest?.('sbb-optgroup'); // fixme
+ if (parentGroup) {
+ this._disabledFromGroup = parentGroup.disabled;
+ }
+ this._optionAttributeObserver.observe(this, buttonObserverConfig);
+ }
+
+ public override disconnectedCallback(): void {
+ super.disconnectedCallback();
+ this._optionAttributeObserver.disconnect();
+ }
+
+ public dispatchClick(event: KeyboardEvent): void {
+ return super.dispatchClickEvent(event);
+ }
+
+ protected override renderTemplate(): TemplateResult {
+ setAttribute(this, 'aria-disabled', `${this.disabled || this._disabledFromGroup}`);
+ return super.renderTemplate();
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+ 'sbb-autocomplete-grid-button': SbbAutocompleteGridButtonElement;
+ }
+}
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/index.ts b/src/components/autocomplete-grid/autocomplete-grid-button/index.ts
new file mode 100644
index 0000000000..5d475645c1
--- /dev/null
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/index.ts
@@ -0,0 +1 @@
+export * from './autocomplete-grid-button';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/readme.md b/src/components/autocomplete-grid/autocomplete-grid-button/readme.md
new file mode 100644
index 0000000000..28b083ca7c
--- /dev/null
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/readme.md
@@ -0,0 +1,68 @@
+> Explain the use and the purpose of the component; add minor details if needed and provide a basic example.
+> If you reference other components, link their documentation at least once (the path must start from _/docs/..._ ).
+> For the examples, use triple backticks with file extension (` ```html ``` `).
+> The following list of paragraphs is only suggested; remove, create and adapt as needed.
+
+The `sbb-autocomplete-grid-button` is a component . . .
+
+```html
+
+```
+
+## Slots
+
+> Describe slot naming and usage and provide an example of slotted content.
+
+## States
+
+> Describe the component states (`disabled`, `readonly`, etc.) and provide examples.
+
+## Style
+
+> Describe the properties which change the component visualization (`size`, `negative`, etc.) and provide examples.
+
+## Interactions
+
+> Describe how it's possible to interact with the component (open and close a `sbb-dialog`, dismiss a `sbb-alert`, etc.) and provide examples.
+
+## Events
+
+> Describe events triggered by the component and possibly how to get information from the payload.
+
+## Keyboard interaction
+
+> If the component has logic for keyboard navigation (as the `sbb-calendar` or the `sbb-select`) describe it.
+
+| Keyboard | Action |
+| -------------- | ------------- |
+| Key | What it does. |
+
+## Accessibility
+
+> Describe how accessibility is implemented and if there are issues or suggested best-practice for the consumers.
+
+
+
+## Properties
+
+| Name | Attribute | Privacy | Type | Default | Description |
+| ---------- | ----------- | ------- | --------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. |
+| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. |
+| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. |
+| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. |
+| `name` | `name` | public | `string` | | The name of the button element. |
+| `value` | `value` | public | `string` | | The value of the button element. |
+| `form` | `form` | public | `string \| undefined` | | The
+`;
+/* end snapshot sbb-autocomplete-grid-option default A11y tree Chrome */
+
snapshots["sbb-autocomplete-grid-option disabled Dom"] =
`
@@ -95,3 +80,84 @@ snapshots["sbb-autocomplete-grid-option disabled ShadowDom"] =
`;
/* end snapshot sbb-autocomplete-grid-option disabled ShadowDom */
+snapshots["sbb-autocomplete-grid-option default A11y tree Firefox"] =
+`
+ {
+ "role": "document",
+ "name": "",
+ "children": [
+ {
+ "role": "text leaf",
+ "name": "Option 1"
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-autocomplete-grid-option default A11y tree Firefox */
+
+snapshots["sbb-autocomplete-grid-option disabled A11y tree Chrome"] =
+`
+ {
+ "role": "WebArea",
+ "name": "",
+ "children": [
+ {
+ "role": "text",
+ "name": "Option 1"
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-autocomplete-grid-option disabled A11y tree Chrome */
+
+snapshots["sbb-autocomplete-grid-option disabled A11y tree Firefox"] =
+`
+ {
+ "role": "document",
+ "name": "",
+ "children": [
+ {
+ "role": "text leaf",
+ "name": "Option 1"
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-autocomplete-grid-option disabled A11y tree Firefox */
+
+snapshots["sbb-autocomplete-grid-option default A11y tree Safari"] =
+`
+ {
+ "role": "WebArea",
+ "name": "",
+ "children": [
+ {
+ "role": "text",
+ "name": "Option 1"
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-autocomplete-grid-option default A11y tree Safari */
+
+snapshots["sbb-autocomplete-grid-option disabled A11y tree Safari"] =
+`
+ {
+ "role": "WebArea",
+ "name": "",
+ "children": [
+ {
+ "role": "text",
+ "name": "Option 1",
+ "disabled": true
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-autocomplete-grid-option disabled A11y tree Safari */
+
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts
index 4e2a324821..16973af43d 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts
@@ -1,7 +1,7 @@
import { expect } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
-import { fixture } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
import type { SbbAutocompleteGridOptionElement } from './autocomplete-grid-option';
import '../autocomplete-grid';
@@ -33,6 +33,10 @@ describe('sbb-autocomplete-grid-option', () => {
it('ShadowDom', async () => {
await expect(root).shadowDom.to.be.equalSnapshot();
});
+
+ testA11yTreeSnapshot(
+ html`Option 1 `,
+ );
});
describe('disabled', () => {
@@ -59,5 +63,11 @@ describe('sbb-autocomplete-grid-option', () => {
it('ShadowDom', async () => {
await expect(root).shadowDom.to.be.equalSnapshot();
});
+
+ testA11yTreeSnapshot(
+ html`Option 1 `,
+ );
});
});
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
index df4692235d..d66dcac81c 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
@@ -10,7 +10,7 @@ import '../../screen-reader-only';
import style from './autocomplete-grid-option.scss?lit&inline';
/**
- * It displays on option item which can be used in `sbb-autocomplete-grid`.
+ * It displays an option item which can be used in `sbb-autocomplete-grid`.
*
* @slot - Use the unnamed slot to add content to the option label.
* @slot icon - Use this slot to provide an icon. If `icon-name` is set, a sbb-icon will be used.
@@ -46,7 +46,7 @@ export class SbbAutocompleteGridOptionElement extends SbbOptionBaseElement {
public override willUpdate(changedProperties: PropertyValues): void {
if (changedProperties.has('active')) {
- this.closest?.('sbb-autocomplete-grid-row')?.toggleAttribute('data-active');
+ this.closest?.('sbb-autocomplete-grid-row')?.toggleAttribute('data-active', this.active);
}
if (changedProperties.has('disabled')) {
this.closest?.('sbb-autocomplete-grid-row')?.toggleAttribute(
@@ -57,17 +57,17 @@ export class SbbAutocompleteGridOptionElement extends SbbOptionBaseElement {
}
protected setAttributeFromParent(): void {
- const parentGroup = this.closest?.('sbb-autocomplete-grid-optgroup');
+ const parentGroup = this.closest('sbb-autocomplete-grid-optgroup');
if (parentGroup) {
this.disabledFromGroup = parentGroup.disabled;
this.updateAriaDisabled();
}
- this.closest?.('sbb-autocomplete-grid-row')?.toggleAttribute(
+ this.closest('sbb-autocomplete-grid-row')?.toggleAttribute(
'data-disabled',
this.disabled || this.disabledFromGroup,
);
- this.negative = !!this.closest?.(
+ this.negative = !!this.closest(
// :is() selector not possible due to test environment
`sbb-autocomplete-grid[negative],sbb-form-field[negative]`,
);
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.spec.snap.js
index f0b75dbe6f..d4d3bf18b9 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.spec.snap.js
@@ -43,3 +43,63 @@ snapshots["sbb-autocomplete-grid-row ShadowDom"] =
`;
/* end snapshot sbb-autocomplete-grid-row ShadowDom */
+snapshots["sbb-autocomplete-grid-row A11y tree Chrome"] =
+`
+ {
+ "role": "WebArea",
+ "name": "",
+ "children": [
+ {
+ "role": "text",
+ "name": "Option 1"
+ },
+ {
+ "role": "button",
+ "name": ""
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-autocomplete-grid-row A11y tree Chrome */
+
+snapshots["sbb-autocomplete-grid-row A11y tree Firefox"] =
+`
+ {
+ "role": "document",
+ "name": "",
+ "children": [
+ {
+ "role": "text leaf",
+ "name": "Option 1"
+ },
+ {
+ "role": "button",
+ "name": ""
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-autocomplete-grid-row A11y tree Firefox */
+
+snapshots["sbb-autocomplete-grid-row A11y tree Safari"] =
+`
+ {
+ "role": "WebArea",
+ "name": "",
+ "children": [
+ {
+ "role": "text",
+ "name": "Option 1"
+ },
+ {
+ "role": "button",
+ "name": ""
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-autocomplete-grid-row A11y tree Safari */
+
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.spec.ts
index f29243a9f5..46181cbd37 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.spec.ts
@@ -1,7 +1,8 @@
import { expect } from '@open-wc/testing';
+import type { TemplateResult } from 'lit';
import { html } from 'lit/static-html.js';
-import { fixture } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
import type { SbbAutocompleteGridRowElement } from './autocomplete-grid-row';
import '../autocomplete-grid';
@@ -12,17 +13,18 @@ import '../autocomplete-grid-button';
describe('sbb-autocomplete-grid-row', () => {
let root: SbbAutocompleteGridRowElement;
+ const row: TemplateResult = html`
+
+ Option 1
+
+
+
+
+ `;
beforeEach(async () => {
root = (
await fixture(html`
-
-
- Option 1
-
-
-
-
-
+ ${row}
`)
).querySelector('sbb-autocomplete-grid-row')!;
@@ -45,4 +47,6 @@ describe('sbb-autocomplete-grid-row', () => {
'sbb-autocomplete-grid-item-3x1',
);
});
+
+ testA11yTreeSnapshot(row);
});
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.ts b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.ts
index 30e974ab70..94fd4657cc 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.ts
@@ -19,10 +19,6 @@ export class SbbAutocompleteGridRowElement extends LitElement {
public static override styles: CSSResultGroup = style;
private _rowId = ++autocompleteRowNextId;
- public constructor() {
- super();
- }
-
public override connectedCallback(): void {
super.connectedCallback();
if (!this.id) {
diff --git a/src/components/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.spec.snap.js
index 62c73ff45f..0a052d26dd 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.spec.snap.js
@@ -104,6 +104,26 @@ snapshots["sbb-autocomplete-grid Chrome-Firefox ShadowDom"] =
`;
/* end snapshot sbb-autocomplete-grid Chrome-Firefox ShadowDom */
+snapshots["sbb-autocomplete-grid Chrome-Firefox A11y tree Chrome"] =
+`
+ {
+ "role": "WebArea",
+ "name": ""
+}
+
+`;
+/* end snapshot sbb-autocomplete-grid Chrome-Firefox A11y tree Chrome */
+
+snapshots["sbb-autocomplete-grid Chrome-Firefox A11y tree Firefox"] =
+`
+ {
+ "role": "document",
+ "name": ""
+}
+
+`;
+/* end snapshot sbb-autocomplete-grid Chrome-Firefox A11y tree Firefox */
+
snapshots["sbb-autocomplete-grid Safari Dom"] =
`
+ {
+ "role": "WebArea",
+ "name": ""
+}
+
+`;
+/* end snapshot sbb-autocomplete-grid Safari A11y tree Safari */
+
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts
index a008f6ef27..5ae11d4286 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts
@@ -1,9 +1,10 @@
import { expect } from '@open-wc/testing';
+import type { TemplateResult } from 'lit';
import { html } from 'lit/static-html.js';
import { isSafari } from '../../core/dom';
import { describeIf } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
import type { SbbAutocompleteGridElement } from './autocomplete-grid';
import './autocomplete-grid';
@@ -14,24 +15,25 @@ import '../autocomplete-grid-button';
describe('sbb-autocomplete-grid', () => {
let root: SbbAutocompleteGridElement;
+ const grid: TemplateResult = html`
+
+
+ Option 1
+
+
+
+
+
+ Option 2
+
+
+
+
+
+ `;
beforeEach(async () => {
- root = await fixture(html`
-
-
- Option 1
-
-
-
-
-
- Option 2
-
-
-
-
-
- `);
+ root = await fixture(grid);
});
describeIf(!isSafari(), 'Chrome-Firefox', async () => {
@@ -42,6 +44,8 @@ describe('sbb-autocomplete-grid', () => {
it('ShadowDom', async () => {
await expect(root).shadowDom.to.be.equalSnapshot();
});
+
+ testA11yTreeSnapshot(grid);
});
describeIf(isSafari(), 'Safari', async () => {
@@ -52,5 +56,7 @@ describe('sbb-autocomplete-grid', () => {
it('ShadowDom', async () => {
await expect(root).shadowDom.to.be.equalSnapshot();
});
+
+ testA11yTreeSnapshot(grid);
});
});
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
index ea8c035cd3..b2956eb252 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
@@ -31,7 +31,7 @@ import '../../form-field';
const getOption = (event: Event): void => {
const button = event.target as SbbAutocompleteGridButtonElement;
const div: HTMLDivElement = document.createElement('div');
- div.innerText = `Button '${button.iconName}' clicked on row '${button.optionOnSameRow?.textContent}' / value: '${button.optionOnSameRow?.value}'`;
+ div.innerText = `Button '${button.iconName}' clicked on row '${button.option?.textContent}' / value: '${button.option?.value}'`;
(event.currentTarget as HTMLElement).closest('div')!.querySelector('#container')!.prepend(div);
};
diff --git a/src/components/core/base-elements/autocomplete-base-element.ts b/src/components/core/base-elements/autocomplete-base-element.ts
index 3797c03f74..6ef54d8135 100644
--- a/src/components/core/base-elements/autocomplete-base-element.ts
+++ b/src/components/core/base-elements/autocomplete-base-element.ts
@@ -144,7 +144,8 @@ export abstract class SbbAutocompleteBaseElement extends SbbNegativeMixin(
this.state ||= 'closed';
const signal = this.abort.signal;
- const formField = this.closest?.('sbb-form-field') ?? this.closest?.('[data-form-field]');
+ const formField = this.closest('sbb-form-field') ?? this.closest('[data-form-field]');
+
if (formField) {
this.negative = formField.hasAttribute('negative');
}
From d91612403e0d2cc3f71638643f9c12fcee61be5e Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Thu, 28 Mar 2024 12:01:19 +0100
Subject: [PATCH 23/67] fix: review
---
.../autocomplete-grid-option.ts | 19 -----------------
.../core/base-elements/option-base-element.ts | 21 ++++++++++++++++++-
src/components/option/option/option.ts | 19 ++---------------
3 files changed, 22 insertions(+), 37 deletions(-)
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
index d66dcac81c..14b802aef4 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
@@ -83,25 +83,6 @@ export class SbbAutocompleteGridOptionElement extends SbbOptionBaseElement {
this.setSelectedViaUserInteraction(true);
}
- protected setupHighlightHandler(event: Event): void {
- const slotNodes = (event.target as HTMLSlotElement).assignedNodes();
- const labelNodes = slotNodes.filter((el) => el.nodeType === Node.TEXT_NODE) as Text[];
-
- // Disable the highlight if the slot contains more than just text nodes
- if (
- labelNodes.length === 0 ||
- slotNodes.filter((n) => !(n instanceof Element) || n.localName !== 'template').length !==
- labelNodes.length
- ) {
- this.updateDisableHighlight(true);
- return;
- }
- this.label = labelNodes
- .map((l) => l.wholeText)
- .filter((l) => l.trim())
- .join();
- }
-
protected override render(): TemplateResult {
return super.render();
}
diff --git a/src/components/core/base-elements/option-base-element.ts b/src/components/core/base-elements/option-base-element.ts
index 0bba9082de..e94134882e 100644
--- a/src/components/core/base-elements/option-base-element.ts
+++ b/src/components/core/base-elements/option-base-element.ts
@@ -69,7 +69,7 @@ export abstract class SbbOptionBaseElement extends SbbDisabledMixin(SbbIconNameM
private _abort = new SbbConnectedAbortController(this);
protected abstract selectByClick(event: MouseEvent): void;
- protected abstract setupHighlightHandler(event: Event): void;
+ // protected abstract setupHighlightHandler(event: Event): void;
protected abstract setAttributeFromParent(): void;
protected updateDisableHighlight(disabled: boolean): void {
@@ -164,6 +164,25 @@ export abstract class SbbOptionBaseElement extends SbbDisabledMixin(SbbIconNameM
}
}
+ protected setupHighlightHandler(event: Event): void {
+ const slotNodes = (event.target as HTMLSlotElement).assignedNodes();
+ const labelNodes = slotNodes.filter((el) => el.nodeType === Node.TEXT_NODE) as Text[];
+
+ // Disable the highlight if the slot contains more than just text nodes
+ if (
+ labelNodes.length === 0 ||
+ slotNodes.filter((n) => !(n instanceof Element) || n.localName !== 'template').length !==
+ labelNodes.length
+ ) {
+ this.updateDisableHighlight(true);
+ return;
+ }
+ this.label = labelNodes
+ .map((l) => l.wholeText)
+ .filter((l) => l.trim())
+ .join();
+ }
+
protected getHighlightedLabel(): TemplateResult {
if (!this._highlightString || !this._highlightString.trim()) {
return html`${this.label}`;
diff --git a/src/components/option/option/option.ts b/src/components/option/option/option.ts
index cf67894129..4fdfbe5ba9 100644
--- a/src/components/option/option/option.ts
+++ b/src/components/option/option/option.ts
@@ -111,28 +111,13 @@ export class SbbOptionElement extends SbbOptionBaseElement {
}
}
- protected setupHighlightHandler(event: Event): void {
+ protected override setupHighlightHandler(event: Event): void {
if (!this._isAutocomplete) {
this.updateDisableHighlight(true);
return;
}
- const slotNodes = (event.target as HTMLSlotElement).assignedNodes();
- const labelNodes = slotNodes.filter((el) => el.nodeType === Node.TEXT_NODE) as Text[];
-
- // Disable the highlight if the slot contains more than just text nodes
- if (
- labelNodes.length === 0 ||
- slotNodes.filter((n) => !(n instanceof Element) || n.localName !== 'template').length !==
- labelNodes.length
- ) {
- this.updateDisableHighlight(true);
- return;
- }
- this.label = labelNodes
- .map((l) => l.wholeText)
- .filter((l) => l.trim())
- .join();
+ super.setupHighlightHandler(event);
}
protected override renderIcon(): TemplateResult {
From 6c6131f9c5cade1d341ffb8d9d6e97b7a3164f06 Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Thu, 28 Mar 2024 12:26:19 +0100
Subject: [PATCH 24/67] fix: rebase
---
.../__snapshots__/autocomplete-grid-button.spec.snap.js | 4 ++--
.../autocomplete-grid-optgroup.stories.ts | 3 ++-
.../__snapshots__/autocomplete-grid-option.spec.snap.js | 2 +-
.../autocomplete-grid-option.stories.ts | 3 ++-
.../autocomplete-grid/autocomplete-grid.stories.ts | 4 ++--
5 files changed, 9 insertions(+), 7 deletions(-)
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js
index ba61138f81..5179c50c46 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js
@@ -54,7 +54,7 @@ snapshots["sbb-autocomplete-grid-button renders disabled Dom"] =
dir="ltr"
disabled=""
icon-name="pie-small"
- id="sbb-autocomplete-grid-item-4x1x0"
+ id="sbb-autocomplete-grid-item-3x1x0"
role="button"
>
@@ -115,7 +115,7 @@ snapshots["sbb-autocomplete-grid-button renders negative without icon Dom"] =
data-action=""
data-button=""
dir="ltr"
- id="sbb-autocomplete-grid-item-7x1x0"
+ id="sbb-autocomplete-grid-item-5x1x0"
negative=""
role="button"
>
diff --git a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts
index 56377315c9..10cab25a3b 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts
@@ -135,7 +135,8 @@ const TemplateOptgroup = ({ label, disabled, ...args }: Args): TemplateResult =>
const Template = (args: Args): TemplateResult => {
return html`
-
+
+ Autocomplete
${TemplateOptgroup(args)}
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
index a0ffbc5c80..dd42fcc0ec 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
@@ -54,7 +54,7 @@ snapshots["sbb-autocomplete-grid-option disabled Dom"] =
aria-selected="false"
data-slot-names="unnamed"
disabled=""
- id="sbb-autocomplete-grid-item-4x0"
+ id="sbb-autocomplete-grid-item-3x0"
role="gridcell"
value="1"
>
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts
index cd67696885..9f84a1f1ed 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts
@@ -125,7 +125,8 @@ const createOptions = ({
const StandaloneTemplate = (args: Args): TemplateResult => html`${createOptions(args)}`;
const AutocompleteTemplate = (args: Args): TemplateResult => html`
-
+
+ sbb-autocomplete-grid
${createOptions(args)}
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
index b2956eb252..179f1066d1 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
@@ -314,12 +314,12 @@ const createRows2 = (buttonIconName: string, disableOption: boolean): TemplateRe
const Template = (args: Args): TemplateResult => html`
+ Label
html`
const OptionGroupTemplate = (args: Args): TemplateResult => html`
+ Label
Date: Thu, 28 Mar 2024 15:24:58 +0100
Subject: [PATCH 25/67] fix: regenerate snap files
---
.../autocomplete-grid-actions.spec.snap.js | 16 -------
.../autocomplete-grid-button.spec.snap.js | 45 ++++++++++---------
.../autocomplete-grid-button.spec.ts | 22 ++++-----
.../autocomplete-grid-optgroup.spec.snap.js | 44 ------------------
.../autocomplete-grid-option.spec.snap.js | 45 +++----------------
.../autocomplete-grid-row.spec.snap.js | 20 ---------
.../autocomplete-grid.spec.snap.js | 10 -----
.../transparent-button-static.spec.snap.js | 14 ------
.../expansion-panel.spec.snap.js | 12 ++---
.../screen-reader-only.spec.snap.js | 10 -----
10 files changed, 46 insertions(+), 192 deletions(-)
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/__snapshots__/autocomplete-grid-actions.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-actions/__snapshots__/autocomplete-grid-actions.spec.snap.js
index 90f1ad5e81..7c4d0127cb 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-actions/__snapshots__/autocomplete-grid-actions.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid-actions/__snapshots__/autocomplete-grid-actions.spec.snap.js
@@ -60,19 +60,3 @@ snapshots["sbb-autocomplete-grid-actions A11y tree Firefox"] =
`;
/* end snapshot sbb-autocomplete-grid-actions A11y tree Firefox */
-snapshots["sbb-autocomplete-grid-actions A11y tree Safari"] =
-`
- {
- "role": "WebArea",
- "name": "",
- "children": [
- {
- "role": "button",
- "name": ""
- }
- ]
-}
-
-`;
-/* end snapshot sbb-autocomplete-grid-actions A11y tree Safari */
-
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js
index 5179c50c46..fcc7ee4bf6 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js
@@ -76,22 +76,6 @@ snapshots["sbb-autocomplete-grid-button renders disabled ShadowDom"] =
`;
/* end snapshot sbb-autocomplete-grid-button renders disabled ShadowDom */
-snapshots["sbb-autocomplete-grid-button renders A11y tree Firefox"] =
-`
- {
- "role": "document",
- "name": "",
- "children": [
- {
- "role": "button",
- "name": ""
- }
- ]
-}
-
-`;
-/* end snapshot sbb-autocomplete-grid-button renders A11y tree Firefox */
-
snapshots["sbb-autocomplete-grid-button renders disabled A11y tree Chrome"] =
`
{
@@ -131,6 +115,22 @@ snapshots["sbb-autocomplete-grid-button renders negative without icon ShadowDom"
`;
/* end snapshot sbb-autocomplete-grid-button renders negative without icon ShadowDom */
+snapshots["sbb-autocomplete-grid-button renders A11y tree Firefox"] =
+`
+ {
+ "role": "document",
+ "name": "",
+ "children": [
+ {
+ "role": "button",
+ "name": ""
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-autocomplete-grid-button renders A11y tree Firefox */
+
snapshots["sbb-autocomplete-grid-button renders disabled A11y tree Firefox"] =
`
{
@@ -148,7 +148,7 @@ snapshots["sbb-autocomplete-grid-button renders disabled A11y tree Firefox"] =
`;
/* end snapshot sbb-autocomplete-grid-button renders disabled A11y tree Firefox */
-snapshots["sbb-autocomplete-grid-button renders A11y tree Safari"] =
+snapshots["sbb-autocomplete-grid-button A11y tree Chrome"] =
`
{
"role": "WebArea",
@@ -156,18 +156,19 @@ snapshots["sbb-autocomplete-grid-button renders A11y tree Safari"] =
"children": [
{
"role": "button",
- "name": ""
+ "name": "",
+ "disabled": true
}
]
}
`;
-/* end snapshot sbb-autocomplete-grid-button renders A11y tree Safari */
+/* end snapshot sbb-autocomplete-grid-button A11y tree Chrome */
-snapshots["sbb-autocomplete-grid-button renders disabled A11y tree Safari"] =
+snapshots["sbb-autocomplete-grid-button A11y tree Firefox"] =
`
{
- "role": "WebArea",
+ "role": "document",
"name": "",
"children": [
{
@@ -179,5 +180,5 @@ snapshots["sbb-autocomplete-grid-button renders disabled A11y tree Safari"] =
}
`;
-/* end snapshot sbb-autocomplete-grid-button renders disabled A11y tree Safari */
+/* end snapshot sbb-autocomplete-grid-button A11y tree Firefox */
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts
index 71d0d6fedc..498dc6440b 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts
@@ -36,10 +36,6 @@ describe('sbb-autocomplete-grid-button', () => {
it('ShadowDom', async () => {
await expect(root).shadowDom.to.be.equalSnapshot();
});
-
- testA11yTreeSnapshot(
- html` `,
- );
});
describe('renders disabled', () => {
@@ -70,13 +66,6 @@ describe('sbb-autocomplete-grid-button', () => {
it('ShadowDom', async () => {
await expect(root).shadowDom.to.be.equalSnapshot();
});
-
- testA11yTreeSnapshot(
- html` `,
- );
});
describe('renders negative without icon', () => {
@@ -107,4 +96,15 @@ describe('sbb-autocomplete-grid-button', () => {
await expect(root).shadowDom.to.be.equalSnapshot();
});
});
+
+ testA11yTreeSnapshot(
+ html` `,
+ );
+
+ testA11yTreeSnapshot(
+ html` `,
+ );
});
diff --git a/src/components/autocomplete-grid/autocomplete-grid-optgroup/__snapshots__/autocomplete-grid-optgroup.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-optgroup/__snapshots__/autocomplete-grid-optgroup.spec.snap.js
index b7f27d4da1..e5245ad257 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-optgroup/__snapshots__/autocomplete-grid-optgroup.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid-optgroup/__snapshots__/autocomplete-grid-optgroup.spec.snap.js
@@ -168,47 +168,3 @@ snapshots["sbb-autocomplete-grid-optgroup Safari ShadowDom"] =
`;
/* end snapshot sbb-autocomplete-grid-optgroup Safari ShadowDom */
-snapshots["sbb-autocomplete-grid-optgroup Safari A11y tree Safari"] =
-`
- {
- "role": "WebArea",
- "name": "",
- "children": [
- {
- "role": "text",
- "name": "Option 1"
- },
- {
- "role": "text",
- "name": "("
- },
- {
- "role": "text",
- "name": "Group"
- },
- {
- "role": "text",
- "name": ")"
- },
- {
- "role": "text",
- "name": "Option 2"
- },
- {
- "role": "text",
- "name": "("
- },
- {
- "role": "text",
- "name": "Group"
- },
- {
- "role": "text",
- "name": ")"
- }
- ]
-}
-
-`;
-/* end snapshot sbb-autocomplete-grid-optgroup Safari A11y tree Safari */
-
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
index dd42fcc0ec..fb41736985 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
@@ -80,22 +80,6 @@ snapshots["sbb-autocomplete-grid-option disabled ShadowDom"] =
`;
/* end snapshot sbb-autocomplete-grid-option disabled ShadowDom */
-snapshots["sbb-autocomplete-grid-option default A11y tree Firefox"] =
-`
- {
- "role": "document",
- "name": "",
- "children": [
- {
- "role": "text leaf",
- "name": "Option 1"
- }
- ]
-}
-
-`;
-/* end snapshot sbb-autocomplete-grid-option default A11y tree Firefox */
-
snapshots["sbb-autocomplete-grid-option disabled A11y tree Chrome"] =
`
{
@@ -112,7 +96,7 @@ snapshots["sbb-autocomplete-grid-option disabled A11y tree Chrome"] =
`;
/* end snapshot sbb-autocomplete-grid-option disabled A11y tree Chrome */
-snapshots["sbb-autocomplete-grid-option disabled A11y tree Firefox"] =
+snapshots["sbb-autocomplete-grid-option default A11y tree Firefox"] =
`
{
"role": "document",
@@ -126,38 +110,21 @@ snapshots["sbb-autocomplete-grid-option disabled A11y tree Firefox"] =
}
`;
-/* end snapshot sbb-autocomplete-grid-option disabled A11y tree Firefox */
+/* end snapshot sbb-autocomplete-grid-option default A11y tree Firefox */
-snapshots["sbb-autocomplete-grid-option default A11y tree Safari"] =
+snapshots["sbb-autocomplete-grid-option disabled A11y tree Firefox"] =
`
{
- "role": "WebArea",
+ "role": "document",
"name": "",
"children": [
{
- "role": "text",
+ "role": "text leaf",
"name": "Option 1"
}
]
}
`;
-/* end snapshot sbb-autocomplete-grid-option default A11y tree Safari */
-
-snapshots["sbb-autocomplete-grid-option disabled A11y tree Safari"] =
-`
- {
- "role": "WebArea",
- "name": "",
- "children": [
- {
- "role": "text",
- "name": "Option 1",
- "disabled": true
- }
- ]
-}
-
-`;
-/* end snapshot sbb-autocomplete-grid-option disabled A11y tree Safari */
+/* end snapshot sbb-autocomplete-grid-option disabled A11y tree Firefox */
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.spec.snap.js
index d4d3bf18b9..5fed5aa736 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.spec.snap.js
@@ -83,23 +83,3 @@ snapshots["sbb-autocomplete-grid-row A11y tree Firefox"] =
`;
/* end snapshot sbb-autocomplete-grid-row A11y tree Firefox */
-snapshots["sbb-autocomplete-grid-row A11y tree Safari"] =
-`
- {
- "role": "WebArea",
- "name": "",
- "children": [
- {
- "role": "text",
- "name": "Option 1"
- },
- {
- "role": "button",
- "name": ""
- }
- ]
-}
-
-`;
-/* end snapshot sbb-autocomplete-grid-row A11y tree Safari */
-
diff --git a/src/components/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.spec.snap.js
index 0a052d26dd..a46dc36a4b 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.spec.snap.js
@@ -225,13 +225,3 @@ snapshots["sbb-autocomplete-grid Safari ShadowDom"] =
`;
/* end snapshot sbb-autocomplete-grid Safari ShadowDom */
-snapshots["sbb-autocomplete-grid Safari A11y tree Safari"] =
-`
- {
- "role": "WebArea",
- "name": ""
-}
-
-`;
-/* end snapshot sbb-autocomplete-grid Safari A11y tree Safari */
-
diff --git a/src/components/button/transparent-button-static/__snapshots__/transparent-button-static.spec.snap.js b/src/components/button/transparent-button-static/__snapshots__/transparent-button-static.spec.snap.js
index bbe8b28f9f..82ed2a1361 100644
--- a/src/components/button/transparent-button-static/__snapshots__/transparent-button-static.spec.snap.js
+++ b/src/components/button/transparent-button-static/__snapshots__/transparent-button-static.spec.snap.js
@@ -28,20 +28,6 @@ snapshots["sbb-transparent-button-static renders a sbb-transparent-button-static
`;
/* end snapshot sbb-transparent-button-static renders a sbb-transparent-button-static without icon ShadowDom */
-snapshots["ShadowDom"] =
-`
-
-
-
-
-
-
-
-
-
-`;
-/* end snapshot ShadowDom */
-
snapshots["sbb-transparent-button-static renders a sbb-transparent-button-static with slotted icon Dom"] =
`
{
- "role": "document",
+ "role": "WebArea",
"name": "",
"children": [
{
@@ -105,12 +105,12 @@ snapshots["sbb-expansion-panel renders with level set A11y tree Firefox"] =
}
`;
-/* end snapshot sbb-expansion-panel renders with level set A11y tree Firefox */
+/* end snapshot sbb-expansion-panel renders with level set A11y tree Chrome */
-snapshots["sbb-expansion-panel renders with level set A11y tree Chrome"] =
+snapshots["sbb-expansion-panel renders with level set A11y tree Firefox"] =
`
{
- "role": "WebArea",
+ "role": "document",
"name": "",
"children": [
{
@@ -121,5 +121,5 @@ snapshots["sbb-expansion-panel renders with level set A11y tree Chrome"] =
}
`;
-/* end snapshot sbb-expansion-panel renders with level set A11y tree Chrome */
+/* end snapshot sbb-expansion-panel renders with level set A11y tree Firefox */
diff --git a/src/components/screen-reader-only/__snapshots__/screen-reader-only.spec.snap.js b/src/components/screen-reader-only/__snapshots__/screen-reader-only.spec.snap.js
index 6972a01fa9..671f28aead 100644
--- a/src/components/screen-reader-only/__snapshots__/screen-reader-only.spec.snap.js
+++ b/src/components/screen-reader-only/__snapshots__/screen-reader-only.spec.snap.js
@@ -33,13 +33,3 @@ snapshots["sbb-screen-reader-only renders A11y tree Firefox"] =
`;
/* end snapshot sbb-screen-reader-only renders A11y tree Firefox */
-snapshots["sbb-screen-reader-only renders A11y tree Safari"] =
-`
- {
- "role": "WebArea",
- "name": ""
-}
-
-`;
-/* end snapshot sbb-screen-reader-only renders A11y tree Safari */
-
From d783be66caf6836457f0fd44a44b2ae50ae01289 Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Thu, 28 Mar 2024 16:37:42 +0100
Subject: [PATCH 26/67] fix: snap
---
.../autocomplete-grid-button.spec.snap.js | 66 -------------------
1 file changed, 66 deletions(-)
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js
index fcc7ee4bf6..b32506d037 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js
@@ -30,22 +30,6 @@ snapshots["sbb-autocomplete-grid-button renders ShadowDom"] =
`;
/* end snapshot sbb-autocomplete-grid-button renders ShadowDom */
-snapshots["sbb-autocomplete-grid-button renders A11y tree Chrome"] =
-`
- {
- "role": "WebArea",
- "name": "",
- "children": [
- {
- "role": "button",
- "name": ""
- }
- ]
-}
-
-`;
-/* end snapshot sbb-autocomplete-grid-button renders A11y tree Chrome */
-
snapshots["sbb-autocomplete-grid-button renders disabled Dom"] =
`
- {
- "role": "WebArea",
- "name": "",
- "children": [
- {
- "role": "button",
- "name": "",
- "disabled": true
- }
- ]
-}
-
-`;
-/* end snapshot sbb-autocomplete-grid-button renders disabled A11y tree Chrome */
-
snapshots["sbb-autocomplete-grid-button renders negative without icon Dom"] =
`
- {
- "role": "document",
- "name": "",
- "children": [
- {
- "role": "button",
- "name": ""
- }
- ]
-}
-
-`;
-/* end snapshot sbb-autocomplete-grid-button renders A11y tree Firefox */
-
-snapshots["sbb-autocomplete-grid-button renders disabled A11y tree Firefox"] =
-`
- {
- "role": "document",
- "name": "",
- "children": [
- {
- "role": "button",
- "name": "",
- "disabled": true
- }
- ]
-}
-
-`;
-/* end snapshot sbb-autocomplete-grid-button renders disabled A11y tree Firefox */
-
snapshots["sbb-autocomplete-grid-button A11y tree Chrome"] =
`
{
From ee5c00324c382067e30927b491a822832a493d3b Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Thu, 28 Mar 2024 17:01:09 +0100
Subject: [PATCH 27/67] fix: snap
---
.../autocomplete-grid-button.spec.snap.js | 6 ++--
.../autocomplete-grid-button.spec.ts | 7 ----
.../autocomplete-grid-option.spec.snap.js | 32 -------------------
.../autocomplete-grid-option.spec.ts | 6 ----
4 files changed, 2 insertions(+), 49 deletions(-)
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js
index b32506d037..c8ce436081 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js
@@ -90,8 +90,7 @@ snapshots["sbb-autocomplete-grid-button A11y tree Chrome"] =
"children": [
{
"role": "button",
- "name": "",
- "disabled": true
+ "name": ""
}
]
}
@@ -107,8 +106,7 @@ snapshots["sbb-autocomplete-grid-button A11y tree Firefox"] =
"children": [
{
"role": "button",
- "name": "",
- "disabled": true
+ "name": ""
}
]
}
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts
index 498dc6440b..12b3913b3b 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts
@@ -100,11 +100,4 @@ describe('sbb-autocomplete-grid-button', () => {
testA11yTreeSnapshot(
html` `,
);
-
- testA11yTreeSnapshot(
- html` `,
- );
});
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
index fb41736985..6e8ad39e71 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
@@ -80,22 +80,6 @@ snapshots["sbb-autocomplete-grid-option disabled ShadowDom"] =
`;
/* end snapshot sbb-autocomplete-grid-option disabled ShadowDom */
-snapshots["sbb-autocomplete-grid-option disabled A11y tree Chrome"] =
-`
- {
- "role": "WebArea",
- "name": "",
- "children": [
- {
- "role": "text",
- "name": "Option 1"
- }
- ]
-}
-
-`;
-/* end snapshot sbb-autocomplete-grid-option disabled A11y tree Chrome */
-
snapshots["sbb-autocomplete-grid-option default A11y tree Firefox"] =
`
{
@@ -112,19 +96,3 @@ snapshots["sbb-autocomplete-grid-option default A11y tree Firefox"] =
`;
/* end snapshot sbb-autocomplete-grid-option default A11y tree Firefox */
-snapshots["sbb-autocomplete-grid-option disabled A11y tree Firefox"] =
-`
- {
- "role": "document",
- "name": "",
- "children": [
- {
- "role": "text leaf",
- "name": "Option 1"
- }
- ]
-}
-
-`;
-/* end snapshot sbb-autocomplete-grid-option disabled A11y tree Firefox */
-
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts
index 16973af43d..d217d83853 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts
@@ -63,11 +63,5 @@ describe('sbb-autocomplete-grid-option', () => {
it('ShadowDom', async () => {
await expect(root).shadowDom.to.be.equalSnapshot();
});
-
- testA11yTreeSnapshot(
- html`Option 1 `,
- );
});
});
From 965ae10b62f563452af835aa2d698782781c96be Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Thu, 28 Mar 2024 17:20:58 +0100
Subject: [PATCH 28/67] fix: snap
---
.../autocomplete-grid-option.spec.snap.js | 32 -------------------
.../autocomplete-grid-option.spec.ts | 7 ++--
2 files changed, 2 insertions(+), 37 deletions(-)
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
index 6e8ad39e71..a71da0b9f1 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
@@ -48,38 +48,6 @@ snapshots["sbb-autocomplete-grid-option default A11y tree Chrome"] =
`;
/* end snapshot sbb-autocomplete-grid-option default A11y tree Chrome */
-snapshots["sbb-autocomplete-grid-option disabled Dom"] =
-`
- Option 1
-
-`;
-/* end snapshot sbb-autocomplete-grid-option disabled Dom */
-
-snapshots["sbb-autocomplete-grid-option disabled ShadowDom"] =
-`
-
-
-
-
-
-
-
-
- Option 1
-
-
-
-`;
-/* end snapshot sbb-autocomplete-grid-option disabled ShadowDom */
-
snapshots["sbb-autocomplete-grid-option default A11y tree Firefox"] =
`
{
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts
index d217d83853..121bb932bf 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts
@@ -57,11 +57,8 @@ describe('sbb-autocomplete-grid-option', () => {
});
it('Dom', async () => {
- await expect(root).dom.to.be.equalSnapshot();
- });
-
- it('ShadowDom', async () => {
- await expect(root).shadowDom.to.be.equalSnapshot();
+ await expect(root).to.have.attribute('disabled');
+ await expect(root).to.have.attribute('aria-disabled', 'true');
});
});
});
From 070ec42468fa36ae47540fb93826857a240bf131 Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Wed, 3 Apr 2024 10:23:00 +0200
Subject: [PATCH 29/67] fix: review
---
.../autocomplete-grid-option.spec.snap.js | 32 ++++++++++++++++
.../autocomplete-grid-option.spec.ts | 8 ++--
.../autocomplete-grid.spec.ts | 38 +++++++++----------
3 files changed, 54 insertions(+), 24 deletions(-)
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
index a71da0b9f1..86b060974f 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
@@ -64,3 +64,35 @@ snapshots["sbb-autocomplete-grid-option default A11y tree Firefox"] =
`;
/* end snapshot sbb-autocomplete-grid-option default A11y tree Firefox */
+snapshots["sbb-autocomplete-grid-option A11y tree Chrome"] =
+`
+ {
+ "role": "WebArea",
+ "name": "",
+ "children": [
+ {
+ "role": "text",
+ "name": "Option 1"
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-autocomplete-grid-option A11y tree Chrome */
+
+snapshots["sbb-autocomplete-grid-option A11y tree Firefox"] =
+`
+ {
+ "role": "document",
+ "name": "",
+ "children": [
+ {
+ "role": "text leaf",
+ "name": "Option 1"
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-autocomplete-grid-option A11y tree Firefox */
+
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts
index 121bb932bf..c29163bb1c 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts
@@ -33,12 +33,12 @@ describe('sbb-autocomplete-grid-option', () => {
it('ShadowDom', async () => {
await expect(root).shadowDom.to.be.equalSnapshot();
});
-
- testA11yTreeSnapshot(
- html`Option 1 `,
- );
});
+ testA11yTreeSnapshot(
+ html`Option 1 `,
+ );
+
describe('disabled', () => {
let root: SbbAutocompleteGridOptionElement;
beforeEach(async () => {
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts
index 5ae11d4286..b9f54ac488 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts
@@ -1,5 +1,4 @@
import { expect } from '@open-wc/testing';
-import type { TemplateResult } from 'lit';
import { html } from 'lit/static-html.js';
import { isSafari } from '../../core/dom';
@@ -15,25 +14,24 @@ import '../autocomplete-grid-button';
describe('sbb-autocomplete-grid', () => {
let root: SbbAutocompleteGridElement;
- const grid: TemplateResult = html`
-
-
- Option 1
-
-
-
-
-
- Option 2
-
-
-
-
-
- `;
beforeEach(async () => {
- root = await fixture(grid);
+ root = await fixture(html`
+
+
+ Option 1
+
+
+
+
+
+ Option 2
+
+
+
+
+
+ `);
});
describeIf(!isSafari(), 'Chrome-Firefox', async () => {
@@ -45,7 +43,7 @@ describe('sbb-autocomplete-grid', () => {
await expect(root).shadowDom.to.be.equalSnapshot();
});
- testA11yTreeSnapshot(grid);
+ testA11yTreeSnapshot();
});
describeIf(isSafari(), 'Safari', async () => {
@@ -57,6 +55,6 @@ describe('sbb-autocomplete-grid', () => {
await expect(root).shadowDom.to.be.equalSnapshot();
});
- testA11yTreeSnapshot(grid);
+ testA11yTreeSnapshot();
});
});
From 175619797edf0bc0be1a0268c1865bd60b4d7a25 Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Wed, 3 Apr 2024 11:50:11 +0200
Subject: [PATCH 30/67] fix: rebase
---
.../autocomplete-grid-option.stories.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts
index 9f84a1f1ed..f2dd5e3efb 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts
@@ -10,7 +10,7 @@ import type {
import { html, type TemplateResult } from 'lit';
import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
-import { sbbSpread } from '../../core/dom';
+import { sbbSpread } from '../../../storybook/helpers/spread';
import readme from './readme.md?raw';
From 7ae74b0694451e96386b8d59d3ddeb220cae83cb Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Wed, 3 Apr 2024 14:36:52 +0200
Subject: [PATCH 31/67] fix: rebase
---
.../autocomplete-grid-option/autocomplete-grid-option.ts | 6 +-----
.../autocomplete-grid/autocomplete-grid.ts | 4 ++--
.../autocomplete-grid/autocomplete-grid/readme.md | 6 +++---
src/components/core/overlay/overlay-trigger-attributes.ts | 2 +-
4 files changed, 7 insertions(+), 11 deletions(-)
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
index 14b802aef4..500332c90a 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
@@ -1,4 +1,4 @@
-import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues } from 'lit';
import { customElement } from 'lit/decorators.js';
import { SbbOptionBaseElement } from '../../core/base-elements/option-base-element';
@@ -82,10 +82,6 @@ export class SbbAutocompleteGridOptionElement extends SbbOptionBaseElement {
this.setSelectedViaUserInteraction(true);
}
-
- protected override render(): TemplateResult {
- return super.render();
- }
}
declare global {
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts
index dc54b7111d..f91c538471 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts
@@ -29,9 +29,9 @@ const ariaRoleOnHost = isSafari();
* @event {CustomEvent} didOpen - Emits whenever the `sbb-autocomplete-grid` is opened.
* @event {CustomEvent} willClose - Emits whenever the `sbb-autocomplete-grid` begins the closing transition. Can be canceled.
* @event {CustomEvent} didClose - Emits whenever the `sbb-autocomplete-grid` is closed.
- * @cssprop [--sbb-autocomplete-z-index=var(--sbb-overlay-z-index)] - To specify a custom stack order,
+ * @cssprop [--sbb-autocomplete-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
* the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
- * component is set to `var(--sbb-overlay-z-index)` with a value of `1000`.
+ * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
*/
@customElement('sbb-autocomplete-grid')
@hostAttributes({
diff --git a/src/components/autocomplete-grid/autocomplete-grid/readme.md b/src/components/autocomplete-grid/autocomplete-grid/readme.md
index 04240233d8..5c6ea3d39c 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/readme.md
+++ b/src/components/autocomplete-grid/autocomplete-grid/readme.md
@@ -167,9 +167,9 @@ using `aria-activedescendant` to support navigation though the autocomplete opti
## CSS Properties
-| Name | Default | Description |
-| ---------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--sbb-autocomplete-z-index` | `var(--sbb-overlay-z-index)` | To specify a custom stack order, the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the component is set to `var(--sbb-overlay-z-index)` with a value of `1000`. |
+| Name | Default | Description |
+| ---------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--sbb-autocomplete-z-index` | `var(--sbb-overlay-default-z-index)` | To specify a custom stack order, the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`. |
## Slots
diff --git a/src/components/core/overlay/overlay-trigger-attributes.ts b/src/components/core/overlay/overlay-trigger-attributes.ts
index 6e682a363f..1adb2f907d 100644
--- a/src/components/core/overlay/overlay-trigger-attributes.ts
+++ b/src/components/core/overlay/overlay-trigger-attributes.ts
@@ -48,7 +48,7 @@ export function setAriaComboBoxAttributes(
trigger.setAttribute('aria-autocomplete', 'list');
trigger.setAttribute('aria-haspopup', hasPopup);
trigger.setAttribute('aria-controls', overlayId);
- trigger.setAttribute('aria-owns', overlayId); // From Aria 1.2 this should not be necessary but safari still needs it
+ trigger.setAttribute('aria-owns', overlayId); // From Aria 1.2 this should not be necessary, but safari still needs it
trigger.setAttribute('aria-expanded', `${expanded}`);
}
From b7f32d2ec6a81a77fbb13d1d0382c5e35d8ba072 Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Mon, 8 Apr 2024 18:50:01 +0200
Subject: [PATCH 32/67] fix: rebase
---
.../autocomplete-grid-actions.ts | 2 +-
.../autocomplete-grid-button.spec.ts | 1 +
.../autocomplete-grid-optgroup.spec.snap.js | 4 ----
.../autocomplete-grid-optgroup.e2e.ts | 5 +++++
.../autocomplete-grid-optgroup.ts | 12 ++++++++++--
.../autocomplete-grid-option.spec.snap.js | 1 -
.../autocomplete-grid-option.e2e.ts | 6 ++++++
.../autocomplete-grid-option.ts | 5 ++++-
.../__snapshots__/autocomplete-grid-row.spec.snap.js | 1 -
.../autocomplete-grid-row/autocomplete-grid-row.ts | 9 +++++++--
.../__snapshots__/autocomplete-grid.spec.snap.js | 4 ----
.../autocomplete-grid/autocomplete-grid.e2e.ts | 3 +++
.../autocomplete-grid/autocomplete-grid.ts | 11 +++++------
src/components/autocomplete/autocomplete.ts | 6 +-----
.../optgroup}/optgroup-base-element.scss | 2 +-
.../optgroup}/optgroup-base-element.ts | 12 +++++++-----
src/components/option/optgroup/optgroup.ts | 9 +--------
src/components/option/option/option.ts | 4 ----
18 files changed, 52 insertions(+), 45 deletions(-)
rename src/components/{core/base-elements => option/optgroup}/optgroup-base-element.scss (98%)
rename src/components/{core/base-elements => option/optgroup}/optgroup-base-element.ts (89%)
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.ts b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.ts
index 093498f665..fbacdd9786 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.ts
@@ -2,7 +2,7 @@ import { type CSSResultGroup, html, LitElement, type TemplateResult } from 'lit'
import { customElement } from 'lit/decorators.js';
import { hostAttributes } from '../../core/decorators';
-import type { SbbAutocompleteGridButtonElement } from '../index';
+import type { SbbAutocompleteGridButtonElement } from '../autocomplete-grid-button';
import style from './autocomplete-grid-actions.scss?lit&inline';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts
index 12b3913b3b..53f7af603f 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts
@@ -5,6 +5,7 @@ import { waitForLitRender } from '../../core/testing';
import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
import type { SbbAutocompleteGridButtonElement } from './autocomplete-grid-button';
+import '../../form-field';
import '../autocomplete-grid';
import '../autocomplete-grid-row';
import '../autocomplete-grid-actions';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-optgroup/__snapshots__/autocomplete-grid-optgroup.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-optgroup/__snapshots__/autocomplete-grid-optgroup.spec.snap.js
index e5245ad257..f10d7e0a59 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-optgroup/__snapshots__/autocomplete-grid-optgroup.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid-optgroup/__snapshots__/autocomplete-grid-optgroup.spec.snap.js
@@ -13,7 +13,6 @@ snapshots["sbb-autocomplete-grid-optgroup Chrome-Firefox Dom"] =
role="row"
>
{
let element: SbbAutocompleteGridOptgroupElement;
diff --git a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts
index 8c69ad5a0d..80d9c4635e 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts
@@ -1,11 +1,18 @@
import { customElement } from 'lit/decorators.js';
-import { SbbOptgroupBaseElement } from '../../core/base-elements/optgroup-base-element';
+import { hostAttributes } from '../../core/decorators';
+import { isSafari } from '../../core/dom';
+import { SbbOptgroupBaseElement } from '../../option/optgroup';
import type { SbbAutocompleteGridElement } from '../autocomplete-grid';
import type { SbbAutocompleteGridButtonElement } from '../autocomplete-grid-button';
import type { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option';
-import '../../divider';
+/**
+ * On Safari, the groups labels are not read by VoiceOver.
+ * To solve the problem, we remove the role="group" and add a hidden span containing the group name
+ * TODO: We should periodically check if it has been solved and, if so, remove the property.
+ */
+const inertAriaGroups = isSafari();
/**
* It can be used as a container for one or more `sbb-autocomplete-grid-option`.
@@ -13,6 +20,7 @@ import '../../divider';
* @slot - Use the unnamed slot to add `sbb-autocomplete-grid-option` elements to the `sbb-autocomplete-grid-optgroup`.
*/
@customElement('sbb-autocomplete-grid-optgroup')
+@hostAttributes({ role: !inertAriaGroups ? 'group' : null })
export class SbbAutocompleteGridOptgroupElement extends SbbOptgroupBaseElement {
protected get options(): SbbAutocompleteGridOptionElement[] {
return Array.from(
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
index 86b060974f..607f2c6a40 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
@@ -3,7 +3,6 @@ export const snapshots = {};
snapshots["sbb-autocomplete-grid-option default Dom"] =
` {
let element: SbbFormFieldElement;
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
index 500332c90a..c4aa5ea1b2 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
@@ -9,6 +9,8 @@ import '../../icon';
import '../../screen-reader-only';
import style from './autocomplete-grid-option.scss?lit&inline';
+export const autocompleteGridOptionId: string = `sbb-autocomplete-grid-option`;
+
/**
* It displays an option item which can be used in `sbb-autocomplete-grid`.
*
@@ -30,7 +32,7 @@ export class SbbAutocompleteGridOptionElement extends SbbOptionBaseElement {
optionSelected: 'autocompleteOptionSelected',
} as const;
- protected optionId = `sbb-autocomplete-grid-option`;
+ protected optionId = autocompleteGridOptionId;
/** Emits when the option selection status changes. */
protected selectionChange: EventEmitter = new EventEmitter(
@@ -53,6 +55,7 @@ export class SbbAutocompleteGridOptionElement extends SbbOptionBaseElement {
'data-disabled',
this.disabled || this.disabledFromGroup,
);
+ this.updateAriaDisabled();
}
}
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.spec.snap.js
index 5fed5aa736..ce1e2003e1 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.spec.snap.js
@@ -7,7 +7,6 @@ snapshots["sbb-autocomplete-grid-row Dom"] =
role="row"
>
e.tagName === 'SBB-AUTOCOMPLETE-GRID-OPTION',
);
- if (option && !option.id) {
+ // Overrides default autocomplete id
+ if (option && (!option.id || option.id.includes(autocompleteGridOptionId))) {
option.setAttribute('id', `sbb-autocomplete-grid-item-${this._rowId}x0`);
}
diff --git a/src/components/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.spec.snap.js
index a46dc36a4b..fc41bec055 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.spec.snap.js
@@ -11,7 +11,6 @@ snapshots["sbb-autocomplete-grid Chrome-Firefox Dom"] =
role="row"
>
{
let formField: SbbFormFieldElement;
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts
index f91c538471..6ac8c152af 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts
@@ -1,8 +1,8 @@
-import { nothing, type TemplateResult } from 'lit';
+import { nothing } from 'lit';
import { customElement } from 'lit/decorators.js';
import { getNextElementIndex } from '../../core/a11y';
-import { SbbAutocompleteBaseElement } from '../../core/base-elements/autocomplete-base-element';
+import { SbbAutocompleteBaseElement } from '../../core/base-elements';
import { hostAttributes } from '../../core/decorators';
import { getDocumentWritingMode, isSafari } from '../../core/dom';
import { EventEmitter } from '../../core/eventing';
@@ -122,6 +122,9 @@ export class SbbAutocompleteGridElement extends SbbAutocompleteBaseElement {
public override connectedCallback(): void {
super.connectedCallback();
+ if (ariaRoleOnHost) {
+ this.id ||= this.overlayId;
+ }
const signal = this.abort.signal;
this.addEventListener(
'autocompleteOptionSelectionChange',
@@ -272,10 +275,6 @@ export class SbbAutocompleteGridElement extends SbbAutocompleteBaseElement {
protected setRoleOnInnerPanel(): string | typeof nothing {
return !ariaRoleOnHost ? 'grid' : nothing;
}
-
- protected override render(): TemplateResult {
- return super.render();
- }
}
declare global {
diff --git a/src/components/autocomplete/autocomplete.ts b/src/components/autocomplete/autocomplete.ts
index 22470c58be..88da3e8c24 100644
--- a/src/components/autocomplete/autocomplete.ts
+++ b/src/components/autocomplete/autocomplete.ts
@@ -1,4 +1,4 @@
-import { nothing, type TemplateResult } from 'lit';
+import { nothing } from 'lit';
import { customElement } from 'lit/decorators.js';
import { getNextElementIndex } from '../core/a11y.js';
@@ -187,10 +187,6 @@ export class SbbAutocompleteElement extends SbbAutocompleteBaseElement {
protected setRoleOnInnerPanel(): string | typeof nothing {
return !ariaRoleOnHost ? 'listbox' : nothing;
}
-
- protected override render(): TemplateResult {
- return super.render();
- }
}
declare global {
diff --git a/src/components/core/base-elements/optgroup-base-element.scss b/src/components/option/optgroup/optgroup-base-element.scss
similarity index 98%
rename from src/components/core/base-elements/optgroup-base-element.scss
rename to src/components/option/optgroup/optgroup-base-element.scss
index 6d948c5649..048def9c67 100644
--- a/src/components/core/base-elements/optgroup-base-element.scss
+++ b/src/components/option/optgroup/optgroup-base-element.scss
@@ -1,4 +1,4 @@
-@use '../styles' as sbb;
+@use '../../core/styles/index' as sbb;
// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
@include sbb.box-sizing;
diff --git a/src/components/core/base-elements/optgroup-base-element.ts b/src/components/option/optgroup/optgroup-base-element.ts
similarity index 89%
rename from src/components/core/base-elements/optgroup-base-element.ts
rename to src/components/option/optgroup/optgroup-base-element.ts
index c7aa1ce444..df5769f469 100644
--- a/src/components/core/base-elements/optgroup-base-element.ts
+++ b/src/components/option/optgroup/optgroup-base-element.ts
@@ -7,13 +7,15 @@ import {
} from 'lit';
import { property, state } from 'lit/decorators.js';
-import { isSafari, setOrRemoveAttribute } from '../dom';
-import { SbbDisabledMixin, SbbHydrationMixin } from '../mixins';
-import { AgnosticMutationObserver } from '../observers';
+import type { SbbAutocompleteBaseElement } from '../../core/base-elements/autocomplete-base-element';
+import type { SbbOptionBaseElement } from '../../core/base-elements/option-base-element';
+import { isSafari, setOrRemoveAttribute } from '../../core/dom';
+import { SbbDisabledMixin, SbbHydrationMixin } from '../../core/mixins';
+import { AgnosticMutationObserver } from '../../core/observers';
-import type { SbbAutocompleteBaseElement } from './autocomplete-base-element';
import style from './optgroup-base-element.scss?lit&inline';
-import type { SbbOptionBaseElement } from './option-base-element';
+
+import '../../divider';
/**
* On Safari, the groups labels are not read by VoiceOver.
diff --git a/src/components/option/optgroup/optgroup.ts b/src/components/option/optgroup/optgroup.ts
index 63e7721751..56ec369910 100644
--- a/src/components/option/optgroup/optgroup.ts
+++ b/src/components/option/optgroup/optgroup.ts
@@ -1,13 +1,11 @@
-import type { TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js';
import type { SbbAutocompleteElement } from '../../autocomplete.js';
-import { SbbOptgroupBaseElement } from '../../core/base-elements/optgroup-base-element.js';
import { hostAttributes } from '../../core/decorators.js';
import { isSafari } from '../../core/dom.js';
import type { SbbOptionElement } from '../option.js';
-import '../../divider.js';
+import { SbbOptgroupBaseElement } from './optgroup-base-element.js';
/**
* On Safari, the groups labels are not read by VoiceOver.
@@ -24,7 +22,6 @@ const inertAriaGroups = isSafari();
@customElement('sbb-optgroup')
@hostAttributes({ role: !inertAriaGroups ? 'group' : null })
export class SbbOptGroupElement extends SbbOptgroupBaseElement {
-
protected get options(): SbbOptionElement[] {
return Array.from(this.querySelectorAll?.('sbb-option') ?? []) as SbbOptionElement[];
}
@@ -51,10 +48,6 @@ export class SbbOptGroupElement extends SbbOptgroupBaseElement {
this.setAttribute('data-variant', 'select');
}
}
-
- protected override render(): TemplateResult {
- return super.render();
- }
}
declare global {
diff --git a/src/components/option/option/option.ts b/src/components/option/option/option.ts
index 4fdfbe5ba9..b1b8dcc378 100644
--- a/src/components/option/option/option.ts
+++ b/src/components/option/option/option.ts
@@ -151,10 +151,6 @@ export class SbbOptionElement extends SbbOptionBaseElement {
? html` `
: nothing;
}
-
- protected override render(): TemplateResult {
- return super.render();
- }
}
declare global {
From 4918ca0c746619fac711d68a42121d07af33de7d Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Tue, 9 Apr 2024 10:39:19 +0200
Subject: [PATCH 33/67] fix: rebase
---
.../autocomplete-grid-actions.e2e.ts | 4 +--
.../autocomplete-grid-actions.spec.ts | 12 ++++-----
.../autocomplete-grid-actions.stories.ts | 8 +++---
.../autocomplete-grid-actions.ts | 4 +--
.../autocomplete-grid-actions/index.ts | 2 +-
.../autocomplete-grid-button.e2e.ts | 6 ++---
.../autocomplete-grid-button.spec.ts | 16 ++++++------
.../autocomplete-grid-button.stories.ts | 8 +++---
.../autocomplete-grid-button.ts | 14 +++++-----
.../autocomplete-grid-button/index.ts | 2 +-
.../autocomplete-grid-optgroup.e2e.ts | 18 ++++++-------
.../autocomplete-grid-optgroup.spec.ts | 22 ++++++++--------
.../autocomplete-grid-optgroup.stories.ts | 14 +++++-----
.../autocomplete-grid-optgroup.ts | 12 ++++-----
.../autocomplete-grid-optgroup/index.ts | 2 +-
.../autocomplete-grid-option.e2e.ts | 26 +++++++++----------
.../autocomplete-grid-option.spec.ts | 14 +++++-----
.../autocomplete-grid-option.stories.ts | 10 +++----
.../autocomplete-grid-option.ts | 10 +++----
.../autocomplete-grid-option/index.ts | 2 +-
.../autocomplete-grid-row.e2e.ts | 4 +--
.../autocomplete-grid-row.spec.ts | 14 +++++-----
.../autocomplete-grid-row.stories.ts | 8 +++---
.../autocomplete-grid-row.ts | 6 ++---
.../autocomplete-grid-row/index.ts | 2 +-
.../autocomplete-grid.e2e.ts | 18 ++++++-------
.../autocomplete-grid.spec.ts | 20 +++++++-------
.../autocomplete-grid.stories.ts | 20 +++++++-------
.../autocomplete-grid/autocomplete-grid.ts | 22 ++++++++--------
.../autocomplete-grid/index.ts | 2 +-
src/components/autocomplete-grid/index.ts | 12 ++++-----
.../autocomplete-base-element.ts | 16 ++++++------
.../core/base-elements/option-base-element.ts | 12 ++++-----
.../option/optgroup/optgroup-base-element.ts | 12 ++++-----
34 files changed, 187 insertions(+), 187 deletions(-)
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.e2e.ts b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.e2e.ts
index 45611bee54..ddd2123cf1 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.e2e.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.e2e.ts
@@ -1,9 +1,9 @@
import { assert } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private/index.js';
-import { SbbAutocompleteGridActionsElement } from './autocomplete-grid-actions';
+import { SbbAutocompleteGridActionsElement } from './autocomplete-grid-actions.js';
describe('sbb-autocomplete-grid-actions', () => {
let element: SbbAutocompleteGridActionsElement;
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.spec.ts
index 7393891b70..97a509af6f 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.spec.ts
@@ -1,13 +1,13 @@
import { expect } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private/index.js';
-import type { SbbAutocompleteGridActionsElement } from './autocomplete-grid-actions';
-import '../autocomplete-grid';
-import '../autocomplete-grid-row';
-import './autocomplete-grid-actions';
-import '../autocomplete-grid-button';
+import type { SbbAutocompleteGridActionsElement } from './autocomplete-grid-actions.js';
+import '../autocomplete-grid/index.js';
+import '../autocomplete-grid-row/index.js';
+import './autocomplete-grid-actions.js';
+import '../autocomplete-grid-button/index.js';
describe('sbb-autocomplete-grid-actions', () => {
let root: SbbAutocompleteGridActionsElement;
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.stories.ts b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.stories.ts
index 00b5917586..6f94e4edec 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.stories.ts
@@ -12,12 +12,12 @@ import { html, type TemplateResult } from 'lit';
import { repeat } from 'lit/directives/repeat.js';
import { styleMap } from 'lit/directives/style-map.js';
-import { sbbSpread } from '../../../storybook/helpers/spread';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
import readme from './readme.md?raw';
-import '../autocomplete-grid-row';
-import './autocomplete-grid-actions';
-import '../autocomplete-grid-button';
+import '../autocomplete-grid-row/index.js';
+import './autocomplete-grid-actions.js';
+import '../autocomplete-grid-button/index.js';
const wrapperStyle = (context: StoryContext): Record => ({
'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.ts b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.ts
index fbacdd9786..e368ed07ab 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.ts
@@ -1,8 +1,8 @@
import { type CSSResultGroup, html, LitElement, type TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js';
-import { hostAttributes } from '../../core/decorators';
-import type { SbbAutocompleteGridButtonElement } from '../autocomplete-grid-button';
+import { hostAttributes } from '../../core/decorators/index.js';
+import type { SbbAutocompleteGridButtonElement } from '../autocomplete-grid-button/index.js';
import style from './autocomplete-grid-actions.scss?lit&inline';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/index.ts b/src/components/autocomplete-grid/autocomplete-grid-actions/index.ts
index cf7f89d97e..927a39994c 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-actions/index.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-actions/index.ts
@@ -1 +1 @@
-export * from './autocomplete-grid-actions';
+export * from './autocomplete-grid-actions.js';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.e2e.ts b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.e2e.ts
index d1f0f487b2..e41c09ab99 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.e2e.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.e2e.ts
@@ -1,10 +1,10 @@
import { assert, expect } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing/index.js';
+import { fixture } from '../../core/testing/private/index.js';
-import { SbbAutocompleteGridButtonElement } from './autocomplete-grid-button';
+import { SbbAutocompleteGridButtonElement } from './autocomplete-grid-button.js';
describe(`sbb-autocomplete-grid-button with ${fixture.name}`, () => {
let element: SbbAutocompleteGridButtonElement;
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts
index 53f7af603f..6d94518e05 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts
@@ -1,15 +1,15 @@
import { expect } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
-import { waitForLitRender } from '../../core/testing';
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { waitForLitRender } from '../../core/testing/index.js';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private/index.js';
-import type { SbbAutocompleteGridButtonElement } from './autocomplete-grid-button';
-import '../../form-field';
-import '../autocomplete-grid';
-import '../autocomplete-grid-row';
-import '../autocomplete-grid-actions';
-import './autocomplete-grid-button';
+import type { SbbAutocompleteGridButtonElement } from './autocomplete-grid-button.js';
+import '../../form-field/index.js';
+import '../autocomplete-grid/index.js';
+import '../autocomplete-grid-row/index.js';
+import '../autocomplete-grid-actions/index.js';
+import './autocomplete-grid-button.js';
describe('sbb-autocomplete-grid-button', () => {
describe('renders', () => {
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts
index 00d997c552..465d18b75f 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts
@@ -11,12 +11,12 @@ import type {
import { html, type TemplateResult } from 'lit';
import { styleMap } from 'lit/directives/style-map.js';
-import { sbbSpread } from '../../../storybook/helpers/spread';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
import readme from './readme.md?raw';
-import '../autocomplete-grid-row';
-import '../autocomplete-grid-actions';
-import './autocomplete-grid-button';
+import '../autocomplete-grid-row/index.js';
+import '../autocomplete-grid-actions/index.js';
+import './autocomplete-grid-button.js';
const wrapperStyle = (context: StoryContext): Record => ({
'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
index 0883bde013..b040e15b19 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
@@ -1,14 +1,14 @@
import { type CSSResultGroup, type TemplateResult } from 'lit';
import { customElement, state } from 'lit/decorators.js';
-import { SbbMiniButtonBaseElement } from '../../core/base-elements';
-import { hostAttributes } from '../../core/decorators';
-import { isValidAttribute, setAttribute } from '../../core/dom';
-import { SbbDisabledMixin } from '../../core/mixins';
-import { AgnosticMutationObserver } from '../../core/observers';
-import { type SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option';
+import { SbbMiniButtonBaseElement } from '../../core/base-elements/index.js';
+import { hostAttributes } from '../../core/decorators/index.js';
+import { isValidAttribute, setAttribute } from '../../core/dom/index.js';
+import { SbbDisabledMixin } from '../../core/mixins/index.js';
+import { AgnosticMutationObserver } from '../../core/observers/index.js';
+import { type SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option/index.js';
-import '../../icon';
+import '../../icon/index.js';
import style from './autocomplete-grid-button.scss?lit&inline';
/** Configuration for the attribute to look at if component is nested in a sbb-optgroup */
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/index.ts b/src/components/autocomplete-grid/autocomplete-grid-button/index.ts
index 5d475645c1..46ac3e6a47 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/index.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/index.ts
@@ -1 +1 @@
-export * from './autocomplete-grid-button';
+export * from './autocomplete-grid-button.js';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.e2e.ts b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.e2e.ts
index 3aa3127815..503b74de92 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.e2e.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.e2e.ts
@@ -1,16 +1,16 @@
import { assert, expect } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
-import { waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import type { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option';
+import { waitForLitRender } from '../../core/testing/index.js';
+import { fixture } from '../../core/testing/private/index.js';
+import type { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option/index.js';
-import { SbbAutocompleteGridOptgroupElement } from './autocomplete-grid-optgroup';
-import '../autocomplete-grid';
-import '../autocomplete-grid-row';
-import '../autocomplete-grid-actions';
-import '../autocomplete-grid-button';
-import '../autocomplete-grid-option';
+import { SbbAutocompleteGridOptgroupElement } from './autocomplete-grid-optgroup.js';
+import '../autocomplete-grid/index.js';
+import '../autocomplete-grid-row/index.js';
+import '../autocomplete-grid-actions/index.js';
+import '../autocomplete-grid-button/index.js';
+import '../autocomplete-grid-option/index.js';
describe(`sbb-autocomplete-grid-optgroup with ${fixture.name}`, () => {
let element: SbbAutocompleteGridOptgroupElement;
diff --git a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.spec.ts
index 2e72342c19..c643ff02e4 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.spec.ts
@@ -2,17 +2,17 @@ import { expect } from '@open-wc/testing';
import type { TemplateResult } from 'lit';
import { html } from 'lit/static-html.js';
-import { isSafari } from '../../core/dom';
-import { describeIf } from '../../core/testing';
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
-
-import './autocomplete-grid-optgroup';
-import '../autocomplete-grid';
-import '../autocomplete-grid-row';
-import '../autocomplete-grid-option';
-import '../autocomplete-grid-actions';
-import '../autocomplete-grid-button';
-import type { SbbAutocompleteGridOptgroupElement } from './autocomplete-grid-optgroup';
+import { isSafari } from '../../core/dom/index.js';
+import { describeIf } from '../../core/testing/index.js';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private/index.js';
+
+import './autocomplete-grid-optgroup.js';
+import '../autocomplete-grid/index.js';
+import '../autocomplete-grid-row/index.js';
+import '../autocomplete-grid-option/index.js';
+import '../autocomplete-grid-actions/index.js';
+import '../autocomplete-grid-button/index.js';
+import type { SbbAutocompleteGridOptgroupElement } from './autocomplete-grid-optgroup.js';
describe('sbb-autocomplete-grid-optgroup', () => {
let root: SbbAutocompleteGridOptgroupElement;
diff --git a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts
index 10cab25a3b..6bcd3b46c5 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts
@@ -12,13 +12,13 @@ import { html, nothing, type TemplateResult } from 'lit';
import { styleMap } from 'lit/directives/style-map.js';
import readme from './readme.md?raw';
-import '../../form-field';
-import './autocomplete-grid-optgroup';
-import '../autocomplete-grid';
-import '../autocomplete-grid-row';
-import '../autocomplete-grid-option';
-import '../autocomplete-grid-actions';
-import '../autocomplete-grid-button';
+import '../../form-field/index.js';
+import './autocomplete-grid-optgroup.js';
+import '../autocomplete-grid/index.js';
+import '../autocomplete-grid-row/index.js';
+import '../autocomplete-grid-option/index.js';
+import '../autocomplete-grid-actions/index.js';
+import '../autocomplete-grid-button/index.js';
const wrapperStyle = (context: StoryContext): Record => ({
'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
diff --git a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts
index 80d9c4635e..f49316479a 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts
@@ -1,11 +1,11 @@
import { customElement } from 'lit/decorators.js';
-import { hostAttributes } from '../../core/decorators';
-import { isSafari } from '../../core/dom';
-import { SbbOptgroupBaseElement } from '../../option/optgroup';
-import type { SbbAutocompleteGridElement } from '../autocomplete-grid';
-import type { SbbAutocompleteGridButtonElement } from '../autocomplete-grid-button';
-import type { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option';
+import { hostAttributes } from '../../core/decorators/index.js';
+import { isSafari } from '../../core/dom/index.js';
+import { SbbOptgroupBaseElement } from '../../option/optgroup/index.js';
+import type { SbbAutocompleteGridElement } from '../autocomplete-grid/index.js';
+import type { SbbAutocompleteGridButtonElement } from '../autocomplete-grid-button/index.js';
+import type { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option/index.js';
/**
* On Safari, the groups labels are not read by VoiceOver.
diff --git a/src/components/autocomplete-grid/autocomplete-grid-optgroup/index.ts b/src/components/autocomplete-grid/autocomplete-grid-optgroup/index.ts
index 12b3b2913b..17c6ae3e23 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-optgroup/index.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-optgroup/index.ts
@@ -1 +1 @@
-export * from './autocomplete-grid-optgroup';
+export * from './autocomplete-grid-optgroup.js';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.e2e.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.e2e.ts
index e61c45ed3f..d3fa14ca29 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.e2e.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.e2e.ts
@@ -2,19 +2,19 @@ import { assert, expect } from '@open-wc/testing';
import { sendKeys } from '@web/test-runner-commands';
import { html } from 'lit/static-html.js';
-import { EventSpy, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import type { SbbFormFieldElement } from '../../form-field';
-import type { SbbAutocompleteGridElement } from '../autocomplete-grid';
-import type { SbbAutocompleteGridOptgroupElement } from '../autocomplete-grid-optgroup';
-
-import { SbbAutocompleteGridOptionElement } from './autocomplete-grid-option';
-import '../../form-field';
-import '../autocomplete-grid';
-import '../autocomplete-grid-optgroup';
-import '../autocomplete-grid-row';
-import '../autocomplete-grid-actions';
-import '../autocomplete-grid-button';
+import { EventSpy, waitForLitRender } from '../../core/testing/index.js';
+import { fixture } from '../../core/testing/private/index.js';
+import type { SbbFormFieldElement } from '../../form-field/index.js';
+import type { SbbAutocompleteGridElement } from '../autocomplete-grid/index.js';
+import type { SbbAutocompleteGridOptgroupElement } from '../autocomplete-grid-optgroup/index.js';
+
+import { SbbAutocompleteGridOptionElement } from './autocomplete-grid-option.js';
+import '../../form-field/index.js';
+import '../autocomplete-grid/index.js';
+import '../autocomplete-grid-optgroup/index.js';
+import '../autocomplete-grid-row/index.js';
+import '../autocomplete-grid-actions/index.js';
+import '../autocomplete-grid-button/index.js';
describe(`sbb-autocomplete-grid-option with ${fixture.name}`, () => {
let element: SbbFormFieldElement;
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts
index c29163bb1c..673461c937 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts
@@ -1,14 +1,14 @@
import { expect } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private/index.js';
-import type { SbbAutocompleteGridOptionElement } from './autocomplete-grid-option';
-import '../autocomplete-grid';
-import '../autocomplete-grid-row';
-import './autocomplete-grid-option';
-import '../autocomplete-grid-actions';
-import '../autocomplete-grid-button';
+import type { SbbAutocompleteGridOptionElement } from './autocomplete-grid-option.js';
+import '../autocomplete-grid/index.js';
+import '../autocomplete-grid-row/index.js';
+import './autocomplete-grid-option.js';
+import '../autocomplete-grid-actions/index.js';
+import '../autocomplete-grid-button/index.js';
describe('sbb-autocomplete-grid-option', () => {
describe('default', () => {
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts
index f2dd5e3efb..686a156917 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts
@@ -10,14 +10,14 @@ import type {
import { html, type TemplateResult } from 'lit';
import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
-import { sbbSpread } from '../../../storybook/helpers/spread';
+import { sbbSpread } from '../../../storybook/helpers/spread.js';
import readme from './readme.md?raw';
-import '../../form-field';
-import '../autocomplete-grid';
-import '../autocomplete-grid-row';
-import './autocomplete-grid-option';
+import '../../form-field/index.js';
+import '../autocomplete-grid/index.js';
+import '../autocomplete-grid-row/index.js';
+import './autocomplete-grid-option.js';
const wrapperStyle = (context: StoryContext): Record => ({
'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
index c4aa5ea1b2..ffef334f2a 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
@@ -1,12 +1,12 @@
import type { CSSResultGroup, PropertyValues } from 'lit';
import { customElement } from 'lit/decorators.js';
-import { SbbOptionBaseElement } from '../../core/base-elements/option-base-element';
-import { hostAttributes } from '../../core/decorators';
-import { EventEmitter } from '../../core/eventing';
+import { SbbOptionBaseElement } from '../../core/base-elements/option-base-element.js';
+import { hostAttributes } from '../../core/decorators/index.js';
+import { EventEmitter } from '../../core/eventing/index.js';
-import '../../icon';
-import '../../screen-reader-only';
+import '../../icon/index.js';
+import '../../screen-reader-only/index.js';
import style from './autocomplete-grid-option.scss?lit&inline';
export const autocompleteGridOptionId: string = `sbb-autocomplete-grid-option`;
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/index.ts b/src/components/autocomplete-grid/autocomplete-grid-option/index.ts
index 2cd3739210..76930fc12f 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/index.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/index.ts
@@ -1 +1 @@
-export * from './autocomplete-grid-option';
+export * from './autocomplete-grid-option.js';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.e2e.ts b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.e2e.ts
index 5a7c6fae27..b097945e22 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.e2e.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.e2e.ts
@@ -1,9 +1,9 @@
import { assert } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
-import { fixture } from '../../core/testing/private';
+import { fixture } from '../../core/testing/private/index.js';
-import { SbbAutocompleteGridRowElement } from './autocomplete-grid-row';
+import { SbbAutocompleteGridRowElement } from './autocomplete-grid-row.js';
describe('sbb-autocomplete-grid-row', () => {
let element: SbbAutocompleteGridRowElement;
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.spec.ts
index 46181cbd37..58cded8988 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.spec.ts
@@ -2,14 +2,14 @@ import { expect } from '@open-wc/testing';
import type { TemplateResult } from 'lit';
import { html } from 'lit/static-html.js';
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private/index.js';
-import type { SbbAutocompleteGridRowElement } from './autocomplete-grid-row';
-import '../autocomplete-grid';
-import './autocomplete-grid-row';
-import '../autocomplete-grid-option';
-import '../autocomplete-grid-actions';
-import '../autocomplete-grid-button';
+import type { SbbAutocompleteGridRowElement } from './autocomplete-grid-row.js';
+import '../autocomplete-grid/index.js';
+import './autocomplete-grid-row.js';
+import '../autocomplete-grid-option/index.js';
+import '../autocomplete-grid-actions/index.js';
+import '../autocomplete-grid-button/index.js';
describe('sbb-autocomplete-grid-row', () => {
let root: SbbAutocompleteGridRowElement;
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.stories.ts b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.stories.ts
index 1a5cd1ee41..61569ffbc4 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.stories.ts
@@ -13,10 +13,10 @@ import { styleMap } from 'lit/directives/style-map.js';
import readme from './readme.md?raw';
-import './autocomplete-grid-row';
-import '../autocomplete-grid-actions';
-import '../autocomplete-grid-option';
-import '../autocomplete-grid-button';
+import './autocomplete-grid-row.js';
+import '../autocomplete-grid-actions/index.js';
+import '../autocomplete-grid-option/index.js';
+import '../autocomplete-grid-button/index.js';
const wrapperStyle = (context: StoryContext): Record => ({
'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.ts b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.ts
index a609186923..bcbc243f02 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.ts
@@ -1,12 +1,12 @@
import { type CSSResultGroup, html, LitElement, type TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js';
-import { hostAttributes } from '../../core/decorators';
-import type { SbbAutocompleteGridActionsElement } from '../autocomplete-grid-actions';
+import { hostAttributes } from '../../core/decorators/index.js';
+import type { SbbAutocompleteGridActionsElement } from '../autocomplete-grid-actions/index.js';
import {
type SbbAutocompleteGridOptionElement,
autocompleteGridOptionId,
-} from '../autocomplete-grid-option';
+} from '../autocomplete-grid-option/index.js';
import style from './autocomplete-grid-row.scss?lit&inline';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/index.ts b/src/components/autocomplete-grid/autocomplete-grid-row/index.ts
index 71d47cdf78..af6b8e56a3 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/index.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/index.ts
@@ -1 +1 @@
-export * from './autocomplete-grid-row';
+export * from './autocomplete-grid-row.js';
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.e2e.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.e2e.ts
index 5de2cacaca..95a696017b 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.e2e.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.e2e.ts
@@ -2,15 +2,15 @@ import { assert, expect } from '@open-wc/testing';
import { sendKeys, sendMouse } from '@web/test-runner-commands';
import { html } from 'lit/static-html.js';
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing';
-import { fixture } from '../../core/testing/private';
-import { SbbFormFieldElement } from '../../form-field';
-import { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option';
-
-import { SbbAutocompleteGridElement } from './autocomplete-grid';
-import '../autocomplete-grid-row';
-import '../autocomplete-grid-actions';
-import '../autocomplete-grid-button';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing/index.js';
+import { fixture } from '../../core/testing/private/index.js';
+import { SbbFormFieldElement } from '../../form-field/index.js';
+import { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option/index.js';
+
+import { SbbAutocompleteGridElement } from './autocomplete-grid.js';
+import '../autocomplete-grid-row/index.js';
+import '../autocomplete-grid-actions/index.js';
+import '../autocomplete-grid-button/index.js';
describe(`sbb-autocomplete-grid with ${fixture.name}`, () => {
let formField: SbbFormFieldElement;
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts
index b9f54ac488..4867c72548 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts
@@ -1,16 +1,16 @@
import { expect } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
-import { isSafari } from '../../core/dom';
-import { describeIf } from '../../core/testing';
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private';
-
-import type { SbbAutocompleteGridElement } from './autocomplete-grid';
-import './autocomplete-grid';
-import '../autocomplete-grid-row';
-import '../autocomplete-grid-option';
-import '../autocomplete-grid-actions';
-import '../autocomplete-grid-button';
+import { isSafari } from '../../core/dom/index.js';
+import { describeIf } from '../../core/testing/index.js';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private/index.js';
+
+import type { SbbAutocompleteGridElement } from './autocomplete-grid.js';
+import './autocomplete-grid.js';
+import '../autocomplete-grid-row/index.js';
+import '../autocomplete-grid-option/index.js';
+import '../autocomplete-grid-actions/index.js';
+import '../autocomplete-grid-button/index.js';
describe('sbb-autocomplete-grid', () => {
let root: SbbAutocompleteGridElement;
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
index 179f1066d1..e3d7dacbcc 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
@@ -14,19 +14,19 @@ import { html, nothing, type TemplateResult } from 'lit';
import { repeat } from 'lit/directives/repeat.js';
import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
-import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready';
-import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position';
-import type { SbbAutocompleteGridButtonElement } from '../autocomplete-grid-button';
-import { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option';
+import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready.js';
+import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position.js';
+import type { SbbAutocompleteGridButtonElement } from '../autocomplete-grid-button/index.js';
+import { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option/index.js';
-import { SbbAutocompleteGridElement } from './autocomplete-grid';
+import { SbbAutocompleteGridElement } from './autocomplete-grid.js';
import readme from './readme.md?raw';
-import '../autocomplete-grid-row';
-import '../autocomplete-grid-optgroup';
-import '../autocomplete-grid-actions';
-import '../autocomplete-grid-button';
-import '../../form-field';
+import '../autocomplete-grid-row/index.js';
+import '../autocomplete-grid-optgroup/index.js';
+import '../autocomplete-grid-actions/index.js';
+import '../autocomplete-grid-button/index.js';
+import '../../form-field/index.js';
const getOption = (event: Event): void => {
const button = event.target as SbbAutocompleteGridButtonElement;
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts
index 6ac8c152af..cffae84fe9 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts
@@ -1,17 +1,17 @@
import { nothing } from 'lit';
import { customElement } from 'lit/decorators.js';
-import { getNextElementIndex } from '../../core/a11y';
-import { SbbAutocompleteBaseElement } from '../../core/base-elements';
-import { hostAttributes } from '../../core/decorators';
-import { getDocumentWritingMode, isSafari } from '../../core/dom';
-import { EventEmitter } from '../../core/eventing';
-import { setAriaComboBoxAttributes } from '../../core/overlay';
-import type { SbbDividerElement } from '../../divider';
-import type { SbbOptGroupElement, SbbOptionElement } from '../../option';
-import type { SbbAutocompleteGridButtonElement } from '../autocomplete-grid-button';
-import { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option';
-import type { SbbAutocompleteGridRowElement } from '../autocomplete-grid-row';
+import { getNextElementIndex } from '../../core/a11y/index.js';
+import { SbbAutocompleteBaseElement } from '../../core/base-elements/index.js';
+import { hostAttributes } from '../../core/decorators/index.js';
+import { getDocumentWritingMode, isSafari } from '../../core/dom/index.js';
+import { EventEmitter } from '../../core/eventing/index.js';
+import { setAriaComboBoxAttributes } from '../../core/overlay/index.js';
+import type { SbbDividerElement } from '../../divider/index.js';
+import type { SbbOptGroupElement, SbbOptionElement } from '../../option/index.js';
+import type { SbbAutocompleteGridButtonElement } from '../autocomplete-grid-button/index.js';
+import { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option/index.js';
+import type { SbbAutocompleteGridRowElement } from '../autocomplete-grid-row/index.js';
let nextId = 0;
diff --git a/src/components/autocomplete-grid/autocomplete-grid/index.ts b/src/components/autocomplete-grid/autocomplete-grid/index.ts
index 866566084f..24c04865f6 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/index.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/index.ts
@@ -1 +1 @@
-export * from './autocomplete-grid';
+export * from './autocomplete-grid.js';
diff --git a/src/components/autocomplete-grid/index.ts b/src/components/autocomplete-grid/index.ts
index 701fe62270..afcaa9d46d 100644
--- a/src/components/autocomplete-grid/index.ts
+++ b/src/components/autocomplete-grid/index.ts
@@ -1,6 +1,6 @@
-export * from './autocomplete-grid';
-export * from './autocomplete-grid-actions';
-export * from './autocomplete-grid-button';
-export * from './autocomplete-grid-option';
-export * from './autocomplete-grid-optgroup';
-export * from './autocomplete-grid-row';
+export * from './autocomplete-grid/index.js';
+export * from './autocomplete-grid-actions/index.js';
+export * from './autocomplete-grid-button/index.js';
+export * from './autocomplete-grid-option/index.js';
+export * from './autocomplete-grid-optgroup/index.js';
+export * from './autocomplete-grid-row/index.js';
diff --git a/src/components/core/base-elements/autocomplete-base-element.ts b/src/components/core/base-elements/autocomplete-base-element.ts
index 6ef54d8135..e6523b4048 100644
--- a/src/components/core/base-elements/autocomplete-base-element.ts
+++ b/src/components/core/base-elements/autocomplete-base-element.ts
@@ -9,21 +9,21 @@ import {
import { property } from 'lit/decorators.js';
import { ref } from 'lit/directives/ref.js';
-import { SbbConnectedAbortController } from '../controllers';
-import { findReferencedElement, isBrowser, isSafari } from '../dom';
-import type { EventEmitter } from '../eventing';
-import type { SbbOpenedClosedState } from '../interfaces';
-import { SbbHydrationMixin } from '../mixins';
-import { SbbNegativeMixin } from '../mixins/negative-mixin';
+import { SbbConnectedAbortController } from '../controllers/index.js';
+import { findReferencedElement, isBrowser, isSafari } from '../dom/index.js';
+import type { EventEmitter } from '../eventing/index.js';
+import type { SbbOpenedClosedState } from '../interfaces/index.js';
+import { SbbHydrationMixin } from '../mixins/index.js';
+import { SbbNegativeMixin } from '../mixins/negative-mixin.js';
import {
isEventOnElement,
overlayGapFixCorners,
removeAriaComboBoxAttributes,
setOverlayPosition,
-} from '../overlay';
+} from '../overlay/index.js';
import style from './autocomplete-base-element.scss?lit&inline';
-import type { SbbOptionBaseElement } from './option-base-element';
+import type { SbbOptionBaseElement } from './option-base-element.js';
/**
* On Safari, the aria role 'listbox' must be on the host element, or else VoiceOver won't work at all.
diff --git a/src/components/core/base-elements/option-base-element.ts b/src/components/core/base-elements/option-base-element.ts
index e94134882e..a25698a7aa 100644
--- a/src/components/core/base-elements/option-base-element.ts
+++ b/src/components/core/base-elements/option-base-element.ts
@@ -1,12 +1,12 @@
import { html, LitElement, nothing, type PropertyValues, type TemplateResult } from 'lit';
import { property, state } from 'lit/decorators.js';
-import { SbbIconNameMixin } from '../../icon';
-import { SbbConnectedAbortController, SbbSlotStateController } from '../controllers';
-import { isAndroid, isSafari, setOrRemoveAttribute } from '../dom';
-import type { EventEmitter } from '../eventing';
-import { SbbDisabledMixin } from '../mixins';
-import { AgnosticMutationObserver } from '../observers';
+import { SbbIconNameMixin } from '../../icon/index.js';
+import { SbbConnectedAbortController, SbbSlotStateController } from '../controllers/index.js';
+import { isAndroid, isSafari, setOrRemoveAttribute } from '../dom/index.js';
+import type { EventEmitter } from '../eventing/index.js';
+import { SbbDisabledMixin } from '../mixins/index.js';
+import { AgnosticMutationObserver } from '../observers/index.js';
let nextId = 0;
diff --git a/src/components/option/optgroup/optgroup-base-element.ts b/src/components/option/optgroup/optgroup-base-element.ts
index df5769f469..6f999cdd86 100644
--- a/src/components/option/optgroup/optgroup-base-element.ts
+++ b/src/components/option/optgroup/optgroup-base-element.ts
@@ -7,15 +7,15 @@ import {
} from 'lit';
import { property, state } from 'lit/decorators.js';
-import type { SbbAutocompleteBaseElement } from '../../core/base-elements/autocomplete-base-element';
-import type { SbbOptionBaseElement } from '../../core/base-elements/option-base-element';
-import { isSafari, setOrRemoveAttribute } from '../../core/dom';
-import { SbbDisabledMixin, SbbHydrationMixin } from '../../core/mixins';
-import { AgnosticMutationObserver } from '../../core/observers';
+import type { SbbAutocompleteBaseElement } from '../../core/base-elements/autocomplete-base-element.js';
+import type { SbbOptionBaseElement } from '../../core/base-elements/option-base-element.js';
+import { isSafari, setOrRemoveAttribute } from '../../core/dom/index.js';
+import { SbbDisabledMixin, SbbHydrationMixin } from '../../core/mixins/index.js';
+import { AgnosticMutationObserver } from '../../core/observers/index.js';
import style from './optgroup-base-element.scss?lit&inline';
-import '../../divider';
+import '../../divider/index.js';
/**
* On Safari, the groups labels are not read by VoiceOver.
From f4efc12d94d6709565b67bb67b5d2df7e67b9173 Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Wed, 10 Apr 2024 10:12:19 +0200
Subject: [PATCH 34/67] fix: rebase
---
.../autocomplete-grid-button/autocomplete-grid-button.ts | 6 +++---
.../autocomplete-grid/autocomplete-grid.stories.ts | 2 +-
.../autocomplete-grid/autocomplete-grid.ts | 2 +-
.../core/base-elements/autocomplete-base-element.ts | 4 ++--
4 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
index b040e15b19..6e17bb2a8f 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
@@ -3,7 +3,7 @@ import { customElement, state } from 'lit/decorators.js';
import { SbbMiniButtonBaseElement } from '../../core/base-elements/index.js';
import { hostAttributes } from '../../core/decorators/index.js';
-import { isValidAttribute, setAttribute } from '../../core/dom/index.js';
+import { setOrRemoveAttribute } from '../../core/dom/index.js';
import { SbbDisabledMixin } from '../../core/mixins/index.js';
import { AgnosticMutationObserver } from '../../core/observers/index.js';
import { type SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option/index.js';
@@ -48,7 +48,7 @@ export class SbbAutocompleteGridButtonElement extends SbbDisabledMixin(SbbMiniBu
private _onOptionAttributesChange(mutationsList: MutationRecord[]): void {
for (const mutation of mutationsList) {
if (mutation.attributeName === 'data-group-disabled') {
- this._disabledFromGroup = isValidAttribute(this, 'data-group-disabled');
+ this._disabledFromGroup = this.hasAttribute('data-group-disabled');
}
}
}
@@ -91,7 +91,7 @@ export class SbbAutocompleteGridButtonElement extends SbbDisabledMixin(SbbMiniBu
}
protected override renderTemplate(): TemplateResult {
- setAttribute(this, 'aria-disabled', `${this.disabled || this._disabledFromGroup}`);
+ setOrRemoveAttribute(this, 'aria-disabled', `${this.disabled || this._disabledFromGroup}`);
return super.renderTemplate();
}
}
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
index e3d7dacbcc..fbb740dfce 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
@@ -9,7 +9,7 @@ import type {
StoryContext,
StoryObj,
} from '@storybook/web-components';
-import isChromatic from 'chromatic';
+import isChromatic from 'chromatic/isChromatic';
import { html, nothing, type TemplateResult } from 'lit';
import { repeat } from 'lit/directives/repeat.js';
import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts
index cffae84fe9..6b9904535e 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts
@@ -257,7 +257,7 @@ export class SbbAutocompleteGridElement extends SbbAutocompleteBaseElement {
.forEach((e) => e.toggleAttribute('data-focus-visible', false));
} else {
const activeElement = this.options.filter(
- (opt) => !opt.disabled && !isValidAttribute(opt, 'data-group-disabled'),
+ (opt) => !opt.disabled && !opt.hasAttribute('data-group-disabled'),
)[this._activeItemIndex];
if (activeElement) {
activeElement.active = false;
diff --git a/src/components/core/base-elements/autocomplete-base-element.ts b/src/components/core/base-elements/autocomplete-base-element.ts
index e6523b4048..5075b7b34e 100644
--- a/src/components/core/base-elements/autocomplete-base-element.ts
+++ b/src/components/core/base-elements/autocomplete-base-element.ts
@@ -10,7 +10,7 @@ import { property } from 'lit/decorators.js';
import { ref } from 'lit/directives/ref.js';
import { SbbConnectedAbortController } from '../controllers/index.js';
-import { findReferencedElement, isBrowser, isSafari } from '../dom/index.js';
+import { findReferencedElement, isBrowser, isSafari, setOrRemoveAttribute } from '../dom/index.js';
import type { EventEmitter } from '../eventing/index.js';
import type { SbbOpenedClosedState } from '../interfaces/index.js';
import { SbbHydrationMixin } from '../mixins/index.js';
@@ -421,7 +421,7 @@ export abstract class SbbAutocompleteBaseElement extends SbbNegativeMixin(
}
protected override render(): TemplateResult {
- setAttribute(this, 'data-state', this.state);
+ setOrRemoveAttribute(this, 'data-state', this.state);
return html`
From eb557792e762624f175bd24f97c651b60bbae3de Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Thu, 11 Apr 2024 15:49:08 +0200
Subject: [PATCH 35/67] fix: review
---
.../autocomplete-grid-actions.spec.snap.js | 7 +-
.../autocomplete-grid-actions.spec.ts | 7 -
.../autocomplete-grid-actions.ts | 16 +-
.../autocomplete-grid-button.spec.snap.js | 6 +-
.../autocomplete-grid-button.ts | 27 ++-
.../autocomplete-grid-button/readme.md | 6 -
.../autocomplete-grid-optgroup.spec.snap.js | 8 +-
.../autocomplete-grid-option.spec.snap.js | 2 +-
.../autocomplete-grid-option.scss | 6 +-
.../autocomplete-grid-option.ts | 4 +-
.../autocomplete-grid-row.spec.snap.js | 9 +-
.../autocomplete-grid-row.scss | 2 +-
.../autocomplete-grid-row.spec.ts | 10 --
.../autocomplete-grid-row.ts | 38 +---
.../autocomplete-grid-row/readme.md | 6 +
.../autocomplete-grid.spec.snap.js | 76 ++++----
.../autocomplete-grid.e2e.ts | 170 ++++++++++++++++--
.../autocomplete-grid.spec.ts | 45 +++--
.../autocomplete-grid/autocomplete-grid.ts | 51 ++----
.../autocomplete-grid/readme.md | 5 +-
.../autocomplete-base-element.scss | 2 +-
.../autocomplete-base-element.ts | 60 +++++--
.../autocomplete/autocomplete.e2e.ts | 46 +++--
src/components/autocomplete/autocomplete.ts | 40 +----
src/components/autocomplete/readme.md | 2 +
.../core/base-elements/button-base-element.ts | 18 +-
.../base-elements/mini-button-base-element.ts | 20 +++
.../core/styles/mixins/buttons.scss | 6 +-
.../expansion-panel.spec.snap.js | 12 +-
.../optgroup/optgroup-base-element.scss | 2 +-
.../option/optgroup/optgroup-base-element.ts | 4 +-
.../option}/option-base-element.ts | 18 +-
src/components/option/option/option.scss | 2 +-
src/components/option/option/option.ts | 6 +-
34 files changed, 417 insertions(+), 322 deletions(-)
rename src/components/{core/base-elements => autocomplete}/autocomplete-base-element.scss (99%)
rename src/components/{core/base-elements => autocomplete}/autocomplete-base-element.ts (90%)
create mode 100644 src/components/core/base-elements/mini-button-base-element.ts
rename src/components/{core/base-elements => option/option}/option-base-element.ts (93%)
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/__snapshots__/autocomplete-grid-actions.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-actions/__snapshots__/autocomplete-grid-actions.spec.snap.js
index 7c4d0127cb..96b958bddd 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-actions/__snapshots__/autocomplete-grid-actions.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid-actions/__snapshots__/autocomplete-grid-actions.spec.snap.js
@@ -2,17 +2,14 @@
export const snapshots = {};
snapshots["sbb-autocomplete-grid-actions Dom"] =
-`
+`
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.spec.ts
index 97a509af6f..c2e91c96a9 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.spec.ts
@@ -34,13 +34,6 @@ describe('sbb-autocomplete-grid-actions', () => {
await expect(root).shadowDom.to.be.equalSnapshot();
});
- it('id check', () => {
- expect(root.id).to.be.equal('sbb-autocomplete-grid-item-3x1');
- expect(root.querySelector('sbb-autocomplete-grid-button')!.id).to.be.equal(
- 'sbb-autocomplete-grid-item-3x1x0',
- );
- });
-
testA11yTreeSnapshot(html`
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.ts b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.ts
index e368ed07ab..a0c34e698c 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.ts
@@ -2,7 +2,6 @@ import { type CSSResultGroup, html, LitElement, type TemplateResult } from 'lit'
import { customElement } from 'lit/decorators.js';
import { hostAttributes } from '../../core/decorators/index.js';
-import type { SbbAutocompleteGridButtonElement } from '../autocomplete-grid-button/index.js';
import style from './autocomplete-grid-actions.scss?lit&inline';
@@ -18,23 +17,10 @@ import style from './autocomplete-grid-actions.scss?lit&inline';
export class SbbAutocompleteGridActionsElement extends LitElement {
public static override styles: CSSResultGroup = style;
- private _setChildrenParameters(event: Event): void {
- const elements = (event.target as HTMLSlotElement).assignedElements();
- if (!elements.length) {
- return;
- }
-
- elements
- .filter(
- (e): e is SbbAutocompleteGridButtonElement => e.tagName === 'SBB-AUTOCOMPLETE-GRID-BUTTON',
- )
- .forEach((element, index) => element.setAttribute('id', `${this.id}x${index}`));
- }
-
protected override render(): TemplateResult {
return html`
-
+
`;
}
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js
index c8ce436081..178d4a9fce 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js
@@ -8,7 +8,7 @@ snapshots["sbb-autocomplete-grid-button renders Dom"] =
data-button=""
dir="ltr"
icon-name="pie-small"
- id="sbb-autocomplete-grid-item-1x1x0"
+ id="sbb-autocomplete-grid-button-1"
role="button"
>
@@ -38,7 +38,7 @@ snapshots["sbb-autocomplete-grid-button renders disabled Dom"] =
dir="ltr"
disabled=""
icon-name="pie-small"
- id="sbb-autocomplete-grid-item-3x1x0"
+ id="sbb-autocomplete-grid-button-3"
role="button"
>
@@ -66,7 +66,7 @@ snapshots["sbb-autocomplete-grid-button renders negative without icon Dom"] =
data-action=""
data-button=""
dir="ltr"
- id="sbb-autocomplete-grid-item-5x1x0"
+ id="sbb-autocomplete-grid-button-5"
negative=""
role="button"
>
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
index 6e17bb2a8f..a44e50ea80 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
@@ -1,4 +1,4 @@
-import { type CSSResultGroup, type TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { SbbMiniButtonBaseElement } from '../../core/base-elements/index.js';
@@ -6,11 +6,14 @@ import { hostAttributes } from '../../core/decorators/index.js';
import { setOrRemoveAttribute } from '../../core/dom/index.js';
import { SbbDisabledMixin } from '../../core/mixins/index.js';
import { AgnosticMutationObserver } from '../../core/observers/index.js';
-import { type SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option/index.js';
+import type { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option/index.js';
-import '../../icon/index.js';
import style from './autocomplete-grid-button.scss?lit&inline';
+import '../../icon/index.js';
+
+let autocompleteButtonNextId = 0;
+
/** Configuration for the attribute to look at if component is nested in a sbb-optgroup */
const buttonObserverConfig: MutationObserverInit = {
attributeFilter: ['data-group-disabled'],
@@ -49,24 +52,37 @@ export class SbbAutocompleteGridButtonElement extends SbbDisabledMixin(SbbMiniBu
for (const mutation of mutationsList) {
if (mutation.attributeName === 'data-group-disabled') {
this._disabledFromGroup = this.hasAttribute('data-group-disabled');
+ setOrRemoveAttribute(this, 'aria-disabled', `${this.disabled || this._disabledFromGroup}`);
}
}
}
public override connectedCallback(): void {
super.connectedCallback();
+ this.id ||= `sbb-autocomplete-grid-button-${++autocompleteButtonNextId}`;
const parentGroup = this.closest('sbb-autocomplete-grid-optgroup');
if (parentGroup) {
this._disabledFromGroup = parentGroup.disabled;
+ setOrRemoveAttribute(this, 'aria-disabled', `${this.disabled || this._disabledFromGroup}`);
}
this._optionAttributeObserver.observe(this, buttonObserverConfig);
}
+ public override willUpdate(changedProperties: PropertyValues): void {
+ if (changedProperties.has('disabled')) {
+ setOrRemoveAttribute(this, 'aria-disabled', `${this.disabled || this._disabledFromGroup}`);
+ }
+ }
+
public override disconnectedCallback(): void {
super.disconnectedCallback();
this._optionAttributeObserver.disconnect();
}
+ /**
+ * Used to dispatch a click event when users interact with the button via keyboard (the component does not receive focus).
+ * @internal
+ */
public dispatchClick(event: KeyboardEvent): void {
return this.dispatchClickEvent(event);
}
@@ -89,11 +105,6 @@ export class SbbAutocompleteGridButtonElement extends SbbDisabledMixin(SbbMiniBu
}),
);
}
-
- protected override renderTemplate(): TemplateResult {
- setOrRemoveAttribute(this, 'aria-disabled', `${this.disabled || this._disabledFromGroup}`);
- return super.renderTemplate();
- }
}
declare global {
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/readme.md b/src/components/autocomplete-grid/autocomplete-grid-button/readme.md
index bc5c428502..2733f4d72b 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/readme.md
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/readme.md
@@ -104,12 +104,6 @@ since the focus must always stay on the connected ` `.
| `value` | `value` | public | `string` | | The value of the button element. |
| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. |
-## Methods
-
-| Name | Privacy | Description | Parameters | Return | Inherited From |
-| --------------- | ------- | ----------- | ---------------------- | ------ | -------------- |
-| `dispatchClick` | public | | `event: KeyboardEvent` | `void` | |
-
## Events
| Name | Type | Description | Inherited From |
diff --git a/src/components/autocomplete-grid/autocomplete-grid-optgroup/__snapshots__/autocomplete-grid-optgroup.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-optgroup/__snapshots__/autocomplete-grid-optgroup.spec.snap.js
index f10d7e0a59..ab64f70caf 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-optgroup/__snapshots__/autocomplete-grid-optgroup.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid-optgroup/__snapshots__/autocomplete-grid-optgroup.spec.snap.js
@@ -15,7 +15,7 @@ snapshots["sbb-autocomplete-grid-optgroup Chrome-Firefox Dom"] =
@@ -29,7 +29,7 @@ snapshots["sbb-autocomplete-grid-optgroup Chrome-Firefox Dom"] =
@@ -114,7 +114,7 @@ snapshots["sbb-autocomplete-grid-optgroup Safari Dom"] =
aria-selected="false"
data-group-label="Group"
data-slot-names="unnamed"
- id="sbb-autocomplete-grid-item-1x0"
+ id="sbb-autocomplete-grid-option-0"
role="gridcell"
value="1"
>
@@ -129,7 +129,7 @@ snapshots["sbb-autocomplete-grid-optgroup Safari Dom"] =
aria-selected="false"
data-group-label="Group"
data-slot-names="unnamed"
- id="sbb-autocomplete-grid-item-2x0"
+ id="sbb-autocomplete-grid-option-1"
role="gridcell"
value="2"
>
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
index 607f2c6a40..41e0e867a1 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
@@ -5,7 +5,7 @@ snapshots["sbb-autocomplete-grid-option default Dom"] =
`
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss
index d676dde503..82c2b6b882 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss
@@ -15,7 +15,7 @@
--sbb-option-icon-color: var(--sbb-color-smoke);
}
-// if the highlight is enabled, hide the slot content
+// If highlighting is enabled, hide the original slot content
:host(:not([data-disable-highlight])) {
.sbb-option__label slot {
display: none;
@@ -52,7 +52,3 @@
display: var(--sbb-option-icon-container-display, none);
}
}
-
-.sbb-option__label {
- white-space: initial;
-}
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
index ffef334f2a..66ea239a7c 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
@@ -1,12 +1,10 @@
import type { CSSResultGroup, PropertyValues } from 'lit';
import { customElement } from 'lit/decorators.js';
-import { SbbOptionBaseElement } from '../../core/base-elements/option-base-element.js';
import { hostAttributes } from '../../core/decorators/index.js';
import { EventEmitter } from '../../core/eventing/index.js';
+import { SbbOptionBaseElement } from '../../option/index.js';
-import '../../icon/index.js';
-import '../../screen-reader-only/index.js';
import style from './autocomplete-grid-option.scss?lit&inline';
export const autocompleteGridOptionId: string = `sbb-autocomplete-grid-option`;
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.spec.snap.js
index ce1e2003e1..44bec0c6c1 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.spec.snap.js
@@ -9,23 +9,20 @@ snapshots["sbb-autocomplete-grid-row Dom"] =
Option 1
-
+
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.scss b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.scss
index b23f75f2fc..58c17e3783 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.scss
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.scss
@@ -50,7 +50,7 @@
);
}
-:host(:is([data-disabled])) {
+:host([data-disabled]) {
--sbb-autocomplete-grid-row-cursor: default;
@include sbb.if-forced-colors {
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.spec.ts
index 58cded8988..0376fe5a2d 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.spec.ts
@@ -38,15 +38,5 @@ describe('sbb-autocomplete-grid-row', () => {
await expect(root).shadowDom.to.be.equalSnapshot();
});
- it('id check', () => {
- expect(root.id).to.be.equal('sbb-autocomplete-grid-row-3');
- expect(root.querySelector('sbb-autocomplete-grid-option')!.id).to.be.equal(
- 'sbb-autocomplete-grid-item-3x0',
- );
- expect(root.querySelector('sbb-autocomplete-grid-actions')!.id).to.be.equal(
- 'sbb-autocomplete-grid-item-3x1',
- );
- });
-
testA11yTreeSnapshot(row);
});
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.ts b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.ts
index bcbc243f02..13b8156e2c 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.ts
@@ -2,18 +2,15 @@ import { type CSSResultGroup, html, LitElement, type TemplateResult } from 'lit'
import { customElement } from 'lit/decorators.js';
import { hostAttributes } from '../../core/decorators/index.js';
-import type { SbbAutocompleteGridActionsElement } from '../autocomplete-grid-actions/index.js';
-import {
- type SbbAutocompleteGridOptionElement,
- autocompleteGridOptionId,
-} from '../autocomplete-grid-option/index.js';
import style from './autocomplete-grid-row.scss?lit&inline';
let autocompleteRowNextId = 0;
/**
- * Describe the purpose of the component with a single short sentence.
+ * The component is used as a wrapper for options and action buttons.
+ *
+ * @slot - Use the unnamed slot to add a `sbb-autocomplete-grid-option` and a `sbb-autocomplete-grid-actions` with one or more `sbb-autocomplete-grid-button`.
*/
@customElement('sbb-autocomplete-grid-row')
@hostAttributes({
@@ -21,41 +18,16 @@ let autocompleteRowNextId = 0;
})
export class SbbAutocompleteGridRowElement extends LitElement {
public static override styles: CSSResultGroup = style;
- private _rowId = ++autocompleteRowNextId;
public override connectedCallback(): void {
super.connectedCallback();
- if (!this.id) {
- this.id = `sbb-autocomplete-grid-row-${this._rowId}`;
- }
- }
-
- private _setChildrenParameters(event: Event): void {
- const elements = (event.target as HTMLSlotElement).assignedElements();
- if (!elements.length) {
- return;
- }
-
- const option = elements.find(
- (e): e is SbbAutocompleteGridOptionElement => e.tagName === 'SBB-AUTOCOMPLETE-GRID-OPTION',
- );
- // Overrides default autocomplete id
- if (option && (!option.id || option.id.includes(autocompleteGridOptionId))) {
- option.setAttribute('id', `sbb-autocomplete-grid-item-${this._rowId}x0`);
- }
-
- const action = elements.find(
- (e): e is SbbAutocompleteGridActionsElement => e.tagName === 'SBB-AUTOCOMPLETE-GRID-ACTIONS',
- );
- if (action && !action.id) {
- action.setAttribute('id', `sbb-autocomplete-grid-item-${this._rowId}x1`);
- }
+ this.id ||= `sbb-autocomplete-grid-row-${++autocompleteRowNextId}`;
}
protected override render(): TemplateResult {
return html`
-
+
`;
}
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/readme.md b/src/components/autocomplete-grid/autocomplete-grid-row/readme.md
index 33b51b69a0..b011ca7b02 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/readme.md
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/readme.md
@@ -32,3 +32,9 @@ The `sbb-autocomplete-grid` follows the combobox `grid` pattern;
this means that the `sbb-autocomplete-grid-row` has a `row` role and its child would receive an `id` based on the `sbb-autocomplete-grid-row`'s `id`.
+
+## Slots
+
+| Name | Description |
+| ---- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| | Use the unnamed slot to add a `sbb-autocomplete-grid-option` and a `sbb-autocomplete-grid-actions` with one or more `sbb-autocomplete-grid-button`. |
diff --git a/src/components/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.spec.snap.js
index fc41bec055..8dd8629b84 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.spec.snap.js
@@ -13,22 +13,19 @@ snapshots["sbb-autocomplete-grid Chrome-Firefox Dom"] =
Option 1
-
+
@@ -41,22 +38,19 @@ snapshots["sbb-autocomplete-grid Chrome-Firefox Dom"] =
Option 2
-
+
@@ -102,25 +96,49 @@ snapshots["sbb-autocomplete-grid Chrome-Firefox ShadowDom"] =
`;
/* end snapshot sbb-autocomplete-grid Chrome-Firefox ShadowDom */
-snapshots["sbb-autocomplete-grid Chrome-Firefox A11y tree Chrome"] =
+snapshots["sbb-autocomplete-grid Chrome-Firefox A11y tree Firefox"] =
`
{
- "role": "WebArea",
- "name": ""
+ "role": "document",
+ "name": "",
+ "children": [
+ {
+ "role": "statictext",
+ "name": "​"
+ },
+ {
+ "role": "combobox",
+ "name": "",
+ "autocomplete": "list",
+ "haspopup": "grid"
+ }
+ ]
}
`;
-/* end snapshot sbb-autocomplete-grid Chrome-Firefox A11y tree Chrome */
+/* end snapshot sbb-autocomplete-grid Chrome-Firefox A11y tree Firefox */
-snapshots["sbb-autocomplete-grid Chrome-Firefox A11y tree Firefox"] =
+snapshots["sbb-autocomplete-grid Chrome-Firefox A11y tree Chrome"] =
`
{
- "role": "document",
- "name": ""
+ "role": "WebArea",
+ "name": "",
+ "children": [
+ {
+ "role": "text",
+ "name": "​"
+ },
+ {
+ "role": "combobox",
+ "name": "",
+ "autocomplete": "list",
+ "haspopup": "grid"
+ }
+ ]
}
`;
-/* end snapshot sbb-autocomplete-grid Chrome-Firefox A11y tree Firefox */
+/* end snapshot sbb-autocomplete-grid Chrome-Firefox A11y tree Chrome */
snapshots["sbb-autocomplete-grid Safari Dom"] =
`
Option 1
-
+
@@ -164,22 +179,19 @@ snapshots["sbb-autocomplete-grid Safari Dom"] =
Option 2
-
+
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.e2e.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.e2e.ts
index 95a696017b..9594820c5c 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.e2e.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.e2e.ts
@@ -2,9 +2,16 @@ import { assert, expect } from '@open-wc/testing';
import { sendKeys, sendMouse } from '@web/test-runner-commands';
import { html } from 'lit/static-html.js';
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing/index.js';
+import { isSafari } from '../../core/dom/index.js';
+import {
+ describeIf,
+ EventSpy,
+ waitForCondition,
+ waitForLitRender,
+} from '../../core/testing/index.js';
import { fixture } from '../../core/testing/private/index.js';
import { SbbFormFieldElement } from '../../form-field/index.js';
+import type { SbbAutocompleteGridButtonElement } from '../autocomplete-grid-button/index.js';
import { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option/index.js';
import { SbbAutocompleteGridElement } from './autocomplete-grid.js';
@@ -28,7 +35,10 @@ describe(`sbb-autocomplete-grid with ${fixture.name}`, () => {
>Option 1
-
+
@@ -36,7 +46,14 @@ describe(`sbb-autocomplete-grid with ${fixture.name}`, () => {
>Option 2
-
+
+
@@ -48,19 +65,38 @@ describe(`sbb-autocomplete-grid with ${fixture.name}`, () => {
element = formField.querySelector('sbb-autocomplete-grid')!;
});
- it('renders and sets the correct attributes', () => {
- assert.instanceOf(formField, SbbFormFieldElement);
- assert.instanceOf(element, SbbAutocompleteGridElement);
-
- expect(element).not.to.have.attribute('autocomplete-origin-borderless');
+ describeIf(isSafari(), 'Safari', async () => {
+ it('renders and sets the correct attributes', () => {
+ assert.instanceOf(formField, SbbFormFieldElement);
+ assert.instanceOf(element, SbbAutocompleteGridElement);
+
+ expect(element).not.to.have.attribute('autocomplete-origin-borderless');
+
+ expect(input).to.have.attribute('autocomplete', 'off');
+ expect(input).to.have.attribute('role', 'combobox');
+ expect(input).to.have.attribute('aria-autocomplete', 'list');
+ expect(input).to.have.attribute('aria-haspopup', 'grid');
+ expect(input).to.have.attribute('aria-controls', 'myAutocomplete');
+ expect(input).to.have.attribute('aria-owns', 'myAutocomplete');
+ expect(input).to.have.attribute('aria-expanded', 'false');
+ });
+ });
- expect(input).to.have.attribute('autocomplete', 'off');
- expect(input).to.have.attribute('role', 'combobox');
- expect(input).to.have.attribute('aria-autocomplete', 'list');
- expect(input).to.have.attribute('aria-haspopup', 'grid');
- expect(input).to.have.attribute('aria-controls', 'myAutocomplete');
- expect(input).to.have.attribute('aria-owns', 'myAutocomplete');
- expect(input).to.have.attribute('aria-expanded', 'false');
+ describeIf(!isSafari(), 'Chrome-Firefox', async () => {
+ it('renders and sets the correct attributes', () => {
+ assert.instanceOf(formField, SbbFormFieldElement);
+ assert.instanceOf(element, SbbAutocompleteGridElement);
+
+ expect(element).not.to.have.attribute('autocomplete-origin-borderless');
+
+ expect(input).to.have.attribute('autocomplete', 'off');
+ expect(input).to.have.attribute('role', 'combobox');
+ expect(input).to.have.attribute('aria-autocomplete', 'list');
+ expect(input).to.have.attribute('aria-haspopup', 'grid');
+ expect(input).to.have.attribute('aria-controls', 'sbb-autocomplete-grid-11');
+ expect(input).to.have.attribute('aria-owns', 'sbb-autocomplete-grid-11');
+ expect(input).to.have.attribute('aria-expanded', 'false');
+ });
});
it('opens and closes with mouse and keyboard', async () => {
@@ -137,6 +173,75 @@ describe(`sbb-autocomplete-grid with ${fixture.name}`, () => {
expect(optionSelectedEventSpy.firstEvent!.target).to.have.property('id', 'option-2');
});
+ it('select button and get related option', async () => {
+ const willOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willOpen);
+ const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen);
+ const clickSpy = new EventSpy('click');
+
+ input.focus();
+ await waitForCondition(() => willOpenEventSpy.events.length === 1);
+ expect(willOpenEventSpy.count).to.be.equal(1);
+ await waitForCondition(() => didOpenEventSpy.events.length === 1);
+ expect(didOpenEventSpy.count).to.be.equal(1);
+
+ const buttonOne = element.querySelector('#button-1') as SbbAutocompleteGridButtonElement;
+ buttonOne.click();
+ await waitForLitRender(element);
+
+ await waitForCondition(() => clickSpy.events.length === 1);
+ expect(clickSpy.count).to.be.equal(1);
+ expect(
+ (clickSpy.firstEvent!.target as SbbAutocompleteGridButtonElement).option!.textContent,
+ ).to.be.equal('Option 1');
+ expect(
+ (clickSpy.firstEvent!.target as SbbAutocompleteGridButtonElement).option!.value,
+ ).to.be.equal('1');
+ });
+
+ it('keyboard navigation', async () => {
+ const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen);
+ const optOne = element.querySelector('#option-1');
+ const buttonOne = element.querySelector('#button-1');
+ const optTwo = element.querySelector('#option-2');
+ const buttonTwo = element.querySelector('#button-2');
+ const buttonThree = element.querySelector('#button-3');
+ input.focus();
+
+ await waitForCondition(() => didOpenEventSpy.events.length === 1);
+ expect(didOpenEventSpy.count).to.be.equal(1);
+
+ await sendKeys({ press: 'ArrowDown' });
+ await sendKeys({ press: 'ArrowDown' });
+ await waitForLitRender(element);
+ expect(optTwo).to.have.attribute('active');
+ expect(buttonTwo).not.to.have.attribute('data-focus-visible');
+ expect(buttonThree).not.to.have.attribute('data-focus-visible');
+ expect(input).to.have.attribute('aria-activedescendant', 'option-2');
+
+ await sendKeys({ press: 'ArrowRight' });
+ await waitForLitRender(element);
+ expect(optTwo).not.to.have.attribute('active');
+ expect(buttonTwo).to.have.attribute('data-focus-visible');
+ expect(buttonThree).not.to.have.attribute('data-focus-visible');
+ expect(input).to.have.attribute('aria-activedescendant', 'button-2');
+
+ await sendKeys({ press: 'ArrowRight' });
+ await waitForLitRender(element);
+ expect(optTwo).not.to.have.attribute('active');
+ expect(buttonTwo).not.to.have.attribute('data-focus-visible');
+ expect(buttonThree).to.have.attribute('data-focus-visible');
+ expect(input).to.have.attribute('aria-activedescendant', 'button-3');
+
+ await sendKeys({ press: 'ArrowDown' });
+ await waitForLitRender(element);
+ expect(optOne).to.have.attribute('active');
+ expect(buttonOne).not.to.have.attribute('data-focus-visible');
+ expect(optTwo).not.to.have.attribute('active');
+ expect(buttonTwo).not.to.have.attribute('data-focus-visible');
+ expect(buttonThree).not.to.have.attribute('data-focus-visible');
+ expect(input).to.have.attribute('aria-activedescendant', 'option-1');
+ });
+
it('opens and select with keyboard', async () => {
const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen);
const didCloseEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didClose);
@@ -170,6 +275,41 @@ describe(`sbb-autocomplete-grid with ${fixture.name}`, () => {
expect(input).not.to.have.attribute('aria-activedescendant');
});
+ it('opens and select button with keyboard', async () => {
+ const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen);
+ const clickSpy = new EventSpy('click');
+ const optOne = element.querySelector('#option-1');
+ const buttonOne = element.querySelector('#button-1');
+ const buttonTwo = element.querySelector('#button-2');
+ input.focus();
+
+ await waitForCondition(() => didOpenEventSpy.events.length === 1);
+ expect(didOpenEventSpy.count).to.be.equal(1);
+
+ await sendKeys({ press: 'ArrowDown' });
+ await waitForLitRender(element);
+ expect(optOne).to.have.attribute('active');
+ expect(buttonOne).not.to.have.attribute('data-focus-visible');
+ await sendKeys({ press: 'ArrowRight' });
+ expect(optOne).not.to.have.attribute('active');
+ expect(buttonOne).to.have.attribute('data-focus-visible');
+ expect(input).to.have.attribute('aria-activedescendant', 'button-1');
+ await sendKeys({ press: 'Enter' });
+ await waitForCondition(() => clickSpy.events.length === 1);
+ expect(clickSpy.count).to.be.equal(1);
+
+ await sendKeys({ press: 'ArrowDown' });
+ await sendKeys({ press: 'ArrowRight' });
+ await waitForLitRender(element);
+ expect(optOne).not.to.have.attribute('active');
+ expect(buttonOne).not.to.have.attribute('data-focus-visible');
+ expect(buttonTwo).to.have.attribute('data-focus-visible');
+ expect(input).to.have.attribute('aria-activedescendant', 'button-2');
+ await sendKeys({ press: 'Enter' });
+ await waitForCondition(() => clickSpy.events.length === 2);
+ expect(clickSpy.count).to.be.equal(2);
+ });
+
it('should stay closed when disabled', async () => {
input.setAttribute('disabled', '');
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts
index 4867c72548..d0a5c3e4f0 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts
@@ -4,6 +4,7 @@ import { html } from 'lit/static-html.js';
import { isSafari } from '../../core/dom/index.js';
import { describeIf } from '../../core/testing/index.js';
import { fixture, testA11yTreeSnapshot } from '../../core/testing/private/index.js';
+import type { SbbFormFieldElement } from '../../form-field/index.js';
import type { SbbAutocompleteGridElement } from './autocomplete-grid.js';
import './autocomplete-grid.js';
@@ -11,36 +12,42 @@ import '../autocomplete-grid-row/index.js';
import '../autocomplete-grid-option/index.js';
import '../autocomplete-grid-actions/index.js';
import '../autocomplete-grid-button/index.js';
+import '../../form-field/form-field/form-field.js';
describe('sbb-autocomplete-grid', () => {
- let root: SbbAutocompleteGridElement;
+ let root: SbbFormFieldElement;
+ let element: SbbAutocompleteGridElement;
beforeEach(async () => {
root = await fixture(html`
-
-
- Option 1
-
-
-
-
-
- Option 2
-
-
-
-
-
+
+
+
+
+ Option 1
+
+
+
+
+
+ Option 2
+
+
+
+
+
+
`);
+ element = root.querySelector('sbb-autocomplete-grid')!;
});
describeIf(!isSafari(), 'Chrome-Firefox', async () => {
it('Dom', async () => {
- await expect(root).dom.to.be.equalSnapshot();
+ await expect(element).dom.to.be.equalSnapshot();
});
it('ShadowDom', async () => {
- await expect(root).shadowDom.to.be.equalSnapshot();
+ await expect(element).shadowDom.to.be.equalSnapshot();
});
testA11yTreeSnapshot();
@@ -48,11 +55,11 @@ describe('sbb-autocomplete-grid', () => {
describeIf(isSafari(), 'Safari', async () => {
it('Dom', async () => {
- await expect(root).dom.to.be.equalSnapshot();
+ await expect(element).dom.to.be.equalSnapshot();
});
it('ShadowDom', async () => {
- await expect(root).shadowDom.to.be.equalSnapshot();
+ await expect(element).shadowDom.to.be.equalSnapshot();
});
testA11yTreeSnapshot();
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts
index 6b9904535e..f4b9715782 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts
@@ -1,8 +1,7 @@
-import { nothing } from 'lit';
import { customElement } from 'lit/decorators.js';
+import { SbbAutocompleteBaseElement } from '../../autocomplete/index.js';
import { getNextElementIndex } from '../../core/a11y/index.js';
-import { SbbAutocompleteBaseElement } from '../../core/base-elements/index.js';
import { hostAttributes } from '../../core/decorators/index.js';
import { getDocumentWritingMode, isSafari } from '../../core/dom/index.js';
import { EventEmitter } from '../../core/eventing/index.js';
@@ -71,6 +70,7 @@ export class SbbAutocompleteGridElement extends SbbAutocompleteBaseElement {
);
protected overlayId = `sbb-autocomplete-grid-${++nextId}`;
+ protected panelRole = 'grid';
private _activeItemIndex = -1;
private _activeColumnIndex = 0;
@@ -86,33 +86,9 @@ export class SbbAutocompleteGridElement extends SbbAutocompleteBaseElement {
);
}
- /** When an option is selected, update the input value and close the autocomplete. */
- protected onOptionSelected(event: CustomEvent): void {
- const target = event.target as SbbAutocompleteGridOptionElement;
- if (!target.selected) {
- return;
- }
-
- // Deselect the previous options
- this.options
- .filter((option) => option.id !== target.id && option.selected)
- .forEach((option) => (option.selected = false));
-
- if (this.triggerElement) {
- // Set the option value
- this.triggerElement.value = target.value as string;
-
- // Manually trigger the change events
- this.triggerElement.dispatchEvent(new Event('change', { bubbles: true }));
- this.triggerElement.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
- }
-
- this.close();
- }
-
protected onOptionClick(event: MouseEvent): void {
if (
- (event.target as Element).tagName !== 'SBB-AUTOCOMPLETE-GRID-OPTION' ||
+ (event.target as Element).localName !== 'sbb-autocomplete-grid-option' ||
(event.target as SbbOptionElement).disabled
) {
return;
@@ -122,9 +98,6 @@ export class SbbAutocompleteGridElement extends SbbAutocompleteBaseElement {
public override connectedCallback(): void {
super.connectedCallback();
- if (ariaRoleOnHost) {
- this.id ||= this.overlayId;
- }
const signal = this.abort.signal;
this.addEventListener(
'autocompleteOptionSelectionChange',
@@ -170,6 +143,13 @@ export class SbbAutocompleteGridElement extends SbbAutocompleteBaseElement {
}
}
+ /**
+ * Select an element on 'Enter' keypress.
+ *
+ * Due to keyboard navigation code, the `_activeColumnIndex` is zero when an option is 'focused'
+ * and greater than zero when a button is 'focused', so asking for `querySelectorAll(...)[this._activeColumnIndex]`
+ * would always return a `SbbAutocompleteGridButtonElement`.
+ */
protected selectByKeyboard(event: KeyboardEvent): void {
if (this._activeColumnIndex !== 0) {
(
@@ -178,10 +158,7 @@ export class SbbAutocompleteGridElement extends SbbAutocompleteBaseElement {
)[this._activeColumnIndex] as SbbAutocompleteGridButtonElement
).dispatchClick(event);
} else {
- const activeOption = this.options[this._activeItemIndex];
- if (activeOption) {
- activeOption.setSelectedViaUserInteraction(true);
- }
+ this.options[this._activeItemIndex]?.setSelectedViaUserInteraction(true);
}
}
@@ -269,11 +246,7 @@ export class SbbAutocompleteGridElement extends SbbAutocompleteBaseElement {
}
protected setTriggerAttributes(element: HTMLInputElement): void {
- setAriaComboBoxAttributes(element, this.id || this.overlayId, false, 'grid');
- }
-
- protected setRoleOnInnerPanel(): string | typeof nothing {
- return !ariaRoleOnHost ? 'grid' : nothing;
+ setAriaComboBoxAttributes(element, ariaRoleOnHost ? this.id : this.overlayId, false, 'grid');
}
}
diff --git a/src/components/autocomplete-grid/autocomplete-grid/readme.md b/src/components/autocomplete-grid/autocomplete-grid/readme.md
index 5c6ea3d39c..e431ad2c4a 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/readme.md
+++ b/src/components/autocomplete-grid/autocomplete-grid/readme.md
@@ -1,5 +1,8 @@
The `sbb-autocomplete-grid` is a component that can be used to display a panel of suggested options connected to a text input,
-with each option connected to a one or more buttons.
+with each option connected to one or more buttons.
+Use it when you need an autocomplete in which every selectable option in the panel needs one or more related button.
+If you don't need actions, use the [sbb-autocomplete](/docs/components-sbb-autocomplete---docs).
+
The component is strictly connected to:
- the [sbb-autocomplete-grid-row](/docs/components-sbb-autocomplete-sbb-autocomplete-grid-row--docs), which is a wrapper for both option and buttons;
diff --git a/src/components/core/base-elements/autocomplete-base-element.scss b/src/components/autocomplete/autocomplete-base-element.scss
similarity index 99%
rename from src/components/core/base-elements/autocomplete-base-element.scss
rename to src/components/autocomplete/autocomplete-base-element.scss
index 01efd52ee2..b6bb96d221 100644
--- a/src/components/core/base-elements/autocomplete-base-element.scss
+++ b/src/components/autocomplete/autocomplete-base-element.scss
@@ -1,4 +1,4 @@
-@use '../styles' as sbb;
+@use '../core/styles' as sbb;
// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
@include sbb.box-sizing;
diff --git a/src/components/core/base-elements/autocomplete-base-element.ts b/src/components/autocomplete/autocomplete-base-element.ts
similarity index 90%
rename from src/components/core/base-elements/autocomplete-base-element.ts
rename to src/components/autocomplete/autocomplete-base-element.ts
index 5075b7b34e..c1732dfc90 100644
--- a/src/components/core/base-elements/autocomplete-base-element.ts
+++ b/src/components/autocomplete/autocomplete-base-element.ts
@@ -9,21 +9,21 @@ import {
import { property } from 'lit/decorators.js';
import { ref } from 'lit/directives/ref.js';
-import { SbbConnectedAbortController } from '../controllers/index.js';
-import { findReferencedElement, isBrowser, isSafari, setOrRemoveAttribute } from '../dom/index.js';
-import type { EventEmitter } from '../eventing/index.js';
-import type { SbbOpenedClosedState } from '../interfaces/index.js';
-import { SbbHydrationMixin } from '../mixins/index.js';
-import { SbbNegativeMixin } from '../mixins/negative-mixin.js';
+import { SbbConnectedAbortController } from '../core/controllers/index.js';
+import { findReferencedElement, isBrowser, isSafari } from '../core/dom/index.js';
+import type { EventEmitter } from '../core/eventing/index.js';
+import type { SbbOpenedClosedState } from '../core/interfaces/index.js';
+import { SbbHydrationMixin } from '../core/mixins/index.js';
+import { SbbNegativeMixin } from '../core/mixins/negative-mixin.js';
import {
isEventOnElement,
overlayGapFixCorners,
removeAriaComboBoxAttributes,
setOverlayPosition,
-} from '../overlay/index.js';
+} from '../core/overlay/index.js';
+import type { SbbOptionBaseElement } from '../option/index.js';
import style from './autocomplete-base-element.scss?lit&inline';
-import type { SbbOptionBaseElement } from './option-base-element.js';
/**
* On Safari, the aria role 'listbox' must be on the host element, or else VoiceOver won't work at all.
@@ -93,6 +93,7 @@ export abstract class SbbAutocompleteBaseElement extends SbbNegativeMixin(
private _triggerElement: HTMLInputElement | undefined;
protected abstract overlayId: string;
+ protected abstract panelRole: string;
protected abort = new SbbConnectedAbortController(this);
private _overlay!: HTMLElement;
private _optionContainer!: HTMLElement;
@@ -104,13 +105,10 @@ export abstract class SbbAutocompleteBaseElement extends SbbNegativeMixin(
protected abstract get options(): SbbOptionBaseElement[];
protected abstract syncNegative(): void;
protected abstract setTriggerAttributes(element: HTMLInputElement): void;
- protected abstract setRoleOnInnerPanel(): string | typeof nothing;
protected abstract openedPanelKeyboardInteraction(event: KeyboardEvent): void;
protected abstract selectByKeyboard(event: KeyboardEvent): void;
protected abstract setNextActiveOption(event: KeyboardEvent): void;
protected abstract resetActiveElement(): void;
- /** When an option is selected, update the input value and close the autocomplete. */
- protected abstract onOptionSelected(event: CustomEvent): void;
protected abstract onOptionClick(event: MouseEvent): void;
/** Opens the autocomplete. */
@@ -141,7 +139,9 @@ export abstract class SbbAutocompleteBaseElement extends SbbNegativeMixin(
public override connectedCallback(): void {
super.connectedCallback();
-
+ if (ariaRoleOnHost) {
+ this.id ||= this.overlayId;
+ }
this.state ||= 'closed';
const signal = this.abort.signal;
const formField = this.closest('sbb-form-field') ?? this.closest('[data-form-field]');
@@ -177,16 +177,40 @@ export abstract class SbbAutocompleteBaseElement extends SbbNegativeMixin(
this._didLoad = true;
}
- private _handleSlotchange(): void {
- this._highlightOptions(this.triggerElement?.value);
- }
-
public override disconnectedCallback(): void {
super.disconnectedCallback();
this._triggerEventsController?.abort();
this._openPanelEventsController?.abort();
}
+ /** When an option is selected, update the input value and close the autocomplete. */
+ protected onOptionSelected(event: CustomEvent): void {
+ const target = event.target as SbbOptionBaseElement;
+ if (!target.selected) {
+ return;
+ }
+
+ // Deselect the previous options
+ this.options
+ .filter((option) => option.id !== target.id && option.selected)
+ .forEach((option) => (option.selected = false));
+
+ if (this.triggerElement) {
+ // Set the option value
+ this.triggerElement.value = target.value as string;
+
+ // Manually trigger the change events
+ this.triggerElement.dispatchEvent(new Event('change', { bubbles: true }));
+ this.triggerElement.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+ }
+
+ this.close();
+ }
+
+ private _handleSlotchange(): void {
+ this._highlightOptions(this.triggerElement?.value);
+ }
+
/** The autocomplete should inherit 'readonly' state from the trigger. */
private get _readonly(): boolean {
return this.triggerElement?.hasAttribute('readonly') ?? false;
@@ -421,8 +445,6 @@ export abstract class SbbAutocompleteBaseElement extends SbbNegativeMixin(
}
protected override render(): TemplateResult {
- setOrRemoveAttribute(this, 'data-state', this.state);
-
return html`
@@ -436,7 +458,7 @@ export abstract class SbbAutocompleteBaseElement extends SbbNegativeMixin(
(this._optionContainer = containerRef as HTMLElement))}
>
diff --git a/src/components/autocomplete/autocomplete.e2e.ts b/src/components/autocomplete/autocomplete.e2e.ts
index 10c9d4c445..29f8ea1c5e 100644
--- a/src/components/autocomplete/autocomplete.e2e.ts
+++ b/src/components/autocomplete/autocomplete.e2e.ts
@@ -2,8 +2,9 @@ import { assert, expect } from '@open-wc/testing';
import { sendKeys, sendMouse } from '@web/test-runner-commands';
import { html } from 'lit/static-html.js';
+import { isSafari } from '../core/dom.js';
import { fixture } from '../core/testing/private.js';
-import { waitForCondition, waitForLitRender, EventSpy } from '../core/testing.js';
+import { waitForCondition, waitForLitRender, EventSpy, describeIf } from '../core/testing.js';
import { SbbFormFieldElement } from '../form-field.js';
import { SbbOptionElement } from '../option.js';
@@ -31,19 +32,38 @@ describe(`sbb-autocomplete with ${fixture.name}`, () => {
element = formField.querySelector
('sbb-autocomplete')!;
});
- it('renders and sets the correct attributes', () => {
- assert.instanceOf(formField, SbbFormFieldElement);
- assert.instanceOf(element, SbbAutocompleteElement);
-
- expect(element).not.to.have.attribute('autocomplete-origin-borderless');
+ describeIf(isSafari(), 'Safari', async () => {
+ it('renders and sets the correct attributes', () => {
+ assert.instanceOf(formField, SbbFormFieldElement);
+ assert.instanceOf(element, SbbAutocompleteElement);
+
+ expect(element).not.to.have.attribute('autocomplete-origin-borderless');
+
+ expect(input).to.have.attribute('autocomplete', 'off');
+ expect(input).to.have.attribute('role', 'combobox');
+ expect(input).to.have.attribute('aria-autocomplete', 'list');
+ expect(input).to.have.attribute('aria-haspopup', 'listbox');
+ expect(input).to.have.attribute('aria-controls', 'myAutocomplete');
+ expect(input).to.have.attribute('aria-owns', 'myAutocomplete');
+ expect(input).to.have.attribute('aria-expanded', 'false');
+ });
+ });
- expect(input).to.have.attribute('autocomplete', 'off');
- expect(input).to.have.attribute('role', 'combobox');
- expect(input).to.have.attribute('aria-autocomplete', 'list');
- expect(input).to.have.attribute('aria-haspopup', 'listbox');
- expect(input).to.have.attribute('aria-controls', 'myAutocomplete');
- expect(input).to.have.attribute('aria-owns', 'myAutocomplete');
- expect(input).to.have.attribute('aria-expanded', 'false');
+ describeIf(!isSafari(), 'Chrome-Firefox', async () => {
+ it('renders and sets the correct attributes', () => {
+ assert.instanceOf(formField, SbbFormFieldElement);
+ assert.instanceOf(element, SbbAutocompleteElement);
+
+ expect(element).not.to.have.attribute('autocomplete-origin-borderless');
+
+ expect(input).to.have.attribute('autocomplete', 'off');
+ expect(input).to.have.attribute('role', 'combobox');
+ expect(input).to.have.attribute('aria-autocomplete', 'list');
+ expect(input).to.have.attribute('aria-haspopup', 'listbox');
+ expect(input).to.have.attribute('aria-controls', 'sbb-autocomplete-8');
+ expect(input).to.have.attribute('aria-owns', 'sbb-autocomplete-8');
+ expect(input).to.have.attribute('aria-expanded', 'false');
+ });
});
it('opens and closes with mouse and keyboard', async () => {
diff --git a/src/components/autocomplete/autocomplete.ts b/src/components/autocomplete/autocomplete.ts
index 88da3e8c24..cec482c352 100644
--- a/src/components/autocomplete/autocomplete.ts
+++ b/src/components/autocomplete/autocomplete.ts
@@ -1,14 +1,14 @@
-import { nothing } from 'lit';
import { customElement } from 'lit/decorators.js';
import { getNextElementIndex } from '../core/a11y.js';
-import { SbbAutocompleteBaseElement } from '../core/base-elements/autocomplete-base-element.js';
import { hostAttributes } from '../core/decorators.js';
import { getDocumentWritingMode, isSafari } from '../core/dom.js';
import { EventEmitter } from '../core/eventing.js';
import { setAriaComboBoxAttributes } from '../core/overlay.js';
import type { SbbOptGroupElement, SbbOptionElement } from '../option.js';
+import { SbbAutocompleteBaseElement } from './autocomplete-base-element.js';
+
let nextId = 0;
/**
@@ -58,39 +58,16 @@ export class SbbAutocompleteElement extends SbbAutocompleteBaseElement {
protected didClose: EventEmitter = new EventEmitter(this, SbbAutocompleteElement.events.didClose);
protected overlayId = `sbb-autocomplete-${++nextId}`;
+ protected panelRole = 'listbox';
private _activeItemIndex = -1;
protected get options(): SbbOptionElement[] {
return Array.from(this.querySelectorAll?.('sbb-option') ?? []);
}
- /** When an option is selected, update the input value and close the autocomplete. */
- protected onOptionSelected(event: CustomEvent): void {
- const target = event.target as SbbOptionElement;
- if (!target.selected) {
- return;
- }
-
- // Deselect the previous options
- this.options
- .filter((option) => option.id !== target.id && option.selected)
- .forEach((option) => (option.selected = false));
-
- if (this.triggerElement) {
- // Set the option value
- this.triggerElement.value = target.value as string;
-
- // Manually trigger the change events
- this.triggerElement.dispatchEvent(new Event('change', { bubbles: true }));
- this.triggerElement.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
- }
-
- this.close();
- }
-
protected onOptionClick(event: MouseEvent): void {
if (
- (event.target as Element).tagName !== 'SBB-OPTION' ||
+ (event.target as Element).localName !== 'sbb-option' ||
(event.target as SbbOptionElement).disabled
) {
return;
@@ -100,9 +77,6 @@ export class SbbAutocompleteElement extends SbbAutocompleteBaseElement {
public override connectedCallback(): void {
super.connectedCallback();
- if (ariaRoleOnHost) {
- this.id ||= this.overlayId;
- }
const signal = this.abort.signal;
this.addEventListener(
'optionSelectionChange',
@@ -181,11 +155,7 @@ export class SbbAutocompleteElement extends SbbAutocompleteBaseElement {
}
protected setTriggerAttributes(element: HTMLInputElement): void {
- setAriaComboBoxAttributes(element, this.id || this.overlayId, false);
- }
-
- protected setRoleOnInnerPanel(): string | typeof nothing {
- return !ariaRoleOnHost ? 'listbox' : nothing;
+ setAriaComboBoxAttributes(element, ariaRoleOnHost ? this.id : this.overlayId, false);
}
}
diff --git a/src/components/autocomplete/readme.md b/src/components/autocomplete/readme.md
index 9099a7896f..c6eb2a92f5 100644
--- a/src/components/autocomplete/readme.md
+++ b/src/components/autocomplete/readme.md
@@ -1,4 +1,6 @@
The `sbb-autocomplete` is a component that can be used to display a panel of suggested options connected to a text input.
+Use it when you need a basic autocomplete: a panel with a list of selectable and possibly grouped options.
+If you need buttons connected to the options, use the [sbb-autocomplete-grid](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid--docs).
It's possible to set the element to which the component's panel will be attached using the `origin` prop,
and the input which will work as a trigger using the `trigger` prop.
diff --git a/src/components/core/base-elements/button-base-element.ts b/src/components/core/base-elements/button-base-element.ts
index a024102daf..87a30d2056 100644
--- a/src/components/core/base-elements/button-base-element.ts
+++ b/src/components/core/base-elements/button-base-element.ts
@@ -1,11 +1,8 @@
-import { isServer, type TemplateResult } from 'lit';
+import { isServer } from 'lit';
import { property } from 'lit/decorators.js';
-import { SbbIconNameMixin } from '../../icon.js';
-import { SbbSlotStateController } from '../controllers.js';
import { hostAttributes } from '../decorators.js';
import { isEventPrevented } from '../eventing.js';
-import { SbbNegativeMixin } from '../mixins.js';
import { SbbActionBaseElement } from './action-base-element.js';
@@ -106,16 +103,3 @@ export abstract class SbbButtonBaseElement extends SbbActionBaseElement {
}
}
}
-
-export abstract class SbbMiniButtonBaseElement extends SbbNegativeMixin(
- SbbIconNameMixin(SbbButtonBaseElement),
-) {
- public constructor() {
- super();
- new SbbSlotStateController(this);
- }
-
- protected override renderTemplate(): TemplateResult {
- return super.renderIconSlot();
- }
-}
diff --git a/src/components/core/base-elements/mini-button-base-element.ts b/src/components/core/base-elements/mini-button-base-element.ts
new file mode 100644
index 0000000000..e1c1d94265
--- /dev/null
+++ b/src/components/core/base-elements/mini-button-base-element.ts
@@ -0,0 +1,20 @@
+import type { TemplateResult } from 'lit';
+
+import { SbbIconNameMixin } from '../../icon/index.js';
+import { SbbSlotStateController } from '../controllers/index.js';
+import { SbbNegativeMixin } from '../mixins/index.js';
+
+import { SbbButtonBaseElement } from './button-base-element.js';
+
+export abstract class SbbMiniButtonBaseElement extends SbbNegativeMixin(
+ SbbIconNameMixin(SbbButtonBaseElement),
+) {
+ public constructor() {
+ super();
+ new SbbSlotStateController(this);
+ }
+
+ protected override renderTemplate(): TemplateResult {
+ return super.renderIconSlot();
+ }
+}
diff --git a/src/components/core/styles/mixins/buttons.scss b/src/components/core/styles/mixins/buttons.scss
index fd2794f873..9d625e52a3 100644
--- a/src/components/core/styles/mixins/buttons.scss
+++ b/src/components/core/styles/mixins/buttons.scss
@@ -34,9 +34,9 @@
}
:host(
- :is(:focus-visible, [data-focus-visible]):not(
- [data-focus-origin='mouse'],
- [data-focus-origin='touch']
+ :is(
+ [data-focus-visible],
+ :focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])
)
) {
@include icon-button-focus-visible(#{$button-selector});
diff --git a/src/components/expansion-panel/expansion-panel/__snapshots__/expansion-panel.spec.snap.js b/src/components/expansion-panel/expansion-panel/__snapshots__/expansion-panel.spec.snap.js
index bea220ac00..6b0cce737b 100644
--- a/src/components/expansion-panel/expansion-panel/__snapshots__/expansion-panel.spec.snap.js
+++ b/src/components/expansion-panel/expansion-panel/__snapshots__/expansion-panel.spec.snap.js
@@ -91,10 +91,10 @@ snapshots["sbb-expansion-panel renders with level set ShadowDom"] =
`;
/* end snapshot sbb-expansion-panel renders with level set ShadowDom */
-snapshots["sbb-expansion-panel renders with level set A11y tree Chrome"] =
+snapshots["sbb-expansion-panel renders with level set A11y tree Firefox"] =
`
{
- "role": "WebArea",
+ "role": "document",
"name": "",
"children": [
{
@@ -105,12 +105,12 @@ snapshots["sbb-expansion-panel renders with level set A11y tree Chrome"] =
}
`;
-/* end snapshot sbb-expansion-panel renders with level set A11y tree Chrome */
+/* end snapshot sbb-expansion-panel renders with level set A11y tree Firefox */
-snapshots["sbb-expansion-panel renders with level set A11y tree Firefox"] =
+snapshots["sbb-expansion-panel renders with level set A11y tree Chrome"] =
`
{
- "role": "document",
+ "role": "WebArea",
"name": "",
"children": [
{
@@ -121,5 +121,5 @@ snapshots["sbb-expansion-panel renders with level set A11y tree Firefox"] =
}
`;
-/* end snapshot sbb-expansion-panel renders with level set A11y tree Firefox */
+/* end snapshot sbb-expansion-panel renders with level set A11y tree Chrome */
diff --git a/src/components/option/optgroup/optgroup-base-element.scss b/src/components/option/optgroup/optgroup-base-element.scss
index 048def9c67..f322973695 100644
--- a/src/components/option/optgroup/optgroup-base-element.scss
+++ b/src/components/option/optgroup/optgroup-base-element.scss
@@ -1,4 +1,4 @@
-@use '../../core/styles/index' as sbb;
+@use '../../core/styles' as sbb;
// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
@include sbb.box-sizing;
diff --git a/src/components/option/optgroup/optgroup-base-element.ts b/src/components/option/optgroup/optgroup-base-element.ts
index 6f999cdd86..b053969e1d 100644
--- a/src/components/option/optgroup/optgroup-base-element.ts
+++ b/src/components/option/optgroup/optgroup-base-element.ts
@@ -7,11 +7,11 @@ import {
} from 'lit';
import { property, state } from 'lit/decorators.js';
-import type { SbbAutocompleteBaseElement } from '../../core/base-elements/autocomplete-base-element.js';
-import type { SbbOptionBaseElement } from '../../core/base-elements/option-base-element.js';
+import type { SbbAutocompleteBaseElement } from '../../autocomplete/index.js';
import { isSafari, setOrRemoveAttribute } from '../../core/dom/index.js';
import { SbbDisabledMixin, SbbHydrationMixin } from '../../core/mixins/index.js';
import { AgnosticMutationObserver } from '../../core/observers/index.js';
+import type { SbbOptionBaseElement } from '../option/index.js';
import style from './optgroup-base-element.scss?lit&inline';
diff --git a/src/components/core/base-elements/option-base-element.ts b/src/components/option/option/option-base-element.ts
similarity index 93%
rename from src/components/core/base-elements/option-base-element.ts
rename to src/components/option/option/option-base-element.ts
index a25698a7aa..e0b4425fd2 100644
--- a/src/components/core/base-elements/option-base-element.ts
+++ b/src/components/option/option/option-base-element.ts
@@ -1,12 +1,17 @@
import { html, LitElement, nothing, type PropertyValues, type TemplateResult } from 'lit';
import { property, state } from 'lit/decorators.js';
-import { SbbIconNameMixin } from '../../icon/index.js';
-import { SbbConnectedAbortController, SbbSlotStateController } from '../controllers/index.js';
-import { isAndroid, isSafari, setOrRemoveAttribute } from '../dom/index.js';
-import type { EventEmitter } from '../eventing/index.js';
-import { SbbDisabledMixin } from '../mixins/index.js';
-import { AgnosticMutationObserver } from '../observers/index.js';
+import {
+ SbbConnectedAbortController,
+ SbbSlotStateController,
+} from '../../core/controllers/index.js';
+import { isAndroid, isSafari, setOrRemoveAttribute } from '../../core/dom/index.js';
+import type { EventEmitter } from '../../core/eventing/index.js';
+import { SbbDisabledMixin } from '../../core/mixins/index.js';
+import { AgnosticMutationObserver } from '../../core/observers/index.js';
+import { SbbIconNameMixin } from '../../icon/icon-name-mixin.js';
+import '../../screen-reader-only/index.js';
+import '../../icon/index.js';
let nextId = 0;
@@ -69,7 +74,6 @@ export abstract class SbbOptionBaseElement extends SbbDisabledMixin(SbbIconNameM
private _abort = new SbbConnectedAbortController(this);
protected abstract selectByClick(event: MouseEvent): void;
- // protected abstract setupHighlightHandler(event: Event): void;
protected abstract setAttributeFromParent(): void;
protected updateDisableHighlight(disabled: boolean): void {
diff --git a/src/components/option/option/option.scss b/src/components/option/option/option.scss
index 06bb282543..9e1dbb3c1f 100644
--- a/src/components/option/option/option.scss
+++ b/src/components/option/option/option.scss
@@ -45,7 +45,7 @@
--sbb-option-background-color: var(--sbb-option-background-color-active);
}
-// if the highlight is enabled, hide the slot content
+// If highlighting is enabled, hide the original slot content
:host(:not([data-disable-highlight])) {
.sbb-option__label slot {
display: none;
diff --git a/src/components/option/option/option.ts b/src/components/option/option/option.ts
index b1b8dcc378..f5b319cc83 100644
--- a/src/components/option/option/option.ts
+++ b/src/components/option/option/option.ts
@@ -2,14 +2,12 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
import { html, nothing } from 'lit';
import { customElement } from 'lit/decorators.js';
-import { SbbOptionBaseElement } from '../../core/base-elements/option-base-element.js';
import { hostAttributes } from '../../core/decorators.js';
import { EventEmitter } from '../../core/eventing.js';
-import '../../icon.js';
-import '../../screen-reader-only.js';
-import '../../visual-checkbox.js';
+import { SbbOptionBaseElement } from './option-base-element.js';
import style from './option.scss?lit&inline';
+import '../../visual-checkbox.js';
export type SbbOptionVariant = 'autocomplete' | 'select';
From dae697ed5e52b774cc75227f9d01523d74e130b6 Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Thu, 11 Apr 2024 17:00:10 +0200
Subject: [PATCH 36/67] fix: rebase
---
src/components/autocomplete-grid.ts | 6 +++++
.../autocomplete-grid-actions.ts | 1 +
.../autocomplete-grid-actions.e2e.ts | 2 +-
.../autocomplete-grid-actions.spec.ts | 8 +++---
.../autocomplete-grid-actions.stories.ts | 4 +--
.../autocomplete-grid-actions.ts | 2 +-
.../autocomplete-grid-actions/index.ts | 1 -
.../autocomplete-grid-button.ts | 1 +
.../autocomplete-grid-button.e2e.ts | 4 +--
.../autocomplete-grid-button.spec.ts | 12 ++++-----
.../autocomplete-grid-button.stories.ts | 4 +--
.../autocomplete-grid-button.ts | 14 +++++-----
.../autocomplete-grid-button/index.ts | 1 -
.../autocomplete-grid-optgroup.ts | 1 +
.../autocomplete-grid-optgroup.e2e.ts | 18 ++++++-------
.../autocomplete-grid-optgroup.spec.ts | 16 ++++++------
.../autocomplete-grid-optgroup.stories.ts | 12 ++++-----
.../autocomplete-grid-optgroup.ts | 12 ++++-----
.../autocomplete-grid-option.ts | 1 +
.../autocomplete-grid-option.e2e.ts | 26 +++++++++----------
.../autocomplete-grid-option.spec.ts | 10 +++----
.../autocomplete-grid-option.stories.ts | 6 ++---
.../autocomplete-grid-option.ts | 6 ++---
.../autocomplete-grid-option/index.ts | 1 -
.../autocomplete-grid-row.ts | 1 +
.../autocomplete-grid-row.e2e.ts | 2 +-
.../autocomplete-grid-row.spec.ts | 10 +++----
.../autocomplete-grid-row.stories.ts | 6 ++---
.../autocomplete-grid-row.ts | 2 +-
.../autocomplete-grid-row/index.ts | 1 -
.../autocomplete-grid/autocomplete-grid.ts | 1 +
.../autocomplete-grid.e2e.ts | 25 +++++++-----------
.../autocomplete-grid.spec.ts | 16 ++++++------
.../autocomplete-grid.stories.ts | 14 +++++-----
.../autocomplete-grid/autocomplete-grid.ts | 22 ++++++++--------
.../autocomplete-grid/index.ts | 1 -
src/components/autocomplete-grid/index.ts | 6 -----
src/components/autocomplete.ts | 1 +
.../autocomplete/autocomplete-base-element.ts | 14 +++++-----
src/components/core/base-elements.ts | 1 +
.../base-elements/mini-button-base-element.ts | 6 ++---
src/components/option/optgroup.ts | 1 +
.../option/optgroup/optgroup-base-element.ts | 12 ++++-----
src/components/option/option.ts | 1 +
.../option/option/option-base-element.ts | 17 +++++-------
45 files changed, 163 insertions(+), 166 deletions(-)
create mode 100644 src/components/autocomplete-grid.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-actions.ts
delete mode 100644 src/components/autocomplete-grid/autocomplete-grid-actions/index.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-button.ts
delete mode 100644 src/components/autocomplete-grid/autocomplete-grid-button/index.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-optgroup.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-option.ts
delete mode 100644 src/components/autocomplete-grid/autocomplete-grid-option/index.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-row.ts
delete mode 100644 src/components/autocomplete-grid/autocomplete-grid-row/index.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid.ts
delete mode 100644 src/components/autocomplete-grid/autocomplete-grid/index.ts
delete mode 100644 src/components/autocomplete-grid/index.ts
diff --git a/src/components/autocomplete-grid.ts b/src/components/autocomplete-grid.ts
new file mode 100644
index 0000000000..e6b5345c40
--- /dev/null
+++ b/src/components/autocomplete-grid.ts
@@ -0,0 +1,6 @@
+export * from './autocomplete-grid/autocomplete-grid.js';
+export * from './autocomplete-grid/autocomplete-grid-actions.js';
+export * from './autocomplete-grid/autocomplete-grid-button.js';
+export * from './autocomplete-grid/autocomplete-grid-optgroup.js';
+export * from './autocomplete-grid/autocomplete-grid-option.js';
+export * from './autocomplete-grid/autocomplete-grid-row.js';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions.ts b/src/components/autocomplete-grid/autocomplete-grid-actions.ts
new file mode 100644
index 0000000000..10716614bb
--- /dev/null
+++ b/src/components/autocomplete-grid/autocomplete-grid-actions.ts
@@ -0,0 +1 @@
+export * from './autocomplete-grid-actions/autocomplete-grid-actions.js';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.e2e.ts b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.e2e.ts
index ddd2123cf1..0f74c968d7 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.e2e.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.e2e.ts
@@ -1,7 +1,7 @@
import { assert } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
-import { fixture } from '../../core/testing/private/index.js';
+import { fixture } from '../../core/testing/private.js';
import { SbbAutocompleteGridActionsElement } from './autocomplete-grid-actions.js';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.spec.ts
index c2e91c96a9..959549606c 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.spec.ts
@@ -1,13 +1,13 @@
import { expect } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private/index.js';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
import type { SbbAutocompleteGridActionsElement } from './autocomplete-grid-actions.js';
-import '../autocomplete-grid/index.js';
-import '../autocomplete-grid-row/index.js';
+import '../autocomplete-grid.js';
+import '../autocomplete-grid-row.js';
import './autocomplete-grid-actions.js';
-import '../autocomplete-grid-button/index.js';
+import '../autocomplete-grid-button.js';
describe('sbb-autocomplete-grid-actions', () => {
let root: SbbAutocompleteGridActionsElement;
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.stories.ts b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.stories.ts
index 6f94e4edec..71b220ca55 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.stories.ts
@@ -15,9 +15,9 @@ import { styleMap } from 'lit/directives/style-map.js';
import { sbbSpread } from '../../../storybook/helpers/spread.js';
import readme from './readme.md?raw';
-import '../autocomplete-grid-row/index.js';
+import '../autocomplete-grid-row.js';
import './autocomplete-grid-actions.js';
-import '../autocomplete-grid-button/index.js';
+import '../autocomplete-grid-button.js';
const wrapperStyle = (context: StoryContext): Record => ({
'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.ts b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.ts
index a0c34e698c..a837f4d05d 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.ts
@@ -1,7 +1,7 @@
import { type CSSResultGroup, html, LitElement, type TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js';
-import { hostAttributes } from '../../core/decorators/index.js';
+import { hostAttributes } from '../../core/decorators.js';
import style from './autocomplete-grid-actions.scss?lit&inline';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/index.ts b/src/components/autocomplete-grid/autocomplete-grid-actions/index.ts
deleted file mode 100644
index 927a39994c..0000000000
--- a/src/components/autocomplete-grid/autocomplete-grid-actions/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './autocomplete-grid-actions.js';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button.ts b/src/components/autocomplete-grid/autocomplete-grid-button.ts
new file mode 100644
index 0000000000..5621819751
--- /dev/null
+++ b/src/components/autocomplete-grid/autocomplete-grid-button.ts
@@ -0,0 +1 @@
+export * from './autocomplete-grid-button/autocomplete-grid-button.js';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.e2e.ts b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.e2e.ts
index e41c09ab99..8973d0677a 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.e2e.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.e2e.ts
@@ -1,8 +1,8 @@
import { assert, expect } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing/index.js';
-import { fixture } from '../../core/testing/private/index.js';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
import { SbbAutocompleteGridButtonElement } from './autocomplete-grid-button.js';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts
index 6d94518e05..7b0dcbf7b8 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts
@@ -1,14 +1,14 @@
import { expect } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
-import { waitForLitRender } from '../../core/testing/index.js';
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private/index.js';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import { waitForLitRender } from '../../core/testing.js';
import type { SbbAutocompleteGridButtonElement } from './autocomplete-grid-button.js';
-import '../../form-field/index.js';
-import '../autocomplete-grid/index.js';
-import '../autocomplete-grid-row/index.js';
-import '../autocomplete-grid-actions/index.js';
+import '../../form-field.js';
+import '../autocomplete-grid.js';
+import '../autocomplete-grid-row.js';
+import '../autocomplete-grid-actions.js';
import './autocomplete-grid-button.js';
describe('sbb-autocomplete-grid-button', () => {
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts
index 465d18b75f..c3c6fa58eb 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts
@@ -14,8 +14,8 @@ import { styleMap } from 'lit/directives/style-map.js';
import { sbbSpread } from '../../../storybook/helpers/spread.js';
import readme from './readme.md?raw';
-import '../autocomplete-grid-row/index.js';
-import '../autocomplete-grid-actions/index.js';
+import '../autocomplete-grid-row.js';
+import '../autocomplete-grid-actions.js';
import './autocomplete-grid-button.js';
const wrapperStyle = (context: StoryContext): Record => ({
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
index a44e50ea80..2f448f7c39 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
@@ -1,16 +1,16 @@
import type { CSSResultGroup, PropertyValues } from 'lit';
import { customElement, state } from 'lit/decorators.js';
-import { SbbMiniButtonBaseElement } from '../../core/base-elements/index.js';
-import { hostAttributes } from '../../core/decorators/index.js';
-import { setOrRemoveAttribute } from '../../core/dom/index.js';
-import { SbbDisabledMixin } from '../../core/mixins/index.js';
-import { AgnosticMutationObserver } from '../../core/observers/index.js';
-import type { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option/index.js';
+import { SbbMiniButtonBaseElement } from '../../core/base-elements.js';
+import { hostAttributes } from '../../core/decorators.js';
+import { setOrRemoveAttribute } from '../../core/dom.js';
+import { SbbDisabledMixin } from '../../core/mixins.js';
+import { AgnosticMutationObserver } from '../../core/observers.js';
+import type { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option.js';
import style from './autocomplete-grid-button.scss?lit&inline';
-import '../../icon/index.js';
+import '../../icon.js';
let autocompleteButtonNextId = 0;
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/index.ts b/src/components/autocomplete-grid/autocomplete-grid-button/index.ts
deleted file mode 100644
index 46ac3e6a47..0000000000
--- a/src/components/autocomplete-grid/autocomplete-grid-button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './autocomplete-grid-button.js';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-optgroup.ts b/src/components/autocomplete-grid/autocomplete-grid-optgroup.ts
new file mode 100644
index 0000000000..fdeeb224cc
--- /dev/null
+++ b/src/components/autocomplete-grid/autocomplete-grid-optgroup.ts
@@ -0,0 +1 @@
+export * from './autocomplete-grid-optgroup/autocomplete-grid-optgroup.js';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.e2e.ts b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.e2e.ts
index 503b74de92..60a9485224 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.e2e.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.e2e.ts
@@ -1,16 +1,16 @@
import { assert, expect } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
-import { waitForLitRender } from '../../core/testing/index.js';
-import { fixture } from '../../core/testing/private/index.js';
-import type { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option/index.js';
+import { fixture } from '../../core/testing/private.js';
+import { waitForLitRender } from '../../core/testing.js';
+import type { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option.js';
import { SbbAutocompleteGridOptgroupElement } from './autocomplete-grid-optgroup.js';
-import '../autocomplete-grid/index.js';
-import '../autocomplete-grid-row/index.js';
-import '../autocomplete-grid-actions/index.js';
-import '../autocomplete-grid-button/index.js';
-import '../autocomplete-grid-option/index.js';
+import '../autocomplete-grid.js';
+import '../autocomplete-grid-row.js';
+import '../autocomplete-grid-actions.js';
+import '../autocomplete-grid-button.js';
+import '../autocomplete-grid-option.js';
describe(`sbb-autocomplete-grid-optgroup with ${fixture.name}`, () => {
let element: SbbAutocompleteGridOptgroupElement;
@@ -45,7 +45,7 @@ describe(`sbb-autocomplete-grid-optgroup with ${fixture.name}`, () => {
`,
- { modules: ['../index.ts'] },
+ { modules: ['../../autocomplete-grid.ts'] },
);
});
diff --git a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.spec.ts
index c643ff02e4..a0bae0aa50 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.spec.ts
@@ -2,16 +2,16 @@ import { expect } from '@open-wc/testing';
import type { TemplateResult } from 'lit';
import { html } from 'lit/static-html.js';
-import { isSafari } from '../../core/dom/index.js';
-import { describeIf } from '../../core/testing/index.js';
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private/index.js';
+import { isSafari } from '../../core/dom.js';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import { describeIf } from '../../core/testing.js';
import './autocomplete-grid-optgroup.js';
-import '../autocomplete-grid/index.js';
-import '../autocomplete-grid-row/index.js';
-import '../autocomplete-grid-option/index.js';
-import '../autocomplete-grid-actions/index.js';
-import '../autocomplete-grid-button/index.js';
+import '../autocomplete-grid.js';
+import '../autocomplete-grid-row.js';
+import '../autocomplete-grid-option.js';
+import '../autocomplete-grid-actions.js';
+import '../autocomplete-grid-button.js';
import type { SbbAutocompleteGridOptgroupElement } from './autocomplete-grid-optgroup.js';
describe('sbb-autocomplete-grid-optgroup', () => {
diff --git a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts
index 6bcd3b46c5..3a9417e794 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts
@@ -12,13 +12,13 @@ import { html, nothing, type TemplateResult } from 'lit';
import { styleMap } from 'lit/directives/style-map.js';
import readme from './readme.md?raw';
-import '../../form-field/index.js';
+import '../../form-field.js';
import './autocomplete-grid-optgroup.js';
-import '../autocomplete-grid/index.js';
-import '../autocomplete-grid-row/index.js';
-import '../autocomplete-grid-option/index.js';
-import '../autocomplete-grid-actions/index.js';
-import '../autocomplete-grid-button/index.js';
+import '../autocomplete-grid.js';
+import '../autocomplete-grid-row.js';
+import '../autocomplete-grid-option.js';
+import '../autocomplete-grid-actions.js';
+import '../autocomplete-grid-button.js';
const wrapperStyle = (context: StoryContext): Record => ({
'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
diff --git a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts
index f49316479a..a30481de22 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts
@@ -1,11 +1,11 @@
import { customElement } from 'lit/decorators.js';
-import { hostAttributes } from '../../core/decorators/index.js';
-import { isSafari } from '../../core/dom/index.js';
-import { SbbOptgroupBaseElement } from '../../option/optgroup/index.js';
-import type { SbbAutocompleteGridElement } from '../autocomplete-grid/index.js';
-import type { SbbAutocompleteGridButtonElement } from '../autocomplete-grid-button/index.js';
-import type { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option/index.js';
+import { hostAttributes } from '../../core/decorators.js';
+import { isSafari } from '../../core/dom.js';
+import { SbbOptgroupBaseElement } from '../../option/optgroup.js';
+import type { SbbAutocompleteGridButtonElement } from '../autocomplete-grid-button.js';
+import type { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option.js';
+import type { SbbAutocompleteGridElement } from '../autocomplete-grid.js';
/**
* On Safari, the groups labels are not read by VoiceOver.
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option.ts b/src/components/autocomplete-grid/autocomplete-grid-option.ts
new file mode 100644
index 0000000000..5321bb13ac
--- /dev/null
+++ b/src/components/autocomplete-grid/autocomplete-grid-option.ts
@@ -0,0 +1 @@
+export * from './autocomplete-grid-option/autocomplete-grid-option.js';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.e2e.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.e2e.ts
index d3fa14ca29..373dec0387 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.e2e.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.e2e.ts
@@ -2,19 +2,19 @@ import { assert, expect } from '@open-wc/testing';
import { sendKeys } from '@web/test-runner-commands';
import { html } from 'lit/static-html.js';
-import { EventSpy, waitForLitRender } from '../../core/testing/index.js';
-import { fixture } from '../../core/testing/private/index.js';
-import type { SbbFormFieldElement } from '../../form-field/index.js';
-import type { SbbAutocompleteGridElement } from '../autocomplete-grid/index.js';
-import type { SbbAutocompleteGridOptgroupElement } from '../autocomplete-grid-optgroup/index.js';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForLitRender } from '../../core/testing.js';
+import type { SbbFormFieldElement } from '../../form-field.js';
+import type { SbbAutocompleteGridOptgroupElement } from '../autocomplete-grid-optgroup.js';
+import type { SbbAutocompleteGridElement } from '../autocomplete-grid.js';
import { SbbAutocompleteGridOptionElement } from './autocomplete-grid-option.js';
-import '../../form-field/index.js';
-import '../autocomplete-grid/index.js';
-import '../autocomplete-grid-optgroup/index.js';
-import '../autocomplete-grid-row/index.js';
-import '../autocomplete-grid-actions/index.js';
-import '../autocomplete-grid-button/index.js';
+import '../../form-field.js';
+import '../autocomplete-grid.js';
+import '../autocomplete-grid-optgroup.js';
+import '../autocomplete-grid-row.js';
+import '../autocomplete-grid-actions.js';
+import '../autocomplete-grid-button.js';
describe(`sbb-autocomplete-grid-option with ${fixture.name}`, () => {
let element: SbbFormFieldElement;
@@ -40,7 +40,7 @@ describe(`sbb-autocomplete-grid-option with ${fixture.name}`, () => {
`,
- { modules: ['../../autocomplete-grid/index.ts', '../../form-field/index.ts'] },
+ { modules: ['../../autocomplete-grid.ts', '../../form-field.ts'] },
);
});
@@ -192,7 +192,7 @@ describe(`sbb-autocomplete-grid-option with ${fixture.name}`, () => {
`,
{
- modules: ['../../form-field/index.ts', '../../autocomplete-grid/index.ts'],
+ modules: ['../../autocomplete-grid.ts', '../../form-field.ts'],
},
);
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts
index 673461c937..ac2bc6a9bc 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts
@@ -1,14 +1,14 @@
import { expect } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private/index.js';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
import type { SbbAutocompleteGridOptionElement } from './autocomplete-grid-option.js';
-import '../autocomplete-grid/index.js';
-import '../autocomplete-grid-row/index.js';
+import '../autocomplete-grid.js';
+import '../autocomplete-grid-row.js';
import './autocomplete-grid-option.js';
-import '../autocomplete-grid-actions/index.js';
-import '../autocomplete-grid-button/index.js';
+import '../autocomplete-grid-actions.js';
+import '../autocomplete-grid-button.js';
describe('sbb-autocomplete-grid-option', () => {
describe('default', () => {
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts
index 686a156917..5b08478801 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts
@@ -14,9 +14,9 @@ import { sbbSpread } from '../../../storybook/helpers/spread.js';
import readme from './readme.md?raw';
-import '../../form-field/index.js';
-import '../autocomplete-grid/index.js';
-import '../autocomplete-grid-row/index.js';
+import '../../form-field.js';
+import '../autocomplete-grid.js';
+import '../autocomplete-grid-row.js';
import './autocomplete-grid-option.js';
const wrapperStyle = (context: StoryContext): Record => ({
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
index 66ea239a7c..d685a46af5 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
@@ -1,9 +1,9 @@
import type { CSSResultGroup, PropertyValues } from 'lit';
import { customElement } from 'lit/decorators.js';
-import { hostAttributes } from '../../core/decorators/index.js';
-import { EventEmitter } from '../../core/eventing/index.js';
-import { SbbOptionBaseElement } from '../../option/index.js';
+import { hostAttributes } from '../../core/decorators.js';
+import { EventEmitter } from '../../core/eventing.js';
+import { SbbOptionBaseElement } from '../../option.js';
import style from './autocomplete-grid-option.scss?lit&inline';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/index.ts b/src/components/autocomplete-grid/autocomplete-grid-option/index.ts
deleted file mode 100644
index 76930fc12f..0000000000
--- a/src/components/autocomplete-grid/autocomplete-grid-option/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './autocomplete-grid-option.js';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row.ts b/src/components/autocomplete-grid/autocomplete-grid-row.ts
new file mode 100644
index 0000000000..f4c5e8dd74
--- /dev/null
+++ b/src/components/autocomplete-grid/autocomplete-grid-row.ts
@@ -0,0 +1 @@
+export * from './autocomplete-grid-row/autocomplete-grid-row.js';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.e2e.ts b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.e2e.ts
index b097945e22..2e4d0035ab 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.e2e.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.e2e.ts
@@ -1,7 +1,7 @@
import { assert } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
-import { fixture } from '../../core/testing/private/index.js';
+import { fixture } from '../../core/testing/private.js';
import { SbbAutocompleteGridRowElement } from './autocomplete-grid-row.js';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.spec.ts
index 0376fe5a2d..344904838f 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.spec.ts
@@ -2,14 +2,14 @@ import { expect } from '@open-wc/testing';
import type { TemplateResult } from 'lit';
import { html } from 'lit/static-html.js';
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private/index.js';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
import type { SbbAutocompleteGridRowElement } from './autocomplete-grid-row.js';
-import '../autocomplete-grid/index.js';
+import '../autocomplete-grid.js';
import './autocomplete-grid-row.js';
-import '../autocomplete-grid-option/index.js';
-import '../autocomplete-grid-actions/index.js';
-import '../autocomplete-grid-button/index.js';
+import '../autocomplete-grid-option.js';
+import '../autocomplete-grid-actions.js';
+import '../autocomplete-grid-button.js';
describe('sbb-autocomplete-grid-row', () => {
let root: SbbAutocompleteGridRowElement;
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.stories.ts b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.stories.ts
index 61569ffbc4..336436b965 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.stories.ts
@@ -14,9 +14,9 @@ import { styleMap } from 'lit/directives/style-map.js';
import readme from './readme.md?raw';
import './autocomplete-grid-row.js';
-import '../autocomplete-grid-actions/index.js';
-import '../autocomplete-grid-option/index.js';
-import '../autocomplete-grid-button/index.js';
+import '../autocomplete-grid-actions.js';
+import '../autocomplete-grid-option.js';
+import '../autocomplete-grid-button.js';
const wrapperStyle = (context: StoryContext): Record => ({
'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.ts b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.ts
index 13b8156e2c..92a26199f0 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.ts
@@ -1,7 +1,7 @@
import { type CSSResultGroup, html, LitElement, type TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js';
-import { hostAttributes } from '../../core/decorators/index.js';
+import { hostAttributes } from '../../core/decorators.js';
import style from './autocomplete-grid-row.scss?lit&inline';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/index.ts b/src/components/autocomplete-grid/autocomplete-grid-row/index.ts
deleted file mode 100644
index af6b8e56a3..0000000000
--- a/src/components/autocomplete-grid/autocomplete-grid-row/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './autocomplete-grid-row.js';
diff --git a/src/components/autocomplete-grid/autocomplete-grid.ts b/src/components/autocomplete-grid/autocomplete-grid.ts
new file mode 100644
index 0000000000..44b44c1b7e
--- /dev/null
+++ b/src/components/autocomplete-grid/autocomplete-grid.ts
@@ -0,0 +1 @@
+export * from './autocomplete-grid/autocomplete-grid.js';
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.e2e.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.e2e.ts
index 9594820c5c..6edbed2b13 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.e2e.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.e2e.ts
@@ -2,22 +2,17 @@ import { assert, expect } from '@open-wc/testing';
import { sendKeys, sendMouse } from '@web/test-runner-commands';
import { html } from 'lit/static-html.js';
-import { isSafari } from '../../core/dom/index.js';
-import {
- describeIf,
- EventSpy,
- waitForCondition,
- waitForLitRender,
-} from '../../core/testing/index.js';
-import { fixture } from '../../core/testing/private/index.js';
-import { SbbFormFieldElement } from '../../form-field/index.js';
-import type { SbbAutocompleteGridButtonElement } from '../autocomplete-grid-button/index.js';
-import { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option/index.js';
+import { isSafari } from '../../core/dom.js';
+import { fixture } from '../../core/testing/private.js';
+import { describeIf, EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
+import { SbbFormFieldElement } from '../../form-field.js';
+import type { SbbAutocompleteGridButtonElement } from '../autocomplete-grid-button.js';
+import { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option.js';
import { SbbAutocompleteGridElement } from './autocomplete-grid.js';
-import '../autocomplete-grid-row/index.js';
-import '../autocomplete-grid-actions/index.js';
-import '../autocomplete-grid-button/index.js';
+import '../autocomplete-grid-row.js';
+import '../autocomplete-grid-actions.js';
+import '../autocomplete-grid-button.js';
describe(`sbb-autocomplete-grid with ${fixture.name}`, () => {
let formField: SbbFormFieldElement;
@@ -59,7 +54,7 @@ describe(`sbb-autocomplete-grid with ${fixture.name}`, () => {
`,
- { modules: ['../index.ts', '../../form-field/index.ts'] },
+ { modules: ['../../autocomplete-grid.ts', '../../form-field.ts'] },
);
input = formField.querySelector('input')!;
element = formField.querySelector('sbb-autocomplete-grid')!;
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts
index d0a5c3e4f0..d8644c7951 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts
@@ -1,17 +1,17 @@
import { expect } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
-import { isSafari } from '../../core/dom/index.js';
-import { describeIf } from '../../core/testing/index.js';
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private/index.js';
-import type { SbbFormFieldElement } from '../../form-field/index.js';
+import { isSafari } from '../../core/dom.js';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import { describeIf } from '../../core/testing.js';
+import type { SbbFormFieldElement } from '../../form-field.js';
import type { SbbAutocompleteGridElement } from './autocomplete-grid.js';
import './autocomplete-grid.js';
-import '../autocomplete-grid-row/index.js';
-import '../autocomplete-grid-option/index.js';
-import '../autocomplete-grid-actions/index.js';
-import '../autocomplete-grid-button/index.js';
+import '../autocomplete-grid-row.js';
+import '../autocomplete-grid-option.js';
+import '../autocomplete-grid-actions.js';
+import '../autocomplete-grid-button.js';
import '../../form-field/form-field/form-field.js';
describe('sbb-autocomplete-grid', () => {
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
index fbb740dfce..b1524769af 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
@@ -16,17 +16,17 @@ import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready.js';
import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position.js';
-import type { SbbAutocompleteGridButtonElement } from '../autocomplete-grid-button/index.js';
-import { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option/index.js';
+import type { SbbAutocompleteGridButtonElement } from '../autocomplete-grid-button.js';
+import { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option.js';
import { SbbAutocompleteGridElement } from './autocomplete-grid.js';
import readme from './readme.md?raw';
-import '../autocomplete-grid-row/index.js';
-import '../autocomplete-grid-optgroup/index.js';
-import '../autocomplete-grid-actions/index.js';
-import '../autocomplete-grid-button/index.js';
-import '../../form-field/index.js';
+import '../autocomplete-grid-row.js';
+import '../autocomplete-grid-optgroup.js';
+import '../autocomplete-grid-actions.js';
+import '../autocomplete-grid-button.js';
+import '../../form-field.js';
const getOption = (event: Event): void => {
const button = event.target as SbbAutocompleteGridButtonElement;
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts
index f4b9715782..6003ff0309 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts
@@ -1,16 +1,16 @@
import { customElement } from 'lit/decorators.js';
-import { SbbAutocompleteBaseElement } from '../../autocomplete/index.js';
-import { getNextElementIndex } from '../../core/a11y/index.js';
-import { hostAttributes } from '../../core/decorators/index.js';
-import { getDocumentWritingMode, isSafari } from '../../core/dom/index.js';
-import { EventEmitter } from '../../core/eventing/index.js';
-import { setAriaComboBoxAttributes } from '../../core/overlay/index.js';
-import type { SbbDividerElement } from '../../divider/index.js';
-import type { SbbOptGroupElement, SbbOptionElement } from '../../option/index.js';
-import type { SbbAutocompleteGridButtonElement } from '../autocomplete-grid-button/index.js';
-import { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option/index.js';
-import type { SbbAutocompleteGridRowElement } from '../autocomplete-grid-row/index.js';
+import { SbbAutocompleteBaseElement } from '../../autocomplete.js';
+import { getNextElementIndex } from '../../core/a11y.js';
+import { hostAttributes } from '../../core/decorators.js';
+import { getDocumentWritingMode, isSafari } from '../../core/dom.js';
+import { EventEmitter } from '../../core/eventing.js';
+import { setAriaComboBoxAttributes } from '../../core/overlay.js';
+import type { SbbDividerElement } from '../../divider.js';
+import type { SbbOptGroupElement, SbbOptionElement } from '../../option.js';
+import type { SbbAutocompleteGridButtonElement } from '../autocomplete-grid-button.js';
+import { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option.js';
+import type { SbbAutocompleteGridRowElement } from '../autocomplete-grid-row.js';
let nextId = 0;
diff --git a/src/components/autocomplete-grid/autocomplete-grid/index.ts b/src/components/autocomplete-grid/autocomplete-grid/index.ts
deleted file mode 100644
index 24c04865f6..0000000000
--- a/src/components/autocomplete-grid/autocomplete-grid/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './autocomplete-grid.js';
diff --git a/src/components/autocomplete-grid/index.ts b/src/components/autocomplete-grid/index.ts
deleted file mode 100644
index afcaa9d46d..0000000000
--- a/src/components/autocomplete-grid/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export * from './autocomplete-grid/index.js';
-export * from './autocomplete-grid-actions/index.js';
-export * from './autocomplete-grid-button/index.js';
-export * from './autocomplete-grid-option/index.js';
-export * from './autocomplete-grid-optgroup/index.js';
-export * from './autocomplete-grid-row/index.js';
diff --git a/src/components/autocomplete.ts b/src/components/autocomplete.ts
index ef8e791d3a..dc2e624fb5 100644
--- a/src/components/autocomplete.ts
+++ b/src/components/autocomplete.ts
@@ -1 +1,2 @@
export * from './autocomplete/autocomplete.js';
+export * from './autocomplete/autocomplete-base-element.js';
diff --git a/src/components/autocomplete/autocomplete-base-element.ts b/src/components/autocomplete/autocomplete-base-element.ts
index c1732dfc90..2c79a74d37 100644
--- a/src/components/autocomplete/autocomplete-base-element.ts
+++ b/src/components/autocomplete/autocomplete-base-element.ts
@@ -9,19 +9,19 @@ import {
import { property } from 'lit/decorators.js';
import { ref } from 'lit/directives/ref.js';
-import { SbbConnectedAbortController } from '../core/controllers/index.js';
-import { findReferencedElement, isBrowser, isSafari } from '../core/dom/index.js';
-import type { EventEmitter } from '../core/eventing/index.js';
-import type { SbbOpenedClosedState } from '../core/interfaces/index.js';
-import { SbbHydrationMixin } from '../core/mixins/index.js';
+import { SbbConnectedAbortController } from '../core/controllers.js';
+import { findReferencedElement, isBrowser, isSafari } from '../core/dom.js';
+import type { EventEmitter } from '../core/eventing.js';
+import type { SbbOpenedClosedState } from '../core/interfaces.js';
import { SbbNegativeMixin } from '../core/mixins/negative-mixin.js';
+import { SbbHydrationMixin } from '../core/mixins.js';
import {
isEventOnElement,
overlayGapFixCorners,
removeAriaComboBoxAttributes,
setOverlayPosition,
-} from '../core/overlay/index.js';
-import type { SbbOptionBaseElement } from '../option/index.js';
+} from '../core/overlay.js';
+import type { SbbOptionBaseElement } from '../option.js';
import style from './autocomplete-base-element.scss?lit&inline';
diff --git a/src/components/core/base-elements.ts b/src/components/core/base-elements.ts
index b369db0b79..5111a1d2fd 100644
--- a/src/components/core/base-elements.ts
+++ b/src/components/core/base-elements.ts
@@ -1,3 +1,4 @@
export * from './base-elements/action-base-element.js';
export * from './base-elements/button-base-element.js';
+export * from './base-elements/mini-button-base-element.js';
export * from './base-elements/link-base-element.js';
diff --git a/src/components/core/base-elements/mini-button-base-element.ts b/src/components/core/base-elements/mini-button-base-element.ts
index e1c1d94265..f18bbeb8a2 100644
--- a/src/components/core/base-elements/mini-button-base-element.ts
+++ b/src/components/core/base-elements/mini-button-base-element.ts
@@ -1,8 +1,8 @@
import type { TemplateResult } from 'lit';
-import { SbbIconNameMixin } from '../../icon/index.js';
-import { SbbSlotStateController } from '../controllers/index.js';
-import { SbbNegativeMixin } from '../mixins/index.js';
+import { SbbIconNameMixin } from '../../icon.js';
+import { SbbSlotStateController } from '../controllers.js';
+import { SbbNegativeMixin } from '../mixins.js';
import { SbbButtonBaseElement } from './button-base-element.js';
diff --git a/src/components/option/optgroup.ts b/src/components/option/optgroup.ts
index eb0db4f872..81a96bbb7c 100644
--- a/src/components/option/optgroup.ts
+++ b/src/components/option/optgroup.ts
@@ -1 +1,2 @@
export * from './optgroup/optgroup.js';
+export * from './optgroup/optgroup-base-element.js';
diff --git a/src/components/option/optgroup/optgroup-base-element.ts b/src/components/option/optgroup/optgroup-base-element.ts
index b053969e1d..893cb6957d 100644
--- a/src/components/option/optgroup/optgroup-base-element.ts
+++ b/src/components/option/optgroup/optgroup-base-element.ts
@@ -7,15 +7,15 @@ import {
} from 'lit';
import { property, state } from 'lit/decorators.js';
-import type { SbbAutocompleteBaseElement } from '../../autocomplete/index.js';
-import { isSafari, setOrRemoveAttribute } from '../../core/dom/index.js';
-import { SbbDisabledMixin, SbbHydrationMixin } from '../../core/mixins/index.js';
-import { AgnosticMutationObserver } from '../../core/observers/index.js';
-import type { SbbOptionBaseElement } from '../option/index.js';
+import type { SbbAutocompleteBaseElement } from '../../autocomplete.js';
+import { isSafari, setOrRemoveAttribute } from '../../core/dom.js';
+import { SbbDisabledMixin, SbbHydrationMixin } from '../../core/mixins.js';
+import { AgnosticMutationObserver } from '../../core/observers.js';
+import type { SbbOptionBaseElement } from '../option.js';
import style from './optgroup-base-element.scss?lit&inline';
-import '../../divider/index.js';
+import '../../divider.js';
/**
* On Safari, the groups labels are not read by VoiceOver.
diff --git a/src/components/option/option.ts b/src/components/option/option.ts
index 700fb16c64..98e8cb10ef 100644
--- a/src/components/option/option.ts
+++ b/src/components/option/option.ts
@@ -1 +1,2 @@
export * from './option/option.js';
+export * from './option/option-base-element.js';
diff --git a/src/components/option/option/option-base-element.ts b/src/components/option/option/option-base-element.ts
index e0b4425fd2..7e3dafa003 100644
--- a/src/components/option/option/option-base-element.ts
+++ b/src/components/option/option/option-base-element.ts
@@ -1,17 +1,14 @@
import { html, LitElement, nothing, type PropertyValues, type TemplateResult } from 'lit';
import { property, state } from 'lit/decorators.js';
-import {
- SbbConnectedAbortController,
- SbbSlotStateController,
-} from '../../core/controllers/index.js';
-import { isAndroid, isSafari, setOrRemoveAttribute } from '../../core/dom/index.js';
-import type { EventEmitter } from '../../core/eventing/index.js';
-import { SbbDisabledMixin } from '../../core/mixins/index.js';
-import { AgnosticMutationObserver } from '../../core/observers/index.js';
+import { SbbConnectedAbortController, SbbSlotStateController } from '../../core/controllers.js';
+import { isAndroid, isSafari, setOrRemoveAttribute } from '../../core/dom.js';
+import type { EventEmitter } from '../../core/eventing.js';
+import { SbbDisabledMixin } from '../../core/mixins.js';
+import { AgnosticMutationObserver } from '../../core/observers.js';
import { SbbIconNameMixin } from '../../icon/icon-name-mixin.js';
-import '../../screen-reader-only/index.js';
-import '../../icon/index.js';
+import '../../screen-reader-only.js';
+import '../../icon.js';
let nextId = 0;
From 4b9b065ed1d2a9c2bc189372dbfd95c196a6f9ef Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Fri, 12 Apr 2024 11:13:27 +0200
Subject: [PATCH 37/67] fix: move hostAttributes to base class
---
.../autocomplete-grid-optgroup.ts | 10 ----------
.../option/optgroup/optgroup-base-element.ts | 2 ++
src/components/option/optgroup/optgroup.ts | 10 ----------
3 files changed, 2 insertions(+), 20 deletions(-)
diff --git a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts
index a30481de22..e812e5a394 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts
@@ -1,26 +1,16 @@
import { customElement } from 'lit/decorators.js';
-import { hostAttributes } from '../../core/decorators.js';
-import { isSafari } from '../../core/dom.js';
import { SbbOptgroupBaseElement } from '../../option/optgroup.js';
import type { SbbAutocompleteGridButtonElement } from '../autocomplete-grid-button.js';
import type { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option.js';
import type { SbbAutocompleteGridElement } from '../autocomplete-grid.js';
-/**
- * On Safari, the groups labels are not read by VoiceOver.
- * To solve the problem, we remove the role="group" and add a hidden span containing the group name
- * TODO: We should periodically check if it has been solved and, if so, remove the property.
- */
-const inertAriaGroups = isSafari();
-
/**
* It can be used as a container for one or more `sbb-autocomplete-grid-option`.
*
* @slot - Use the unnamed slot to add `sbb-autocomplete-grid-option` elements to the `sbb-autocomplete-grid-optgroup`.
*/
@customElement('sbb-autocomplete-grid-optgroup')
-@hostAttributes({ role: !inertAriaGroups ? 'group' : null })
export class SbbAutocompleteGridOptgroupElement extends SbbOptgroupBaseElement {
protected get options(): SbbAutocompleteGridOptionElement[] {
return Array.from(
diff --git a/src/components/option/optgroup/optgroup-base-element.ts b/src/components/option/optgroup/optgroup-base-element.ts
index 893cb6957d..8f5a6213af 100644
--- a/src/components/option/optgroup/optgroup-base-element.ts
+++ b/src/components/option/optgroup/optgroup-base-element.ts
@@ -8,6 +8,7 @@ import {
import { property, state } from 'lit/decorators.js';
import type { SbbAutocompleteBaseElement } from '../../autocomplete.js';
+import { hostAttributes } from '../../core/decorators.js';
import { isSafari, setOrRemoveAttribute } from '../../core/dom.js';
import { SbbDisabledMixin, SbbHydrationMixin } from '../../core/mixins.js';
import { AgnosticMutationObserver } from '../../core/observers.js';
@@ -24,6 +25,7 @@ import '../../divider.js';
*/
const inertAriaGroups = isSafari();
+@hostAttributes({ role: !inertAriaGroups ? 'group' : null })
export abstract class SbbOptgroupBaseElement extends SbbDisabledMixin(
SbbHydrationMixin(LitElement),
) {
diff --git a/src/components/option/optgroup/optgroup.ts b/src/components/option/optgroup/optgroup.ts
index 56ec369910..9d793dbc34 100644
--- a/src/components/option/optgroup/optgroup.ts
+++ b/src/components/option/optgroup/optgroup.ts
@@ -1,26 +1,16 @@
import { customElement } from 'lit/decorators.js';
import type { SbbAutocompleteElement } from '../../autocomplete.js';
-import { hostAttributes } from '../../core/decorators.js';
-import { isSafari } from '../../core/dom.js';
import type { SbbOptionElement } from '../option.js';
import { SbbOptgroupBaseElement } from './optgroup-base-element.js';
-/**
- * On Safari, the groups labels are not read by VoiceOver.
- * To solve the problem, we remove the role="group" and add a hidden span containing the group name
- * TODO: We should periodically check if it has been solved and, if so, remove the property.
- */
-const inertAriaGroups = isSafari();
-
/**
* It can be used as a container for one or more `sbb-option`.
*
* @slot - Use the unnamed slot to add `sbb-option` elements to the `sbb-optgroup`.
*/
@customElement('sbb-optgroup')
-@hostAttributes({ role: !inertAriaGroups ? 'group' : null })
export class SbbOptGroupElement extends SbbOptgroupBaseElement {
protected get options(): SbbOptionElement[] {
return Array.from(this.querySelectorAll?.('sbb-option') ?? []) as SbbOptionElement[];
From 88e3576fe796a6f0fd6f7f801016ce3ce150f7d3 Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Fri, 12 Apr 2024 14:03:33 +0200
Subject: [PATCH 38/67] fix: build
---
tools/manifest/custom-elements-manifest.config.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/tools/manifest/custom-elements-manifest.config.js b/tools/manifest/custom-elements-manifest.config.js
index c1c3c51599..9429747a93 100644
--- a/tools/manifest/custom-elements-manifest.config.js
+++ b/tools/manifest/custom-elements-manifest.config.js
@@ -48,7 +48,8 @@ export default {
for (const module of customElementsManifest.modules) {
fixModulePaths(module, fixTsPaths);
for (const declaration of module.declarations.filter((d) => d.kind === 'class')) {
- if (declaration.name === 'SbbIconBase') {
+ // Abstract base classes are considered components even if they don't have the `customElement` annotation.
+ if (declaration.name.includes('Base')) {
delete declaration.customElement;
}
for (const member of declaration.members) {
From b367300baa07b0886e76132246d202880ca8f629 Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Wed, 17 Apr 2024 16:25:53 +0200
Subject: [PATCH 39/67] fix: focus button safari/firefox
---
.../autocomplete-grid-button/autocomplete-grid-button.scss | 6 ++----
1 file changed, 2 insertions(+), 4 deletions(-)
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.scss b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.scss
index 450317dadc..8968348aa7 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.scss
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.scss
@@ -8,10 +8,8 @@
// Use !important here to not interfere with Firefox focus ring definition
// which appears in normalize css of several frameworks.
outline: none !important;
+
+ --sbb-button-display: flex;
}
@include sbb.icon-button('.sbb-autocomplete-grid-button', '::slotted(sbb-icon), sbb-icon');
-
-.sbb-autocomplete-grid-button {
- display: flex;
-}
From 5a89146d114888ae3b00e943b84895ffa107fbe0 Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Wed, 17 Apr 2024 16:33:26 +0200
Subject: [PATCH 40/67] fix: remove old mixin
---
.../autocomplete-grid-actions.scss | 9 ++++++---
.../autocomplete-grid-button.scss | 6 +++---
.../autocomplete-grid-option.scss | 7 ++++---
.../autocomplete-grid-row/autocomplete-grid-row.scss | 7 ++++---
4 files changed, 17 insertions(+), 12 deletions(-)
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.scss b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.scss
index be1b7d941f..5156c8c35c 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.scss
+++ b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.scss
@@ -1,8 +1,11 @@
@use '../../core/styles' as sbb;
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
+@include sbb.box-sizing;
+
+:host {
+ display: block;
+}
.sbb-autocomplete-grid-action {
display: flex;
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.scss b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.scss
index 8968348aa7..43a5b2d3c4 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.scss
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.scss
@@ -1,13 +1,13 @@
@use '../../core/styles' as sbb;
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
+@include sbb.box-sizing;
:host {
// Use !important here to not interfere with Firefox focus ring definition
// which appears in normalize css of several frameworks.
outline: none !important;
+ display: block;
--sbb-button-display: flex;
}
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss
index 82c2b6b882..dc247272dd 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss
@@ -1,13 +1,14 @@
@use '../../core/styles' as sbb;
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
+@include sbb.box-sizing;
:host {
--sbb-option-color: var(--sbb-color-charcoal);
--sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);
--sbb-option-icon-color: var(--sbb-color-metal);
+
+ display: block;
}
:host([data-negative]) {
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.scss b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.scss
index 58c17e3783..3edb0714a4 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.scss
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.scss
@@ -1,8 +1,7 @@
@use '../../core/styles' as sbb;
-// Default component properties, defined for :host. Properties which can not
-// travel the shadow boundary are defined through this mixin
-@include sbb.host-component-properties;
+// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
+@include sbb.box-sizing;
:host {
--sbb-autocomplete-grid-row-color: var(--sbb-color-charcoal);
@@ -20,6 +19,8 @@
--sbb-autocomplete-grid-row-cursor: pointer;
--sbb-autocomplete-grid-row-border-radius: var(--sbb-border-radius-4x);
--sbb-autocomplete-grid-row-icon-color: var(--sbb-color-metal);
+
+ display: block;
}
:host([data-negative]) {
From c5c3c223f7082f2f921bfdf60fce9d5732fc1588 Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Thu, 18 Apr 2024 09:17:41 +0200
Subject: [PATCH 41/67] fix: build
---
src/components/autocomplete/autocomplete-base-element.ts | 3 +--
src/components/option/option/option-base-element.ts | 3 +--
2 files changed, 2 insertions(+), 4 deletions(-)
diff --git a/src/components/autocomplete/autocomplete-base-element.ts b/src/components/autocomplete/autocomplete-base-element.ts
index 2c79a74d37..6325871169 100644
--- a/src/components/autocomplete/autocomplete-base-element.ts
+++ b/src/components/autocomplete/autocomplete-base-element.ts
@@ -13,8 +13,7 @@ import { SbbConnectedAbortController } from '../core/controllers.js';
import { findReferencedElement, isBrowser, isSafari } from '../core/dom.js';
import type { EventEmitter } from '../core/eventing.js';
import type { SbbOpenedClosedState } from '../core/interfaces.js';
-import { SbbNegativeMixin } from '../core/mixins/negative-mixin.js';
-import { SbbHydrationMixin } from '../core/mixins.js';
+import { SbbNegativeMixin, SbbHydrationMixin } from '../core/mixins.js';
import {
isEventOnElement,
overlayGapFixCorners,
diff --git a/src/components/option/option/option-base-element.ts b/src/components/option/option/option-base-element.ts
index 7e3dafa003..07f256148e 100644
--- a/src/components/option/option/option-base-element.ts
+++ b/src/components/option/option/option-base-element.ts
@@ -6,9 +6,8 @@ import { isAndroid, isSafari, setOrRemoveAttribute } from '../../core/dom.js';
import type { EventEmitter } from '../../core/eventing.js';
import { SbbDisabledMixin } from '../../core/mixins.js';
import { AgnosticMutationObserver } from '../../core/observers.js';
-import { SbbIconNameMixin } from '../../icon/icon-name-mixin.js';
+import { SbbIconNameMixin } from '../../icon.js';
import '../../screen-reader-only.js';
-import '../../icon.js';
let nextId = 0;
From a8d1d8d7ff33549a451ba3cbab6440e176b1d017 Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Mon, 22 Apr 2024 17:12:20 +0200
Subject: [PATCH 42/67] fix: accessibility
---
.../autocomplete-grid/autocomplete-grid.stories.ts | 2 ++
1 file changed, 2 insertions(+)
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
index b1524769af..d64b1bcb6c 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
@@ -323,6 +323,7 @@ const Template = (args: Args): TemplateResult => html`
@@ -357,6 +358,7 @@ const OptionGroupTemplate = (args: Args): TemplateResult => html`
From d6d9d0eefb78e970c180e857ea970344c7e1c474 Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Tue, 23 Apr 2024 15:55:35 +0200
Subject: [PATCH 43/67] fix: review + cleanup after merge from main
---
.../autocomplete-grid-actions.stories.ts | 17 +-----
.../autocomplete-grid-button.stories.ts | 19 ++-----
.../autocomplete-grid-button.ts | 9 ++-
.../autocomplete-grid-button/readme.md | 46 +++++++++++-----
.../autocomplete-grid-optgroup.stories.ts | 29 +++-------
.../autocomplete-grid-option.stories.ts | 24 ++++----
.../autocomplete-grid-row.stories.ts | 17 +-----
.../autocomplete-grid.stories.ts | 55 ++++---------------
.../autocomplete-grid/readme.md | 1 -
.../autocomplete/autocomplete-base-element.ts | 4 --
10 files changed, 74 insertions(+), 147 deletions(-)
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.stories.ts b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.stories.ts
index 71b220ca55..4e82b4b9e6 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.stories.ts
@@ -10,7 +10,6 @@ import type {
} from '@storybook/web-components';
import { html, type TemplateResult } from 'lit';
import { repeat } from 'lit/directives/repeat.js';
-import { styleMap } from 'lit/directives/style-map.js';
import { sbbSpread } from '../../../storybook/helpers/spread.js';
@@ -19,10 +18,6 @@ import '../autocomplete-grid-row.js';
import './autocomplete-grid-actions.js';
import '../autocomplete-grid-button.js';
-const wrapperStyle = (context: StoryContext): Record => ({
- 'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
-
const numberOfButtons: InputType = {
control: {
type: 'number',
@@ -118,19 +113,13 @@ export const MultipleDisabledNegative: StoryObj = {
};
const meta: Meta = {
- decorators: [
- (story, context) => html`
- ${story()}
- `,
- withActions as Decorator,
- ],
+ decorators: [withActions as Decorator],
parameters: {
actions: {
handles: ['click'],
},
- backgrounds: {
- disable: true,
- },
+ backgroundColor: (context: StoryContext) =>
+ context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
docs: {
extractComponentDescription: () => readme,
},
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts
index c3c6fa58eb..1519f772ec 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts
@@ -9,7 +9,6 @@ import type {
StoryObj,
} from '@storybook/web-components';
import { html, type TemplateResult } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';
import { sbbSpread } from '../../../storybook/helpers/spread.js';
@@ -18,10 +17,6 @@ import '../autocomplete-grid-row.js';
import '../autocomplete-grid-actions.js';
import './autocomplete-grid-button.js';
-const wrapperStyle = (context: StoryContext): Record => ({
- 'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
-
const type: InputType = {
control: {
type: 'select',
@@ -115,7 +110,7 @@ const defaultArgTypes: ArgTypes = {
};
const defaultArgs: Args = {
- type: type.options[0],
+ type: type.options![0],
disabled: false,
name: 'Button Name',
value: undefined,
@@ -188,19 +183,13 @@ export const NegativeFocusVisible: StoryObj = {
};
const meta: Meta = {
- decorators: [
- (story, context) => html`
- ${story()}
- `,
- withActions as Decorator,
- ],
+ decorators: [withActions as Decorator],
parameters: {
actions: {
handles: ['click'],
},
- backgrounds: {
- disable: true,
- },
+ backgroundColor: (context: StoryContext) =>
+ context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
docs: {
extractComponentDescription: () => readme,
},
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
index 2f448f7c39..ff8e5faa03 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
@@ -10,8 +10,6 @@ import type { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-opti
import style from './autocomplete-grid-button.scss?lit&inline';
-import '../../icon.js';
-
let autocompleteButtonNextId = 0;
/** Configuration for the attribute to look at if component is nested in a sbb-optgroup */
@@ -81,14 +79,15 @@ export class SbbAutocompleteGridButtonElement extends SbbDisabledMixin(SbbMiniBu
/**
* Used to dispatch a click event when users interact with the button via keyboard (the component does not receive focus).
- * @internal
*/
public dispatchClick(event: KeyboardEvent): void {
return this.dispatchClickEvent(event);
}
- // Event needs to be dispatched from the action element; in autocomplete-grid,
- // the input has always the focus, so the `event.target` on parent class is the input and not the button.
+ /**
+ * Event needs to be dispatched from the action element; in autocomplete-grid,
+ * the input has always the focus, so the `event.target` on parent class is the input and not the button.
+ */
protected override dispatchClickEvent(event: KeyboardEvent): void {
const { altKey, ctrlKey, metaKey, shiftKey } = event;
this.dispatchEvent(
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/readme.md b/src/components/autocomplete-grid/autocomplete-grid-button/readme.md
index 2733f4d72b..cb85b75d14 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/readme.md
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/readme.md
@@ -1,5 +1,5 @@
-The `sbb-autocomplete-grid-button` component provides the same functionality as a native icon-only `` enhanced with the SBB Design.
-It's mainly designed to be used within the [sbb-autocomplete-grid-actions](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid-actions--docs)
+The `sbb-autocomplete-grid-button` component has the same appearance of a [sbb-mini-button](/docs/components-sbb-button-sbb-mini-button--docs),
+but it's only designed to be used within the [sbb-autocomplete-grid-actions](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid-actions--docs)
inside a [sbb-autocomplete-grid](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid--docs).
```html
@@ -65,21 +65,33 @@ The component can be displayed in `disabled` state using the self-named property
If the component is used within a [sbb-autocomplete-grid-optgroup](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid-optgroup--docs),
it can be disabled by disabling the optgroup.
-### Focus outline
-
-Please make sure that the focus outline appears in the correct color if the component is used on a dark background.
-You can set it by re-defining the css var on `sbb-autocomplete-grid-button` or any parent element:
-
-```css
-sbb-autocomplete-grid-button {
- --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
-}
-```
-
## Interactions
When the button is clicked, an event is triggered; the behavior is up to the consumer.
-It's possible to fetch the button's related `sbb-autocomplete-grid-option` using the `optionOnSameRow` method.
+It's possible to fetch the button's related `sbb-autocomplete-grid-option` using the `option` property.
+
+```html
+
+
+
+
+ Option 1
+
+
+
+
+
+
+
+
+```
## Accessibility
@@ -104,6 +116,12 @@ since the focus must always stay on the connected ` `.
| `value` | `value` | public | `string` | | The value of the button element. |
| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. |
+## Methods
+
+| Name | Privacy | Description | Parameters | Return | Inherited From |
+| --------------- | ------- | ----------------------------------------------------------------------------------------------------------------------- | ---------------------- | ------ | -------------- |
+| `dispatchClick` | public | Used to dispatch a click event when users interact with the button via keyboard (the component does not receive focus). | `event: KeyboardEvent` | `void` | |
+
## Events
| Name | Type | Description | Inherited From |
diff --git a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts
index 3a9417e794..1b7e5c2b4d 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts
@@ -1,15 +1,6 @@
-import { withActions } from '@storybook/addon-actions/decorator';
import type { InputType } from '@storybook/types';
-import type {
- Args,
- ArgTypes,
- Decorator,
- Meta,
- StoryContext,
- StoryObj,
-} from '@storybook/web-components';
+import type { Args, ArgTypes, Meta, StoryContext, StoryObj } from '@storybook/web-components';
import { html, nothing, type TemplateResult } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';
import readme from './readme.md?raw';
import '../../form-field.js';
@@ -20,10 +11,6 @@ import '../autocomplete-grid-option.js';
import '../autocomplete-grid-actions.js';
import '../autocomplete-grid-button.js';
-const wrapperStyle = (context: StoryContext): Record => ({
- 'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
-
const label: InputType = {
control: {
type: 'text',
@@ -149,17 +136,15 @@ export const Default: StoryObj = {
};
const meta: Meta = {
- decorators: [
- (story, context) => html`
- ${story()}
- `,
- withActions as Decorator,
- ],
parameters: {
- backgrounds: {
- disable: true,
+ backgroundColor: (context: StoryContext) =>
+ context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
+ actions: {
+ handles: ['click'],
},
docs: {
+ // Setting the iFrame height ensures that the story has enough space when used in the docs section.
+ story: { inline: false, iframeHeight: '500px' },
extractComponentDescription: () => readme,
},
},
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts
index 5b08478801..d56f85ebcc 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts
@@ -12,16 +12,12 @@ import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
import { sbbSpread } from '../../../storybook/helpers/spread.js';
+import { SbbAutocompleteGridOptionElement } from './autocomplete-grid-option.js';
import readme from './readme.md?raw';
import '../../form-field.js';
import '../autocomplete-grid.js';
import '../autocomplete-grid-row.js';
-import './autocomplete-grid-option.js';
-
-const wrapperStyle = (context: StoryContext): Record => ({
- 'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
const preserveIconSpace: InputType = {
control: {
@@ -178,18 +174,18 @@ export const Autocomplete: StoryObj = {
};
const meta: Meta = {
- decorators: [
- (story, context) => html`
-
- ${story()}
-
- `,
- ],
parameters: {
- backgrounds: {
- disable: true,
+ backgroundColor: (context: StoryContext) =>
+ context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
+ actions: {
+ handles: [
+ SbbAutocompleteGridOptionElement.events.selectionChange,
+ SbbAutocompleteGridOptionElement.events.optionSelected,
+ ],
},
docs: {
+ // Setting the iFrame height ensures that the story has enough space when used in the docs section.
+ story: { inline: false, iframeHeight: '500px' },
extractComponentDescription: () => readme,
},
},
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.stories.ts b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.stories.ts
index 336436b965..ef4b6c2376 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.stories.ts
@@ -9,7 +9,6 @@ import type {
StoryObj,
} from '@storybook/web-components';
import { html, type TemplateResult } from 'lit';
-import { styleMap } from 'lit/directives/style-map.js';
import readme from './readme.md?raw';
@@ -18,10 +17,6 @@ import '../autocomplete-grid-actions.js';
import '../autocomplete-grid-option.js';
import '../autocomplete-grid-button.js';
-const wrapperStyle = (context: StoryContext): Record => ({
- 'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
-
const negative: InputType = {
control: {
type: 'boolean',
@@ -64,16 +59,10 @@ export const Default: StoryObj = {
};
const meta: Meta = {
- decorators: [
- (story, context) => html`
- ${story()}
- `,
- withActions as Decorator,
- ],
+ decorators: [withActions as Decorator],
parameters: {
- backgrounds: {
- disable: true,
- },
+ backgroundColor: (context: StoryContext) =>
+ context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
docs: {
extractComponentDescription: () => readme,
},
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
index d64b1bcb6c..aa47ce25ce 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
@@ -35,10 +35,6 @@ const getOption = (event: Event): void => {
(event.currentTarget as HTMLElement).closest('div')!.querySelector('#container')!.prepend(div);
};
-const wrapperStyle = (context: StoryContext): Record => ({
- 'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
-});
-
const textBlockStyle: Readonly = {
position: 'relative',
marginBlockStart: '1rem',
@@ -65,9 +61,10 @@ const textBlock = (): TemplateResult => html`
const aboveDecorator: Decorator = (story) => html`
${story()}
@@ -77,7 +74,7 @@ const aboveDecorator: Decorator = (story) => html`
const scrollDecorator: Decorator = (story) => html`
html`
?disabled=${args.disabled}
?readonly=${args.readonly}
/>
-
+
${createRows1(args.optionIconName, args.buttonIconName, args.disableOption)}
${createRows2(args.buttonIconName, args.disableOption)}
@@ -362,10 +345,7 @@ const OptionGroupTemplate = (args: Args): TemplateResult => html`
?disabled=${args.disabled}
?readonly=${args.readonly}
/>
-
+
${createRows1(args.optionIconName, args.buttonIconName, args.disableOption)}
${createRows2(args.buttonIconName, args.disableOptio1n)}
@@ -516,20 +496,7 @@ export const Scroll: StoryObj = {
};
const meta: Meta = {
- decorators: [
- (story, context) => html`
-
- ${story()}
-
- `,
- withActions as Decorator,
- ],
+ decorators: [withActions as Decorator],
parameters: {
chromatic: { disableSnapshot: false },
actions: {
@@ -543,10 +510,10 @@ const meta: Meta = {
SbbAutocompleteGridOptionElement.events.optionSelected,
],
},
- backgrounds: {
- disable: true,
- },
+ backgroundColor: (context: StoryContext) =>
+ context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
docs: {
+ // Setting the iFrame height ensures that the story has enough space when used in the docs section.
story: { inline: false, iframeHeight: '500px' },
extractComponentDescription: () => readme,
},
diff --git a/src/components/autocomplete-grid/autocomplete-grid/readme.md b/src/components/autocomplete-grid/autocomplete-grid/readme.md
index e431ad2c4a..615d463c06 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/readme.md
+++ b/src/components/autocomplete-grid/autocomplete-grid/readme.md
@@ -147,7 +147,6 @@ using `aria-activedescendant` to support navigation though the autocomplete opti
| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. |
| `origin` | `origin` | public | `string \| HTMLElement \| undefined` | | The element where the autocomplete will attach; accepts both an element's id or an HTMLElement. If not set, it will search for the first 'sbb-form-field' ancestor. |
| `trigger` | `trigger` | public | `string \| HTMLInputElement \| undefined` | | The input element that will trigger the autocomplete opening; accepts both an element's id or an HTMLElement. By default, the autocomplete will open on focus, click, input or `ArrowDown` keypress of the 'trigger' element. If not set, will search for the first 'input' child of a 'sbb-form-field' ancestor. |
-| `disableAnimation` | `disable-animation` | public | `boolean` | `false` | Whether the animation is disabled. |
| `preserveIconSpace` | `preserve-icon-space` | public | `boolean \| undefined` | | Whether the icon space is preserved when no icon is set. |
| `originElement` | - | public | `HTMLElement` | | Returns the element where autocomplete overlay is attached to. |
| `triggerElement` | - | public | `HTMLInputElement \| undefined` | | Returns the trigger element. |
diff --git a/src/components/autocomplete/autocomplete-base-element.ts b/src/components/autocomplete/autocomplete-base-element.ts
index 6325871169..7813a0d952 100644
--- a/src/components/autocomplete/autocomplete-base-element.ts
+++ b/src/components/autocomplete/autocomplete-base-element.ts
@@ -48,10 +48,6 @@ export abstract class SbbAutocompleteBaseElement extends SbbNegativeMixin(
*/
@property() public trigger?: string | HTMLInputElement;
- /** Whether the animation is disabled. */
- @property({ attribute: 'disable-animation', reflect: true, type: Boolean })
- public disableAnimation = false;
-
/** Whether the icon space is preserved when no icon is set. */
@property({ attribute: 'preserve-icon-space', reflect: true, type: Boolean })
public preserveIconSpace?: boolean;
From f7d857294541d2c30f3e12bcf6e53a435b0edfe5 Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Mon, 6 May 2024 09:54:39 +0200
Subject: [PATCH 44/67] fix: merge
---
src/components/core/styles/core.scss | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/components/core/styles/core.scss b/src/components/core/styles/core.scss
index e769fb784f..1f93b0fec6 100644
--- a/src/components/core/styles/core.scss
+++ b/src/components/core/styles/core.scss
@@ -85,6 +85,7 @@ sbb-form-field {
// Hiding components until they are instantiated
:is(
sbb-autocomplete,
+ sbb-autocomplete-grid,
sbb-dialog,
sbb-menu,
sbb-navigation,
From 3bcef043d563eda7a727576518bd4e611b2fabc2 Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Mon, 6 May 2024 10:35:19 +0200
Subject: [PATCH 45/67] fix: a11y refactoring of grid-action
---
src/components/autocomplete-grid.ts | 2 +-
.../autocomplete-grid-actions.ts | 1 -
.../autocomplete-grid-actions.spec.snap.js | 59 -------------------
.../autocomplete-grid-actions.e2e.ts | 20 -------
.../autocomplete-grid-button.spec.ts | 14 ++---
.../autocomplete-grid-button.stories.ts | 6 +-
.../autocomplete-grid-button/readme.md | 16 ++---
.../autocomplete-grid-cell.ts | 1 +
.../autocomplete-grid-cell.spec.snap.js | 59 +++++++++++++++++++
.../autocomplete-grid-cell.e2e.ts | 20 +++++++
.../autocomplete-grid-cell.scss} | 2 +-
.../autocomplete-grid-cell.spec.ts} | 18 +++---
.../autocomplete-grid-cell.stories.ts} | 18 +++---
.../autocomplete-grid-cell.ts} | 14 ++---
.../readme.md | 21 ++++---
.../autocomplete-grid-optgroup.e2e.ts | 14 ++---
.../autocomplete-grid-optgroup.spec.ts | 2 +-
.../autocomplete-grid-optgroup.stories.ts | 6 +-
.../autocomplete-grid-optgroup/readme.md | 8 +--
.../autocomplete-grid-option.e2e.ts | 14 ++---
.../autocomplete-grid-option.spec.ts | 2 +-
.../autocomplete-grid-option/readme.md | 8 +--
.../autocomplete-grid-row.spec.snap.js | 6 +-
.../autocomplete-grid-row.spec.ts | 6 +-
.../autocomplete-grid-row.stories.ts | 10 ++--
.../autocomplete-grid-row.ts | 2 +-
.../autocomplete-grid-row/readme.md | 18 +++---
.../autocomplete-grid.spec.snap.js | 18 +++---
.../autocomplete-grid.e2e.ts | 12 ++--
.../autocomplete-grid.spec.ts | 10 ++--
.../autocomplete-grid.stories.ts | 12 ++--
.../autocomplete-grid/readme.md | 26 ++++----
32 files changed, 224 insertions(+), 221 deletions(-)
delete mode 100644 src/components/autocomplete-grid/autocomplete-grid-actions.ts
delete mode 100644 src/components/autocomplete-grid/autocomplete-grid-actions/__snapshots__/autocomplete-grid-actions.spec.snap.js
delete mode 100644 src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.e2e.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-cell.ts
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-cell/__snapshots__/autocomplete-grid-cell.spec.snap.js
create mode 100644 src/components/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.e2e.ts
rename src/components/autocomplete-grid/{autocomplete-grid-actions/autocomplete-grid-actions.scss => autocomplete-grid-cell/autocomplete-grid-cell.scss} (90%)
rename src/components/autocomplete-grid/{autocomplete-grid-actions/autocomplete-grid-actions.spec.ts => autocomplete-grid-cell/autocomplete-grid-cell.spec.ts} (68%)
rename src/components/autocomplete-grid/{autocomplete-grid-actions/autocomplete-grid-actions.stories.ts => autocomplete-grid-cell/autocomplete-grid-cell.stories.ts} (92%)
rename src/components/autocomplete-grid/{autocomplete-grid-actions/autocomplete-grid-actions.ts => autocomplete-grid-cell/autocomplete-grid-cell.ts} (55%)
rename src/components/autocomplete-grid/{autocomplete-grid-actions => autocomplete-grid-cell}/readme.md (65%)
diff --git a/src/components/autocomplete-grid.ts b/src/components/autocomplete-grid.ts
index e6b5345c40..e8733d6230 100644
--- a/src/components/autocomplete-grid.ts
+++ b/src/components/autocomplete-grid.ts
@@ -1,6 +1,6 @@
export * from './autocomplete-grid/autocomplete-grid.js';
-export * from './autocomplete-grid/autocomplete-grid-actions.js';
export * from './autocomplete-grid/autocomplete-grid-button.js';
+export * from './autocomplete-grid/autocomplete-grid-cell.js';
export * from './autocomplete-grid/autocomplete-grid-optgroup.js';
export * from './autocomplete-grid/autocomplete-grid-option.js';
export * from './autocomplete-grid/autocomplete-grid-row.js';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions.ts b/src/components/autocomplete-grid/autocomplete-grid-actions.ts
deleted file mode 100644
index 10716614bb..0000000000
--- a/src/components/autocomplete-grid/autocomplete-grid-actions.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './autocomplete-grid-actions/autocomplete-grid-actions.js';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/__snapshots__/autocomplete-grid-actions.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-actions/__snapshots__/autocomplete-grid-actions.spec.snap.js
deleted file mode 100644
index 96b958bddd..0000000000
--- a/src/components/autocomplete-grid/autocomplete-grid-actions/__snapshots__/autocomplete-grid-actions.spec.snap.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/* @web/test-runner snapshot v1 */
-export const snapshots = {};
-
-snapshots["sbb-autocomplete-grid-actions Dom"] =
-`
-
-
-
-`;
-/* end snapshot sbb-autocomplete-grid-actions Dom */
-
-snapshots["sbb-autocomplete-grid-actions ShadowDom"] =
-`
-
-
-
-`;
-/* end snapshot sbb-autocomplete-grid-actions ShadowDom */
-
-snapshots["sbb-autocomplete-grid-actions A11y tree Chrome"] =
-`
- {
- "role": "WebArea",
- "name": "",
- "children": [
- {
- "role": "button",
- "name": ""
- }
- ]
-}
-
-`;
-/* end snapshot sbb-autocomplete-grid-actions A11y tree Chrome */
-
-snapshots["sbb-autocomplete-grid-actions A11y tree Firefox"] =
-`
- {
- "role": "document",
- "name": "",
- "children": [
- {
- "role": "button",
- "name": ""
- }
- ]
-}
-
-`;
-/* end snapshot sbb-autocomplete-grid-actions A11y tree Firefox */
-
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.e2e.ts b/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.e2e.ts
deleted file mode 100644
index 0f74c968d7..0000000000
--- a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.e2e.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { assert } from '@open-wc/testing';
-import { html } from 'lit/static-html.js';
-
-import { fixture } from '../../core/testing/private.js';
-
-import { SbbAutocompleteGridActionsElement } from './autocomplete-grid-actions.js';
-
-describe('sbb-autocomplete-grid-actions', () => {
- let element: SbbAutocompleteGridActionsElement;
-
- beforeEach(async () => {
- element = await fixture(html` `, {
- modules: ['./autocomplete-grid-actions.ts'],
- });
- });
-
- it('renders', async () => {
- assert.instanceOf(element, SbbAutocompleteGridActionsElement);
- });
-});
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts
index 7b0dcbf7b8..41c7958c1c 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts
@@ -8,7 +8,7 @@ import type { SbbAutocompleteGridButtonElement } from './autocomplete-grid-butto
import '../../form-field.js';
import '../autocomplete-grid.js';
import '../autocomplete-grid-row.js';
-import '../autocomplete-grid-actions.js';
+import '../autocomplete-grid-cell.js';
import './autocomplete-grid-button.js';
describe('sbb-autocomplete-grid-button', () => {
@@ -19,9 +19,9 @@ describe('sbb-autocomplete-grid-button', () => {
await fixture(html`
-
+
-
+
@@ -46,12 +46,12 @@ describe('sbb-autocomplete-grid-button', () => {
await fixture(html`
-
+
-
+
@@ -78,9 +78,9 @@ describe('sbb-autocomplete-grid-button', () => {
-
+
-
+
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts
index 1519f772ec..5fb0787306 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts
@@ -14,7 +14,7 @@ import { sbbSpread } from '../../../storybook/helpers/spread.js';
import readme from './readme.md?raw';
import '../autocomplete-grid-row.js';
-import '../autocomplete-grid-actions.js';
+import '../autocomplete-grid-cell.js';
import './autocomplete-grid-button.js';
const type: InputType = {
@@ -124,13 +124,13 @@ const defaultArgs: Args = {
const Template = ({ active, focusVisible, ...args }: Args): TemplateResult => html`
-
+
-
+
`;
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/readme.md b/src/components/autocomplete-grid/autocomplete-grid-button/readme.md
index cb85b75d14..e374e267fb 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/readme.md
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/readme.md
@@ -1,5 +1,5 @@
The `sbb-autocomplete-grid-button` component has the same appearance of a [sbb-mini-button](/docs/components-sbb-button-sbb-mini-button--docs),
-but it's only designed to be used within the [sbb-autocomplete-grid-actions](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid-actions--docs)
+but it's only designed to be used within the [sbb-autocomplete-grid-cell](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid-cell--docs)
inside a [sbb-autocomplete-grid](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid--docs).
```html
@@ -8,15 +8,15 @@ inside a [sbb-autocomplete-grid](/docs/components-sbb-autocomplete-grid-sbb-auto
Option 1
-
+
-
+
Option 2
-
+
-
+
@@ -76,12 +76,12 @@ It's possible to fetch the button's related `sbb-autocomplete-grid-option` using
Option 1
-
+
-
+
@@ -96,7 +96,7 @@ It's possible to fetch the button's related `sbb-autocomplete-grid-option` using
## Accessibility
The `sbb-autocomplete-grid` follows the combobox `grid` pattern;
-this means that the `sbb-autocomplete-grid-button` has a `button` role and its `id` is set based on the `sbb-autocomplete-grid-actions`'s `id`,
+this means that the `sbb-autocomplete-grid-button` has a `button` role and its `id` is set based on the `sbb-autocomplete-grid-cell`'s `id`,
which is needed to correctly set the `aria-activedescendant` on the related `input`.
Moreover, the `sbb-autocomplete-grid-button` can't be focused via Tab due to the used pattern,
since the focus must always stay on the connected ` `.
diff --git a/src/components/autocomplete-grid/autocomplete-grid-cell.ts b/src/components/autocomplete-grid/autocomplete-grid-cell.ts
new file mode 100644
index 0000000000..4734c19a11
--- /dev/null
+++ b/src/components/autocomplete-grid/autocomplete-grid-cell.ts
@@ -0,0 +1 @@
+export * from './autocomplete-grid-cell/autocomplete-grid-cell.js';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-cell/__snapshots__/autocomplete-grid-cell.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-cell/__snapshots__/autocomplete-grid-cell.spec.snap.js
new file mode 100644
index 0000000000..a596f6b849
--- /dev/null
+++ b/src/components/autocomplete-grid/autocomplete-grid-cell/__snapshots__/autocomplete-grid-cell.spec.snap.js
@@ -0,0 +1,59 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-autocomplete-grid-cell Dom"] =
+`
+
+
+
+`;
+/* end snapshot sbb-autocomplete-grid-cell Dom */
+
+snapshots["sbb-autocomplete-grid-cell ShadowDom"] =
+`
+
+
+
+`;
+/* end snapshot sbb-autocomplete-grid-cell ShadowDom */
+
+snapshots["sbb-autocomplete-grid-cell A11y tree Chrome"] =
+`
+ {
+ "role": "WebArea",
+ "name": "",
+ "children": [
+ {
+ "role": "button",
+ "name": ""
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-autocomplete-grid-cell A11y tree Chrome */
+
+snapshots["sbb-autocomplete-grid-cell A11y tree Firefox"] =
+`
+ {
+ "role": "document",
+ "name": "",
+ "children": [
+ {
+ "role": "button",
+ "name": ""
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-autocomplete-grid-cell A11y tree Firefox */
+
diff --git a/src/components/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.e2e.ts b/src/components/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.e2e.ts
new file mode 100644
index 0000000000..d9a3538993
--- /dev/null
+++ b/src/components/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.e2e.ts
@@ -0,0 +1,20 @@
+import { assert } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { fixture } from '../../core/testing/private.js';
+
+import { SbbAutocompleteGridCellElement } from './autocomplete-grid-cell.js';
+
+describe('sbb-autocomplete-grid-cell', () => {
+ let element: SbbAutocompleteGridCellElement;
+
+ beforeEach(async () => {
+ element = await fixture(html` `, {
+ modules: ['./autocomplete-grid-cell.ts'],
+ });
+ });
+
+ it('renders', async () => {
+ assert.instanceOf(element, SbbAutocompleteGridCellElement);
+ });
+});
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.scss b/src/components/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.scss
similarity index 90%
rename from src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.scss
rename to src/components/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.scss
index 5156c8c35c..558678f4cc 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.scss
+++ b/src/components/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.scss
@@ -7,7 +7,7 @@
display: block;
}
-.sbb-autocomplete-grid-action {
+.sbb-autocomplete-grid-cell {
display: flex;
column-gap: var(--sbb-spacing-fixed-6x);
}
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.spec.ts
similarity index 68%
rename from src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.spec.ts
rename to src/components/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.spec.ts
index 959549606c..d35626bdcb 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.spec.ts
@@ -3,27 +3,27 @@ import { html } from 'lit/static-html.js';
import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
-import type { SbbAutocompleteGridActionsElement } from './autocomplete-grid-actions.js';
+import type { SbbAutocompleteGridCellElement } from './autocomplete-grid-cell.js';
import '../autocomplete-grid.js';
import '../autocomplete-grid-row.js';
-import './autocomplete-grid-actions.js';
+import './autocomplete-grid-cell.js';
import '../autocomplete-grid-button.js';
-describe('sbb-autocomplete-grid-actions', () => {
- let root: SbbAutocompleteGridActionsElement;
+describe('sbb-autocomplete-grid-cell', () => {
+ let root: SbbAutocompleteGridCellElement;
beforeEach(async () => {
root = (
await fixture(html`
-
+
-
+
`)
- ).querySelector('sbb-autocomplete-grid-actions')!;
+ ).querySelector('sbb-autocomplete-grid-cell')!;
});
it('Dom', async () => {
@@ -35,8 +35,8 @@ describe('sbb-autocomplete-grid-actions', () => {
});
testA11yTreeSnapshot(html`
-
+
-
+
`);
});
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.stories.ts b/src/components/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.stories.ts
similarity index 92%
rename from src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.stories.ts
rename to src/components/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.stories.ts
index 4e82b4b9e6..9398802f26 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.stories.ts
@@ -15,7 +15,7 @@ import { sbbSpread } from '../../../storybook/helpers/spread.js';
import readme from './readme.md?raw';
import '../autocomplete-grid-row.js';
-import './autocomplete-grid-actions.js';
+import './autocomplete-grid-cell.js';
import '../autocomplete-grid-button.js';
const numberOfButtons: InputType = {
@@ -50,17 +50,17 @@ const defaultArgs: Args = {
const Template = ({ numberOfButtons, ...args }: Args): TemplateResult => html`
-
- ${repeat(
- new Array(numberOfButtons),
- (_, i) => html`
+ ${repeat(
+ new Array(numberOfButtons),
+ (_, i) => html`
+
- `,
- )}
-
+
+ `,
+ )}
`;
@@ -124,7 +124,7 @@ const meta: Meta = {
extractComponentDescription: () => readme,
},
},
- title: 'components/sbb-autocomplete-grid/sbb-autocomplete-grid-actions',
+ title: 'components/sbb-autocomplete-grid/sbb-autocomplete-grid-cell',
};
export default meta;
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.ts b/src/components/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.ts
similarity index 55%
rename from src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.ts
rename to src/components/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.ts
index a837f4d05d..e803c70c44 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-actions/autocomplete-grid-actions.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.ts
@@ -3,23 +3,23 @@ import { customElement } from 'lit/decorators.js';
import { hostAttributes } from '../../core/decorators.js';
-import style from './autocomplete-grid-actions.scss?lit&inline';
+import style from './autocomplete-grid-cell.scss?lit&inline';
/**
- * A wrapper component for autocomplete-grid action buttons.
+ * A wrapper component for autocomplete-grid action button.
*
- * @slot - Use the unnamed slot to add `sbb-autocomplete-grid-button` elements.
+ * @slot - Use the unnamed slot to add a `sbb-autocomplete-grid-button` element.
*/
-@customElement('sbb-autocomplete-grid-actions')
+@customElement('sbb-autocomplete-grid-cell')
@hostAttributes({
role: 'gridcell',
})
-export class SbbAutocompleteGridActionsElement extends LitElement {
+export class SbbAutocompleteGridCellElement extends LitElement {
public static override styles: CSSResultGroup = style;
protected override render(): TemplateResult {
return html`
-
+
`;
@@ -29,6 +29,6 @@ export class SbbAutocompleteGridActionsElement extends LitElement {
declare global {
interface HTMLElementTagNameMap {
// eslint-disable-next-line @typescript-eslint/naming-convention
- 'sbb-autocomplete-grid-actions': SbbAutocompleteGridActionsElement;
+ 'sbb-autocomplete-grid-cell': SbbAutocompleteGridCellElement;
}
}
diff --git a/src/components/autocomplete-grid/autocomplete-grid-actions/readme.md b/src/components/autocomplete-grid/autocomplete-grid-cell/readme.md
similarity index 65%
rename from src/components/autocomplete-grid/autocomplete-grid-actions/readme.md
rename to src/components/autocomplete-grid/autocomplete-grid-cell/readme.md
index 96a175fef3..f8f0b95427 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-actions/readme.md
+++ b/src/components/autocomplete-grid/autocomplete-grid-cell/readme.md
@@ -1,4 +1,4 @@
-The `sbb-autocomplete-grid-actions` component wraps one of more [sbb-autocomplete-grid-button](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid-button--docs)
+The `sbb-autocomplete-grid-cell` component wraps one [sbb-autocomplete-grid-button](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid-button--docs)
inside a [sbb-autocomplete-grid](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid--docs).
To properly work, it must be used within a [sbb-autocomplete-grid-row](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid-row--docs).
@@ -8,16 +8,15 @@ To properly work, it must be used within a [sbb-autocomplete-grid-row](/docs/com
Option 1
-
+
-
+
Option 2
-
-
+
-
+
@@ -30,14 +29,14 @@ The component has an unnamed slot which is used to project the `sbb-autocomplete
## Accessibility
The `sbb-autocomplete-grid` follows the combobox `grid` pattern;
-this means that the `sbb-autocomplete-grid-actions` has a `gridcell` role and its child would receive an `id`
-based on the `sbb-autocomplete-grid-actions`'s `id`,
+this means that the `sbb-autocomplete-grid-cell` has a `gridcell` role and its child would receive an `id`
+based on the `sbb-autocomplete-grid-cell`'s `id`,
which is needed to correctly set the `aria-activedescendant` on the related `input`.
## Slots
-| Name | Description |
-| ---- | -------------------------------------------------------------------- |
-| | Use the unnamed slot to add `sbb-autocomplete-grid-button` elements. |
+| Name | Description |
+| ---- | --------------------------------------------------------------------- |
+| | Use the unnamed slot to add a `sbb-autocomplete-grid-button` element. |
diff --git a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.e2e.ts b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.e2e.ts
index 60a9485224..654f7d61b3 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.e2e.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.e2e.ts
@@ -8,7 +8,7 @@ import type { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-opti
import { SbbAutocompleteGridOptgroupElement } from './autocomplete-grid-optgroup.js';
import '../autocomplete-grid.js';
import '../autocomplete-grid-row.js';
-import '../autocomplete-grid-actions.js';
+import '../autocomplete-grid-cell.js';
import '../autocomplete-grid-button.js';
import '../autocomplete-grid-option.js';
@@ -23,25 +23,25 @@ describe(`sbb-autocomplete-grid-optgroup with ${fixture.name}`, () => {
Option 1
-
+
-
+
Option 2
-
+
-
+
Option 3
-
+
-
+
`,
diff --git a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.spec.ts
index a0bae0aa50..d3526eff21 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.spec.ts
@@ -10,7 +10,7 @@ import './autocomplete-grid-optgroup.js';
import '../autocomplete-grid.js';
import '../autocomplete-grid-row.js';
import '../autocomplete-grid-option.js';
-import '../autocomplete-grid-actions.js';
+import '../autocomplete-grid-cell.js';
import '../autocomplete-grid-button.js';
import type { SbbAutocompleteGridOptgroupElement } from './autocomplete-grid-optgroup.js';
diff --git a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts
index 1b7e5c2b4d..9c63ab2652 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts
@@ -8,7 +8,7 @@ import './autocomplete-grid-optgroup.js';
import '../autocomplete-grid.js';
import '../autocomplete-grid-row.js';
import '../autocomplete-grid-option.js';
-import '../autocomplete-grid-actions.js';
+import '../autocomplete-grid-cell.js';
import '../autocomplete-grid-button.js';
const label: InputType = {
@@ -101,12 +101,12 @@ const createOptions = (args: Args): TemplateResult[] =>
icon-name=${args['icon-name'] || nothing}
>${`${args.value} ${i + 1}`}
-
+
-
+
`;
});
diff --git a/src/components/autocomplete-grid/autocomplete-grid-optgroup/readme.md b/src/components/autocomplete-grid/autocomplete-grid-optgroup/readme.md
index bdca21b3a6..18947fa74f 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-optgroup/readme.md
+++ b/src/components/autocomplete-grid/autocomplete-grid-optgroup/readme.md
@@ -10,15 +10,15 @@ A [sbb-divider](/docs/components-sbb-divider--docs) is displayed at the bottom o
Option 1
-
+
-
+
Option 2
-
+
-
+
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.e2e.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.e2e.ts
index 373dec0387..021c0d6143 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.e2e.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.e2e.ts
@@ -13,7 +13,7 @@ import '../../form-field.js';
import '../autocomplete-grid.js';
import '../autocomplete-grid-optgroup.js';
import '../autocomplete-grid-row.js';
-import '../autocomplete-grid-actions.js';
+import '../autocomplete-grid-cell.js';
import '../autocomplete-grid-button.js';
describe(`sbb-autocomplete-grid-option with ${fixture.name}`, () => {
@@ -27,15 +27,15 @@ describe(`sbb-autocomplete-grid-option with ${fixture.name}`, () => {
Option 1
-
+
-
+
Option 2
-
+
-
+
@@ -181,11 +181,11 @@ describe(`sbb-autocomplete-grid-option with ${fixture.name}`, () => {
Option 1
-
+
-
+
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts
index ac2bc6a9bc..011902184e 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts
@@ -7,7 +7,7 @@ import type { SbbAutocompleteGridOptionElement } from './autocomplete-grid-optio
import '../autocomplete-grid.js';
import '../autocomplete-grid-row.js';
import './autocomplete-grid-option.js';
-import '../autocomplete-grid-actions.js';
+import '../autocomplete-grid-cell.js';
import '../autocomplete-grid-button.js';
describe('sbb-autocomplete-grid-option', () => {
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/readme.md b/src/components/autocomplete-grid/autocomplete-grid-option/readme.md
index c26336a1c1..1af4f54e2f 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/readme.md
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/readme.md
@@ -7,15 +7,15 @@ The `sbb-autocomplete-grid-option` is a component which can be used to display i
Option 1
-
+
-
+
Option 2
-
+
-
+
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.spec.snap.js
index 44bec0c6c1..0638d24629 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.spec.snap.js
@@ -15,7 +15,7 @@ snapshots["sbb-autocomplete-grid-row Dom"] =
>
Option 1
-
+
-
+
`;
/* end snapshot sbb-autocomplete-grid-row Dom */
@@ -39,7 +39,7 @@ snapshots["sbb-autocomplete-grid-row ShadowDom"] =
`;
/* end snapshot sbb-autocomplete-grid-row ShadowDom */
-snapshots["sbb-autocomplete-grid-row A11y tree Chrome"] =
+snapshots["sbb-autocomplete-grid-row A11y tree Chrome"] =
`
{
"role": "WebArea",
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.spec.ts
index 344904838f..d7adcf2906 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.spec.ts
@@ -8,7 +8,7 @@ import type { SbbAutocompleteGridRowElement } from './autocomplete-grid-row.js';
import '../autocomplete-grid.js';
import './autocomplete-grid-row.js';
import '../autocomplete-grid-option.js';
-import '../autocomplete-grid-actions.js';
+import '../autocomplete-grid-cell.js';
import '../autocomplete-grid-button.js';
describe('sbb-autocomplete-grid-row', () => {
@@ -16,9 +16,9 @@ describe('sbb-autocomplete-grid-row', () => {
const row: TemplateResult = html`
Option 1
-
+
-
+
`;
beforeEach(async () => {
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.stories.ts b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.stories.ts
index ef4b6c2376..28c2051a7c 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.stories.ts
@@ -13,7 +13,7 @@ import { html, type TemplateResult } from 'lit';
import readme from './readme.md?raw';
import './autocomplete-grid-row.js';
-import '../autocomplete-grid-actions.js';
+import '../autocomplete-grid-cell.js';
import '../autocomplete-grid-option.js';
import '../autocomplete-grid-button.js';
@@ -34,21 +34,21 @@ const defaultArgs: Args = {
const Template = ({ negative }: Args): TemplateResult => html`
Opt 1
-
+
-
+
Opt 2
-
+
-
+
`;
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.ts b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.ts
index 92a26199f0..706102d9fb 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.ts
@@ -10,7 +10,7 @@ let autocompleteRowNextId = 0;
/**
* The component is used as a wrapper for options and action buttons.
*
- * @slot - Use the unnamed slot to add a `sbb-autocomplete-grid-option` and a `sbb-autocomplete-grid-actions` with one or more `sbb-autocomplete-grid-button`.
+ * @slot - Use the unnamed slot to add a `sbb-autocomplete-grid-option` and a `sbb-autocomplete-grid-cell` with one or more `sbb-autocomplete-grid-button`.
*/
@customElement('sbb-autocomplete-grid-row')
@hostAttributes({
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/readme.md b/src/components/autocomplete-grid/autocomplete-grid-row/readme.md
index b011ca7b02..1138a300c7 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/readme.md
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/readme.md
@@ -1,5 +1,5 @@
The `sbb-autocomplete-grid-row` is a wrapper for both [sbb-autocomplete-grid-option](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid-option--docs)
-and [sbb-autocomplete-grid-actions](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid-actions--docs) within the
+and [sbb-autocomplete-grid-cell](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid-cell--docs) within the
[sbb-autocomplete-grid](/docs/components-sbb-autocomplete-sbb-autocomplete-grid--docs) component.
```html
@@ -8,15 +8,15 @@ and [sbb-autocomplete-grid-actions](/docs/components-sbb-autocomplete-grid-sbb-a
Option 1
-
+
-
+
Option 2
-
+
-
+
@@ -24,7 +24,7 @@ and [sbb-autocomplete-grid-actions](/docs/components-sbb-autocomplete-grid-sbb-a
## Slots
-The component has an unnamed slot which is used to project `sbb-autocomplete-grid-option` and `sbb-autocomplete-grid-actions`.
+The component has an unnamed slot which is used to project `sbb-autocomplete-grid-option` and `sbb-autocomplete-grid-cell`.
## Accessibility
@@ -35,6 +35,6 @@ this means that the `sbb-autocomplete-grid-row` has a `row` role and its child w
## Slots
-| Name | Description |
-| ---- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| | Use the unnamed slot to add a `sbb-autocomplete-grid-option` and a `sbb-autocomplete-grid-actions` with one or more `sbb-autocomplete-grid-button`. |
+| Name | Description |
+| ---- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| | Use the unnamed slot to add a `sbb-autocomplete-grid-option` and a `sbb-autocomplete-grid-cell` with one or more `sbb-autocomplete-grid-button`. |
diff --git a/src/components/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.spec.snap.js
index 8dd8629b84..49a888f694 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.spec.snap.js
+++ b/src/components/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.spec.snap.js
@@ -18,7 +18,7 @@ snapshots["sbb-autocomplete-grid Chrome-Firefox Dom"] =
>
Option 1
-
+
-
+
Option 2
-
+
-
+
`;
@@ -118,7 +118,7 @@ snapshots["sbb-autocomplete-grid Chrome-Firefox A11y tree Firefox"] =
`;
/* end snapshot sbb-autocomplete-grid Chrome-Firefox A11y tree Firefox */
-snapshots["sbb-autocomplete-grid Chrome-Firefox A11y tree Chrome"] =
+snapshots["sbb-autocomplete-grid Chrome-Firefox A11y tree Chrome"] =
`
{
"role": "WebArea",
@@ -159,7 +159,7 @@ snapshots["sbb-autocomplete-grid Safari Dom"] =
>
Option 1
-
+
-
+
Option 2
-
+
-
+
`;
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.e2e.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.e2e.ts
index 6edbed2b13..ae87437b56 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.e2e.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.e2e.ts
@@ -11,7 +11,7 @@ import { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option.js
import { SbbAutocompleteGridElement } from './autocomplete-grid.js';
import '../autocomplete-grid-row.js';
-import '../autocomplete-grid-actions.js';
+import '../autocomplete-grid-cell.js';
import '../autocomplete-grid-button.js';
describe(`sbb-autocomplete-grid with ${fixture.name}`, () => {
@@ -29,27 +29,29 @@ describe(`sbb-autocomplete-grid with ${fixture.name}`, () => {
Option 1
-
+
-
+
Option 2
-
+
+
+
-
+
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts
index d8644c7951..cbf78a1b04 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts
@@ -10,7 +10,7 @@ import type { SbbAutocompleteGridElement } from './autocomplete-grid.js';
import './autocomplete-grid.js';
import '../autocomplete-grid-row.js';
import '../autocomplete-grid-option.js';
-import '../autocomplete-grid-actions.js';
+import '../autocomplete-grid-cell.js';
import '../autocomplete-grid-button.js';
import '../../form-field/form-field/form-field.js';
@@ -25,15 +25,15 @@ describe('sbb-autocomplete-grid', () => {
Option 1
-
+
-
+
Option 2
-
+
-
+
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
index aa47ce25ce..60504d45ec 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
@@ -24,7 +24,7 @@ import readme from './readme.md?raw';
import '../autocomplete-grid-row.js';
import '../autocomplete-grid-optgroup.js';
-import '../autocomplete-grid-actions.js';
+import '../autocomplete-grid-cell.js';
import '../autocomplete-grid-button.js';
import '../../form-field.js';
@@ -257,14 +257,14 @@ const createRows1 = (
?disabled=${disableOption && i === 1}
>${`Option 1-${i + 1}`}
-
+
getOption(event)}
>
-
+
`,
)}
@@ -278,20 +278,22 @@ const createRows2 = (buttonIconName: string, disableOption: boolean): TemplateRe
${`Option 2-${i + 1}`}
-
+
getOption(event)}
>
+
+
getOption(event)}
>
-
+
`,
)}
diff --git a/src/components/autocomplete-grid/autocomplete-grid/readme.md b/src/components/autocomplete-grid/autocomplete-grid/readme.md
index 615d463c06..65a73a5e4e 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/readme.md
+++ b/src/components/autocomplete-grid/autocomplete-grid/readme.md
@@ -7,7 +7,7 @@ The component is strictly connected to:
- the [sbb-autocomplete-grid-row](/docs/components-sbb-autocomplete-sbb-autocomplete-grid-row--docs), which is a wrapper for both option and buttons;
- the [sbb-autocomplete-grid-option](/docs/components-sbb-autocomplete-sbb-autocomplete-grid-option--docs), which displays a selectable option within a panel;
-- the [sbb-autocomplete-grid-actions](/docs/components-sbb-autocomplete-sbb-autocomplete-grid-actions--docs), which is a wrapper for button elements;
+- the [sbb-autocomplete-grid-cell](/docs/components-sbb-autocomplete-sbb-autocomplete-grid-cell--docs), which is a wrapper a for button element;
- the [sbb-autocomplete-grid-button](/docs/components-sbb-autocomplete-sbb-autocomplete-grid-button--docs), which displays a button within a row;
- the [sbb-autocomplete-grid-optgroup](/docs/components-sbb-autocomplete-sbb-autocomplete-grid-optgroup--docs), which can be used to group more row within a group.
@@ -25,15 +25,15 @@ Both accept an id or an element reference.
Option 1
-
+
-
+
Option 2
-
+
-
+
```
@@ -52,15 +52,15 @@ it will automatically connect to the native ` ` as trigger and will displa
Option 1
-
+
-
+
Option 2
-
+
-
+
@@ -88,18 +88,18 @@ The displayed `sbb-autocomplete-grid-option` can be collected into groups using
Option 1
-
+
-
+
...
Option 100
-
+
-
+
...
From 2d4ae5774d6df6cf1592a22896af7a4fe1bf09bb Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Mon, 6 May 2024 10:58:40 +0200
Subject: [PATCH 46/67] chore: story improvement
---
.../autocomplete-grid/autocomplete-grid.stories.ts | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
index 60504d45ec..ab6f1a4a23 100644
--- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
@@ -348,12 +348,16 @@ const OptionGroupTemplate = (args: Args): TemplateResult => html`
?readonly=${args.readonly}
/>
+
+ Current location
+
${createRows1(args.optionIconName, args.buttonIconName, args.disableOption)}
- ${createRows2(args.buttonIconName, args.disableOptio1n)}
- ${createRows1(args.optionIconName, args.buttonIconName, args.disableOption)}
+ ${createRows2(args.buttonIconName, args.disableOptio1n)}
From b77607c8a9e3bfb46e44b86476af55fab73519dc Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Tue, 7 May 2024 12:41:07 +0200
Subject: [PATCH 47/67] fix: tab-focused state
---
.../autocomplete-grid-option.scss | 15 +++++++++++
.../autocomplete-grid-option.ts | 3 ---
.../autocomplete-grid-row.scss | 27 +++----------------
3 files changed, 19 insertions(+), 26 deletions(-)
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss
index dc247272dd..acb964f983 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.scss
@@ -7,10 +7,17 @@
--sbb-option-color: var(--sbb-color-charcoal);
--sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);
--sbb-option-icon-color: var(--sbb-color-metal);
+ --sbb-option-border-radius: var(--sbb-border-radius-4x);
+ --sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);
+ --sbb-option-padding-block: calc(var(--sbb-spacing-fixed-2x) + var(--sbb-border-width-2x));
display: block;
}
+:host([active]) {
+ --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
+}
+
:host([data-negative]) {
--sbb-option-color: var(--sbb-color-milk);
--sbb-option-icon-color: var(--sbb-color-smoke);
@@ -30,7 +37,15 @@
align-items: center;
column-gap: var(--sbb-option-column-gap);
justify-content: start;
+ padding-block: var(--sbb-option-padding-block);
+ padding-inline: var(--sbb-option-padding-inline);
color: var(--sbb-option-color);
+
+ :host([active]) & {
+ @include sbb.focus-outline;
+
+ border-radius: var(--sbb-option-border-radius);
+ }
}
.sbb-option__label--highlight {
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
index d685a46af5..89d85cd3f2 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
@@ -45,9 +45,6 @@ export class SbbAutocompleteGridOptionElement extends SbbOptionBaseElement {
);
public override willUpdate(changedProperties: PropertyValues): void {
- if (changedProperties.has('active')) {
- this.closest?.('sbb-autocomplete-grid-row')?.toggleAttribute('data-active', this.active);
- }
if (changedProperties.has('disabled')) {
this.closest?.('sbb-autocomplete-grid-row')?.toggleAttribute(
'data-disabled',
diff --git a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.scss b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.scss
index 3edb0714a4..c6a77c7f8c 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.scss
+++ b/src/components/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.scss
@@ -10,10 +10,7 @@
--sbb-autocomplete-grid-row-background-color-active: var(--sbb-color-cloud);
--sbb-autocomplete-grid-row-disabled-border-color: var(--sbb-color-graphite);
--sbb-autocomplete-grid-row-disabled-background-color: var(--sbb-color-milk);
- --sbb-autocomplete-grid-row-padding-inline: var(--sbb-spacing-responsive-xxxs);
- --sbb-autocomplete-grid-row-padding-block: calc(
- var(--sbb-spacing-fixed-2x) + var(--sbb-border-width-2x)
- );
+ --sbb-autocomplete-grid-row-padding-inline-end: var(--sbb-spacing-responsive-xxxs);
--sbb-autocomplete-grid-row-justify-content: space-between;
--sbb-autocomplete-grid-row-min-height: var(--sbb-size-button-m-min-height);
--sbb-autocomplete-grid-row-cursor: pointer;
@@ -33,10 +30,6 @@
--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
}
-:host([data-active]) {
- --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
-}
-
:host(:hover:not([data-disabled])) {
@include sbb.hover-mq($hover: true) {
--sbb-autocomplete-grid-row-background-color: var(
@@ -45,12 +38,6 @@
}
}
-:host([data-active]):not([data-disabled]) {
- --sbb-autocomplete-grid-row-background-color: var(
- --sbb-autocomplete-grid-row-background-color-active
- );
-}
-
:host([data-disabled]) {
--sbb-autocomplete-grid-row-cursor: default;
@@ -61,27 +48,21 @@
::slotted(sbb-autocomplete-grid-option) {
flex: 1 1 auto;
+ margin-right: calc(-1 * var(--sbb-spacing-fixed-2x));
}
.sbb-autocomplete-grid-row {
display: flex;
align-items: center;
- padding-inline: var(--sbb-autocomplete-grid-row-padding-inline);
- padding-block: var(--sbb-autocomplete-grid-row-padding-block);
+ padding-inline-end: var(--sbb-autocomplete-grid-row-padding-inline-end);
justify-content: var(--sbb-autocomplete-grid-row-justify-content);
- gap: var(--sbb-spacing-fixed-2x);
+ gap: var(--sbb-spacing-fixed-6x);
color: var(--sbb-autocomplete-grid-row-color);
background-color: var(--sbb-autocomplete-grid-row-background-color);
cursor: var(--sbb-autocomplete-grid-row-cursor);
-webkit-tap-highlight-color: transparent;
-webkit-text-fill-color: var(--sbb-autocomplete-grid-row-color);
- :host([data-active]) & {
- @include sbb.focus-outline;
-
- border-radius: var(--sbb-autocomplete-grid-row-border-radius);
- }
-
// Add inner border and background for disabled option when it's not multiple
:host([data-disabled]) & {
position: relative;
From 6d2a1adaa9c91a059e4c2e3304779acbbe2b09b2 Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Thu, 30 May 2024 12:39:07 +0200
Subject: [PATCH 48/67] fix: disabled state
---
.../autocomplete-grid-button.ts | 8 ++++++--
.../autocomplete-grid-optgroup.e2e.ts | 8 +++++++-
.../autocomplete-grid-option.ts | 13 +++++++++----
src/components/option/option/option-base-element.ts | 4 ++--
4 files changed, 24 insertions(+), 9 deletions(-)
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
index 3028c98482..15b8899975 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
@@ -1,5 +1,5 @@
import type { CSSResultGroup, PropertyValues } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators.js';
import { SbbMiniButtonBaseElement } from '../../core/base-elements.js';
import { hostAttributes } from '../../core/decorators.js';
@@ -38,7 +38,11 @@ export class SbbAutocompleteGridButtonElement extends SbbDisabledMixin(SbbMiniBu
}
/** Whether the component must be set disabled due disabled attribute on sbb-optgroup. */
- @state() private _disabledFromGroup = false;
+ private _disabledFromGroup = false;
+
+ protected override isDisabledExternally(): boolean {
+ return this._disabledFromGroup ?? false;
+ }
/** MutationObserver on data attributes. */
private _optionAttributeObserver = new AgnosticMutationObserver((mutationsList) =>
diff --git a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.e2e.ts b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.e2e.ts
index 654f7d61b3..f28a87bbbf 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.e2e.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.e2e.ts
@@ -24,7 +24,10 @@ describe(`sbb-autocomplete-grid-optgroup with ${fixture.name}`, () => {
>Option 1
-
+
@@ -55,6 +58,7 @@ describe(`sbb-autocomplete-grid-optgroup with ${fixture.name}`, () => {
it('disabled status is inherited', async () => {
const optionOne = element.querySelector('sbb-autocomplete-grid-option#option-1');
+ const buttonOne = element.querySelector('sbb-autocomplete-grid-button#button-1');
const optionTwo = element.querySelector('sbb-autocomplete-grid-option#option-2');
const optionThree = element.querySelector('sbb-autocomplete-grid-option#option-3');
element.setAttribute('disabled', '');
@@ -62,12 +66,14 @@ describe(`sbb-autocomplete-grid-optgroup with ${fixture.name}`, () => {
expect(element).to.have.attribute('disabled');
expect(optionOne).to.have.attribute('data-group-disabled');
+ expect(buttonOne).to.have.attribute('data-group-disabled');
expect(optionTwo).to.have.attribute('data-group-disabled');
expect(optionTwo).to.have.attribute('disabled');
expect(optionThree).to.have.attribute('data-group-disabled');
element.removeAttribute('disabled');
await waitForLitRender(element);
+ expect(buttonOne).not.to.have.attribute('data-group-disabled');
expect(optionTwo).not.to.have.attribute('data-group-disabled');
expect(optionTwo).to.have.attribute('disabled');
});
diff --git a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
index 26e267c8b7..3e1aad9373 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
+++ b/src/components/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts
@@ -44,6 +44,14 @@ export class SbbAutocompleteGridOptionElement extends SbbOptionBaseElement {
SbbAutocompleteGridOptionElement.events.optionSelected,
);
+ protected override onOptionAttributesChange(mutationsList: MutationRecord[]): void {
+ super.onOptionAttributesChange(mutationsList);
+ this.closest?.('sbb-autocomplete-grid-row')?.toggleAttribute(
+ 'data-disabled',
+ this.disabled || this.disabledFromGroup,
+ );
+ }
+
public override willUpdate(changedProperties: PropertyValues): void {
super.willUpdate(changedProperties);
if (changedProperties.has('disabled')) {
@@ -66,10 +74,7 @@ export class SbbAutocompleteGridOptionElement extends SbbOptionBaseElement {
this.disabled || this.disabledFromGroup,
);
- this.negative = !!this.closest(
- // :is() selector not possible due to test environment
- `sbb-autocomplete-grid[negative],sbb-form-field[negative]`,
- );
+ this.negative = !!this.closest(`:is(sbb-autocomplete-grid[negative],sbb-form-field[negative])`);
this.toggleAttribute('data-negative', this.negative);
}
diff --git a/src/components/option/option/option-base-element.ts b/src/components/option/option/option-base-element.ts
index 61d2b5dadd..87a5a62436 100644
--- a/src/components/option/option/option-base-element.ts
+++ b/src/components/option/option/option-base-element.ts
@@ -84,7 +84,7 @@ export abstract class SbbOptionBaseElement extends SbbDisabledMixin(SbbIconNameM
/** MutationObserver on data attributes. */
private _optionAttributeObserver = new AgnosticMutationObserver((mutationsList) =>
- this._onOptionAttributesChange(mutationsList),
+ this.onOptionAttributesChange(mutationsList),
);
public constructor() {
@@ -168,7 +168,7 @@ export abstract class SbbOptionBaseElement extends SbbDisabledMixin(SbbIconNameM
}
/** Observe changes on data attributes and set the appropriate values. */
- private _onOptionAttributesChange(mutationsList: MutationRecord[]): void {
+ protected onOptionAttributesChange(mutationsList: MutationRecord[]): void {
for (const mutation of mutationsList) {
if (mutation.attributeName === 'data-group-disabled') {
this.disabledFromGroup = this.hasAttribute('data-group-disabled');
From e3bc8cff281a7304a54f0ec4307786363e85bca6 Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Thu, 30 May 2024 15:09:54 +0200
Subject: [PATCH 49/67] docs: add doc to get option from button click
---
.../autocomplete-grid-button/readme.md | 10 ++++++++--
1 file changed, 8 insertions(+), 2 deletions(-)
diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/readme.md b/src/components/autocomplete-grid/autocomplete-grid-button/readme.md
index e782b2ca5c..af590b615d 100644
--- a/src/components/autocomplete-grid/autocomplete-grid-button/readme.md
+++ b/src/components/autocomplete-grid/autocomplete-grid-button/readme.md
@@ -87,9 +87,15 @@ It's possible to fetch the button's related `sbb-autocomplete-grid-option` using
```
From 94325f16e106f33abb818ff1c767da87b01270ad Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Thu, 30 May 2024 15:50:26 +0200
Subject: [PATCH 50/67] fix: replace 'components' with 'elements'
---
.../autocomplete-grid-button.stories.ts | 2 +-
.../autocomplete-grid-button/readme.md | 8 ++++----
.../autocomplete-grid-cell.stories.ts | 2 +-
.../autocomplete-grid-cell/readme.md | 6 +++---
.../autocomplete-grid-optgroup.stories.ts | 2 +-
.../autocomplete-grid-optgroup/readme.md | 6 +++---
.../autocomplete-grid-option.stories.ts | 2 +-
.../autocomplete-grid-option/readme.md | 2 +-
.../autocomplete-grid-row.stories.ts | 2 +-
.../autocomplete-grid-row/readme.md | 6 +++---
.../autocomplete-grid.stories.ts | 2 +-
.../autocomplete-grid/readme.md | 16 ++++++++--------
src/elements/autocomplete/readme.md | 2 +-
13 files changed, 29 insertions(+), 29 deletions(-)
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts b/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts
index 5fb0787306..2ec480d4b3 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts
@@ -194,7 +194,7 @@ const meta: Meta = {
extractComponentDescription: () => readme,
},
},
- title: 'components/sbb-autocomplete-grid/sbb-autocomplete-grid-button',
+ title: 'elements/sbb-autocomplete-grid/sbb-autocomplete-grid-button',
};
export default meta;
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-button/readme.md b/src/elements/autocomplete-grid/autocomplete-grid-button/readme.md
index af590b615d..e05b0fcb52 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-button/readme.md
+++ b/src/elements/autocomplete-grid/autocomplete-grid-button/readme.md
@@ -1,6 +1,6 @@
-The `sbb-autocomplete-grid-button` component has the same appearance of a [sbb-mini-button](/docs/components-sbb-button-sbb-mini-button--docs),
-but it's only designed to be used within the [sbb-autocomplete-grid-cell](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid-cell--docs)
-inside a [sbb-autocomplete-grid](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid--docs).
+The `sbb-autocomplete-grid-button` component has the same appearance of a [sbb-mini-button](/docs/elements-sbb-button-sbb-mini-button--docs),
+but it's only designed to be used within the [sbb-autocomplete-grid-cell](/docs/elements-sbb-autocomplete-grid-sbb-autocomplete-grid-cell--docs)
+inside a [sbb-autocomplete-grid](/docs/elements-sbb-autocomplete-grid-sbb-autocomplete-grid--docs).
```html
@@ -62,7 +62,7 @@ The component can be displayed in `disabled` state using the self-named property
```
-If the component is used within a [sbb-autocomplete-grid-optgroup](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid-optgroup--docs),
+If the component is used within a [sbb-autocomplete-grid-optgroup](/docs/elements-sbb-autocomplete-grid-sbb-autocomplete-grid-optgroup--docs),
it can be disabled by disabling the optgroup.
## Interactions
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.stories.ts b/src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.stories.ts
index 9398802f26..e662d34c67 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.stories.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.stories.ts
@@ -124,7 +124,7 @@ const meta: Meta = {
extractComponentDescription: () => readme,
},
},
- title: 'components/sbb-autocomplete-grid/sbb-autocomplete-grid-cell',
+ title: 'elements/sbb-autocomplete-grid/sbb-autocomplete-grid-cell',
};
export default meta;
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-cell/readme.md b/src/elements/autocomplete-grid/autocomplete-grid-cell/readme.md
index f8f0b95427..77355853e2 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-cell/readme.md
+++ b/src/elements/autocomplete-grid/autocomplete-grid-cell/readme.md
@@ -1,6 +1,6 @@
-The `sbb-autocomplete-grid-cell` component wraps one [sbb-autocomplete-grid-button](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid-button--docs)
-inside a [sbb-autocomplete-grid](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid--docs).
-To properly work, it must be used within a [sbb-autocomplete-grid-row](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid-row--docs).
+The `sbb-autocomplete-grid-cell` component wraps one [sbb-autocomplete-grid-button](/docs/elements-sbb-autocomplete-grid-sbb-autocomplete-grid-button--docs)
+inside a [sbb-autocomplete-grid](/docs/elements-sbb-autocomplete-grid-sbb-autocomplete-grid--docs).
+To properly work, it must be used within a [sbb-autocomplete-grid-row](/docs/elements-sbb-autocomplete-grid-sbb-autocomplete-grid-row--docs).
```html
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts
index 9c63ab2652..fc026a84ed 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.stories.ts
@@ -148,7 +148,7 @@ const meta: Meta = {
extractComponentDescription: () => readme,
},
},
- title: 'components/sbb-autocomplete-grid/sbb-autocomplete-grid-optgroup',
+ title: 'elements/sbb-autocomplete-grid/sbb-autocomplete-grid-optgroup',
};
export default meta;
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-optgroup/readme.md b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/readme.md
index 18947fa74f..fabb93d030 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-optgroup/readme.md
+++ b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/readme.md
@@ -1,7 +1,7 @@
-The `sbb-optgroup` is a component used to group more [sbb-autocomplete-grid-option](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid-option--docs)
-within a [sbb-autocomplete-grid](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid--docs).
+The `sbb-optgroup` is a component used to group more [sbb-autocomplete-grid-option](/docs/elements-sbb-autocomplete-grid-sbb-autocomplete-grid-option--docs)
+within a [sbb-autocomplete-grid](/docs/elements-sbb-autocomplete-grid-sbb-autocomplete-grid--docs).
-A [sbb-divider](/docs/components-sbb-divider--docs) is displayed at the bottom of the component.
+A [sbb-divider](/docs/elements-sbb-divider--docs) is displayed at the bottom of the component.
```html
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts
index d56f85ebcc..a996f67a3a 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.stories.ts
@@ -189,7 +189,7 @@ const meta: Meta = {
extractComponentDescription: () => readme,
},
},
- title: 'components/sbb-autocomplete-grid/sbb-autocomplete-grid-option',
+ title: 'elements/sbb-autocomplete-grid/sbb-autocomplete-grid-option',
};
export default meta;
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-option/readme.md b/src/elements/autocomplete-grid/autocomplete-grid-option/readme.md
index 5f3f14ed7c..6400fc58d6 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-option/readme.md
+++ b/src/elements/autocomplete-grid/autocomplete-grid-option/readme.md
@@ -1,5 +1,5 @@
The `sbb-autocomplete-grid-option` is a component which can be used to display items in the
-[sbb-autocomplete-grid](/docs/components-sbb-autocomplete-sbb-autocomplete-grid--docs).
+[sbb-autocomplete-grid](/docs/elements-sbb-autocomplete-sbb-autocomplete-grid--docs).
```html
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.stories.ts b/src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.stories.ts
index 28c2051a7c..c4a37a7301 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.stories.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.stories.ts
@@ -67,7 +67,7 @@ const meta: Meta = {
extractComponentDescription: () => readme,
},
},
- title: 'components/sbb-autocomplete-grid/sbb-autocomplete-grid-row',
+ title: 'elements/sbb-autocomplete-grid/sbb-autocomplete-grid-row',
};
export default meta;
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-row/readme.md b/src/elements/autocomplete-grid/autocomplete-grid-row/readme.md
index 1138a300c7..d904e933c4 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-row/readme.md
+++ b/src/elements/autocomplete-grid/autocomplete-grid-row/readme.md
@@ -1,6 +1,6 @@
-The `sbb-autocomplete-grid-row` is a wrapper for both [sbb-autocomplete-grid-option](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid-option--docs)
-and [sbb-autocomplete-grid-cell](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid-cell--docs) within the
-[sbb-autocomplete-grid](/docs/components-sbb-autocomplete-sbb-autocomplete-grid--docs) component.
+The `sbb-autocomplete-grid-row` is a wrapper for both [sbb-autocomplete-grid-option](/docs/elements-sbb-autocomplete-grid-sbb-autocomplete-grid-option--docs)
+and [sbb-autocomplete-grid-cell](/docs/elements-sbb-autocomplete-grid-sbb-autocomplete-grid-cell--docs) within the
+[sbb-autocomplete-grid](/docs/elements-sbb-autocomplete-sbb-autocomplete-grid--docs) component.
```html
diff --git a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
index ab6f1a4a23..d8dd5cffc5 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts
@@ -524,7 +524,7 @@ const meta: Meta = {
extractComponentDescription: () => readme,
},
},
- title: 'components/sbb-autocomplete-grid/sbb-autocomplete-grid',
+ title: 'elements/sbb-autocomplete-grid/sbb-autocomplete-grid',
};
export default meta;
diff --git a/src/elements/autocomplete-grid/autocomplete-grid/readme.md b/src/elements/autocomplete-grid/autocomplete-grid/readme.md
index dcccb3b634..e4dbaaa23f 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid/readme.md
+++ b/src/elements/autocomplete-grid/autocomplete-grid/readme.md
@@ -1,15 +1,15 @@
The `sbb-autocomplete-grid` is a component that can be used to display a panel of suggested options connected to a text input,
with each option connected to one or more buttons.
Use it when you need an autocomplete in which every selectable option in the panel needs one or more related button.
-If you don't need actions, use the [sbb-autocomplete](/docs/components-sbb-autocomplete---docs).
+If you don't need actions, use the [sbb-autocomplete](/docs/elements-sbb-autocomplete---docs).
The component is strictly connected to:
-- the [sbb-autocomplete-grid-row](/docs/components-sbb-autocomplete-sbb-autocomplete-grid-row--docs), which is a wrapper for both option and buttons;
-- the [sbb-autocomplete-grid-option](/docs/components-sbb-autocomplete-sbb-autocomplete-grid-option--docs), which displays a selectable option within a panel;
-- the [sbb-autocomplete-grid-cell](/docs/components-sbb-autocomplete-sbb-autocomplete-grid-cell--docs), which is a wrapper a for button element;
-- the [sbb-autocomplete-grid-button](/docs/components-sbb-autocomplete-sbb-autocomplete-grid-button--docs), which displays a button within a row;
-- the [sbb-autocomplete-grid-optgroup](/docs/components-sbb-autocomplete-sbb-autocomplete-grid-optgroup--docs), which can be used to group more row within a group.
+- the [sbb-autocomplete-grid-row](/docs/elements-sbb-autocomplete-sbb-autocomplete-grid-row--docs), which is a wrapper for both option and buttons;
+- the [sbb-autocomplete-grid-option](/docs/elements-sbb-autocomplete-sbb-autocomplete-grid-option--docs), which displays a selectable option within a panel;
+- the [sbb-autocomplete-grid-cell](/docs/elements-sbb-autocomplete-sbb-autocomplete-grid-cell--docs), which is a wrapper a for button element;
+- the [sbb-autocomplete-grid-button](/docs/elements-sbb-autocomplete-sbb-autocomplete-grid-button--docs), which displays a button within a row;
+- the [sbb-autocomplete-grid-optgroup](/docs/elements-sbb-autocomplete-sbb-autocomplete-grid-optgroup--docs), which can be used to group more row within a group.
It's possible to set the element to which the component's panel will be attached using the `origin` prop,
and the input which will work as a trigger using the `trigger` prop.
@@ -40,7 +40,7 @@ Both accept an id or an element reference.
## In `sbb-form-field`
-If the component is used within a [sbb-form-field](/docs/components-sbb-form-field-sbb-form-field--docs),
+If the component is used within a [sbb-form-field](/docs/elements-sbb-form-field-sbb-form-field--docs),
it will automatically connect to the native ` ` as trigger and will display the option panel above or below the `sbb-form-field`.
```html
@@ -72,7 +72,7 @@ it will automatically connect to the native ` ` as trigger and will displa
By default, the `sbb-autocomplete-grid` will highlight the label of the `sbb-autocomplete-grid-option` in the panel,
if it matches the typed text.
-See the [sbb-autocomplete-grid-option](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid-option--docs) for more details.
+See the [sbb-autocomplete-grid-option](/docs/elements-sbb-autocomplete-grid-sbb-autocomplete-grid-option--docs) for more details.
### Option grouping
diff --git a/src/elements/autocomplete/readme.md b/src/elements/autocomplete/readme.md
index 7ac2083577..1524c16bad 100644
--- a/src/elements/autocomplete/readme.md
+++ b/src/elements/autocomplete/readme.md
@@ -1,6 +1,6 @@
The `sbb-autocomplete` is a component that can be used to display a panel of suggested options connected to a text input.
Use it when you need a basic autocomplete: a panel with a list of selectable and possibly grouped options.
-If you need buttons connected to the options, use the [sbb-autocomplete-grid](/docs/components-sbb-autocomplete-grid-sbb-autocomplete-grid--docs).
+If you need buttons connected to the options, use the [sbb-autocomplete-grid](/docs/elements-sbb-autocomplete-grid-sbb-autocomplete-grid--docs).
It's possible to set the element to which the component's panel will be attached using the `origin` prop,
and the input which will work as a trigger using the `trigger` prop.
From ae340f9bbd1824f94bd9b3e47367821507e46374 Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Tue, 4 Jun 2024 16:57:16 +0200
Subject: [PATCH 51/67] fix: refactor grid button
---
.../autocomplete-grid-button.stories.ts | 45 -------------------
.../autocomplete-grid-button.ts | 36 ++++++++++++---
.../autocomplete-grid-button/readme.md | 32 +++----------
3 files changed, 37 insertions(+), 76 deletions(-)
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts b/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts
index 2ec480d4b3..2c590b62f9 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.stories.ts
@@ -17,16 +17,6 @@ import '../autocomplete-grid-row.js';
import '../autocomplete-grid-cell.js';
import './autocomplete-grid-button.js';
-const type: InputType = {
- control: {
- type: 'select',
- },
- options: ['button', 'reset', 'submit'],
- table: {
- category: 'Button',
- },
-};
-
const disabled: InputType = {
control: {
type: 'boolean',
@@ -36,33 +26,6 @@ const disabled: InputType = {
},
};
-const name: InputType = {
- control: {
- type: 'text',
- },
- table: {
- category: 'Button',
- },
-};
-
-const value: InputType = {
- control: {
- type: 'text',
- },
- table: {
- category: 'Button',
- },
-};
-
-const form: InputType = {
- control: {
- type: 'text',
- },
- table: {
- category: 'Button',
- },
-};
-
const negative: InputType = {
control: {
type: 'boolean',
@@ -97,11 +60,7 @@ const focusVisible: InputType = {
};
const defaultArgTypes: ArgTypes = {
- type,
disabled,
- name,
- value,
- form,
negative,
'icon-name': iconName,
'aria-label': ariaLabel,
@@ -110,11 +69,7 @@ const defaultArgTypes: ArgTypes = {
};
const defaultArgs: Args = {
- type: type.options![0],
disabled: false,
- name: 'Button Name',
- value: undefined,
- form: undefined,
negative: false,
'icon-name': 'arrow-right-small',
'aria-label': 'arrow-right-small',
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts b/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
index 15b8899975..4d28f5b15b 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
@@ -1,11 +1,14 @@
-import type { CSSResultGroup, PropertyValues } from 'lit';
+import { type CSSResultGroup, isServer, type PropertyValues, type TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js';
-import { SbbMiniButtonBaseElement } from '../../core/base-elements.js';
+import { SbbActionBaseElement } from '../../core/base-elements.js';
+import { SbbSlotStateController } from '../../core/controllers.js';
import { hostAttributes } from '../../core/decorators.js';
import { setOrRemoveAttribute } from '../../core/dom.js';
-import { SbbDisabledMixin } from '../../core/mixins.js';
+import { isEventPrevented } from '../../core/eventing.js';
+import { SbbDisabledMixin, SbbNegativeMixin } from '../../core/mixins.js';
import { AgnosticMutationObserver } from '../../core/observers.js';
+import { SbbIconNameMixin } from '../../icon.js';
import type { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option.js';
import style from './autocomplete-grid-button.scss?lit&inline';
@@ -24,9 +27,13 @@ const buttonObserverConfig: MutationObserverInit = {
*/
@customElement('sbb-autocomplete-grid-button')
@hostAttributes({
+ role: 'button',
tabindex: null,
+ 'data-button': '',
})
-export class SbbAutocompleteGridButtonElement extends SbbDisabledMixin(SbbMiniButtonBaseElement) {
+export class SbbAutocompleteGridButtonElement extends SbbDisabledMixin(
+ SbbNegativeMixin(SbbIconNameMixin(SbbActionBaseElement)),
+) {
public static override styles: CSSResultGroup = style;
/** Gets the SbbAutocompleteGridOptionElement on the same row of the button. */
@@ -59,6 +66,19 @@ export class SbbAutocompleteGridButtonElement extends SbbDisabledMixin(SbbMiniBu
}
}
+ public constructor() {
+ super();
+ new SbbSlotStateController(this);
+ if (!isServer) {
+ this.setupBaseEventHandlers();
+ this.addEventListener('click', this._handleButtonClick);
+ }
+ }
+
+ protected override renderTemplate(): TemplateResult {
+ return super.renderIconSlot();
+ }
+
public override connectedCallback(): void {
super.connectedCallback();
this.id ||= `sbb-autocomplete-grid-button-${++autocompleteButtonNextId}`;
@@ -93,7 +113,7 @@ export class SbbAutocompleteGridButtonElement extends SbbDisabledMixin(SbbMiniBu
* Event needs to be dispatched from the action element; in autocomplete-grid,
* the input has always the focus, so the `event.target` on parent class is the input and not the button.
*/
- protected override dispatchClickEvent = (event: KeyboardEvent): void => {
+ protected dispatchClickEvent = (event: KeyboardEvent): void => {
const { altKey, ctrlKey, metaKey, shiftKey } = event;
this.dispatchEvent(
new PointerEvent('click', {
@@ -109,6 +129,12 @@ export class SbbAutocompleteGridButtonElement extends SbbDisabledMixin(SbbMiniBu
}),
);
};
+
+ private _handleButtonClick = async (event: MouseEvent): Promise => {
+ if ((await isEventPrevented(event)) || !this.closest('form')) {
+ return;
+ }
+ };
}
declare global {
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-button/readme.md b/src/elements/autocomplete-grid/autocomplete-grid-button/readme.md
index e05b0fcb52..b279de4167 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-button/readme.md
+++ b/src/elements/autocomplete-grid/autocomplete-grid-button/readme.md
@@ -34,22 +34,6 @@ The component can display a `sbb-icon` using the `iconName` property or via cust
```
-## Button properties
-
-The component is internally rendered as a button,
-accepting its associated properties (`type`, `name`, `value` and `form`).
-
-```html
-
-
-```
-
## Style
The component has a negative variant which can be set using the `negative` property.
@@ -111,16 +95,12 @@ since the focus must always stay on the connected ` `.
## Properties
-| Name | Attribute | Privacy | Type | Default | Description |
-| ---------- | ----------- | ------- | ------------------------------------------ | ---------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. |
-| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. |
-| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. |
-| `name` | `name` | public | `string` | | The name of the button element. |
-| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. |
-| `option` | - | public | `SbbAutocompleteGridOptionElement \| null` | | Gets the SbbAutocompleteGridOptionElement on the same row of the button. |
-| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. |
-| `value` | `value` | public | `string` | | The value of the button element. |
+| Name | Attribute | Privacy | Type | Default | Description |
+| ---------- | ----------- | ------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. |
+| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. |
+| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. |
+| `option` | - | public | `SbbAutocompleteGridOptionElement \| null` | | Gets the SbbAutocompleteGridOptionElement on the same row of the button. |
## Methods
From 14aeb2001a51d92ab0a15624bdf82a14d46d068a Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Wed, 5 Jun 2024 10:48:32 +0200
Subject: [PATCH 52/67] fix: merge
---
src/elements/option/option/option-base-element.ts | 12 ++++++++----
src/elements/option/option/option.ts | 4 ++--
2 files changed, 10 insertions(+), 6 deletions(-)
diff --git a/src/elements/option/option/option-base-element.ts b/src/elements/option/option/option-base-element.ts
index 840a7e10cb..b3025561ec 100644
--- a/src/elements/option/option/option-base-element.ts
+++ b/src/elements/option/option/option-base-element.ts
@@ -179,11 +179,15 @@ export abstract class SbbOptionBaseElement extends SbbDisabledMixin(SbbIconNameM
}
}
- protected setupHighlightHandler(event: Event): void {
- const slotNodes = (event.target as HTMLSlotElement).assignedNodes();
+ protected handleHighlightState(): void {
+ const slotNodes = Array.from(this.childNodes ?? []).filter(
+ (n) => !(n instanceof Element) || n.slot !== 'icon',
+ );
const labelNodes = slotNodes.filter((el) => el.nodeType === Node.TEXT_NODE) as Text[];
- // Disable the highlight if the slot contains more than just text nodes
+ // Disable the highlight if the slot contain more than just text nodes.
+ // We need to ignore template elements, as SSR adds a declarative shadow DOM
+ // in the form of a template element.
if (
labelNodes.length === 0 ||
slotNodes.filter((n) => !(n instanceof Element) || n.localName !== 'template').length !==
@@ -240,7 +244,7 @@ export abstract class SbbOptionBaseElement extends SbbDisabledMixin(SbbIconNameM
${this.renderIcon()}
-
+
${this.renderLabel()}
${inertAriaGroups && this.getAttribute('data-group-label')
? html`
diff --git a/src/elements/option/option/option.ts b/src/elements/option/option/option.ts
index e60ffe76ec..f95365687c 100644
--- a/src/elements/option/option/option.ts
+++ b/src/elements/option/option/option.ts
@@ -114,13 +114,13 @@ export class SbbOptionElement extends SbbOptionBaseElement {
}
}
- protected override handleHighlightState(event: Event): void {
+ protected override handleHighlightState(): void {
if (!this._isAutocomplete) {
this.updateDisableHighlight(true);
return;
}
- super.handleHighlightState(event);
+ super.handleHighlightState();
}
protected override renderIcon(): TemplateResult {
From e81101aabddd55dbf1822fa475a766126ec297b5 Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Mon, 10 Jun 2024 18:20:06 +0200
Subject: [PATCH 53/67] test: update test structure
---
...omplete-grid-button.snapshot.spec.snap.js} | 24 +-
.../autocomplete-grid-button.e2e.ts | 54 ---
.../autocomplete-grid-button.snapshot.spec.ts | 104 +++++
.../autocomplete-grid-button.spec.ts | 121 ++----
.../autocomplete-grid-button.ssr.spec.ts | 21 +
...ocomplete-grid-cell.snapshot.spec.snap.js} | 16 +-
.../autocomplete-grid-cell.snapshot.spec.ts | 44 ++
.../autocomplete-grid-cell.spec.ts | 40 +-
....ts => autocomplete-grid-cell.ssr.spec.ts} | 0
...plete-grid-optgroup.snapshot.spec.snap.js} | 16 +-
.../autocomplete-grid-optgroup.e2e.ts | 117 ------
...utocomplete-grid-optgroup.snapshot.spec.ts | 61 +++
.../autocomplete-grid-optgroup.spec.ts | 139 +++++--
.../autocomplete-grid-optgroup.ssr.spec.ts | 56 +++
...omplete-grid-option.snapshot.spec.snap.js} | 40 +-
.../autocomplete-grid-option.e2e.ts | 235 -----------
.../autocomplete-grid-option.snapshot.spec.ts | 64 +++
.../autocomplete-grid-option.spec.ts | 259 +++++++++---
.../autocomplete-grid-option.ssr.spec.ts | 47 +++
...tocomplete-grid-row.snapshot.spec.snap.js} | 16 +-
.../autocomplete-grid-row.snapshot.spec.ts | 44 ++
.../autocomplete-grid-row.spec.ts | 42 +-
...e.ts => autocomplete-grid-row.ssr.spec.ts} | 0
...> autocomplete-grid.snapshot.spec.snap.js} | 32 +-
.../autocomplete-grid.e2e.ts | 375 ------------------
.../autocomplete-grid.snapshot.spec.ts | 67 ++++
.../autocomplete-grid.spec.ts | 367 +++++++++++++++--
.../autocomplete-grid.ssr.spec.ts | 62 +++
28 files changed, 1321 insertions(+), 1142 deletions(-)
rename src/elements/autocomplete-grid/autocomplete-grid-button/__snapshots__/{autocomplete-grid-button.spec.snap.js => autocomplete-grid-button.snapshot.spec.snap.js} (79%)
delete mode 100644 src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.e2e.ts
create mode 100644 src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.snapshot.spec.ts
create mode 100644 src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ssr.spec.ts
rename src/elements/autocomplete-grid/autocomplete-grid-cell/__snapshots__/{autocomplete-grid-cell.spec.snap.js => autocomplete-grid-cell.snapshot.spec.snap.js} (57%)
create mode 100644 src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.snapshot.spec.ts
rename src/elements/autocomplete-grid/autocomplete-grid-cell/{autocomplete-grid-cell.e2e.ts => autocomplete-grid-cell.ssr.spec.ts} (100%)
rename src/elements/autocomplete-grid/autocomplete-grid-optgroup/__snapshots__/{autocomplete-grid-optgroup.spec.snap.js => autocomplete-grid-optgroup.snapshot.spec.snap.js} (87%)
delete mode 100644 src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.e2e.ts
create mode 100644 src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.snapshot.spec.ts
create mode 100644 src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ssr.spec.ts
rename src/elements/autocomplete-grid/autocomplete-grid-option/__snapshots__/{autocomplete-grid-option.spec.snap.js => autocomplete-grid-option.snapshot.spec.snap.js} (56%)
delete mode 100644 src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.e2e.ts
create mode 100644 src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.snapshot.spec.ts
create mode 100644 src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ssr.spec.ts
rename src/elements/autocomplete-grid/autocomplete-grid-row/__snapshots__/{autocomplete-grid-row.spec.snap.js => autocomplete-grid-row.snapshot.spec.snap.js} (69%)
create mode 100644 src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.snapshot.spec.ts
rename src/elements/autocomplete-grid/autocomplete-grid-row/{autocomplete-grid-row.e2e.ts => autocomplete-grid-row.ssr.spec.ts} (100%)
rename src/elements/autocomplete-grid/autocomplete-grid/__snapshots__/{autocomplete-grid.spec.snap.js => autocomplete-grid.snapshot.spec.snap.js} (91%)
delete mode 100644 src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.e2e.ts
create mode 100644 src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.snapshot.spec.ts
create mode 100644 src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.ssr.spec.ts
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js b/src/elements/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.snapshot.spec.snap.js
similarity index 79%
rename from src/elements/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js
rename to src/elements/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.snapshot.spec.snap.js
index 178d4a9fce..6e9ab44f1f 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js
+++ b/src/elements/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.snapshot.spec.snap.js
@@ -1,7 +1,7 @@
/* @web/test-runner snapshot v1 */
export const snapshots = {};
-snapshots["sbb-autocomplete-grid-button renders Dom"] =
+snapshots["sbb-autocomplete-grid-button renders DOM"] =
`
`;
-/* end snapshot sbb-autocomplete-grid-button renders Dom */
+/* end snapshot sbb-autocomplete-grid-button renders DOM */
-snapshots["sbb-autocomplete-grid-button renders ShadowDom"] =
+snapshots["sbb-autocomplete-grid-button renders Shadow DOM"] =
`
`;
-/* end snapshot sbb-autocomplete-grid-button renders ShadowDom */
+/* end snapshot sbb-autocomplete-grid-button renders Shadow DOM */
-snapshots["sbb-autocomplete-grid-button renders disabled Dom"] =
+snapshots["sbb-autocomplete-grid-button renders disabled DOM"] =
`
`;
-/* end snapshot sbb-autocomplete-grid-button renders disabled Dom */
+/* end snapshot sbb-autocomplete-grid-button renders disabled DOM */
-snapshots["sbb-autocomplete-grid-button renders disabled ShadowDom"] =
+snapshots["sbb-autocomplete-grid-button renders disabled Shadow DOM"] =
`
`;
-/* end snapshot sbb-autocomplete-grid-button renders disabled ShadowDom */
+/* end snapshot sbb-autocomplete-grid-button renders disabled Shadow DOM */
-snapshots["sbb-autocomplete-grid-button renders negative without icon Dom"] =
+snapshots["sbb-autocomplete-grid-button renders negative without icon DOM"] =
`
`;
-/* end snapshot sbb-autocomplete-grid-button renders negative without icon Dom */
+/* end snapshot sbb-autocomplete-grid-button renders negative without icon DOM */
-snapshots["sbb-autocomplete-grid-button renders negative without icon ShadowDom"] =
+snapshots["sbb-autocomplete-grid-button renders negative without icon Shadow DOM"] =
`
`;
-/* end snapshot sbb-autocomplete-grid-button renders negative without icon ShadowDom */
+/* end snapshot sbb-autocomplete-grid-button renders negative without icon Shadow DOM */
snapshots["sbb-autocomplete-grid-button A11y tree Chrome"] =
`
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.e2e.ts b/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.e2e.ts
deleted file mode 100644
index 8973d0677a..0000000000
--- a/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.e2e.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { assert, expect } from '@open-wc/testing';
-import { html } from 'lit/static-html.js';
-
-import { fixture } from '../../core/testing/private.js';
-import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
-
-import { SbbAutocompleteGridButtonElement } from './autocomplete-grid-button.js';
-
-describe(`sbb-autocomplete-grid-button with ${fixture.name}`, () => {
- let element: SbbAutocompleteGridButtonElement;
-
- beforeEach(async () => {
- element = await fixture(
- html`Button `,
- { modules: ['./autocomplete-grid-button.ts'] },
- );
- });
-
- it('renders', async () => {
- assert.instanceOf(element, SbbAutocompleteGridButtonElement);
- });
-
- describe('events', () => {
- it('dispatches event on click', async () => {
- const clickSpy = new EventSpy('click');
-
- element.click();
- await waitForCondition(() => clickSpy.events.length === 1);
- expect(clickSpy.count).to.be.equal(1);
- });
-
- it('should not dispatch event on click if disabled', async () => {
- element.setAttribute('disabled', 'true');
-
- await waitForLitRender(element);
-
- const clickSpy = new EventSpy('click');
-
- element.click();
- expect(clickSpy.count).not.to.be.greaterThan(0);
- });
-
- it('should stop propagating host click if disabled', async () => {
- element.disabled = true;
-
- const clickSpy = new EventSpy('click');
-
- element.dispatchEvent(new CustomEvent('click'));
- await waitForLitRender(element);
-
- expect(clickSpy.count).not.to.be.greaterThan(0);
- });
- });
-});
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.snapshot.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.snapshot.spec.ts
new file mode 100644
index 0000000000..7654417e29
--- /dev/null
+++ b/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.snapshot.spec.ts
@@ -0,0 +1,104 @@
+import { expect } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import { waitForLitRender } from '../../core/testing.js';
+
+import type { SbbAutocompleteGridButtonElement } from './autocomplete-grid-button.js';
+import '../../form-field.js';
+import '../autocomplete-grid.js';
+import '../autocomplete-grid-row.js';
+import '../autocomplete-grid-cell.js';
+import './autocomplete-grid-button.js';
+
+describe('sbb-autocomplete-grid-button', () => {
+ describe('renders', () => {
+ let root: SbbAutocompleteGridButtonElement;
+ beforeEach(async () => {
+ root = (
+ await fixture(html`
+
+
+
+
+
+
+
+
+ `)
+ ).querySelector('sbb-autocomplete-grid-button')!;
+ await waitForLitRender(root);
+ });
+
+ it('DOM', async () => {
+ await expect(root).dom.to.be.equalSnapshot();
+ });
+
+ it('Shadow DOM', async () => {
+ await expect(root).shadowDom.to.be.equalSnapshot();
+ });
+ });
+
+ describe('renders disabled', () => {
+ let root: SbbAutocompleteGridButtonElement;
+ beforeEach(async () => {
+ root = (
+ await fixture(html`
+
+
+
+
+
+
+
+
+ `)
+ ).querySelector('sbb-autocomplete-grid-button')!;
+ await waitForLitRender(root);
+ });
+
+ it('DOM', async () => {
+ await expect(root).dom.to.be.equalSnapshot();
+ });
+
+ it('Shadow DOM', async () => {
+ await expect(root).shadowDom.to.be.equalSnapshot();
+ });
+ });
+
+ describe('renders negative without icon', () => {
+ let root: SbbAutocompleteGridButtonElement;
+ beforeEach(async () => {
+ root = (
+ await fixture(html`
+
+
+
+
+
+
+
+
+
+
+ `)
+ ).querySelector('sbb-autocomplete-grid-button')!;
+ await waitForLitRender(root);
+ });
+
+ it('DOM', async () => {
+ await expect(root).dom.to.be.equalSnapshot();
+ });
+
+ it('Shadow DOM', async () => {
+ await expect(root).shadowDom.to.be.equalSnapshot();
+ });
+ });
+
+ testA11yTreeSnapshot(
+ html` `,
+ );
+});
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts
index 41c7958c1c..6863dad599 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts
@@ -1,104 +1,53 @@
-import { expect } from '@open-wc/testing';
+import { assert, expect } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
-import { waitForLitRender } from '../../core/testing.js';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
-import type { SbbAutocompleteGridButtonElement } from './autocomplete-grid-button.js';
-import '../../form-field.js';
-import '../autocomplete-grid.js';
-import '../autocomplete-grid-row.js';
-import '../autocomplete-grid-cell.js';
-import './autocomplete-grid-button.js';
+import { SbbAutocompleteGridButtonElement } from './autocomplete-grid-button.js';
-describe('sbb-autocomplete-grid-button', () => {
- describe('renders', () => {
- let root: SbbAutocompleteGridButtonElement;
- beforeEach(async () => {
- root = (
- await fixture(html`
-
-
-
-
-
-
-
-
- `)
- ).querySelector('sbb-autocomplete-grid-button')!;
- await waitForLitRender(root);
- });
+describe(`sbb-autocomplete-grid-button`, () => {
+ let element: SbbAutocompleteGridButtonElement;
- it('Dom', async () => {
- await expect(root).dom.to.be.equalSnapshot();
- });
+ beforeEach(async () => {
+ element = await fixture(
+ html`Button `,
+ );
+ });
- it('ShadowDom', async () => {
- await expect(root).shadowDom.to.be.equalSnapshot();
- });
+ it('renders', async () => {
+ assert.instanceOf(element, SbbAutocompleteGridButtonElement);
});
- describe('renders disabled', () => {
- let root: SbbAutocompleteGridButtonElement;
- beforeEach(async () => {
- root = (
- await fixture(html`
-
-
-
-
-
-
-
-
- `)
- ).querySelector('sbb-autocomplete-grid-button')!;
- await waitForLitRender(root);
- });
+ describe('events', () => {
+ it('dispatches event on click', async () => {
+ const clickSpy = new EventSpy('click');
- it('Dom', async () => {
- await expect(root).dom.to.be.equalSnapshot();
+ element.click();
+ await waitForCondition(() => clickSpy.events.length === 1);
+ expect(clickSpy.count).to.be.equal(1);
});
- it('ShadowDom', async () => {
- await expect(root).shadowDom.to.be.equalSnapshot();
- });
- });
+ it('should not dispatch event on click if disabled', async () => {
+ element.setAttribute('disabled', 'true');
- describe('renders negative without icon', () => {
- let root: SbbAutocompleteGridButtonElement;
- beforeEach(async () => {
- root = (
- await fixture(html`
-
-
-
-
-
-
-
-
-
-
- `)
- ).querySelector('sbb-autocomplete-grid-button')!;
- await waitForLitRender(root);
- });
+ await waitForLitRender(element);
+
+ const clickSpy = new EventSpy('click');
- it('Dom', async () => {
- await expect(root).dom.to.be.equalSnapshot();
+ element.click();
+ expect(clickSpy.count).not.to.be.greaterThan(0);
});
- it('ShadowDom', async () => {
- await expect(root).shadowDom.to.be.equalSnapshot();
+ it('should stop propagating host click if disabled', async () => {
+ element.disabled = true;
+
+ const clickSpy = new EventSpy('click');
+
+ element.dispatchEvent(new CustomEvent('click'));
+ await waitForLitRender(element);
+
+ expect(clickSpy.count).not.to.be.greaterThan(0);
});
});
-
- testA11yTreeSnapshot(
- html` `,
- );
});
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ssr.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ssr.spec.ts
new file mode 100644
index 0000000000..6fe3a052d3
--- /dev/null
+++ b/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ssr.spec.ts
@@ -0,0 +1,21 @@
+import { assert } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { fixture } from '../../core/testing/private.js';
+
+import { SbbAutocompleteGridButtonElement } from './autocomplete-grid-button.js';
+
+describe(`sbb-autocomplete-grid-button with ${fixture.name}`, () => {
+ let element: SbbAutocompleteGridButtonElement;
+
+ beforeEach(async () => {
+ element = await fixture(
+ html`Button `,
+ { modules: ['./autocomplete-grid-button.ts'] },
+ );
+ });
+
+ it('renders', async () => {
+ assert.instanceOf(element, SbbAutocompleteGridButtonElement);
+ });
+});
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-cell/__snapshots__/autocomplete-grid-cell.spec.snap.js b/src/elements/autocomplete-grid/autocomplete-grid-cell/__snapshots__/autocomplete-grid-cell.snapshot.spec.snap.js
similarity index 57%
rename from src/elements/autocomplete-grid/autocomplete-grid-cell/__snapshots__/autocomplete-grid-cell.spec.snap.js
rename to src/elements/autocomplete-grid/autocomplete-grid-cell/__snapshots__/autocomplete-grid-cell.snapshot.spec.snap.js
index a596f6b849..d3898238b4 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-cell/__snapshots__/autocomplete-grid-cell.spec.snap.js
+++ b/src/elements/autocomplete-grid/autocomplete-grid-cell/__snapshots__/autocomplete-grid-cell.snapshot.spec.snap.js
@@ -1,7 +1,7 @@
/* @web/test-runner snapshot v1 */
export const snapshots = {};
-snapshots["sbb-autocomplete-grid-cell Dom"] =
+snapshots["sbb-autocomplete-grid-cell renders DOM"] =
`
`;
-/* end snapshot sbb-autocomplete-grid-cell Dom */
+/* end snapshot sbb-autocomplete-grid-cell renders DOM */
-snapshots["sbb-autocomplete-grid-cell ShadowDom"] =
+snapshots["sbb-autocomplete-grid-cell renders Shadow DOM"] =
`
`;
-/* end snapshot sbb-autocomplete-grid-cell ShadowDom */
+/* end snapshot sbb-autocomplete-grid-cell renders Shadow DOM */
-snapshots["sbb-autocomplete-grid-cell A11y tree Chrome"] =
+snapshots["sbb-autocomplete-grid-cell renders A11y tree Chrome"] =
`
{
"role": "WebArea",
@@ -39,9 +39,9 @@ snapshots["sbb-autocomplete-grid-cell A11y tree Chrome"] =
}
`;
-/* end snapshot sbb-autocomplete-grid-cell A11y tree Chrome */
+/* end snapshot sbb-autocomplete-grid-cell renders A11y tree Chrome */
-snapshots["sbb-autocomplete-grid-cell A11y tree Firefox"] =
+snapshots["sbb-autocomplete-grid-cell renders A11y tree Firefox"] =
`
{
"role": "document",
@@ -55,5 +55,5 @@ snapshots["sbb-autocomplete-grid-cell A11y tree Firefox"] =
}
`;
-/* end snapshot sbb-autocomplete-grid-cell A11y tree Firefox */
+/* end snapshot sbb-autocomplete-grid-cell renders A11y tree Firefox */
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.snapshot.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.snapshot.spec.ts
new file mode 100644
index 0000000000..5c51a97d48
--- /dev/null
+++ b/src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.snapshot.spec.ts
@@ -0,0 +1,44 @@
+import { expect } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+
+import type { SbbAutocompleteGridCellElement } from './autocomplete-grid-cell.js';
+import '../autocomplete-grid.js';
+import '../autocomplete-grid-row.js';
+import './autocomplete-grid-cell.js';
+import '../autocomplete-grid-button.js';
+
+describe('sbb-autocomplete-grid-cell', () => {
+ describe('renders', () => {
+ let root: SbbAutocompleteGridCellElement;
+ beforeEach(async () => {
+ root = (
+ await fixture(html`
+
+
+
+
+
+
+
+
+ `)
+ ).querySelector('sbb-autocomplete-grid-cell')!;
+ });
+
+ it('DOM', async () => {
+ await expect(root).dom.to.be.equalSnapshot();
+ });
+
+ it('Shadow DOM', async () => {
+ await expect(root).shadowDom.to.be.equalSnapshot();
+ });
+
+ testA11yTreeSnapshot(html`
+
+
+
+ `);
+ });
+});
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.spec.ts
index d35626bdcb..ba5205a9d0 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.spec.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.spec.ts
@@ -1,42 +1,18 @@
-import { expect } from '@open-wc/testing';
+import { assert } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import { fixture } from '../../core/testing/private.js';
-import type { SbbAutocompleteGridCellElement } from './autocomplete-grid-cell.js';
-import '../autocomplete-grid.js';
-import '../autocomplete-grid-row.js';
-import './autocomplete-grid-cell.js';
-import '../autocomplete-grid-button.js';
+import { SbbAutocompleteGridCellElement } from './autocomplete-grid-cell.js';
describe('sbb-autocomplete-grid-cell', () => {
- let root: SbbAutocompleteGridCellElement;
- beforeEach(async () => {
- root = (
- await fixture(html`
-
-
-
-
-
-
-
-
- `)
- ).querySelector('sbb-autocomplete-grid-cell')!;
- });
+ let element: SbbAutocompleteGridCellElement;
- it('Dom', async () => {
- await expect(root).dom.to.be.equalSnapshot();
+ beforeEach(async () => {
+ element = await fixture(html` `);
});
- it('ShadowDom', async () => {
- await expect(root).shadowDom.to.be.equalSnapshot();
+ it('renders', async () => {
+ assert.instanceOf(element, SbbAutocompleteGridCellElement);
});
-
- testA11yTreeSnapshot(html`
-
-
-
- `);
});
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.e2e.ts b/src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.ssr.spec.ts
similarity index 100%
rename from src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.e2e.ts
rename to src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.ssr.spec.ts
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-optgroup/__snapshots__/autocomplete-grid-optgroup.spec.snap.js b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/__snapshots__/autocomplete-grid-optgroup.snapshot.spec.snap.js
similarity index 87%
rename from src/elements/autocomplete-grid/autocomplete-grid-optgroup/__snapshots__/autocomplete-grid-optgroup.spec.snap.js
rename to src/elements/autocomplete-grid/autocomplete-grid-optgroup/__snapshots__/autocomplete-grid-optgroup.snapshot.spec.snap.js
index ab64f70caf..ea447a674c 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-optgroup/__snapshots__/autocomplete-grid-optgroup.spec.snap.js
+++ b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/__snapshots__/autocomplete-grid-optgroup.snapshot.spec.snap.js
@@ -1,7 +1,7 @@
/* @web/test-runner snapshot v1 */
export const snapshots = {};
-snapshots["sbb-autocomplete-grid-optgroup Chrome-Firefox Dom"] =
+snapshots["sbb-autocomplete-grid-optgroup Chrome-Firefox DOM"] =
`
`;
-/* end snapshot sbb-autocomplete-grid-optgroup Chrome-Firefox Dom */
+/* end snapshot sbb-autocomplete-grid-optgroup Chrome-Firefox DOM */
-snapshots["sbb-autocomplete-grid-optgroup Chrome-Firefox ShadowDom"] =
+snapshots["sbb-autocomplete-grid-optgroup Chrome-Firefox Shadow DOM"] =
`
`;
-/* end snapshot sbb-autocomplete-grid-optgroup Chrome-Firefox ShadowDom */
+/* end snapshot sbb-autocomplete-grid-optgroup Chrome-Firefox Shadow DOM */
snapshots["sbb-autocomplete-grid-optgroup Chrome-Firefox A11y tree Chrome"] =
`
@@ -104,7 +104,7 @@ snapshots["sbb-autocomplete-grid-optgroup Chrome-Firefox A11y tree Firefox"] =
`;
/* end snapshot sbb-autocomplete-grid-optgroup Chrome-Firefox A11y tree Firefox */
-snapshots["sbb-autocomplete-grid-optgroup Safari Dom"] =
+snapshots["sbb-autocomplete-grid-optgroup Safari DOM"] =
`
`;
-/* end snapshot sbb-autocomplete-grid-optgroup Safari Dom */
+/* end snapshot sbb-autocomplete-grid-optgroup Safari DOM */
-snapshots["sbb-autocomplete-grid-optgroup Safari ShadowDom"] =
+snapshots["sbb-autocomplete-grid-optgroup Safari Shadow DOM"] =
`
`;
-/* end snapshot sbb-autocomplete-grid-optgroup Safari ShadowDom */
+/* end snapshot sbb-autocomplete-grid-optgroup Safari Shadow DOM */
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.e2e.ts b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.e2e.ts
deleted file mode 100644
index f28a87bbbf..0000000000
--- a/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.e2e.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import { assert, expect } from '@open-wc/testing';
-import { html } from 'lit/static-html.js';
-
-import { fixture } from '../../core/testing/private.js';
-import { waitForLitRender } from '../../core/testing.js';
-import type { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option.js';
-
-import { SbbAutocompleteGridOptgroupElement } from './autocomplete-grid-optgroup.js';
-import '../autocomplete-grid.js';
-import '../autocomplete-grid-row.js';
-import '../autocomplete-grid-cell.js';
-import '../autocomplete-grid-button.js';
-import '../autocomplete-grid-option.js';
-
-describe(`sbb-autocomplete-grid-optgroup with ${fixture.name}`, () => {
- let element: SbbAutocompleteGridOptgroupElement;
-
- beforeEach(async () => {
- element = await fixture(
- html`
-
-
- Option 1
-
-
-
-
-
- Option 2
-
-
-
-
-
- Option 3
-
-
-
-
-
- `,
- { modules: ['../../autocomplete-grid.ts'] },
- );
- });
-
- it('renders', async () => {
- assert.instanceOf(element, SbbAutocompleteGridOptgroupElement);
- });
-
- it('disabled status is inherited', async () => {
- const optionOne = element.querySelector('sbb-autocomplete-grid-option#option-1');
- const buttonOne = element.querySelector('sbb-autocomplete-grid-button#button-1');
- const optionTwo = element.querySelector('sbb-autocomplete-grid-option#option-2');
- const optionThree = element.querySelector('sbb-autocomplete-grid-option#option-3');
- element.setAttribute('disabled', '');
- await waitForLitRender(element);
-
- expect(element).to.have.attribute('disabled');
- expect(optionOne).to.have.attribute('data-group-disabled');
- expect(buttonOne).to.have.attribute('data-group-disabled');
- expect(optionTwo).to.have.attribute('data-group-disabled');
- expect(optionTwo).to.have.attribute('disabled');
- expect(optionThree).to.have.attribute('data-group-disabled');
-
- element.removeAttribute('disabled');
- await waitForLitRender(element);
- expect(buttonOne).not.to.have.attribute('data-group-disabled');
- expect(optionTwo).not.to.have.attribute('data-group-disabled');
- expect(optionTwo).to.have.attribute('disabled');
- });
-
- it('disabled status prevents changes', async () => {
- const optionOne: SbbAutocompleteGridOptionElement = element.querySelector(
- 'sbb-autocomplete-grid-option#option-1',
- )!;
- const optionTwo: SbbAutocompleteGridOptionElement = element.querySelector(
- 'sbb-autocomplete-grid-option#option-2',
- )!;
- const optionThree: SbbAutocompleteGridOptionElement = element.querySelector(
- 'sbb-autocomplete-grid-option#option-3',
- )!;
- const options = [optionOne, optionTwo, optionThree];
-
- options.forEach((opt) => expect(opt).not.to.have.attribute('selected'));
-
- element.setAttribute('disabled', '');
- await waitForLitRender(element);
- expect(element).to.have.attribute('disabled');
-
- // clicks should have no effect since the group is disabled
- for (const opt of options) {
- opt.click();
- await waitForLitRender(opt);
- expect(opt).not.to.have.attribute('selected');
- }
-
- element.removeAttribute('disabled');
- await waitForLitRender(element);
- for (const opt of options) {
- opt.click();
- await waitForLitRender(opt);
- }
-
- expect(optionOne).to.have.attribute('selected');
- expect(optionTwo).not.to.have.attribute('selected');
- expect(optionThree).to.have.attribute('selected');
- });
-});
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.snapshot.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.snapshot.spec.ts
new file mode 100644
index 0000000000..1cc707abcc
--- /dev/null
+++ b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.snapshot.spec.ts
@@ -0,0 +1,61 @@
+import { expect } from '@open-wc/testing';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit/static-html.js';
+
+import { isSafari } from '../../core/dom.js';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import { describeIf } from '../../core/testing.js';
+
+import './autocomplete-grid-optgroup.js';
+import '../autocomplete-grid.js';
+import '../autocomplete-grid-row.js';
+import '../autocomplete-grid-option.js';
+import '../autocomplete-grid-cell.js';
+import '../autocomplete-grid-button.js';
+import type { SbbAutocompleteGridOptgroupElement } from './autocomplete-grid-optgroup.js';
+
+describe('sbb-autocomplete-grid-optgroup', () => {
+ let root: SbbAutocompleteGridOptgroupElement;
+ const opt: TemplateResult = html`
+
+
+ Option 1
+
+
+ Option 2
+
+
+ `;
+ beforeEach(async () => {
+ root = (
+ await fixture(html`
+ ${opt}
+
+ `)
+ ).querySelector('sbb-autocomplete-grid-optgroup')!;
+ });
+
+ describeIf(!isSafari, 'Chrome-Firefox', async () => {
+ it('DOM', async () => {
+ await expect(root).dom.to.be.equalSnapshot();
+ });
+
+ it('Shadow DOM', async () => {
+ await expect(root).shadowDom.to.be.equalSnapshot();
+ });
+
+ testA11yTreeSnapshot(opt);
+ });
+
+ describeIf(isSafari, 'Safari', async () => {
+ it('DOM', async () => {
+ await expect(root).dom.to.be.equalSnapshot();
+ });
+
+ it('Shadow DOM', async () => {
+ await expect(root).shadowDom.to.be.equalSnapshot();
+ });
+
+ testA11yTreeSnapshot(opt);
+ });
+});
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.spec.ts
index fdd1b9add2..e9ec99f877 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.spec.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.spec.ts
@@ -1,61 +1,114 @@
-import { expect } from '@open-wc/testing';
-import type { TemplateResult } from 'lit';
+import { assert, expect } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
-import { isSafari } from '../../core/dom.js';
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
-import { describeIf } from '../../core/testing.js';
+import { fixture } from '../../core/testing/private.js';
+import { waitForLitRender } from '../../core/testing.js';
+import type { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option.js';
-import './autocomplete-grid-optgroup.js';
+import { SbbAutocompleteGridOptgroupElement } from './autocomplete-grid-optgroup.js';
import '../autocomplete-grid.js';
import '../autocomplete-grid-row.js';
-import '../autocomplete-grid-option.js';
import '../autocomplete-grid-cell.js';
import '../autocomplete-grid-button.js';
-import type { SbbAutocompleteGridOptgroupElement } from './autocomplete-grid-optgroup.js';
-
-describe('sbb-autocomplete-grid-optgroup', () => {
- let root: SbbAutocompleteGridOptgroupElement;
- const opt: TemplateResult = html`
-
-
- Option 1
-
-
- Option 2
-
-
- `;
+import '../autocomplete-grid-option.js';
+
+describe(`sbb-autocomplete-grid-optgroup`, () => {
+ let element: SbbAutocompleteGridOptgroupElement;
+
beforeEach(async () => {
- root = (
- await fixture(html`
- ${opt}
-
- `)
- ).querySelector('sbb-autocomplete-grid-optgroup')!;
+ element = await fixture(html`
+
+
+ Option 1
+
+
+
+
+
+ Option 2
+
+
+
+
+
+ Option 3
+
+
+
+
+
+ `);
});
- describeIf(!isSafari, 'Chrome-Firefox', async () => {
- it('Dom', async () => {
- await expect(root).dom.to.be.equalSnapshot();
- });
+ it('renders', async () => {
+ assert.instanceOf(element, SbbAutocompleteGridOptgroupElement);
+ });
- it('ShadowDom', async () => {
- await expect(root).shadowDom.to.be.equalSnapshot();
- });
+ it('disabled status is inherited', async () => {
+ const optionOne = element.querySelector('sbb-autocomplete-grid-option#option-1');
+ const buttonOne = element.querySelector('sbb-autocomplete-grid-button#button-1');
+ const optionTwo = element.querySelector('sbb-autocomplete-grid-option#option-2');
+ const optionThree = element.querySelector('sbb-autocomplete-grid-option#option-3');
+ element.setAttribute('disabled', '');
+ await waitForLitRender(element);
- testA11yTreeSnapshot(opt);
+ expect(element).to.have.attribute('disabled');
+ expect(optionOne).to.have.attribute('data-group-disabled');
+ expect(buttonOne).to.have.attribute('data-group-disabled');
+ expect(optionTwo).to.have.attribute('data-group-disabled');
+ expect(optionTwo).to.have.attribute('disabled');
+ expect(optionThree).to.have.attribute('data-group-disabled');
+
+ element.removeAttribute('disabled');
+ await waitForLitRender(element);
+ expect(buttonOne).not.to.have.attribute('data-group-disabled');
+ expect(optionTwo).not.to.have.attribute('data-group-disabled');
+ expect(optionTwo).to.have.attribute('disabled');
});
- describeIf(isSafari, 'Safari', async () => {
- it('Dom', async () => {
- await expect(root).dom.to.be.equalSnapshot();
- });
+ it('disabled status prevents changes', async () => {
+ const optionOne: SbbAutocompleteGridOptionElement = element.querySelector(
+ 'sbb-autocomplete-grid-option#option-1',
+ )!;
+ const optionTwo: SbbAutocompleteGridOptionElement = element.querySelector(
+ 'sbb-autocomplete-grid-option#option-2',
+ )!;
+ const optionThree: SbbAutocompleteGridOptionElement = element.querySelector(
+ 'sbb-autocomplete-grid-option#option-3',
+ )!;
+ const options = [optionOne, optionTwo, optionThree];
+
+ options.forEach((opt) => expect(opt).not.to.have.attribute('selected'));
+
+ element.setAttribute('disabled', '');
+ await waitForLitRender(element);
+ expect(element).to.have.attribute('disabled');
+
+ // clicks should have no effect since the group is disabled
+ for (const opt of options) {
+ opt.click();
+ await waitForLitRender(opt);
+ expect(opt).not.to.have.attribute('selected');
+ }
- it('ShadowDom', async () => {
- await expect(root).shadowDom.to.be.equalSnapshot();
- });
+ element.removeAttribute('disabled');
+ await waitForLitRender(element);
+ for (const opt of options) {
+ opt.click();
+ await waitForLitRender(opt);
+ }
- testA11yTreeSnapshot(opt);
+ expect(optionOne).to.have.attribute('selected');
+ expect(optionTwo).not.to.have.attribute('selected');
+ expect(optionThree).to.have.attribute('selected');
});
});
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ssr.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ssr.spec.ts
new file mode 100644
index 0000000000..4b3c41f99e
--- /dev/null
+++ b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ssr.spec.ts
@@ -0,0 +1,56 @@
+import { assert } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { fixture } from '../../core/testing/private.js';
+
+import { SbbAutocompleteGridOptgroupElement } from './autocomplete-grid-optgroup.js';
+import '../autocomplete-grid.js';
+import '../autocomplete-grid-row.js';
+import '../autocomplete-grid-cell.js';
+import '../autocomplete-grid-button.js';
+import '../autocomplete-grid-option.js';
+
+describe(`sbb-autocomplete-grid-optgroup`, () => {
+ let element: SbbAutocompleteGridOptgroupElement;
+
+ beforeEach(async () => {
+ element = await fixture(
+ html`
+
+
+ Option 1
+
+
+
+
+
+
+ Option 2
+
+
+
+
+
+
+ Option 3
+
+
+
+
+
+
+ `,
+ { modules: ['../../autocomplete-grid.ts'] },
+ );
+ });
+
+ it('renders', async () => {
+ assert.instanceOf(element, SbbAutocompleteGridOptgroupElement);
+ });
+});
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js b/src/elements/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.snapshot.spec.snap.js
similarity index 56%
rename from src/elements/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
rename to src/elements/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.snapshot.spec.snap.js
index 41e0e867a1..a623f9a73f 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.spec.snap.js
+++ b/src/elements/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.snapshot.spec.snap.js
@@ -1,7 +1,7 @@
/* @web/test-runner snapshot v1 */
export const snapshots = {};
-snapshots["sbb-autocomplete-grid-option default Dom"] =
+snapshots["sbb-autocomplete-grid-option default DOM"] =
`
`;
-/* end snapshot sbb-autocomplete-grid-option default Dom */
+/* end snapshot sbb-autocomplete-grid-option default DOM */
-snapshots["sbb-autocomplete-grid-option default ShadowDom"] =
+snapshots["sbb-autocomplete-grid-option default Shadow DOM"] =
`
@@ -29,39 +29,7 @@ snapshots["sbb-autocomplete-grid-option default ShadowDom"] =
`;
-/* end snapshot sbb-autocomplete-grid-option default ShadowDom */
-
-snapshots["sbb-autocomplete-grid-option default A11y tree Chrome"] =
-`
- {
- "role": "WebArea",
- "name": "",
- "children": [
- {
- "role": "text",
- "name": "Option 1"
- }
- ]
-}
-
-`;
-/* end snapshot sbb-autocomplete-grid-option default A11y tree Chrome */
-
-snapshots["sbb-autocomplete-grid-option default A11y tree Firefox"] =
-`
- {
- "role": "document",
- "name": "",
- "children": [
- {
- "role": "text leaf",
- "name": "Option 1"
- }
- ]
-}
-
-`;
-/* end snapshot sbb-autocomplete-grid-option default A11y tree Firefox */
+/* end snapshot sbb-autocomplete-grid-option default Shadow DOM */
snapshots["sbb-autocomplete-grid-option A11y tree Chrome"] =
`
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.e2e.ts b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.e2e.ts
deleted file mode 100644
index 021c0d6143..0000000000
--- a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.e2e.ts
+++ /dev/null
@@ -1,235 +0,0 @@
-import { assert, expect } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
-import { html } from 'lit/static-html.js';
-
-import { fixture } from '../../core/testing/private.js';
-import { EventSpy, waitForLitRender } from '../../core/testing.js';
-import type { SbbFormFieldElement } from '../../form-field.js';
-import type { SbbAutocompleteGridOptgroupElement } from '../autocomplete-grid-optgroup.js';
-import type { SbbAutocompleteGridElement } from '../autocomplete-grid.js';
-
-import { SbbAutocompleteGridOptionElement } from './autocomplete-grid-option.js';
-import '../../form-field.js';
-import '../autocomplete-grid.js';
-import '../autocomplete-grid-optgroup.js';
-import '../autocomplete-grid-row.js';
-import '../autocomplete-grid-cell.js';
-import '../autocomplete-grid-button.js';
-
-describe(`sbb-autocomplete-grid-option with ${fixture.name}`, () => {
- let element: SbbFormFieldElement;
-
- beforeEach(async () => {
- element = await fixture(
- html`
-
-
-
-
- Option 1
-
-
-
-
-
- Option 2
-
-
-
-
-
-
- `,
- { modules: ['../../autocomplete-grid.ts', '../../form-field.ts'] },
- );
- });
-
- it('renders', async () => {
- const option = element.querySelector('sbb-autocomplete-grid-option')!;
- assert.instanceOf(option, SbbAutocompleteGridOptionElement);
- });
-
- it('set selected and emits on click', async () => {
- const selectionChangeSpy = new EventSpy(
- SbbAutocompleteGridOptionElement.events.selectionChange,
- );
- const optionOne = element.querySelector(
- 'sbb-autocomplete-grid-option',
- )!;
-
- optionOne.dispatchEvent(new CustomEvent('click'));
- await waitForLitRender(element);
-
- expect(optionOne.selected).to.be.equal(true);
- expect(selectionChangeSpy.count).to.be.equal(1);
- });
-
- it('highlight on input', async () => {
- const input = element.querySelector('input')!;
- const autocomplete =
- element.querySelector('sbb-autocomplete-grid')!;
- const options = element.querySelectorAll('sbb-autocomplete-grid-option');
- const optionOneLabel = options[0].shadowRoot!.querySelector('.sbb-option__label');
- const optionTwoLabel = options[1].shadowRoot!.querySelector('.sbb-option__label');
-
- input.focus();
- await sendKeys({ press: '1' });
- await waitForLitRender(autocomplete);
-
- expect(optionOneLabel).dom.to.be.equal(`
-
-
- Option
- 1
-
-
- `);
- expect(optionTwoLabel).dom.to.be.equal(`
-
-
- Option 2
-
- `);
- });
-
- it('highlight after option label changed', async () => {
- const input = element.querySelector('input')!;
- const autocomplete =
- element.querySelector('sbb-autocomplete-grid')!;
- const options = element.querySelectorAll('sbb-autocomplete-grid-option');
- const optionOneLabel = options[0].shadowRoot!.querySelector('.sbb-option__label');
-
- input.focus();
- await sendKeys({ type: 'Opt' });
- await waitForLitRender(autocomplete);
-
- expect(optionOneLabel).dom.to.be.equal(`
-
-
-
- Opt
- ion 1
-
- `);
-
- options[0].textContent = 'Other content';
- await waitForLitRender(autocomplete);
-
- expect(optionOneLabel).dom.to.be.equal(`
-
-
- Other content
-
- `);
-
- options[0].textContent = 'Option';
- await waitForLitRender(autocomplete);
-
- expect(optionOneLabel).dom.to.be.equal(`
-
-
-
- Opt
- ion
-
- `);
- });
-
- it('highlight later added options', async () => {
- const input = element.querySelector('input')!;
- const autocomplete =
- element.querySelector('sbb-autocomplete-grid')!;
- const options = element.querySelectorAll('sbb-autocomplete-grid-option');
- const optionOneLabel = options[0].shadowRoot!.querySelector('.sbb-option__label');
-
- input.focus();
- await sendKeys({ type: 'Opt' });
- await waitForLitRender(autocomplete);
-
- expect(optionOneLabel).dom.to.be.equal(`
-
-
-
- Opt
- ion 1
-
- `);
-
- const newOption = document.createElement('sbb-autocomplete-grid-option');
- newOption.innerText = 'Option 3';
- autocomplete.append(newOption);
- await waitForLitRender(autocomplete);
-
- const newOptionLabel = newOption.shadowRoot!.querySelector('.sbb-option__label');
-
- expect(newOptionLabel).dom.to.be.equal(`
-
-
-
- Opt
- ion 3
-
- `);
- });
-
- it('highlight later added options in sbb-optgroup', async () => {
- element = await fixture(
- html`
-
-
-
-
-
- Option 1
-
-
-
-
-
-
-
- `,
- {
- modules: ['../../autocomplete-grid.ts', '../../form-field.ts'],
- },
- );
-
- const input = element.querySelector('input')!;
- const optgroup = element.querySelector(
- 'sbb-autocomplete-grid-optgroup',
- )!;
- const options = element.querySelectorAll('sbb-autocomplete-grid-option');
- const optionOneLabel = options[0].shadowRoot!.querySelector('.sbb-option__label');
-
- input.focus();
- await sendKeys({ type: 'Opt' });
- await waitForLitRender(element);
-
- expect(optionOneLabel).dom.to.be.equal(`
-
-
-
- Opt
- ion 1
-
- `);
-
- const newOption = document.createElement('sbb-autocomplete-grid-option');
- newOption.innerText = 'Option 2';
- optgroup.append(newOption);
- await waitForLitRender(element);
-
- const newOptionLabel = newOption.shadowRoot!.querySelector('.sbb-option__label');
-
- expect(newOptionLabel).dom.to.be.equal(`
-
-
-
- Opt
- ion 2
-
- `);
- });
-});
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.snapshot.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.snapshot.spec.ts
new file mode 100644
index 0000000000..dd360a7aa8
--- /dev/null
+++ b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.snapshot.spec.ts
@@ -0,0 +1,64 @@
+import { expect } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+
+import type { SbbAutocompleteGridOptionElement } from './autocomplete-grid-option.js';
+import '../autocomplete-grid.js';
+import '../autocomplete-grid-row.js';
+import './autocomplete-grid-option.js';
+import '../autocomplete-grid-cell.js';
+import '../autocomplete-grid-button.js';
+
+describe('sbb-autocomplete-grid-option', () => {
+ describe('default', () => {
+ let root: SbbAutocompleteGridOptionElement;
+ beforeEach(async () => {
+ root = (
+ await fixture(html`
+
+
+ Option 1
+
+
+
+ `)
+ ).querySelector('sbb-autocomplete-grid-option')!;
+ });
+
+ it('DOM', async () => {
+ await expect(root).dom.to.be.equalSnapshot();
+ });
+
+ it('Shadow DOM', async () => {
+ await expect(root).shadowDom.to.be.equalSnapshot();
+ });
+ });
+
+ testA11yTreeSnapshot(
+ html`Option 1 `,
+ );
+
+ describe('disabled', () => {
+ let root: SbbAutocompleteGridOptionElement;
+ beforeEach(async () => {
+ root = (
+ await fixture(html`
+
+
+ Option 1
+
+
+
+ `)
+ ).querySelector('sbb-autocomplete-grid-option')!;
+ });
+
+ it('DOM', async () => {
+ await expect(root).to.have.attribute('disabled');
+ await expect(root).to.have.attribute('aria-disabled', 'true');
+ });
+ });
+});
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts
index 011902184e..38172e7dcc 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.spec.ts
@@ -1,64 +1,225 @@
-import { expect } from '@open-wc/testing';
+import { assert, expect } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
import { html } from 'lit/static-html.js';
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForLitRender } from '../../core/testing.js';
+import type { SbbFormFieldElement } from '../../form-field.js';
+import type { SbbAutocompleteGridOptgroupElement } from '../autocomplete-grid-optgroup.js';
+import type { SbbAutocompleteGridElement } from '../autocomplete-grid.js';
-import type { SbbAutocompleteGridOptionElement } from './autocomplete-grid-option.js';
+import { SbbAutocompleteGridOptionElement } from './autocomplete-grid-option.js';
+import '../../form-field.js';
import '../autocomplete-grid.js';
+import '../autocomplete-grid-optgroup.js';
import '../autocomplete-grid-row.js';
-import './autocomplete-grid-option.js';
import '../autocomplete-grid-cell.js';
import '../autocomplete-grid-button.js';
-describe('sbb-autocomplete-grid-option', () => {
- describe('default', () => {
- let root: SbbAutocompleteGridOptionElement;
- beforeEach(async () => {
- root = (
- await fixture(html`
-
-
- Option 1
-
-
-
- `)
- ).querySelector('sbb-autocomplete-grid-option')!;
- });
-
- it('Dom', async () => {
- await expect(root).dom.to.be.equalSnapshot();
- });
-
- it('ShadowDom', async () => {
- await expect(root).shadowDom.to.be.equalSnapshot();
- });
+describe(`sbb-autocomplete-grid-option`, () => {
+ let element: SbbFormFieldElement;
+
+ beforeEach(async () => {
+ element = await fixture(html`
+
+
+
+
+ Option 1
+
+
+
+
+
+ Option 2
+
+
+
+
+
+
+ `);
+ });
+
+ it('renders', async () => {
+ const option = element.querySelector('sbb-autocomplete-grid-option')!;
+ assert.instanceOf(option, SbbAutocompleteGridOptionElement);
+ });
+
+ it('set selected and emits on click', async () => {
+ const selectionChangeSpy = new EventSpy(
+ SbbAutocompleteGridOptionElement.events.selectionChange,
+ );
+ const optionOne = element.querySelector(
+ 'sbb-autocomplete-grid-option',
+ )!;
+
+ optionOne.dispatchEvent(new CustomEvent('click'));
+ await waitForLitRender(element);
+
+ expect(optionOne.selected).to.be.equal(true);
+ expect(selectionChangeSpy.count).to.be.equal(1);
});
- testA11yTreeSnapshot(
- html`Option 1 `,
- );
+ it('highlight on input', async () => {
+ const input = element.querySelector('input')!;
+ const autocomplete =
+ element.querySelector('sbb-autocomplete-grid')!;
+ const options = element.querySelectorAll('sbb-autocomplete-grid-option');
+ const optionOneLabel = options[0].shadowRoot!.querySelector('.sbb-option__label');
+ const optionTwoLabel = options[1].shadowRoot!.querySelector('.sbb-option__label');
+
+ input.focus();
+ await sendKeys({ press: '1' });
+ await waitForLitRender(autocomplete);
+
+ expect(optionOneLabel).dom.to.be.equal(`
+
+
+ Option
+ 1
+
+
+ `);
+ expect(optionTwoLabel).dom.to.be.equal(`
+
+
+ Option 2
+
+ `);
+ });
+
+ it('highlight after option label changed', async () => {
+ const input = element.querySelector('input')!;
+ const autocomplete =
+ element.querySelector('sbb-autocomplete-grid')!;
+ const options = element.querySelectorAll('sbb-autocomplete-grid-option');
+ const optionOneLabel = options[0].shadowRoot!.querySelector('.sbb-option__label');
+
+ input.focus();
+ await sendKeys({ type: 'Opt' });
+ await waitForLitRender(autocomplete);
+
+ expect(optionOneLabel).dom.to.be.equal(`
+
+
+
+ Opt
+ ion 1
+
+ `);
+
+ options[0].textContent = 'Other content';
+ await waitForLitRender(autocomplete);
+
+ expect(optionOneLabel).dom.to.be.equal(`
+
+
+ Other content
+
+ `);
- describe('disabled', () => {
- let root: SbbAutocompleteGridOptionElement;
- beforeEach(async () => {
- root = (
- await fixture(html`
-
+ options[0].textContent = 'Option';
+ await waitForLitRender(autocomplete);
+
+ expect(optionOneLabel).dom.to.be.equal(`
+
+
+
+ Opt
+ ion
+
+ `);
+ });
+
+ it('highlight later added options', async () => {
+ const input = element.querySelector('input')!;
+ const autocomplete =
+ element.querySelector('sbb-autocomplete-grid')!;
+ const options = element.querySelectorAll('sbb-autocomplete-grid-option');
+ const optionOneLabel = options[0].shadowRoot!.querySelector('.sbb-option__label');
+
+ input.focus();
+ await sendKeys({ type: 'Opt' });
+ await waitForLitRender(autocomplete);
+
+ expect(optionOneLabel).dom.to.be.equal(`
+
+
+
+ Opt
+ ion 1
+
+ `);
+
+ const newOption = document.createElement('sbb-autocomplete-grid-option');
+ newOption.innerText = 'Option 3';
+ autocomplete.append(newOption);
+ await waitForLitRender(autocomplete);
+
+ const newOptionLabel = newOption.shadowRoot!.querySelector('.sbb-option__label');
+
+ expect(newOptionLabel).dom.to.be.equal(`
+
+
+
+ Opt
+ ion 3
+
+ `);
+ });
+
+ it('highlight later added options in sbb-optgroup', async () => {
+ element = await fixture(html`
+
+
+
+
- Option 1
+ Option 1
+
+
+
-
-
- `)
- ).querySelector('sbb-autocomplete-grid-option')!;
- });
-
- it('Dom', async () => {
- await expect(root).to.have.attribute('disabled');
- await expect(root).to.have.attribute('aria-disabled', 'true');
- });
+
+
+
+ `);
+
+ const input = element.querySelector('input')!;
+ const optgroup = element.querySelector(
+ 'sbb-autocomplete-grid-optgroup',
+ )!;
+ const options = element.querySelectorAll('sbb-autocomplete-grid-option');
+ const optionOneLabel = options[0].shadowRoot!.querySelector('.sbb-option__label');
+
+ input.focus();
+ await sendKeys({ type: 'Opt' });
+ await waitForLitRender(element);
+
+ expect(optionOneLabel).dom.to.be.equal(`
+
+
+
+ Opt
+ ion 1
+
+ `);
+
+ const newOption = document.createElement('sbb-autocomplete-grid-option');
+ newOption.innerText = 'Option 2';
+ optgroup.append(newOption);
+ await waitForLitRender(element);
+
+ const newOptionLabel = newOption.shadowRoot!.querySelector('.sbb-option__label');
+
+ expect(newOptionLabel).dom.to.be.equal(`
+
+
+
+ Opt
+ ion 2
+
+ `);
});
});
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ssr.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ssr.spec.ts
new file mode 100644
index 0000000000..ce5edda29e
--- /dev/null
+++ b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ssr.spec.ts
@@ -0,0 +1,47 @@
+import { assert } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { fixture } from '../../core/testing/private.js';
+import type { SbbFormFieldElement } from '../../form-field.js';
+
+import { SbbAutocompleteGridOptionElement } from './autocomplete-grid-option.js';
+import '../../form-field.js';
+import '../autocomplete-grid.js';
+import '../autocomplete-grid-optgroup.js';
+import '../autocomplete-grid-row.js';
+import '../autocomplete-grid-cell.js';
+import '../autocomplete-grid-button.js';
+
+describe(`sbb-autocomplete-grid-option`, () => {
+ let element: SbbFormFieldElement;
+
+ beforeEach(async () => {
+ element = await fixture(
+ html`
+
+
+
+
+ Option 1
+
+
+
+
+
+ Option 2
+
+
+
+
+
+
+ `,
+ { modules: ['../../autocomplete-grid.ts', '../../form-field.ts'] },
+ );
+ });
+
+ it('renders', async () => {
+ const option = element.querySelector('sbb-autocomplete-grid-option')!;
+ assert.instanceOf(option, SbbAutocompleteGridOptionElement);
+ });
+});
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.spec.snap.js b/src/elements/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.snapshot.spec.snap.js
similarity index 69%
rename from src/elements/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.spec.snap.js
rename to src/elements/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.snapshot.spec.snap.js
index 0638d24629..c53b554985 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.spec.snap.js
+++ b/src/elements/autocomplete-grid/autocomplete-grid-row/__snapshots__/autocomplete-grid-row.snapshot.spec.snap.js
@@ -1,7 +1,7 @@
/* @web/test-runner snapshot v1 */
export const snapshots = {};
-snapshots["sbb-autocomplete-grid-row Dom"] =
+snapshots["sbb-autocomplete-grid-row renders DOM"] =
`
`;
-/* end snapshot sbb-autocomplete-grid-row Dom */
+/* end snapshot sbb-autocomplete-grid-row renders DOM */
-snapshots["sbb-autocomplete-grid-row ShadowDom"] =
+snapshots["sbb-autocomplete-grid-row renders Shadow DOM"] =
`
`;
-/* end snapshot sbb-autocomplete-grid-row ShadowDom */
+/* end snapshot sbb-autocomplete-grid-row renders Shadow DOM */
-snapshots["sbb-autocomplete-grid-row A11y tree Chrome"] =
+snapshots["sbb-autocomplete-grid-row renders A11y tree Chrome"] =
`
{
"role": "WebArea",
@@ -57,9 +57,9 @@ snapshots["sbb-autocomplete-grid-row A11y tree Chrome"] =
}
`;
-/* end snapshot sbb-autocomplete-grid-row A11y tree Chrome */
+/* end snapshot sbb-autocomplete-grid-row renders A11y tree Chrome */
-snapshots["sbb-autocomplete-grid-row A11y tree Firefox"] =
+snapshots["sbb-autocomplete-grid-row renders A11y tree Firefox"] =
`
{
"role": "document",
@@ -77,5 +77,5 @@ snapshots["sbb-autocomplete-grid-row A11y tree Firefox"] =
}
`;
-/* end snapshot sbb-autocomplete-grid-row A11y tree Firefox */
+/* end snapshot sbb-autocomplete-grid-row renders A11y tree Firefox */
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.snapshot.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.snapshot.spec.ts
new file mode 100644
index 0000000000..068eb01c57
--- /dev/null
+++ b/src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.snapshot.spec.ts
@@ -0,0 +1,44 @@
+import { expect } from '@open-wc/testing';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit/static-html.js';
+
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+
+import type { SbbAutocompleteGridRowElement } from './autocomplete-grid-row.js';
+import '../autocomplete-grid.js';
+import './autocomplete-grid-row.js';
+import '../autocomplete-grid-option.js';
+import '../autocomplete-grid-cell.js';
+import '../autocomplete-grid-button.js';
+
+describe('sbb-autocomplete-grid-row', () => {
+ describe('renders', () => {
+ let root: SbbAutocompleteGridRowElement;
+ const row: TemplateResult = html`
+
+ Option 1
+
+
+
+
+ `;
+ beforeEach(async () => {
+ root = (
+ await fixture(html`
+ ${row}
+
+ `)
+ ).querySelector('sbb-autocomplete-grid-row')!;
+ });
+
+ it('DOM', async () => {
+ await expect(root).dom.to.be.equalSnapshot();
+ });
+
+ it('Shadow DOM', async () => {
+ await expect(root).shadowDom.to.be.equalSnapshot();
+ });
+
+ testA11yTreeSnapshot(row);
+ });
+});
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.spec.ts
index d7adcf2906..2e4d0035ab 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.spec.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.spec.ts
@@ -1,42 +1,20 @@
-import { expect } from '@open-wc/testing';
-import type { TemplateResult } from 'lit';
+import { assert } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import { fixture } from '../../core/testing/private.js';
-import type { SbbAutocompleteGridRowElement } from './autocomplete-grid-row.js';
-import '../autocomplete-grid.js';
-import './autocomplete-grid-row.js';
-import '../autocomplete-grid-option.js';
-import '../autocomplete-grid-cell.js';
-import '../autocomplete-grid-button.js';
+import { SbbAutocompleteGridRowElement } from './autocomplete-grid-row.js';
describe('sbb-autocomplete-grid-row', () => {
- let root: SbbAutocompleteGridRowElement;
- const row: TemplateResult = html`
-
- Option 1
-
-
-
-
- `;
- beforeEach(async () => {
- root = (
- await fixture(html`
- ${row}
-
- `)
- ).querySelector('sbb-autocomplete-grid-row')!;
- });
+ let element: SbbAutocompleteGridRowElement;
- it('Dom', async () => {
- await expect(root).dom.to.be.equalSnapshot();
+ beforeEach(async () => {
+ element = await fixture(html` `, {
+ modules: ['./autocomplete-grid-row.ts'],
+ });
});
- it('ShadowDom', async () => {
- await expect(root).shadowDom.to.be.equalSnapshot();
+ it('renders', async () => {
+ assert.instanceOf(element, SbbAutocompleteGridRowElement);
});
-
- testA11yTreeSnapshot(row);
});
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.e2e.ts b/src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.ssr.spec.ts
similarity index 100%
rename from src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.e2e.ts
rename to src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.ssr.spec.ts
diff --git a/src/elements/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.spec.snap.js b/src/elements/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.snapshot.spec.snap.js
similarity index 91%
rename from src/elements/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.spec.snap.js
rename to src/elements/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.snapshot.spec.snap.js
index 49a888f694..dde7f35f5a 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.spec.snap.js
+++ b/src/elements/autocomplete-grid/autocomplete-grid/__snapshots__/autocomplete-grid.snapshot.spec.snap.js
@@ -1,7 +1,7 @@
/* @web/test-runner snapshot v1 */
export const snapshots = {};
-snapshots["sbb-autocomplete-grid Chrome-Firefox Dom"] =
+snapshots["sbb-autocomplete-grid Chrome-Firefox DOM"] =
`
`;
-/* end snapshot sbb-autocomplete-grid Chrome-Firefox Dom */
+/* end snapshot sbb-autocomplete-grid Chrome-Firefox DOM */
-snapshots["sbb-autocomplete-grid Chrome-Firefox ShadowDom"] =
+snapshots["sbb-autocomplete-grid Chrome-Firefox Shadow DOM"] =
`
@@ -94,16 +94,16 @@ snapshots["sbb-autocomplete-grid Chrome-Firefox ShadowDom"] =
`;
-/* end snapshot sbb-autocomplete-grid Chrome-Firefox ShadowDom */
+/* end snapshot sbb-autocomplete-grid Chrome-Firefox Shadow DOM */
-snapshots["sbb-autocomplete-grid Chrome-Firefox A11y tree Firefox"] =
+snapshots["sbb-autocomplete-grid Chrome-Firefox A11y tree Chrome"] =
`
{
- "role": "document",
+ "role": "WebArea",
"name": "",
"children": [
{
- "role": "statictext",
+ "role": "text",
"name": "​"
},
{
@@ -116,16 +116,16 @@ snapshots["sbb-autocomplete-grid Chrome-Firefox A11y tree Firefox"] =
}
`;
-/* end snapshot sbb-autocomplete-grid Chrome-Firefox A11y tree Firefox */
+/* end snapshot sbb-autocomplete-grid Chrome-Firefox A11y tree Chrome */
-snapshots["sbb-autocomplete-grid Chrome-Firefox A11y tree Chrome"] =
+snapshots["sbb-autocomplete-grid Chrome-Firefox A11y tree Firefox"] =
`
{
- "role": "WebArea",
+ "role": "document",
"name": "",
"children": [
{
- "role": "text",
+ "role": "statictext",
"name": "​"
},
{
@@ -138,9 +138,9 @@ snapshots["sbb-autocomplete-grid Chrome-Firefox A11y tree Chrome"] =
}
`;
-/* end snapshot sbb-autocomplete-grid Chrome-Firefox A11y tree Chrome */
+/* end snapshot sbb-autocomplete-grid Chrome-Firefox A11y tree Firefox */
-snapshots["sbb-autocomplete-grid Safari Dom"] =
+snapshots["sbb-autocomplete-grid Safari DOM"] =
`
`;
-/* end snapshot sbb-autocomplete-grid Safari Dom */
+/* end snapshot sbb-autocomplete-grid Safari DOM */
-snapshots["sbb-autocomplete-grid Safari ShadowDom"] =
+snapshots["sbb-autocomplete-grid Safari Shadow DOM"] =
`
@@ -231,5 +231,5 @@ snapshots["sbb-autocomplete-grid Safari ShadowDom"] =
`;
-/* end snapshot sbb-autocomplete-grid Safari ShadowDom */
+/* end snapshot sbb-autocomplete-grid Safari Shadow DOM */
diff --git a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.e2e.ts b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.e2e.ts
deleted file mode 100644
index c5c92d668a..0000000000
--- a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.e2e.ts
+++ /dev/null
@@ -1,375 +0,0 @@
-import { assert, expect } from '@open-wc/testing';
-import { sendKeys, sendMouse } from '@web/test-runner-commands';
-import { html } from 'lit/static-html.js';
-
-import { isSafari } from '../../core/dom.js';
-import { fixture } from '../../core/testing/private.js';
-import { describeIf, EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
-import { SbbFormFieldElement } from '../../form-field.js';
-import type { SbbAutocompleteGridButtonElement } from '../autocomplete-grid-button.js';
-import { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option.js';
-
-import { SbbAutocompleteGridElement } from './autocomplete-grid.js';
-import '../autocomplete-grid-row.js';
-import '../autocomplete-grid-cell.js';
-import '../autocomplete-grid-button.js';
-
-describe(`sbb-autocomplete-grid with ${fixture.name}`, () => {
- let formField: SbbFormFieldElement;
- let element: SbbAutocompleteGridElement;
- let input: HTMLInputElement;
-
- beforeEach(async () => {
- formField = await fixture(
- html`
-
-
-
-
- Option 1
-
-
-
-
-
- Option 2
-
-
-
-
-
-
-
-
-
- `,
- { modules: ['../../autocomplete-grid.ts', '../../form-field.ts'] },
- );
- input = formField.querySelector('input')!;
- element = formField.querySelector('sbb-autocomplete-grid')!;
- });
-
- describeIf(isSafari, 'Safari', async () => {
- it('renders and sets the correct attributes', () => {
- assert.instanceOf(formField, SbbFormFieldElement);
- assert.instanceOf(element, SbbAutocompleteGridElement);
-
- expect(element).not.to.have.attribute('autocomplete-origin-borderless');
-
- expect(input).to.have.attribute('autocomplete', 'off');
- expect(input).to.have.attribute('role', 'combobox');
- expect(input).to.have.attribute('aria-autocomplete', 'list');
- expect(input).to.have.attribute('aria-haspopup', 'grid');
- expect(input).to.have.attribute('aria-controls', 'myAutocomplete');
- expect(input).to.have.attribute('aria-owns', 'myAutocomplete');
- expect(input).to.have.attribute('aria-expanded', 'false');
- });
- });
-
- describeIf(!isSafari, 'Chrome-Firefox', async () => {
- it('renders and sets the correct attributes', () => {
- assert.instanceOf(formField, SbbFormFieldElement);
- assert.instanceOf(element, SbbAutocompleteGridElement);
-
- expect(element).not.to.have.attribute('autocomplete-origin-borderless');
-
- expect(input).to.have.attribute('autocomplete', 'off');
- expect(input).to.have.attribute('role', 'combobox');
- expect(input).to.have.attribute('aria-autocomplete', 'list');
- expect(input).to.have.attribute('aria-haspopup', 'grid');
- expect(input).to.have.attribute('aria-controls', 'sbb-autocomplete-grid-11');
- expect(input).to.have.attribute('aria-owns', 'sbb-autocomplete-grid-11');
- expect(input).to.have.attribute('aria-expanded', 'false');
- });
- });
-
- it('opens and closes with mouse and keyboard', async () => {
- const willOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willOpen);
- const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen);
- const willCloseEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willClose);
- const didCloseEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didClose);
-
- input.click();
- await waitForCondition(() => willOpenEventSpy.events.length === 1);
- expect(willOpenEventSpy.count).to.be.equal(1);
-
- await waitForCondition(() => didOpenEventSpy.events.length === 1);
- expect(didOpenEventSpy.count).to.be.equal(1);
- expect(input).to.have.attribute('aria-expanded', 'true');
-
- await sendKeys({ press: 'Escape' });
- await waitForCondition(() => willCloseEventSpy.events.length === 1);
- expect(willCloseEventSpy.count).to.be.equal(1);
- await waitForCondition(() => didCloseEventSpy.events.length === 1);
- expect(didCloseEventSpy.count).to.be.equal(1);
- expect(input).to.have.attribute('aria-expanded', 'false');
-
- await sendKeys({ press: 'ArrowDown' });
- await waitForCondition(() => willOpenEventSpy.events.length === 2);
- expect(willOpenEventSpy.count).to.be.equal(2);
- await waitForCondition(() => didOpenEventSpy.events.length === 2);
- expect(didOpenEventSpy.count).to.be.equal(2);
- expect(input).to.have.attribute('aria-expanded', 'true');
-
- await sendKeys({ press: 'Tab' });
- await waitForCondition(() => willCloseEventSpy.events.length === 2);
- expect(willCloseEventSpy.count).to.be.equal(2);
- await waitForCondition(() => didCloseEventSpy.events.length === 2);
- expect(didCloseEventSpy.count).to.be.equal(2);
- expect(input).to.have.attribute('aria-expanded', 'false');
-
- input.click();
- await waitForCondition(() => willOpenEventSpy.events.length === 3);
- expect(willOpenEventSpy.count).to.be.equal(3);
- await waitForCondition(() => didOpenEventSpy.events.length === 3);
- expect(didOpenEventSpy.count).to.be.equal(3);
- expect(input).to.have.attribute('aria-expanded', 'true');
-
- // Simulate backdrop click
- sendMouse({ type: 'click', position: [formField.offsetWidth + 25, 25] });
-
- await waitForCondition(() => willCloseEventSpy.events.length === 3);
- expect(willCloseEventSpy.count).to.be.equal(3);
- await waitForCondition(() => didCloseEventSpy.events.length === 3);
- expect(didCloseEventSpy.count).to.be.equal(3);
- expect(input).to.have.attribute('aria-expanded', 'false');
- });
-
- it('select by mouse', async () => {
- const willOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willOpen);
- const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen);
- const optionSelectedEventSpy = new EventSpy(
- SbbAutocompleteGridOptionElement.events.optionSelected,
- );
-
- input.focus();
- await waitForCondition(() => willOpenEventSpy.events.length === 1);
- expect(willOpenEventSpy.count).to.be.equal(1);
- await waitForCondition(() => didOpenEventSpy.events.length === 1);
- expect(didOpenEventSpy.count).to.be.equal(1);
-
- await sendKeys({ press: 'ArrowDown' });
- await sendKeys({ press: 'ArrowDown' });
- await sendKeys({ press: 'Enter' });
- await waitForLitRender(element);
-
- expect(optionSelectedEventSpy.count).to.be.equal(1);
- expect(optionSelectedEventSpy.firstEvent!.target).to.have.property('id', 'option-2');
- });
-
- it('select button and get related option', async () => {
- const willOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willOpen);
- const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen);
- const clickSpy = new EventSpy('click');
-
- input.focus();
- await waitForCondition(() => willOpenEventSpy.events.length === 1);
- expect(willOpenEventSpy.count).to.be.equal(1);
- await waitForCondition(() => didOpenEventSpy.events.length === 1);
- expect(didOpenEventSpy.count).to.be.equal(1);
-
- const buttonOne = element.querySelector('#button-1') as SbbAutocompleteGridButtonElement;
- buttonOne.click();
- await waitForLitRender(element);
-
- await waitForCondition(() => clickSpy.events.length === 1);
- expect(clickSpy.count).to.be.equal(1);
- expect(
- (clickSpy.firstEvent!.target as SbbAutocompleteGridButtonElement).option!.textContent,
- ).to.be.equal('Option 1');
- expect(
- (clickSpy.firstEvent!.target as SbbAutocompleteGridButtonElement).option!.value,
- ).to.be.equal('1');
- });
-
- it('keyboard navigation', async () => {
- const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen);
- const optOne = element.querySelector('#option-1');
- const buttonOne = element.querySelector('#button-1');
- const optTwo = element.querySelector('#option-2');
- const buttonTwo = element.querySelector('#button-2');
- const buttonThree = element.querySelector('#button-3');
- input.focus();
-
- await waitForCondition(() => didOpenEventSpy.events.length === 1);
- expect(didOpenEventSpy.count).to.be.equal(1);
-
- await sendKeys({ press: 'ArrowDown' });
- await sendKeys({ press: 'ArrowDown' });
- await waitForLitRender(element);
- expect(optTwo).to.have.attribute('active');
- expect(buttonTwo).not.to.have.attribute('data-focus-visible');
- expect(buttonThree).not.to.have.attribute('data-focus-visible');
- expect(input).to.have.attribute('aria-activedescendant', 'option-2');
-
- await sendKeys({ press: 'ArrowRight' });
- await waitForLitRender(element);
- expect(optTwo).not.to.have.attribute('active');
- expect(buttonTwo).to.have.attribute('data-focus-visible');
- expect(buttonThree).not.to.have.attribute('data-focus-visible');
- expect(input).to.have.attribute('aria-activedescendant', 'button-2');
-
- await sendKeys({ press: 'ArrowRight' });
- await waitForLitRender(element);
- expect(optTwo).not.to.have.attribute('active');
- expect(buttonTwo).not.to.have.attribute('data-focus-visible');
- expect(buttonThree).to.have.attribute('data-focus-visible');
- expect(input).to.have.attribute('aria-activedescendant', 'button-3');
-
- await sendKeys({ press: 'ArrowDown' });
- await waitForLitRender(element);
- expect(optOne).to.have.attribute('active');
- expect(buttonOne).not.to.have.attribute('data-focus-visible');
- expect(optTwo).not.to.have.attribute('active');
- expect(buttonTwo).not.to.have.attribute('data-focus-visible');
- expect(buttonThree).not.to.have.attribute('data-focus-visible');
- expect(input).to.have.attribute('aria-activedescendant', 'option-1');
- });
-
- it('opens and select with keyboard', async () => {
- const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen);
- const didCloseEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didClose);
- const optionSelectedEventSpy = new EventSpy(
- SbbAutocompleteGridOptionElement.events.optionSelected,
- );
- const optOne = element.querySelector('#option-1');
- const optTwo = element.querySelector('#option-2');
- input.focus();
-
- await waitForCondition(() => didOpenEventSpy.events.length === 1);
- expect(didOpenEventSpy.count).to.be.equal(1);
-
- await sendKeys({ press: 'ArrowDown' });
- await sendKeys({ press: 'ArrowDown' });
- await waitForLitRender(element);
- expect(optOne).not.to.have.attribute('active');
- expect(optOne).not.to.have.attribute('selected');
- expect(optTwo).to.have.attribute('active');
- expect(optTwo).not.to.have.attribute('selected');
- expect(input).to.have.attribute('aria-activedescendant', 'option-2');
-
- await sendKeys({ press: 'Enter' });
- await waitForCondition(() => didCloseEventSpy.events.length === 1);
- expect(didCloseEventSpy.count).to.be.equal(1);
-
- expect(optTwo).not.to.have.attribute('active');
- expect(optTwo).to.have.attribute('selected');
- expect(optionSelectedEventSpy.count).to.be.equal(1);
- expect(input).to.have.attribute('aria-expanded', 'false');
- expect(input).not.to.have.attribute('aria-activedescendant');
- });
-
- it('opens and select button with keyboard', async () => {
- const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen);
- const clickSpy = new EventSpy('click');
- const optOne = element.querySelector('#option-1');
- const buttonOne = element.querySelector('#button-1');
- const buttonTwo = element.querySelector('#button-2');
- input.focus();
-
- await waitForCondition(() => didOpenEventSpy.events.length === 1);
- expect(didOpenEventSpy.count).to.be.equal(1);
-
- await sendKeys({ press: 'ArrowDown' });
- await waitForLitRender(element);
- expect(optOne).to.have.attribute('active');
- expect(buttonOne).not.to.have.attribute('data-focus-visible');
- await sendKeys({ press: 'ArrowRight' });
- expect(optOne).not.to.have.attribute('active');
- expect(buttonOne).to.have.attribute('data-focus-visible');
- expect(input).to.have.attribute('aria-activedescendant', 'button-1');
- await sendKeys({ press: 'Enter' });
- await waitForCondition(() => clickSpy.events.length === 1);
- expect(clickSpy.count).to.be.equal(1);
-
- await sendKeys({ press: 'ArrowDown' });
- await sendKeys({ press: 'ArrowRight' });
- await waitForLitRender(element);
- expect(optOne).not.to.have.attribute('active');
- expect(buttonOne).not.to.have.attribute('data-focus-visible');
- expect(buttonTwo).to.have.attribute('data-focus-visible');
- expect(input).to.have.attribute('aria-activedescendant', 'button-2');
- await sendKeys({ press: 'Enter' });
- await waitForCondition(() => clickSpy.events.length === 2);
- expect(clickSpy.count).to.be.equal(2);
- });
-
- it('should stay closed when disabled', async () => {
- input.setAttribute('disabled', '');
-
- input.focus();
- await waitForLitRender(element);
- expect(input).to.have.attribute('aria-expanded', 'false');
-
- input.click();
- await waitForLitRender(element);
- expect(input).to.have.attribute('aria-expanded', 'false');
-
- await sendKeys({ press: 'ArrowDown' });
- await waitForLitRender(element);
- expect(input).to.have.attribute('aria-expanded', 'false');
- });
-
- it('should stay closed when readonly', async () => {
- input.setAttribute('readonly', '');
-
- input.focus();
- await waitForLitRender(element);
- expect(input).to.have.attribute('aria-expanded', 'false');
-
- input.click();
- await waitForLitRender(element);
- expect(input).to.have.attribute('aria-expanded', 'false');
-
- await sendKeys({ press: 'ArrowDown' });
- await waitForLitRender(element);
- expect(input).to.have.attribute('aria-expanded', 'false');
- });
-
- it('does not open if prevented', async () => {
- const willOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willOpen);
-
- element.addEventListener(SbbAutocompleteGridElement.events.willOpen, (ev) =>
- ev.preventDefault(),
- );
- element.open();
-
- await waitForCondition(() => willOpenEventSpy.events.length === 1);
- expect(willOpenEventSpy.count).to.be.equal(1);
- await waitForLitRender(element);
-
- expect(element).to.have.attribute('data-state', 'closed');
- });
-
- it('does not close if prevented', async () => {
- const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen);
- const willCloseEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willClose);
-
- element.open();
- await waitForCondition(() => didOpenEventSpy.events.length === 1);
- await waitForLitRender(element);
-
- element.addEventListener(SbbAutocompleteGridElement.events.willClose, (ev) =>
- ev.preventDefault(),
- );
- element.close();
-
- await waitForCondition(() => willCloseEventSpy.events.length === 1);
- await waitForLitRender(element);
-
- expect(element).to.have.attribute('data-state', 'opened');
- });
-});
diff --git a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.snapshot.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.snapshot.spec.ts
new file mode 100644
index 0000000000..71bf81fe40
--- /dev/null
+++ b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.snapshot.spec.ts
@@ -0,0 +1,67 @@
+import { expect } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { isSafari } from '../../core/dom.js';
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import { describeIf } from '../../core/testing.js';
+import type { SbbFormFieldElement } from '../../form-field.js';
+
+import type { SbbAutocompleteGridElement } from './autocomplete-grid.js';
+import './autocomplete-grid.js';
+import '../autocomplete-grid-row.js';
+import '../autocomplete-grid-option.js';
+import '../autocomplete-grid-cell.js';
+import '../autocomplete-grid-button.js';
+import '../../form-field/form-field/form-field.js';
+
+describe('sbb-autocomplete-grid', () => {
+ let root: SbbFormFieldElement;
+ let element: SbbAutocompleteGridElement;
+
+ beforeEach(async () => {
+ root = await fixture(html`
+
+
+
+
+ Option 1
+
+
+
+
+
+ Option 2
+
+
+
+
+
+
+ `);
+ element = root.querySelector('sbb-autocomplete-grid')!;
+ });
+
+ describeIf(!isSafari, 'Chrome-Firefox', async () => {
+ it('DOM', async () => {
+ await expect(element).dom.to.be.equalSnapshot();
+ });
+
+ it('Shadow DOM', async () => {
+ await expect(element).shadowDom.to.be.equalSnapshot();
+ });
+
+ testA11yTreeSnapshot();
+ });
+
+ describeIf(isSafari, 'Safari', async () => {
+ it('DOM', async () => {
+ await expect(element).dom.to.be.equalSnapshot();
+ });
+
+ it('Shadow DOM', async () => {
+ await expect(element).shadowDom.to.be.equalSnapshot();
+ });
+
+ testA11yTreeSnapshot();
+ });
+});
diff --git a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts
index a65a9d4192..f4f1b7eac6 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.spec.ts
@@ -1,67 +1,372 @@
-import { expect } from '@open-wc/testing';
+import { assert, expect } from '@open-wc/testing';
+import { sendKeys, sendMouse } from '@web/test-runner-commands';
import { html } from 'lit/static-html.js';
import { isSafari } from '../../core/dom.js';
-import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
-import { describeIf } from '../../core/testing.js';
-import type { SbbFormFieldElement } from '../../form-field.js';
+import { fixture } from '../../core/testing/private.js';
+import { describeIf, EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
+import { SbbFormFieldElement } from '../../form-field.js';
+import type { SbbAutocompleteGridButtonElement } from '../autocomplete-grid-button.js';
+import { SbbAutocompleteGridOptionElement } from '../autocomplete-grid-option.js';
-import type { SbbAutocompleteGridElement } from './autocomplete-grid.js';
-import './autocomplete-grid.js';
+import { SbbAutocompleteGridElement } from './autocomplete-grid.js';
import '../autocomplete-grid-row.js';
-import '../autocomplete-grid-option.js';
import '../autocomplete-grid-cell.js';
import '../autocomplete-grid-button.js';
-import '../../form-field/form-field/form-field.js';
-describe('sbb-autocomplete-grid', () => {
- let root: SbbFormFieldElement;
+describe(`sbb-autocomplete-grid`, () => {
+ let formField: SbbFormFieldElement;
let element: SbbAutocompleteGridElement;
+ let input: HTMLInputElement;
beforeEach(async () => {
- root = await fixture(html`
+ formField = await fixture(html`
-
+
- Option 1
+ Option 1
-
+
- Option 2
+ Option 2
-
+
+
+
+
`);
- element = root.querySelector('sbb-autocomplete-grid')!;
+ input = formField.querySelector('input')!;
+ element = formField.querySelector('sbb-autocomplete-grid')!;
});
- describeIf(!isSafari, 'Chrome-Firefox', async () => {
- it('Dom', async () => {
- await expect(element).dom.to.be.equalSnapshot();
+ describeIf(isSafari, 'Safari', async () => {
+ it('renders and sets the correct attributes', () => {
+ assert.instanceOf(formField, SbbFormFieldElement);
+ assert.instanceOf(element, SbbAutocompleteGridElement);
+
+ expect(element).not.to.have.attribute('autocomplete-origin-borderless');
+
+ expect(input).to.have.attribute('autocomplete', 'off');
+ expect(input).to.have.attribute('role', 'combobox');
+ expect(input).to.have.attribute('aria-autocomplete', 'list');
+ expect(input).to.have.attribute('aria-haspopup', 'grid');
+ expect(input).to.have.attribute('aria-controls', 'myAutocomplete');
+ expect(input).to.have.attribute('aria-owns', 'myAutocomplete');
+ expect(input).to.have.attribute('aria-expanded', 'false');
});
+ });
+
+ describeIf(!isSafari, 'Chrome-Firefox', async () => {
+ it('renders and sets the correct attributes', () => {
+ assert.instanceOf(formField, SbbFormFieldElement);
+ assert.instanceOf(element, SbbAutocompleteGridElement);
- it('ShadowDom', async () => {
- await expect(element).shadowDom.to.be.equalSnapshot();
+ expect(element).not.to.have.attribute('autocomplete-origin-borderless');
+
+ expect(input).to.have.attribute('autocomplete', 'off');
+ expect(input).to.have.attribute('role', 'combobox');
+ expect(input).to.have.attribute('aria-autocomplete', 'list');
+ expect(input).to.have.attribute('aria-haspopup', 'grid');
+ expect(input).to.have.attribute('aria-controls', 'sbb-autocomplete-grid-11');
+ expect(input).to.have.attribute('aria-owns', 'sbb-autocomplete-grid-11');
+ expect(input).to.have.attribute('aria-expanded', 'false');
});
+ });
+
+ it('opens and closes with mouse and keyboard', async () => {
+ const willOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willOpen);
+ const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen);
+ const willCloseEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willClose);
+ const didCloseEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didClose);
+
+ input.click();
+ await waitForCondition(() => willOpenEventSpy.events.length === 1);
+ expect(willOpenEventSpy.count).to.be.equal(1);
+
+ await waitForCondition(() => didOpenEventSpy.events.length === 1);
+ expect(didOpenEventSpy.count).to.be.equal(1);
+ expect(input).to.have.attribute('aria-expanded', 'true');
+
+ await sendKeys({ press: 'Escape' });
+ await waitForCondition(() => willCloseEventSpy.events.length === 1);
+ expect(willCloseEventSpy.count).to.be.equal(1);
+ await waitForCondition(() => didCloseEventSpy.events.length === 1);
+ expect(didCloseEventSpy.count).to.be.equal(1);
+ expect(input).to.have.attribute('aria-expanded', 'false');
+
+ await sendKeys({ press: 'ArrowDown' });
+ await waitForCondition(() => willOpenEventSpy.events.length === 2);
+ expect(willOpenEventSpy.count).to.be.equal(2);
+ await waitForCondition(() => didOpenEventSpy.events.length === 2);
+ expect(didOpenEventSpy.count).to.be.equal(2);
+ expect(input).to.have.attribute('aria-expanded', 'true');
+
+ await sendKeys({ press: 'Tab' });
+ await waitForCondition(() => willCloseEventSpy.events.length === 2);
+ expect(willCloseEventSpy.count).to.be.equal(2);
+ await waitForCondition(() => didCloseEventSpy.events.length === 2);
+ expect(didCloseEventSpy.count).to.be.equal(2);
+ expect(input).to.have.attribute('aria-expanded', 'false');
- testA11yTreeSnapshot();
+ input.click();
+ await waitForCondition(() => willOpenEventSpy.events.length === 3);
+ expect(willOpenEventSpy.count).to.be.equal(3);
+ await waitForCondition(() => didOpenEventSpy.events.length === 3);
+ expect(didOpenEventSpy.count).to.be.equal(3);
+ expect(input).to.have.attribute('aria-expanded', 'true');
+
+ // Simulate backdrop click
+ sendMouse({ type: 'click', position: [formField.offsetWidth + 25, 25] });
+
+ await waitForCondition(() => willCloseEventSpy.events.length === 3);
+ expect(willCloseEventSpy.count).to.be.equal(3);
+ await waitForCondition(() => didCloseEventSpy.events.length === 3);
+ expect(didCloseEventSpy.count).to.be.equal(3);
+ expect(input).to.have.attribute('aria-expanded', 'false');
});
- describeIf(isSafari, 'Safari', async () => {
- it('Dom', async () => {
- await expect(element).dom.to.be.equalSnapshot();
- });
+ it('select by mouse', async () => {
+ const willOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willOpen);
+ const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen);
+ const optionSelectedEventSpy = new EventSpy(
+ SbbAutocompleteGridOptionElement.events.optionSelected,
+ );
- it('ShadowDom', async () => {
- await expect(element).shadowDom.to.be.equalSnapshot();
- });
+ input.focus();
+ await waitForCondition(() => willOpenEventSpy.events.length === 1);
+ expect(willOpenEventSpy.count).to.be.equal(1);
+ await waitForCondition(() => didOpenEventSpy.events.length === 1);
+ expect(didOpenEventSpy.count).to.be.equal(1);
+
+ await sendKeys({ press: 'ArrowDown' });
+ await sendKeys({ press: 'ArrowDown' });
+ await sendKeys({ press: 'Enter' });
+ await waitForLitRender(element);
+
+ expect(optionSelectedEventSpy.count).to.be.equal(1);
+ expect(optionSelectedEventSpy.firstEvent!.target).to.have.property('id', 'option-2');
+ });
+
+ it('select button and get related option', async () => {
+ const willOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willOpen);
+ const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen);
+ const clickSpy = new EventSpy('click');
+
+ input.focus();
+ await waitForCondition(() => willOpenEventSpy.events.length === 1);
+ expect(willOpenEventSpy.count).to.be.equal(1);
+ await waitForCondition(() => didOpenEventSpy.events.length === 1);
+ expect(didOpenEventSpy.count).to.be.equal(1);
+
+ const buttonOne = element.querySelector('#button-1') as SbbAutocompleteGridButtonElement;
+ buttonOne.click();
+ await waitForLitRender(element);
+
+ await waitForCondition(() => clickSpy.events.length === 1);
+ expect(clickSpy.count).to.be.equal(1);
+ expect(
+ (clickSpy.firstEvent!.target as SbbAutocompleteGridButtonElement).option!.textContent,
+ ).to.be.equal('Option 1');
+ expect(
+ (clickSpy.firstEvent!.target as SbbAutocompleteGridButtonElement).option!.value,
+ ).to.be.equal('1');
+ });
+
+ it('keyboard navigation', async () => {
+ const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen);
+ const optOne = element.querySelector('#option-1');
+ const buttonOne = element.querySelector('#button-1');
+ const optTwo = element.querySelector('#option-2');
+ const buttonTwo = element.querySelector('#button-2');
+ const buttonThree = element.querySelector('#button-3');
+ input.focus();
+
+ await waitForCondition(() => didOpenEventSpy.events.length === 1);
+ expect(didOpenEventSpy.count).to.be.equal(1);
+
+ await sendKeys({ press: 'ArrowDown' });
+ await sendKeys({ press: 'ArrowDown' });
+ await waitForLitRender(element);
+ expect(optTwo).to.have.attribute('active');
+ expect(buttonTwo).not.to.have.attribute('data-focus-visible');
+ expect(buttonThree).not.to.have.attribute('data-focus-visible');
+ expect(input).to.have.attribute('aria-activedescendant', 'option-2');
+
+ await sendKeys({ press: 'ArrowRight' });
+ await waitForLitRender(element);
+ expect(optTwo).not.to.have.attribute('active');
+ expect(buttonTwo).to.have.attribute('data-focus-visible');
+ expect(buttonThree).not.to.have.attribute('data-focus-visible');
+ expect(input).to.have.attribute('aria-activedescendant', 'button-2');
+
+ await sendKeys({ press: 'ArrowRight' });
+ await waitForLitRender(element);
+ expect(optTwo).not.to.have.attribute('active');
+ expect(buttonTwo).not.to.have.attribute('data-focus-visible');
+ expect(buttonThree).to.have.attribute('data-focus-visible');
+ expect(input).to.have.attribute('aria-activedescendant', 'button-3');
+
+ await sendKeys({ press: 'ArrowDown' });
+ await waitForLitRender(element);
+ expect(optOne).to.have.attribute('active');
+ expect(buttonOne).not.to.have.attribute('data-focus-visible');
+ expect(optTwo).not.to.have.attribute('active');
+ expect(buttonTwo).not.to.have.attribute('data-focus-visible');
+ expect(buttonThree).not.to.have.attribute('data-focus-visible');
+ expect(input).to.have.attribute('aria-activedescendant', 'option-1');
+ });
+
+ it('opens and select with keyboard', async () => {
+ const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen);
+ const didCloseEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didClose);
+ const optionSelectedEventSpy = new EventSpy(
+ SbbAutocompleteGridOptionElement.events.optionSelected,
+ );
+ const optOne = element.querySelector('#option-1');
+ const optTwo = element.querySelector('#option-2');
+ input.focus();
+
+ await waitForCondition(() => didOpenEventSpy.events.length === 1);
+ expect(didOpenEventSpy.count).to.be.equal(1);
+
+ await sendKeys({ press: 'ArrowDown' });
+ await sendKeys({ press: 'ArrowDown' });
+ await waitForLitRender(element);
+ expect(optOne).not.to.have.attribute('active');
+ expect(optOne).not.to.have.attribute('selected');
+ expect(optTwo).to.have.attribute('active');
+ expect(optTwo).not.to.have.attribute('selected');
+ expect(input).to.have.attribute('aria-activedescendant', 'option-2');
+
+ await sendKeys({ press: 'Enter' });
+ await waitForCondition(() => didCloseEventSpy.events.length === 1);
+ expect(didCloseEventSpy.count).to.be.equal(1);
+
+ expect(optTwo).not.to.have.attribute('active');
+ expect(optTwo).to.have.attribute('selected');
+ expect(optionSelectedEventSpy.count).to.be.equal(1);
+ expect(input).to.have.attribute('aria-expanded', 'false');
+ expect(input).not.to.have.attribute('aria-activedescendant');
+ });
+
+ it('opens and select button with keyboard', async () => {
+ const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen);
+ const clickSpy = new EventSpy('click');
+ const optOne = element.querySelector('#option-1');
+ const buttonOne = element.querySelector('#button-1');
+ const buttonTwo = element.querySelector('#button-2');
+ input.focus();
+
+ await waitForCondition(() => didOpenEventSpy.events.length === 1);
+ expect(didOpenEventSpy.count).to.be.equal(1);
+
+ await sendKeys({ press: 'ArrowDown' });
+ await waitForLitRender(element);
+ expect(optOne).to.have.attribute('active');
+ expect(buttonOne).not.to.have.attribute('data-focus-visible');
+ await sendKeys({ press: 'ArrowRight' });
+ expect(optOne).not.to.have.attribute('active');
+ expect(buttonOne).to.have.attribute('data-focus-visible');
+ expect(input).to.have.attribute('aria-activedescendant', 'button-1');
+ await sendKeys({ press: 'Enter' });
+ await waitForCondition(() => clickSpy.events.length === 1);
+ expect(clickSpy.count).to.be.equal(1);
+
+ await sendKeys({ press: 'ArrowDown' });
+ await sendKeys({ press: 'ArrowRight' });
+ await waitForLitRender(element);
+ expect(optOne).not.to.have.attribute('active');
+ expect(buttonOne).not.to.have.attribute('data-focus-visible');
+ expect(buttonTwo).to.have.attribute('data-focus-visible');
+ expect(input).to.have.attribute('aria-activedescendant', 'button-2');
+ await sendKeys({ press: 'Enter' });
+ await waitForCondition(() => clickSpy.events.length === 2);
+ expect(clickSpy.count).to.be.equal(2);
+ });
+
+ it('should stay closed when disabled', async () => {
+ input.setAttribute('disabled', '');
+
+ input.focus();
+ await waitForLitRender(element);
+ expect(input).to.have.attribute('aria-expanded', 'false');
+
+ input.click();
+ await waitForLitRender(element);
+ expect(input).to.have.attribute('aria-expanded', 'false');
+
+ await sendKeys({ press: 'ArrowDown' });
+ await waitForLitRender(element);
+ expect(input).to.have.attribute('aria-expanded', 'false');
+ });
+
+ it('should stay closed when readonly', async () => {
+ input.setAttribute('readonly', '');
+
+ input.focus();
+ await waitForLitRender(element);
+ expect(input).to.have.attribute('aria-expanded', 'false');
+
+ input.click();
+ await waitForLitRender(element);
+ expect(input).to.have.attribute('aria-expanded', 'false');
+
+ await sendKeys({ press: 'ArrowDown' });
+ await waitForLitRender(element);
+ expect(input).to.have.attribute('aria-expanded', 'false');
+ });
+
+ it('does not open if prevented', async () => {
+ const willOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willOpen);
+
+ element.addEventListener(SbbAutocompleteGridElement.events.willOpen, (ev) =>
+ ev.preventDefault(),
+ );
+ element.open();
+
+ await waitForCondition(() => willOpenEventSpy.events.length === 1);
+ expect(willOpenEventSpy.count).to.be.equal(1);
+ await waitForLitRender(element);
+
+ expect(element).to.have.attribute('data-state', 'closed');
+ });
+
+ it('does not close if prevented', async () => {
+ const didOpenEventSpy = new EventSpy(SbbAutocompleteGridElement.events.didOpen);
+ const willCloseEventSpy = new EventSpy(SbbAutocompleteGridElement.events.willClose);
+
+ element.open();
+ await waitForCondition(() => didOpenEventSpy.events.length === 1);
+ await waitForLitRender(element);
+
+ element.addEventListener(SbbAutocompleteGridElement.events.willClose, (ev) =>
+ ev.preventDefault(),
+ );
+ element.close();
+
+ await waitForCondition(() => willCloseEventSpy.events.length === 1);
+ await waitForLitRender(element);
- testA11yTreeSnapshot();
+ expect(element).to.have.attribute('data-state', 'opened');
});
});
diff --git a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.ssr.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.ssr.spec.ts
new file mode 100644
index 0000000000..1e51d183af
--- /dev/null
+++ b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.ssr.spec.ts
@@ -0,0 +1,62 @@
+import { assert } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { fixture } from '../../core/testing/private.js';
+import { SbbFormFieldElement } from '../../form-field.js';
+
+import { SbbAutocompleteGridElement } from './autocomplete-grid.js';
+import '../autocomplete-grid-row.js';
+import '../autocomplete-grid-cell.js';
+import '../autocomplete-grid-button.js';
+
+describe(`sbb-autocomplete-grid with ${fixture.name}`, () => {
+ let formField: SbbFormFieldElement;
+ let element: SbbAutocompleteGridElement;
+
+ beforeEach(async () => {
+ formField = await fixture(
+ html`
+
+
+
+
+ Option 1
+
+
+
+
+
+
+ Option 2
+
+
+
+
+
+
+
+
+
+
+ `,
+ { modules: ['../../autocomplete-grid.ts', '../../form-field.ts'] },
+ );
+ element = formField.querySelector('sbb-autocomplete-grid')!;
+ });
+
+ it('renders', () => {
+ assert.instanceOf(formField, SbbFormFieldElement);
+ assert.instanceOf(element, SbbAutocompleteGridElement);
+ });
+});
From 0c443db634e8e2a420bc6b7c9de7ebdeb83952a7 Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Tue, 11 Jun 2024 09:43:19 +0200
Subject: [PATCH 54/67] fix: test
---
.../autocomplete/autocomplete.spec.ts | 46 +++++++++++++------
1 file changed, 33 insertions(+), 13 deletions(-)
diff --git a/src/elements/autocomplete/autocomplete.spec.ts b/src/elements/autocomplete/autocomplete.spec.ts
index 11c56e0955..b955e9ffaa 100644
--- a/src/elements/autocomplete/autocomplete.spec.ts
+++ b/src/elements/autocomplete/autocomplete.spec.ts
@@ -2,8 +2,9 @@ import { assert, expect } from '@open-wc/testing';
import { sendKeys, sendMouse } from '@web/test-runner-commands';
import { html } from 'lit/static-html.js';
+import { isSafari } from '../core/dom.js';
import { fixture } from '../core/testing/private.js';
-import { waitForCondition, waitForLitRender, EventSpy } from '../core/testing.js';
+import { waitForCondition, waitForLitRender, EventSpy, describeIf } from '../core/testing.js';
import { SbbFormFieldElement } from '../form-field.js';
import { SbbOptionElement } from '../option.js';
@@ -28,19 +29,38 @@ describe(`sbb-autocomplete`, () => {
element = formField.querySelector('sbb-autocomplete')!;
});
- it('renders and sets the correct attributes', () => {
- assert.instanceOf(formField, SbbFormFieldElement);
- assert.instanceOf(element, SbbAutocompleteElement);
-
- expect(element).not.to.have.attribute('autocomplete-origin-borderless');
+ describeIf(isSafari, 'Safari', async () => {
+ it('renders and sets the correct attributes', () => {
+ assert.instanceOf(formField, SbbFormFieldElement);
+ assert.instanceOf(element, SbbAutocompleteElement);
+
+ expect(element).not.to.have.attribute('autocomplete-origin-borderless');
+
+ expect(input).to.have.attribute('autocomplete', 'off');
+ expect(input).to.have.attribute('role', 'combobox');
+ expect(input).to.have.attribute('aria-autocomplete', 'list');
+ expect(input).to.have.attribute('aria-haspopup', 'listbox');
+ expect(input).to.have.attribute('aria-controls', 'myAutocomplete');
+ expect(input).to.have.attribute('aria-owns', 'myAutocomplete');
+ expect(input).to.have.attribute('aria-expanded', 'false');
+ });
+ });
- expect(input).to.have.attribute('autocomplete', 'off');
- expect(input).to.have.attribute('role', 'combobox');
- expect(input).to.have.attribute('aria-autocomplete', 'list');
- expect(input).to.have.attribute('aria-haspopup', 'listbox');
- expect(input).to.have.attribute('aria-controls', 'myAutocomplete');
- expect(input).to.have.attribute('aria-owns', 'myAutocomplete');
- expect(input).to.have.attribute('aria-expanded', 'false');
+ describeIf(!isSafari, 'Chrome-Firefox', async () => {
+ it('renders and sets the correct attributes', () => {
+ assert.instanceOf(formField, SbbFormFieldElement);
+ assert.instanceOf(element, SbbAutocompleteElement);
+
+ expect(element).not.to.have.attribute('autocomplete-origin-borderless');
+
+ expect(input).to.have.attribute('autocomplete', 'off');
+ expect(input).to.have.attribute('role', 'combobox');
+ expect(input).to.have.attribute('aria-autocomplete', 'list');
+ expect(input).to.have.attribute('aria-haspopup', 'listbox');
+ expect(input).to.have.attribute('aria-controls', 'sbb-autocomplete-8');
+ expect(input).to.have.attribute('aria-owns', 'sbb-autocomplete-8');
+ expect(input).to.have.attribute('aria-expanded', 'false');
+ });
});
it('opens and closes with mouse and keyboard', async () => {
From 6903b952f2c1a60889b59eca452280ad535fa9ae Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Wed, 3 Jul 2024 14:57:44 +0200
Subject: [PATCH 55/67] test: add visual tests
---
.../autocomplete/autocomplete.visual.spec.ts | 255 ++++++++++++++++++
1 file changed, 255 insertions(+)
create mode 100644 src/elements/autocomplete/autocomplete.visual.spec.ts
diff --git a/src/elements/autocomplete/autocomplete.visual.spec.ts b/src/elements/autocomplete/autocomplete.visual.spec.ts
new file mode 100644
index 0000000000..fbb1fc66ce
--- /dev/null
+++ b/src/elements/autocomplete/autocomplete.visual.spec.ts
@@ -0,0 +1,255 @@
+import { sendKeys } from '@web/test-runner-commands';
+import { nothing, type TemplateResult } from 'lit';
+import { html } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import type { VisualDiffSetupBuilder } from '../core/testing/private.js';
+import { describeViewports, visualDiffDefault, visualDiffFocus } from '../core/testing/private.js';
+import '../form-field.js';
+import '../form-error.js';
+import '../option.js';
+import './autocomplete.js';
+
+describe('sbb-autocomplete', () => {
+ const defaultArgs = {
+ negative: false,
+ disabled: false,
+ readonly: false,
+ required: false,
+ preserveIconSpace: true,
+ disableOption: false,
+ borderless: false,
+ withGroup: false,
+ disableGroup: false,
+ withMixedOptionAndGroup: false,
+ };
+
+ const textBlock = (): TemplateResult => html`
+
+ This text block has a z-index
greater than the form field, but it must always be
+ covered by the autocomplete overlay.
+
+ `;
+
+ const createOptionBlockOne = (disableOption: boolean): TemplateResult => html`
+ Option 1
+
+ Option 2
+
+
+
+ Option 3
+
+ `;
+
+ const createOptionBlockTwo = (): TemplateResult => html`
+ Option 4
+ Option 5
+ `;
+
+ const createOptions = (disableOption: boolean): TemplateResult => html`
+ ${createOptionBlockOne(disableOption)} ${createOptionBlockTwo()}
+ `;
+
+ const createOptionsGroup = (
+ disableOption: boolean,
+ disableGroup: boolean,
+ ): TemplateResult => html`
+
+ ${createOptionBlockOne(disableOption)}
+
+ ${createOptionBlockTwo()}
+ `;
+
+ const createMixedOptionsGroup = (
+ disableOption: boolean,
+ disableGroup: boolean,
+ ): TemplateResult => html`
+
+
+ Option Value
+
+ ${createOptionsGroup(disableOption, disableGroup)}
+ `;
+
+ const template = (args: typeof defaultArgs): TemplateResult => html`
+
+ Label
+
+
+ ${args.withGroup
+ ? args.withMixedOptionAndGroup
+ ? createMixedOptionsGroup(args.disableOption, args.disableGroup)
+ : createOptionsGroup(args.disableOption, args.disableGroup)
+ : createOptions(args.disableOption)}
+
+ ${args.required
+ ? html`This is a required field. `
+ : nothing}
+
+ ${textBlock()}
+ `;
+
+ const openAutocomplete = async (setup: VisualDiffSetupBuilder): Promise => {
+ const ac = setup.snapshotElement.querySelector('sbb-autocomplete')!;
+ ac.open();
+ const input = setup.snapshotElement.querySelector('input')!;
+ input.focus();
+ await sendKeys({ press: 'O' });
+ };
+
+ describeViewports({ viewports: ['zero', 'medium'], viewportHeight: 500 }, () => {
+ for (const negative of [false, true]) {
+ for (const borderless of [false, true]) {
+ for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) {
+ it(
+ `state=above negative=${negative} borderless=${borderless} ${visualDiffState.name}`,
+ visualDiffState.with(async (setup) => {
+ await setup.withFixture(
+ html`
+
+ ${template({ ...defaultArgs, negative, borderless })}
+
+ `,
+ {
+ minHeight: '500px',
+ backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+ },
+ );
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+ }
+ }
+ }
+ });
+
+ describeViewports({ viewports: ['zero', 'medium'] }, () => {
+ for (const negative of [false, true]) {
+ const style = {
+ minHeight: '400px',
+ backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+ };
+
+ for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) {
+ it(
+ `state=${visualDiffState.name} negative=${negative}`,
+ visualDiffState.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, negative }), style);
+ }),
+ );
+ }
+
+ it(
+ `state=required negative=${negative}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, negative, required: true }), style);
+ }),
+ );
+
+ it(
+ `state=disabled negative=${negative}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, negative, disabled: true }), style);
+ }),
+ );
+
+ it(
+ `state=readonly negative=${negative}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, negative, readonly: true }), style);
+ }),
+ );
+
+ it(
+ `state=borderless negative=${negative}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, negative, borderless: true }), style);
+ }),
+ );
+
+ it(
+ `state=noSpace negative=${negative}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(
+ template({ ...defaultArgs, negative, preserveIconSpace: false }),
+ style,
+ );
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+
+ for (const withGroup of [false, true]) {
+ const wrapperStyle = {
+ minHeight: withGroup ? '800px' : '400px',
+ backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+ };
+
+ it(
+ `negative=${negative} withGroup=${withGroup}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(
+ template({ ...defaultArgs, negative, withGroup }),
+ wrapperStyle,
+ );
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+
+ it(
+ `negative=${negative} withGroup=${withGroup} disableOption=true`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(
+ template({ ...defaultArgs, negative, withGroup, disableOption: true }),
+ wrapperStyle,
+ );
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+ }
+
+ it(
+ `negative=${negative} withGroup=true disableGroup=true`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(
+ template({
+ ...defaultArgs,
+ negative,
+ disableGroup: true,
+ withGroup: true,
+ }),
+ {
+ minHeight: '800px',
+ backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+ },
+ );
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+
+ it(
+ `negative=${negative} withGroup=true withMixedOptionAndGroup=true`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(
+ template({ ...defaultArgs, negative, withGroup: true, withMixedOptionAndGroup: true }),
+ {
+ minHeight: '800px',
+ backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+ },
+ );
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+ }
+ });
+});
From f17b6507bd467143a0f5ae0c91f762d584c32884 Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Wed, 3 Jul 2024 16:17:54 +0200
Subject: [PATCH 56/67] test: add visual tests
---
.../autocomplete-grid-button.visual.spec.ts | 71 +++++++++++++++++++
1 file changed, 71 insertions(+)
create mode 100644 src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.visual.spec.ts
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.visual.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.visual.spec.ts
new file mode 100644
index 0000000000..0de0cb71d0
--- /dev/null
+++ b/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.visual.spec.ts
@@ -0,0 +1,71 @@
+import { html, type TemplateResult } from 'lit';
+
+import {
+ describeViewports,
+ visualDiffDefault,
+ visualDiffHover,
+} from '../../core/testing/private.js';
+
+import '../autocomplete-grid-cell.js';
+import '../autocomplete-grid-row.js';
+import './autocomplete-grid-button.js';
+
+describe(`sbb-autocomplete-grid-button`, () => {
+ const defaultArgs = {
+ disabled: false,
+ negative: false,
+ active: false,
+ focusVisible: false,
+ };
+
+ const template = ({
+ disabled,
+ negative,
+ active,
+ focusVisible,
+ }: typeof defaultArgs): TemplateResult => html`
+
+ `;
+
+ describeViewports({ viewports: ['zero', 'medium'] }, () => {
+ for (const negative of [false, true]) {
+ const wrapperStyle = {
+ backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+ };
+
+ for (const disabled of [false, true]) {
+ for (const state of [visualDiffDefault, visualDiffHover]) {
+ it(
+ `negative=${negative} disabled=${disabled} ${state.name}`,
+ state.with(async (setup) => {
+ const args = { ...defaultArgs, negative, disabled };
+ await setup.withFixture(template(args), wrapperStyle);
+ }),
+ );
+ }
+ }
+
+ it(
+ `negative=${negative} active`,
+ visualDiffDefault.with(async (setup) => {
+ const args = { ...defaultArgs, negative, active: true };
+ await setup.withFixture(template(args), wrapperStyle);
+ }),
+ );
+
+ it(
+ `negative=${negative} focus-visible`,
+ visualDiffDefault.with(async (setup) => {
+ const args = { ...defaultArgs, negative, focusVisible: true };
+ await setup.withFixture(template(args), { ...wrapperStyle, focusOutlineDark: negative });
+ }),
+ );
+ }
+ });
+});
From aa3213983a90bba3faeb67d402acf1fb470bf61a Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Wed, 3 Jul 2024 16:29:56 +0200
Subject: [PATCH 57/67] test: add visual tests
---
.../autocomplete-grid-button.visual.spec.ts | 2 --
.../autocomplete-grid-cell.visual.spec.ts | 21 +++++++++++++++++++
2 files changed, 21 insertions(+), 2 deletions(-)
create mode 100644 src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.visual.spec.ts
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.visual.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.visual.spec.ts
index 0de0cb71d0..c15e492573 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.visual.spec.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.visual.spec.ts
@@ -6,8 +6,6 @@ import {
visualDiffHover,
} from '../../core/testing/private.js';
-import '../autocomplete-grid-cell.js';
-import '../autocomplete-grid-row.js';
import './autocomplete-grid-button.js';
describe(`sbb-autocomplete-grid-button`, () => {
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.visual.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.visual.spec.ts
new file mode 100644
index 0000000000..c7d161c874
--- /dev/null
+++ b/src/elements/autocomplete-grid/autocomplete-grid-cell/autocomplete-grid-cell.visual.spec.ts
@@ -0,0 +1,21 @@
+import { html } from 'lit';
+
+import { describeViewports, visualDiffDefault } from '../../core/testing/private.js';
+
+import '../autocomplete-grid-button.js';
+import './autocomplete-grid-cell.js';
+
+describe('sbb-autocomplete-grid-cell', () => {
+ describeViewports({ viewports: ['zero', 'medium'] }, () => {
+ it(
+ visualDiffDefault.name,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(html`
+
+
+
+ `);
+ }),
+ );
+ });
+});
From 7f5c9a811453189a1215a8058c80e7aac82c23c9 Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Wed, 3 Jul 2024 17:19:14 +0200
Subject: [PATCH 58/67] test: add visual tests
---
.../option/option/option.visual.spec.ts | 129 ++++++++++++++++++
1 file changed, 129 insertions(+)
create mode 100644 src/elements/option/option/option.visual.spec.ts
diff --git a/src/elements/option/option/option.visual.spec.ts b/src/elements/option/option/option.visual.spec.ts
new file mode 100644
index 0000000000..d3488f1a0f
--- /dev/null
+++ b/src/elements/option/option/option.visual.spec.ts
@@ -0,0 +1,129 @@
+import { html, nothing, type TemplateResult } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import { describeViewports, visualDiffDefault } from '../../core/testing/private.js';
+
+import '../../form-field.js';
+import '../../select.js';
+import '../../autocomplete.js';
+import './option.js';
+
+describe(`sbb-option`, () => {
+ const defaultArgs = {
+ iconName: undefined as string | undefined,
+ active: false,
+ disabled: false,
+ preserveIconSpace: false,
+ };
+
+ const createOptions = ({
+ active,
+ disabled,
+ preserveIconSpace,
+ iconName,
+ }: typeof defaultArgs): TemplateResult => {
+ const style = preserveIconSpace ? { '--sbb-option-icon-container-display': 'block' } : {};
+ return html`
+ ${repeat(
+ new Array(5),
+ (_, i) => html`
+ ${`Value ${i + 1}`}
+ `,
+ )}
+ `;
+ };
+
+ const standaloneTemplate = (args: typeof defaultArgs): TemplateResult => html`
+
+ ${createOptions(args)}
+
+ `;
+
+ const autocompleteTemplate = (args: typeof defaultArgs): TemplateResult => html`
+
+ sbb-autocomplete
+
+ ${createOptions(args)}
+
+ `;
+
+ const selectTemplate = (args: typeof defaultArgs): TemplateResult => html`
+
+ sbb-select
+ ${createOptions(args)}
+
+ `;
+
+ describeViewports({ viewports: ['micro', 'medium'] }, () => {
+ describe('standalone', () => {
+ it(
+ visualDiffDefault.name,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(standaloneTemplate(defaultArgs));
+ }),
+ );
+
+ it(
+ `icon`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(standaloneTemplate({ ...defaultArgs, iconName: 'clock-small' }));
+ }),
+ );
+
+ it(
+ `disabled`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(standaloneTemplate({ ...defaultArgs, disabled: true }));
+ }),
+ );
+
+ it(
+ `active`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(standaloneTemplate({ ...defaultArgs, active: true }));
+ }),
+ );
+
+ it(
+ `preserveIconSpace`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(standaloneTemplate({ ...defaultArgs, preserveIconSpace: true }));
+ }),
+ );
+ });
+
+ describe('autocomplete', () => {
+ it(
+ visualDiffDefault.name,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(autocompleteTemplate(defaultArgs), { minHeight: '400px' });
+ setup.withPostSetupAction(() =>
+ setup.snapshotElement.querySelector('sbb-autocomplete')!.open(),
+ );
+ }),
+ );
+ });
+
+ describe('select', () => {
+ it(
+ visualDiffDefault.name,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(selectTemplate(defaultArgs), { minHeight: '400px' });
+ setup.withPostSetupAction(() =>
+ setup.snapshotElement.querySelector('sbb-select')!.open(),
+ );
+ }),
+ );
+ });
+ });
+});
From 2207343342b3618d9938f911054f0c3f88e2442f Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Wed, 3 Jul 2024 17:57:33 +0200
Subject: [PATCH 59/67] test: add visual tests
---
...complete-grid-option.snapshot.spec.snap.js | 40 +++++-
.../autocomplete-grid-option.snapshot.spec.ts | 11 +-
.../autocomplete-grid-option.visual.spec.ts | 114 ++++++++++++++++++
.../option/option/option.visual.spec.ts | 2 +-
4 files changed, 158 insertions(+), 9 deletions(-)
create mode 100644 src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.visual.spec.ts
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.snapshot.spec.snap.js b/src/elements/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.snapshot.spec.snap.js
index a623f9a73f..2163dc3865 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.snapshot.spec.snap.js
+++ b/src/elements/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.snapshot.spec.snap.js
@@ -1,7 +1,7 @@
/* @web/test-runner snapshot v1 */
export const snapshots = {};
-snapshots["sbb-autocomplete-grid-option default DOM"] =
+snapshots["sbb-autocomplete-grid-option renders DOM"] =
`
`;
-/* end snapshot sbb-autocomplete-grid-option default DOM */
+/* end snapshot sbb-autocomplete-grid-option renders DOM */
-snapshots["sbb-autocomplete-grid-option default Shadow DOM"] =
+snapshots["sbb-autocomplete-grid-option renders Shadow DOM"] =
`
@@ -29,7 +29,39 @@ snapshots["sbb-autocomplete-grid-option default Shadow DOM"] =
`;
-/* end snapshot sbb-autocomplete-grid-option default Shadow DOM */
+/* end snapshot sbb-autocomplete-grid-option renders Shadow DOM */
+
+snapshots["sbb-autocomplete-grid-option renders disabled DOM"] =
+`
+ Option 1
+
+`;
+/* end snapshot sbb-autocomplete-grid-option renders disabled DOM */
+
+snapshots["sbb-autocomplete-grid-option renders disabled Shadow DOM"] =
+`
+
+
+
+
+
+
+
+
+ Option 1
+
+
+
+`;
+/* end snapshot sbb-autocomplete-grid-option renders disabled Shadow DOM */
snapshots["sbb-autocomplete-grid-option A11y tree Chrome"] =
`
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.snapshot.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.snapshot.spec.ts
index dd360a7aa8..aa98d8fbd6 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.snapshot.spec.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.snapshot.spec.ts
@@ -11,7 +11,7 @@ import '../autocomplete-grid-cell.js';
import '../autocomplete-grid-button.js';
describe('sbb-autocomplete-grid-option', () => {
- describe('default', () => {
+ describe('renders', () => {
let root: SbbAutocompleteGridOptionElement;
beforeEach(async () => {
root = (
@@ -39,7 +39,7 @@ describe('sbb-autocomplete-grid-option', () => {
html`Option 1 `,
);
- describe('disabled', () => {
+ describe('renders disabled', () => {
let root: SbbAutocompleteGridOptionElement;
beforeEach(async () => {
root = (
@@ -57,8 +57,11 @@ describe('sbb-autocomplete-grid-option', () => {
});
it('DOM', async () => {
- await expect(root).to.have.attribute('disabled');
- await expect(root).to.have.attribute('aria-disabled', 'true');
+ await expect(root).dom.to.be.equalSnapshot();
+ });
+
+ it('Shadow DOM', async () => {
+ await expect(root).shadowDom.to.be.equalSnapshot();
});
});
});
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.visual.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.visual.spec.ts
new file mode 100644
index 0000000000..16fc7f4bb9
--- /dev/null
+++ b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.visual.spec.ts
@@ -0,0 +1,114 @@
+import { html, nothing, type TemplateResult } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import { describeViewports, visualDiffDefault } from '../../core/testing/private.js';
+
+import '../../form-field.js';
+import '../../autocomplete-grid.js';
+import './autocomplete-grid-option.js';
+
+describe(`sbb-autocomplete-grid-option`, () => {
+ const defaultArgs = {
+ iconName: undefined as string | undefined,
+ active: false,
+ disabled: false,
+ preserveIconSpace: false,
+ };
+
+ const createOption = (
+ { active, disabled, preserveIconSpace, iconName }: typeof defaultArgs,
+ i: number,
+ ): TemplateResult => {
+ const style = preserveIconSpace ? { '--sbb-option-icon-container-display': 'block' } : {};
+ return html`
+ Value ${i + 1}
+ `;
+ };
+
+ const standaloneTemplate = (args: typeof defaultArgs): TemplateResult => html`
+
+ ${repeat(new Array(5), (_, i) => createOption(args, i))}
+
+ `;
+
+ const autocompleteTemplate = (args: typeof defaultArgs): TemplateResult => html`
+
+ sbb-autocomplete
+
+
+ ${repeat(
+ new Array(5),
+ (_, i) => html`
+ ${createOption(args, i)}
+ `,
+ )}
+
+
+ `;
+
+ describeViewports({ viewports: ['micro', 'medium'] }, () => {
+ describe('standalone', () => {
+ it(
+ visualDiffDefault.name,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(standaloneTemplate(defaultArgs));
+ }),
+ );
+
+ it(
+ `icon`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(standaloneTemplate({ ...defaultArgs, iconName: 'clock-small' }));
+ }),
+ );
+
+ it(
+ `active`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(standaloneTemplate({ ...defaultArgs, active: true }));
+ }),
+ );
+
+ it(
+ `preserveIconSpace`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(standaloneTemplate({ ...defaultArgs, preserveIconSpace: true }));
+ }),
+ );
+ });
+
+ describe('autocomplete-grid', () => {
+ it(
+ visualDiffDefault.name,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(autocompleteTemplate(defaultArgs), { minHeight: '400px' });
+ setup.withPostSetupAction(() =>
+ setup.snapshotElement.querySelector('sbb-autocomplete-grid')!.open(),
+ );
+ }),
+ );
+
+ it(
+ 'disabled',
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(autocompleteTemplate({ ...defaultArgs, disabled: true }), {
+ minHeight: '400px',
+ });
+ setup.withPostSetupAction(() =>
+ setup.snapshotElement.querySelector('sbb-autocomplete-grid')!.open(),
+ );
+ }),
+ );
+ });
+ });
+});
diff --git a/src/elements/option/option/option.visual.spec.ts b/src/elements/option/option/option.visual.spec.ts
index d3488f1a0f..0401bc13ab 100644
--- a/src/elements/option/option/option.visual.spec.ts
+++ b/src/elements/option/option/option.visual.spec.ts
@@ -34,7 +34,7 @@ describe(`sbb-option`, () => {
?active=${active && i === 0}
?disabled=${disabled && i === 0}
value=${`Value ${i + 1}`}
- >${`Value ${i + 1}`}Value ${i + 1}
`,
)}
From 706737338fe80adac33a3b08fee4035b402df448 Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Wed, 3 Jul 2024 18:18:20 +0200
Subject: [PATCH 60/67] test: add visual tests
---
...mplete-grid-optgroup.snapshot.spec.snap.js | 114 +++++++--------
...utocomplete-grid-optgroup.snapshot.spec.ts | 72 +++++-----
.../option/optgroup/optgroup.visual.spec.ts | 133 ++++++++++++++++++
3 files changed, 227 insertions(+), 92 deletions(-)
create mode 100644 src/elements/option/optgroup/optgroup.visual.spec.ts
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-optgroup/__snapshots__/autocomplete-grid-optgroup.snapshot.spec.snap.js b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/__snapshots__/autocomplete-grid-optgroup.snapshot.spec.snap.js
index ea447a674c..dfc3513444 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-optgroup/__snapshots__/autocomplete-grid-optgroup.snapshot.spec.snap.js
+++ b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/__snapshots__/autocomplete-grid-optgroup.snapshot.spec.snap.js
@@ -1,19 +1,15 @@
/* @web/test-runner snapshot v1 */
export const snapshots = {};
-snapshots["sbb-autocomplete-grid-optgroup Chrome-Firefox DOM"] =
-`
+snapshots["sbb-autocomplete-grid-optgroup renders Safari DOM"] =
+`
`;
-/* end snapshot sbb-autocomplete-grid-optgroup Chrome-Firefox DOM */
+/* end snapshot sbb-autocomplete-grid-optgroup renders Safari DOM */
-snapshots["sbb-autocomplete-grid-optgroup Chrome-Firefox Shadow DOM"] =
+snapshots["sbb-autocomplete-grid-optgroup renders Safari Shadow DOM"] =
`
`;
-/* end snapshot sbb-autocomplete-grid-optgroup Chrome-Firefox Shadow DOM */
-
-snapshots["sbb-autocomplete-grid-optgroup Chrome-Firefox A11y tree Chrome"] =
-`
- {
- "role": "WebArea",
- "name": "",
- "children": [
- {
- "role": "text",
- "name": "Option 1"
- },
- {
- "role": "text",
- "name": "Option 2"
- }
- ]
-}
-
-`;
-/* end snapshot sbb-autocomplete-grid-optgroup Chrome-Firefox A11y tree Chrome */
-
-snapshots["sbb-autocomplete-grid-optgroup Chrome-Firefox A11y tree Firefox"] =
-`
- {
- "role": "document",
- "name": "",
- "children": [
- {
- "role": "text leaf",
- "name": "Option 1"
- },
- {
- "role": "text leaf",
- "name": "Option 2"
- }
- ]
-}
-
-`;
-/* end snapshot sbb-autocomplete-grid-optgroup Chrome-Firefox A11y tree Firefox */
+/* end snapshot sbb-autocomplete-grid-optgroup renders Safari Shadow DOM */
-snapshots["sbb-autocomplete-grid-optgroup Safari DOM"] =
-`
+snapshots["sbb-autocomplete-grid-optgroup renders Chrome-Firefox DOM"] =
+`
`;
-/* end snapshot sbb-autocomplete-grid-optgroup Safari DOM */
+/* end snapshot sbb-autocomplete-grid-optgroup renders Chrome-Firefox DOM */
-snapshots["sbb-autocomplete-grid-optgroup Safari Shadow DOM"] =
+snapshots["sbb-autocomplete-grid-optgroup renders Chrome-Firefox Shadow DOM"] =
`
`;
-/* end snapshot sbb-autocomplete-grid-optgroup Safari Shadow DOM */
+/* end snapshot sbb-autocomplete-grid-optgroup renders Chrome-Firefox Shadow DOM */
+
+snapshots["sbb-autocomplete-grid-optgroup renders Chrome-Firefox A11y tree Chrome"] =
+`
+ {
+ "role": "WebArea",
+ "name": "",
+ "children": [
+ {
+ "role": "text",
+ "name": "Option 1"
+ },
+ {
+ "role": "text",
+ "name": "Option 2"
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-autocomplete-grid-optgroup renders Chrome-Firefox A11y tree Chrome */
+
+snapshots["sbb-autocomplete-grid-optgroup renders Chrome-Firefox A11y tree Firefox"] =
+`
+ {
+ "role": "document",
+ "name": "",
+ "children": [
+ {
+ "role": "text leaf",
+ "name": "Option 1"
+ },
+ {
+ "role": "text leaf",
+ "name": "Option 2"
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-autocomplete-grid-optgroup renders Chrome-Firefox A11y tree Firefox */
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.snapshot.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.snapshot.spec.ts
index 1cc707abcc..0c66713349 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.snapshot.spec.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.snapshot.spec.ts
@@ -15,47 +15,49 @@ import '../autocomplete-grid-button.js';
import type { SbbAutocompleteGridOptgroupElement } from './autocomplete-grid-optgroup.js';
describe('sbb-autocomplete-grid-optgroup', () => {
- let root: SbbAutocompleteGridOptgroupElement;
- const opt: TemplateResult = html`
-
-
- Option 1
-
-
- Option 2
-
-
- `;
- beforeEach(async () => {
- root = (
- await fixture(html`
- ${opt}
-
- `)
- ).querySelector('sbb-autocomplete-grid-optgroup')!;
- });
-
- describeIf(!isSafari, 'Chrome-Firefox', async () => {
- it('DOM', async () => {
- await expect(root).dom.to.be.equalSnapshot();
+ describe('renders', () => {
+ let root: SbbAutocompleteGridOptgroupElement;
+ const opt: TemplateResult = html`
+
+
+ Option 1
+
+
+ Option 2
+
+
+ `;
+ beforeEach(async () => {
+ root = (
+ await fixture(html`
+ ${opt}
+
+ `)
+ ).querySelector('sbb-autocomplete-grid-optgroup')!;
});
- it('Shadow DOM', async () => {
- await expect(root).shadowDom.to.be.equalSnapshot();
- });
+ describeIf(!isSafari, 'Chrome-Firefox', async () => {
+ it('DOM', async () => {
+ await expect(root).dom.to.be.equalSnapshot();
+ });
- testA11yTreeSnapshot(opt);
- });
+ it('Shadow DOM', async () => {
+ await expect(root).shadowDom.to.be.equalSnapshot();
+ });
- describeIf(isSafari, 'Safari', async () => {
- it('DOM', async () => {
- await expect(root).dom.to.be.equalSnapshot();
+ testA11yTreeSnapshot(opt);
});
- it('Shadow DOM', async () => {
- await expect(root).shadowDom.to.be.equalSnapshot();
- });
+ describeIf(isSafari, 'Safari', async () => {
+ it('DOM', async () => {
+ await expect(root).dom.to.be.equalSnapshot();
+ });
+
+ it('Shadow DOM', async () => {
+ await expect(root).shadowDom.to.be.equalSnapshot();
+ });
- testA11yTreeSnapshot(opt);
+ testA11yTreeSnapshot(opt);
+ });
});
});
diff --git a/src/elements/option/optgroup/optgroup.visual.spec.ts b/src/elements/option/optgroup/optgroup.visual.spec.ts
new file mode 100644
index 0000000000..275d24d3bf
--- /dev/null
+++ b/src/elements/option/optgroup/optgroup.visual.spec.ts
@@ -0,0 +1,133 @@
+import { html, nothing, type TemplateResult } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+
+import '../../form-field.js';
+import '../../autocomplete.js';
+import '../../select.js';
+import '../option.js';
+import './optgroup.js';
+import { describeViewports } from '@sbb-esta/lyne-elements/core/testing/private/describe-viewports';
+import { visualDiffDefault } from '@sbb-esta/lyne-elements/core/testing/private/visual-regression-snapshot';
+
+describe(`sbb-optgroup`, () => {
+ const defaultArgs = {
+ iconName: undefined as string | undefined,
+ disabled: false,
+ disabledSingle: false,
+ };
+
+ const createOptions = (
+ iconName: string | undefined,
+ disabledSingle: boolean,
+ ): TemplateResult => html`
+ ${repeat(
+ new Array(3),
+ (_, i) => html`
+ Option ${i + 1}
+ `,
+ )}
+ `;
+
+ const template = (args: typeof defaultArgs): TemplateResult => html`
+
+ ${createOptions(args.iconName, args.disabledSingle)}
+
+
+ ${createOptions(args.iconName, args.disabledSingle)}
+
+ `;
+
+ const standaloneTemplate = (args: typeof defaultArgs): TemplateResult => html`
+
+ ${template(args)}
+
+ `;
+
+ const autocompleteTemplate = (args: typeof defaultArgs): TemplateResult => html`
+
+ Autocomplete
+
+ ${template(args)}
+
+ `;
+
+ const selectTemplate = (args: typeof defaultArgs, multiple: boolean): TemplateResult => html`
+
+ Select
+ ${template(args)}
+
+ `;
+
+ describeViewports({ viewports: ['micro', 'medium'] }, () => {
+ describe('standalone', () => {
+ it(
+ visualDiffDefault.name,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(standaloneTemplate(defaultArgs));
+ }),
+ );
+
+ it(
+ `icon`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(standaloneTemplate({ ...defaultArgs, iconName: 'clock-small' }));
+ }),
+ );
+
+ it(
+ `disabled`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(standaloneTemplate({ ...defaultArgs, disabled: true }));
+ }),
+ );
+
+ it(
+ `disabledSingle`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(standaloneTemplate({ ...defaultArgs, disabledSingle: true }));
+ }),
+ );
+ });
+
+ describe('autocomplete', () => {
+ it(
+ visualDiffDefault.name,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(autocompleteTemplate(defaultArgs), { minHeight: '600px' });
+ setup.withPostSetupAction(() =>
+ setup.snapshotElement.querySelector('sbb-autocomplete')!.open(),
+ );
+ }),
+ );
+ });
+
+ describe('select', () => {
+ it(
+ visualDiffDefault.name,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(selectTemplate(defaultArgs, false), { minHeight: '600px' });
+ setup.withPostSetupAction(() =>
+ setup.snapshotElement.querySelector('sbb-select')!.open(),
+ );
+ }),
+ );
+
+ it(
+ 'multiple',
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(selectTemplate(defaultArgs, true), { minHeight: '600px' });
+ setup.withPostSetupAction(() =>
+ setup.snapshotElement.querySelector('sbb-select')!.open(),
+ );
+ }),
+ );
+ });
+ });
+});
From 5483591a4a84ed456d2ce5e740da8fe5181c8ccd Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Thu, 4 Jul 2024 12:09:19 +0200
Subject: [PATCH 61/67] test: add visual tests
---
.../autocomplete-grid-optgroup.visual.spec.ts | 106 ++++++
.../autocomplete-grid-row.visual.spec.ts | 78 +++++
.../autocomplete-grid.visual.spec.ts | 302 ++++++++++++++++++
.../autocomplete/autocomplete.visual.spec.ts | 67 ++--
.../option/optgroup/optgroup.visual.spec.ts | 4 +-
5 files changed, 532 insertions(+), 25 deletions(-)
create mode 100644 src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.visual.spec.ts
create mode 100644 src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.visual.spec.ts
create mode 100644 src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.visual.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.visual.spec.ts
new file mode 100644
index 0000000000..c48ae363de
--- /dev/null
+++ b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.visual.spec.ts
@@ -0,0 +1,106 @@
+import { html, nothing, type TemplateResult } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+
+import { describeViewports, visualDiffDefault } from '../../core/testing/private.js';
+
+import '../../form-field.js';
+import '../autocomplete-grid.js';
+import '../autocomplete-grid-option.js';
+import '../autocomplete-grid-row.js';
+import './autocomplete-grid-optgroup.js';
+
+describe(`sbb-autocomplete-grid-optgroup`, () => {
+ const defaultArgs = {
+ iconName: undefined as string | undefined,
+ disabled: false,
+ disabledSingle: false,
+ };
+
+ const createOptions = (
+ iconName: string | undefined,
+ disabledSingle: boolean,
+ ): TemplateResult => html`
+ ${repeat(
+ new Array(3),
+ (_, i) => html`
+
+ Option ${i + 1}
+
+ `,
+ )}
+ `;
+
+ const template = (args: typeof defaultArgs): TemplateResult => html`
+
+ ${createOptions(args.iconName, args.disabledSingle)}
+
+
+ ${createOptions(args.iconName, args.disabledSingle)}
+
+ `;
+
+ const standaloneTemplate = (args: typeof defaultArgs): TemplateResult => html`
+
+ ${template(args)}
+
+ `;
+
+ const autocompleteTemplate = (args: typeof defaultArgs): TemplateResult => html`
+
+ Autocomplete
+
+ ${template(args)}
+
+ `;
+
+ describeViewports({ viewports: ['micro', 'medium'] }, () => {
+ describe('standalone', () => {
+ it(
+ visualDiffDefault.name,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(standaloneTemplate(defaultArgs));
+ }),
+ );
+
+ it(
+ `icon`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(standaloneTemplate({ ...defaultArgs, iconName: 'clock-small' }));
+ }),
+ );
+
+ it(
+ `disabled`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(standaloneTemplate({ ...defaultArgs, disabled: true }));
+ }),
+ );
+
+ it(
+ `disabledSingle`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(standaloneTemplate({ ...defaultArgs, disabledSingle: true }));
+ }),
+ );
+ });
+
+ describe('autocomplete-grid', () => {
+ it(
+ visualDiffDefault.name,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(autocompleteTemplate(defaultArgs), { minHeight: '800px' });
+ setup.withPostSetupAction(() =>
+ setup.snapshotElement.querySelector('sbb-autocomplete-grid')!.open(),
+ );
+ }),
+ );
+ });
+ });
+});
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.visual.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.visual.spec.ts
new file mode 100644
index 0000000000..bcfef1d22c
--- /dev/null
+++ b/src/elements/autocomplete-grid/autocomplete-grid-row/autocomplete-grid-row.visual.spec.ts
@@ -0,0 +1,78 @@
+import { html, nothing, type TemplateResult } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+
+import { describeViewports, visualDiffDefault } from '../../core/testing/private.js';
+
+import './autocomplete-grid-row.js';
+import '../autocomplete-grid-cell.js';
+import '../autocomplete-grid-option.js';
+import '../autocomplete-grid-button.js';
+
+describe('sbb-autocomplete-grid-row', () => {
+ const defaultArgs = {
+ negative: false,
+ withActions: false,
+ numberOfActions: 1,
+ };
+
+ const template = ({
+ negative,
+ withActions,
+ numberOfActions,
+ }: typeof defaultArgs): TemplateResult => html`
+ ${repeat(
+ new Array(5),
+ (_, i) => html`
+
+ Opt ${i}
+ ${withActions
+ ? repeat(
+ new Array(numberOfActions),
+ () => html`
+
+
+
+ `,
+ )
+ : nothing}
+
+ `,
+ )}
+ `;
+
+ describeViewports({ viewports: ['zero', 'medium'] }, () => {
+ for (const negative of [false, true]) {
+ const args = { ...defaultArgs, negative };
+ const wrapperStyle = {
+ backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+ };
+
+ it(
+ `negative=${negative}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template(args), wrapperStyle);
+ }),
+ );
+
+ it(
+ `negative=${negative} withActions=true`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template({ ...args, withActions: true }), wrapperStyle);
+ }),
+ );
+
+ it(
+ `negative=${negative} withMultipleActions=true`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(
+ template({ ...args, withActions: true, numberOfActions: 3 }),
+ wrapperStyle,
+ );
+ }),
+ );
+ }
+ });
+});
diff --git a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts
new file mode 100644
index 0000000000..284c297399
--- /dev/null
+++ b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts
@@ -0,0 +1,302 @@
+import { sendKeys } from '@web/test-runner-commands';
+import { html, nothing, type TemplateResult } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import type { VisualDiffSetupBuilder } from '../../core/testing/private.js';
+import {
+ describeViewports,
+ visualDiffDefault,
+ visualDiffFocus,
+} from '../../core/testing/private.js';
+import '../../form-field.js';
+import '../../form-error.js';
+import '../../autocomplete-grid.js';
+
+describe('sbb-autocomplete-grid', () => {
+ const defaultArgs = {
+ negative: false,
+ disabled: false,
+ readonly: false,
+ required: false,
+ withIcon: true,
+ preserveIconSpace: true,
+ disableOption: false,
+ borderless: false,
+ withGroup: false,
+ disableGroup: false,
+ withMixedOptionAndGroup: false,
+ };
+
+ const textBlock = (): TemplateResult => html`
+
+ This text block has a z-index
greater than the form field, but it must always be
+ covered by the autocomplete overlay.
+
+ `;
+
+ const createOptionBlockOne = (withIcon: boolean, disableOption: boolean): TemplateResult => html`
+ ${repeat(
+ new Array(3),
+ (_, i) => html`
+
+
+ ${withIcon && i === 2
+ ? html` `
+ : nothing}
+ Option ${i}
+
+
+
+
+
+ `,
+ )}
+ `;
+
+ const createOptionBlockTwo = (): TemplateResult => html`
+ ${repeat(
+ new Array(2),
+ (_, i) => html`
+
+ Option ${i + 3}
+
+
+
+
+
+
+
+ `,
+ )}
+ `;
+
+ const createOptions = (withIcon: boolean, disableOption: boolean): TemplateResult => html`
+ ${createOptionBlockOne(withIcon, disableOption)} ${createOptionBlockTwo()}
+ `;
+
+ const createOptionsGroup = (
+ withIcon: boolean,
+ disableOption: boolean,
+ disableGroup: boolean,
+ ): TemplateResult => html`
+
+ ${createOptionBlockOne(withIcon, disableOption)}
+
+ ${createOptionBlockTwo()}
+ `;
+
+ const createMixedOptionsGroup = (
+ withIcon: boolean,
+ disableOption: boolean,
+ disableGroup: boolean,
+ ): TemplateResult => html`
+
+
+ Option Value
+
+ ${createOptionsGroup(withIcon, disableOption, disableGroup)}
+ `;
+
+ const template = (args: typeof defaultArgs): TemplateResult => html`
+
+ Label
+
+
+ ${args.withGroup
+ ? args.withMixedOptionAndGroup
+ ? createMixedOptionsGroup(args.withIcon, args.disableOption, args.disableGroup)
+ : createOptionsGroup(args.withIcon, args.disableOption, args.disableGroup)
+ : createOptions(args.withIcon, args.disableOption)}
+
+ ${args.required
+ ? html`This is a required field. `
+ : nothing}
+
+ ${textBlock()}
+ `;
+
+ const openAutocomplete = async (setup: VisualDiffSetupBuilder): Promise => {
+ const ac = setup.snapshotElement.querySelector('sbb-autocomplete-grid')!;
+ ac.open();
+ const input = setup.snapshotElement.querySelector('input')!;
+ input.focus();
+ await sendKeys({ press: 'O' });
+ };
+
+ describeViewports({ viewports: ['zero', 'medium'], viewportHeight: 500 }, () => {
+ for (const negative of [false, true]) {
+ for (const borderless of [false, true]) {
+ for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) {
+ it(
+ `state=above negative=${negative} borderless=${borderless} ${visualDiffState.name}`,
+ visualDiffState.with(async (setup) => {
+ await setup.withFixture(
+ html`
+
+ ${template({ ...defaultArgs, negative, borderless })}
+
+ `,
+ {
+ minHeight: '500px',
+ backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+ },
+ );
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+ }
+ }
+ }
+ });
+
+ describeViewports({ viewports: ['zero', 'medium'] }, () => {
+ for (const negative of [false, true]) {
+ const style = {
+ minHeight: '400px',
+ backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+ };
+
+ for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) {
+ it(
+ `state=${visualDiffState.name} negative=${negative}`,
+ visualDiffState.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, negative }), style);
+ }),
+ );
+ }
+
+ it(
+ `state=required negative=${negative}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, negative, required: true }), style);
+ }),
+ );
+
+ it(
+ `state=disabled negative=${negative}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, negative, disabled: true }), style);
+ }),
+ );
+
+ it(
+ `state=readonly negative=${negative}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, negative, readonly: true }), style);
+ }),
+ );
+
+ it(
+ `state=borderless negative=${negative}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, negative, borderless: true }), style);
+ }),
+ );
+
+ it(
+ `state=noIcon negative=${negative}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(template({ ...defaultArgs, negative, withIcon: false }), style);
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+
+ for (const withIcon of [false, true]) {
+ it(
+ `state=noSpace negative=${negative} withIcon=${withIcon}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(
+ template({ ...defaultArgs, negative, withIcon, preserveIconSpace: false }),
+ style,
+ );
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+ }
+
+ for (const withGroup of [false, true]) {
+ const wrapperStyle = {
+ minHeight: withGroup ? '800px' : '400px',
+ backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+ };
+
+ it(
+ `negative=${negative} withGroup=${withGroup}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(
+ template({ ...defaultArgs, negative, withGroup }),
+ wrapperStyle,
+ );
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+
+ it(
+ `negative=${negative} withGroup=${withGroup} disableOption=true`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(
+ template({ ...defaultArgs, negative, withGroup, disableOption: true }),
+ wrapperStyle,
+ );
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+ }
+
+ it(
+ `negative=${negative} withGroup=true disableGroup=true`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(
+ template({
+ ...defaultArgs,
+ negative,
+ disableGroup: true,
+ withGroup: true,
+ }),
+ {
+ minHeight: '800px',
+ backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+ },
+ );
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+
+ it(
+ `negative=${negative} withGroup=true withMixedOptionAndGroup=true`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(
+ template({ ...defaultArgs, negative, withGroup: true, withMixedOptionAndGroup: true }),
+ {
+ minHeight: '800px',
+ backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+ },
+ );
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+ }
+ });
+});
diff --git a/src/elements/autocomplete/autocomplete.visual.spec.ts b/src/elements/autocomplete/autocomplete.visual.spec.ts
index fbb1fc66ce..ec4d9415b6 100644
--- a/src/elements/autocomplete/autocomplete.visual.spec.ts
+++ b/src/elements/autocomplete/autocomplete.visual.spec.ts
@@ -1,10 +1,11 @@
import { sendKeys } from '@web/test-runner-commands';
-import { nothing, type TemplateResult } from 'lit';
-import { html } from 'lit';
+import { html, nothing, type TemplateResult } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
import { styleMap } from 'lit/directives/style-map.js';
import type { VisualDiffSetupBuilder } from '../core/testing/private.js';
import { describeViewports, visualDiffDefault, visualDiffFocus } from '../core/testing/private.js';
+
import '../form-field.js';
import '../form-error.js';
import '../option.js';
@@ -16,6 +17,7 @@ describe('sbb-autocomplete', () => {
disabled: false,
readonly: false,
required: false,
+ withIcon: true,
preserveIconSpace: true,
disableOption: false,
borderless: false,
@@ -41,15 +43,22 @@ describe('sbb-autocomplete', () => {
`;
- const createOptionBlockOne = (disableOption: boolean): TemplateResult => html`
- Option 1
-
- Option 2
-
-
-
- Option 3
-
+ const createOptionBlockOne = (withIcon: boolean, disableOption: boolean): TemplateResult => html`
+ ${repeat(
+ new Array(3),
+ (_, i) => html`
+
+ ${withIcon && i === 2
+ ? html` `
+ : nothing}
+ Option ${i}
+
+ `,
+ )}
`;
const createOptionBlockTwo = (): TemplateResult => html`
@@ -57,21 +66,23 @@ describe('sbb-autocomplete', () => {
Option 5
`;
- const createOptions = (disableOption: boolean): TemplateResult => html`
- ${createOptionBlockOne(disableOption)} ${createOptionBlockTwo()}
+ const createOptions = (withIcon: boolean, disableOption: boolean): TemplateResult => html`
+ ${createOptionBlockOne(withIcon, disableOption)} ${createOptionBlockTwo()}
`;
const createOptionsGroup = (
+ withIcon: boolean,
disableOption: boolean,
disableGroup: boolean,
): TemplateResult => html`
- ${createOptionBlockOne(disableOption)}
+ ${createOptionBlockOne(withIcon, disableOption)}
${createOptionBlockTwo()}
`;
const createMixedOptionsGroup = (
+ withIcon: boolean,
disableOption: boolean,
disableGroup: boolean,
): TemplateResult => html`
@@ -79,7 +90,7 @@ describe('sbb-autocomplete', () => {
Option Value
- ${createOptionsGroup(disableOption, disableGroup)}
+ ${createOptionsGroup(withIcon, disableOption, disableGroup)}
`;
const template = (args: typeof defaultArgs): TemplateResult => html`
@@ -89,9 +100,9 @@ describe('sbb-autocomplete', () => {
${args.withGroup
? args.withMixedOptionAndGroup
- ? createMixedOptionsGroup(args.disableOption, args.disableGroup)
- : createOptionsGroup(args.disableOption, args.disableGroup)
- : createOptions(args.disableOption)}
+ ? createMixedOptionsGroup(args.withIcon, args.disableOption, args.disableGroup)
+ : createOptionsGroup(args.withIcon, args.disableOption, args.disableGroup)
+ : createOptions(args.withIcon, args.disableOption)}
${args.required
? html`This is a required field. `
@@ -179,16 +190,26 @@ describe('sbb-autocomplete', () => {
);
it(
- `state=noSpace negative=${negative}`,
+ `state=noIcon negative=${negative}`,
visualDiffDefault.with(async (setup) => {
- await setup.withFixture(
- template({ ...defaultArgs, negative, preserveIconSpace: false }),
- style,
- );
+ await setup.withFixture(template({ ...defaultArgs, negative, withIcon: false }), style);
setup.withPostSetupAction(() => openAutocomplete(setup));
}),
);
+ for (const withIcon of [false, true]) {
+ it(
+ `state=noSpace negative=${negative} withIcon=${withIcon}`,
+ visualDiffDefault.with(async (setup) => {
+ await setup.withFixture(
+ template({ ...defaultArgs, negative, withIcon, preserveIconSpace: false }),
+ style,
+ );
+ setup.withPostSetupAction(() => openAutocomplete(setup));
+ }),
+ );
+ }
+
for (const withGroup of [false, true]) {
const wrapperStyle = {
minHeight: withGroup ? '800px' : '400px',
diff --git a/src/elements/option/optgroup/optgroup.visual.spec.ts b/src/elements/option/optgroup/optgroup.visual.spec.ts
index 275d24d3bf..a50bdd2469 100644
--- a/src/elements/option/optgroup/optgroup.visual.spec.ts
+++ b/src/elements/option/optgroup/optgroup.visual.spec.ts
@@ -1,13 +1,13 @@
import { html, nothing, type TemplateResult } from 'lit';
import { repeat } from 'lit/directives/repeat.js';
+import { describeViewports, visualDiffDefault } from '../../core/testing/private.js';
+
import '../../form-field.js';
import '../../autocomplete.js';
import '../../select.js';
import '../option.js';
import './optgroup.js';
-import { describeViewports } from '@sbb-esta/lyne-elements/core/testing/private/describe-viewports';
-import { visualDiffDefault } from '@sbb-esta/lyne-elements/core/testing/private/visual-regression-snapshot';
describe(`sbb-optgroup`, () => {
const defaultArgs = {
From 8211441e2d010d6bf026dd99069d7290d203c86d Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Thu, 4 Jul 2024 14:11:00 +0200
Subject: [PATCH 62/67] fix: tests
---
...ocomplete-grid-option.snapshot.spec.snap.js | 18 +++++++++---------
.../autocomplete-grid-option.snapshot.spec.ts | 8 ++++----
2 files changed, 13 insertions(+), 13 deletions(-)
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.snapshot.spec.snap.js b/src/elements/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.snapshot.spec.snap.js
index 2163dc3865..9e8026a54f 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.snapshot.spec.snap.js
+++ b/src/elements/autocomplete-grid/autocomplete-grid-option/__snapshots__/autocomplete-grid-option.snapshot.spec.snap.js
@@ -37,7 +37,7 @@ snapshots["sbb-autocomplete-grid-option renders disabled DOM"] =
aria-selected="false"
data-slot-names="unnamed"
disabled=""
- id="sbb-autocomplete-grid-option-3"
+ id="sbb-autocomplete-grid-option-2"
role="gridcell"
value="1"
>
@@ -63,35 +63,35 @@ snapshots["sbb-autocomplete-grid-option renders disabled Shadow DOM"] =
`;
/* end snapshot sbb-autocomplete-grid-option renders disabled Shadow DOM */
-snapshots["sbb-autocomplete-grid-option A11y tree Chrome"] =
+snapshots["sbb-autocomplete-grid-option A11y tree Firefox"] =
`
{
- "role": "WebArea",
+ "role": "document",
"name": "",
"children": [
{
- "role": "text",
+ "role": "text leaf",
"name": "Option 1"
}
]
}
`;
-/* end snapshot sbb-autocomplete-grid-option A11y tree Chrome */
+/* end snapshot sbb-autocomplete-grid-option A11y tree Firefox */
-snapshots["sbb-autocomplete-grid-option A11y tree Firefox"] =
+snapshots["sbb-autocomplete-grid-option A11y tree Chrome"] =
`
{
- "role": "document",
+ "role": "WebArea",
"name": "",
"children": [
{
- "role": "text leaf",
+ "role": "text",
"name": "Option 1"
}
]
}
`;
-/* end snapshot sbb-autocomplete-grid-option A11y tree Firefox */
+/* end snapshot sbb-autocomplete-grid-option A11y tree Chrome */
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.snapshot.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.snapshot.spec.ts
index aa98d8fbd6..cdc6c4278a 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.snapshot.spec.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.snapshot.spec.ts
@@ -35,10 +35,6 @@ describe('sbb-autocomplete-grid-option', () => {
});
});
- testA11yTreeSnapshot(
- html`Option 1 `,
- );
-
describe('renders disabled', () => {
let root: SbbAutocompleteGridOptionElement;
beforeEach(async () => {
@@ -64,4 +60,8 @@ describe('sbb-autocomplete-grid-option', () => {
await expect(root).shadowDom.to.be.equalSnapshot();
});
});
+
+ testA11yTreeSnapshot(
+ html`Option 1 `,
+ );
});
From 41e047f3a78e60004b3fa65de3fd1e1a68a20dc6 Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Thu, 4 Jul 2024 17:01:05 +0200
Subject: [PATCH 63/67] fix: tests
---
.../autocomplete-grid-optgroup.visual.spec.ts | 2 +-
.../autocomplete-grid-option.visual.spec.ts | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.visual.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.visual.spec.ts
index c48ae363de..4534621db5 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.visual.spec.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.visual.spec.ts
@@ -54,7 +54,7 @@ describe(`sbb-autocomplete-grid-optgroup`, () => {
const autocompleteTemplate = (args: typeof defaultArgs): TemplateResult => html`
- Autocomplete
+ sbb-autocomplete-grid
${template(args)}
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.visual.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.visual.spec.ts
index 16fc7f4bb9..dcd04e83ec 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.visual.spec.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.visual.spec.ts
@@ -43,7 +43,7 @@ describe(`sbb-autocomplete-grid-option`, () => {
const autocompleteTemplate = (args: typeof defaultArgs): TemplateResult => html`
- sbb-autocomplete
+ sbb-autocomplete-grid
${repeat(
From 89538b1c97837e1f17f87fdffc9cfaf0e02da953 Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Thu, 4 Jul 2024 17:02:02 +0200
Subject: [PATCH 64/67] fix: enable autocomplete behavior
---
src/elements/option/option/option-base-element.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/elements/option/option/option-base-element.ts b/src/elements/option/option/option-base-element.ts
index ec0cad8c38..52cd5e4f42 100644
--- a/src/elements/option/option/option-base-element.ts
+++ b/src/elements/option/option/option-base-element.ts
@@ -202,7 +202,7 @@ export abstract class SbbOptionBaseElement extends SbbDisabledMixin(
protected handleHighlightState(): void {
const slotNodes = Array.from(this.childNodes ?? []).filter(
- (n) => !(n instanceof Element) || n.slot !== 'icon',
+ (n) => n.nodeType !== Node.COMMENT_NODE && (!(n instanceof Element) || n.slot !== 'icon'),
);
const labelNodes = slotNodes.filter((el) => el.nodeType === Node.TEXT_NODE) as Text[];
From 860b4e93bca4070ab2cb41918022e579dbff421c Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Mon, 8 Jul 2024 11:41:27 +0200
Subject: [PATCH 65/67] fix: review (partial)
---
.../autocomplete-grid-button.ts | 24 ++++---------------
.../autocomplete-grid-button/readme.md | 6 +++++
.../autocomplete-grid-optgroup.ts | 11 ++++-----
.../autocomplete-grid-optgroup/readme.md | 2 +-
src/elements/button/mini-button.ts | 1 +
.../mini-button}/mini-button-base-element.ts | 7 +++---
.../button/mini-button/mini-button.ts | 2 +-
src/elements/core/base-elements.ts | 1 -
.../core/base-elements/button-base-element.ts | 6 ++---
9 files changed, 24 insertions(+), 36 deletions(-)
rename src/elements/{core/base-elements => button/mini-button}/mini-button-base-element.ts (64%)
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts b/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
index 4d28f5b15b..11d130c3c2 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
@@ -2,8 +2,7 @@ import { type CSSResultGroup, isServer, type PropertyValues, type TemplateResult
import { customElement } from 'lit/decorators.js';
import { SbbActionBaseElement } from '../../core/base-elements.js';
-import { SbbSlotStateController } from '../../core/controllers.js';
-import { hostAttributes } from '../../core/decorators.js';
+import { hostAttributes, slotState } from '../../core/decorators.js';
import { setOrRemoveAttribute } from '../../core/dom.js';
import { isEventPrevented } from '../../core/eventing.js';
import { SbbDisabledMixin, SbbNegativeMixin } from '../../core/mixins.js';
@@ -31,6 +30,7 @@ const buttonObserverConfig: MutationObserverInit = {
tabindex: null,
'data-button': '',
})
+@slotState()
export class SbbAutocompleteGridButtonElement extends SbbDisabledMixin(
SbbNegativeMixin(SbbIconNameMixin(SbbActionBaseElement)),
) {
@@ -52,23 +52,17 @@ export class SbbAutocompleteGridButtonElement extends SbbDisabledMixin(
}
/** MutationObserver on data attributes. */
- private _optionAttributeObserver = new AgnosticMutationObserver((mutationsList) =>
- this._onOptionAttributesChange(mutationsList),
- );
-
- /** Observe changes on data attributes and set the appropriate values. */
- private _onOptionAttributesChange(mutationsList: MutationRecord[]): void {
+ private _optionAttributeObserver = new AgnosticMutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.attributeName === 'data-group-disabled') {
this._disabledFromGroup = this.hasAttribute('data-group-disabled');
setOrRemoveAttribute(this, 'aria-disabled', `${this.disabled || this._disabledFromGroup}`);
}
}
- }
+ });
public constructor() {
super();
- new SbbSlotStateController(this);
if (!isServer) {
this.setupBaseEventHandlers();
this.addEventListener('click', this._handleButtonClick);
@@ -106,14 +100,6 @@ export class SbbAutocompleteGridButtonElement extends SbbDisabledMixin(
* Used to dispatch a click event when users interact with the button via keyboard (the component does not receive focus).
*/
public dispatchClick(event: KeyboardEvent): void {
- return this.dispatchClickEvent(event);
- }
-
- /**
- * Event needs to be dispatched from the action element; in autocomplete-grid,
- * the input has always the focus, so the `event.target` on parent class is the input and not the button.
- */
- protected dispatchClickEvent = (event: KeyboardEvent): void => {
const { altKey, ctrlKey, metaKey, shiftKey } = event;
this.dispatchEvent(
new PointerEvent('click', {
@@ -128,7 +114,7 @@ export class SbbAutocompleteGridButtonElement extends SbbDisabledMixin(
shiftKey,
}),
);
- };
+ }
private _handleButtonClick = async (event: MouseEvent): Promise => {
if ((await isEventPrevented(event)) || !this.closest('form')) {
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-button/readme.md b/src/elements/autocomplete-grid/autocomplete-grid-button/readme.md
index b279de4167..28b56227e5 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-button/readme.md
+++ b/src/elements/autocomplete-grid/autocomplete-grid-button/readme.md
@@ -108,6 +108,12 @@ since the focus must always stay on the connected ` `.
| --------------- | ------- | ----------------------------------------------------------------------------------------------------------------------- | ---------------------- | ------ | -------------- |
| `dispatchClick` | public | Used to dispatch a click event when users interact with the button via keyboard (the component does not receive focus). | `event: KeyboardEvent` | `void` | |
+## Events
+
+| Name | Type | Description | Inherited From |
+| ------- | -------------- | ----------- | -------------- |
+| `click` | `PointerEvent` | | |
+
## Slots
| Name | Description |
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts
index e812e5a394..8c16cbe950 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/autocomplete-grid-optgroup.ts
@@ -18,12 +18,6 @@ export class SbbAutocompleteGridOptgroupElement extends SbbOptgroupBaseElement {
) as SbbAutocompleteGridOptionElement[];
}
- private get _buttons(): SbbAutocompleteGridButtonElement[] {
- return Array.from(
- this.querySelectorAll?.('sbb-autocomplete-grid-button') ?? [],
- ) as SbbAutocompleteGridButtonElement[];
- }
-
protected getAutocompleteParent(): SbbAutocompleteGridElement | null {
return this.closest?.('sbb-autocomplete-grid') || null;
}
@@ -35,7 +29,10 @@ export class SbbAutocompleteGridOptgroupElement extends SbbOptgroupBaseElement {
protected override proxyDisabledToOptions(): void {
super.proxyDisabledToOptions();
- for (const el of this._buttons) {
+ const buttons = Array.from(
+ this.querySelectorAll?.('sbb-autocomplete-grid-button') ?? [],
+ ) as SbbAutocompleteGridButtonElement[];
+ for (const el of buttons) {
el.toggleAttribute('data-group-disabled', this.disabled);
}
}
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-optgroup/readme.md b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/readme.md
index fabb93d030..db1a68eb46 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-optgroup/readme.md
+++ b/src/elements/autocomplete-grid/autocomplete-grid-optgroup/readme.md
@@ -1,4 +1,4 @@
-The `sbb-optgroup` is a component used to group more [sbb-autocomplete-grid-option](/docs/elements-sbb-autocomplete-grid-sbb-autocomplete-grid-option--docs)
+The `sbb-autocomplete-grid-optgroup` is a component used to group more [sbb-autocomplete-grid-option](/docs/elements-sbb-autocomplete-grid-sbb-autocomplete-grid-option--docs)
within a [sbb-autocomplete-grid](/docs/elements-sbb-autocomplete-grid-sbb-autocomplete-grid--docs).
A [sbb-divider](/docs/elements-sbb-divider--docs) is displayed at the bottom of the component.
diff --git a/src/elements/button/mini-button.ts b/src/elements/button/mini-button.ts
index 65b7e88ef6..379817a955 100644
--- a/src/elements/button/mini-button.ts
+++ b/src/elements/button/mini-button.ts
@@ -1 +1,2 @@
+export * from './mini-button/mini-button-base-element.js';
export * from './mini-button/mini-button.js';
diff --git a/src/elements/core/base-elements/mini-button-base-element.ts b/src/elements/button/mini-button/mini-button-base-element.ts
similarity index 64%
rename from src/elements/core/base-elements/mini-button-base-element.ts
rename to src/elements/button/mini-button/mini-button-base-element.ts
index 60f55670f7..7d498911ca 100644
--- a/src/elements/core/base-elements/mini-button-base-element.ts
+++ b/src/elements/button/mini-button/mini-button-base-element.ts
@@ -1,10 +1,9 @@
import type { TemplateResult } from 'lit';
+import { SbbButtonBaseElement } from '../../core/base-elements.js';
+import { slotState } from '../../core/decorators.js';
+import { SbbNegativeMixin } from '../../core/mixins.js';
import { SbbIconNameMixin } from '../../icon.js';
-import { slotState } from '../decorators.js';
-import { SbbNegativeMixin } from '../mixins.js';
-
-import { SbbButtonBaseElement } from './button-base-element.js';
@slotState()
export abstract class SbbMiniButtonBaseElement extends SbbNegativeMixin(
diff --git a/src/elements/button/mini-button/mini-button.ts b/src/elements/button/mini-button/mini-button.ts
index ffceb92605..a7fd7bb56f 100644
--- a/src/elements/button/mini-button/mini-button.ts
+++ b/src/elements/button/mini-button/mini-button.ts
@@ -1,9 +1,9 @@
import type { CSSResultGroup } from 'lit';
import { customElement } from 'lit/decorators.js';
-import { SbbMiniButtonBaseElement } from '../../core/base-elements.js';
import { SbbDisabledTabIndexActionMixin } from '../../core/mixins.js';
+import { SbbMiniButtonBaseElement } from './mini-button-base-element.js';
import style from './mini-button.scss?lit&inline';
/**
diff --git a/src/elements/core/base-elements.ts b/src/elements/core/base-elements.ts
index ec2ab428f7..ec31fb7adb 100644
--- a/src/elements/core/base-elements.ts
+++ b/src/elements/core/base-elements.ts
@@ -1,5 +1,4 @@
export * from './base-elements/action-base-element.js';
export * from './base-elements/button-base-element.js';
-export * from './base-elements/mini-button-base-element.js';
export * from './base-elements/link-base-element.js';
export * from './base-elements/open-close-base-element.js';
diff --git a/src/elements/core/base-elements/button-base-element.ts b/src/elements/core/base-elements/button-base-element.ts
index 4c67e1e593..f1915a1a05 100644
--- a/src/elements/core/base-elements/button-base-element.ts
+++ b/src/elements/core/base-elements/button-base-element.ts
@@ -96,11 +96,11 @@ export abstract class SbbButtonBaseElement extends SbbActionBaseElement {
private _dispatchClickEventOnSpaceKeyup = (event: KeyboardEvent): void => {
if (event.key === ' ') {
this._removeActiveMarker(event);
- this.dispatchClickEvent(event);
+ this._dispatchClickEvent(event);
}
};
- protected dispatchClickEvent = (event: KeyboardEvent): void => {
+ private _dispatchClickEvent = (event: KeyboardEvent): void => {
const { altKey, ctrlKey, metaKey, shiftKey } = event;
(event.target as Element).dispatchEvent(
new PointerEvent('click', {
@@ -131,7 +131,7 @@ export abstract class SbbButtonBaseElement extends SbbActionBaseElement {
'keypress',
(event: KeyboardEvent): void => {
if (event.key === 'Enter' || event.key === '\n') {
- this.dispatchClickEvent(event);
+ this._dispatchClickEvent(event);
}
},
passiveOptions,
From 059a750c3022e83221e9c5722825674234e427ad Mon Sep 17 00:00:00 2001
From: Davide Mininni
Date: Tue, 9 Jul 2024 09:45:51 +0200
Subject: [PATCH 66/67] fix: remove useless API
---
.../autocomplete-grid-button.ts | 20 -------------------
.../autocomplete-grid-button/readme.md | 12 -----------
.../autocomplete-grid/autocomplete-grid.ts | 6 +++---
3 files changed, 3 insertions(+), 35 deletions(-)
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts b/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
index 11d130c3c2..128bc0e45e 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ts
@@ -96,26 +96,6 @@ export class SbbAutocompleteGridButtonElement extends SbbDisabledMixin(
this._optionAttributeObserver.disconnect();
}
- /**
- * Used to dispatch a click event when users interact with the button via keyboard (the component does not receive focus).
- */
- public dispatchClick(event: KeyboardEvent): void {
- const { altKey, ctrlKey, metaKey, shiftKey } = event;
- this.dispatchEvent(
- new PointerEvent('click', {
- bubbles: true,
- cancelable: true,
- composed: true,
- pointerId: -1,
- pointerType: '',
- altKey,
- ctrlKey,
- metaKey,
- shiftKey,
- }),
- );
- }
-
private _handleButtonClick = async (event: MouseEvent): Promise => {
if ((await isEventPrevented(event)) || !this.closest('form')) {
return;
diff --git a/src/elements/autocomplete-grid/autocomplete-grid-button/readme.md b/src/elements/autocomplete-grid/autocomplete-grid-button/readme.md
index 28b56227e5..efead5ba74 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid-button/readme.md
+++ b/src/elements/autocomplete-grid/autocomplete-grid-button/readme.md
@@ -102,18 +102,6 @@ since the focus must always stay on the connected ` `.
| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. |
| `option` | - | public | `SbbAutocompleteGridOptionElement \| null` | | Gets the SbbAutocompleteGridOptionElement on the same row of the button. |
-## Methods
-
-| Name | Privacy | Description | Parameters | Return | Inherited From |
-| --------------- | ------- | ----------------------------------------------------------------------------------------------------------------------- | ---------------------- | ------ | -------------- |
-| `dispatchClick` | public | Used to dispatch a click event when users interact with the button via keyboard (the component does not receive focus). | `event: KeyboardEvent` | `void` | |
-
-## Events
-
-| Name | Type | Description | Inherited From |
-| ------- | -------------- | ----------- | -------------- |
-| `click` | `PointerEvent` | | |
-
## Slots
| Name | Description |
diff --git a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts
index 439890e9e8..3ff62585f1 100644
--- a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts
+++ b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.ts
@@ -96,7 +96,7 @@ export class SbbAutocompleteGridElement extends SbbAutocompleteBaseElement {
break;
case 'Enter':
- this.selectByKeyboard(event);
+ this.selectByKeyboard();
break;
case 'ArrowDown':
@@ -118,13 +118,13 @@ export class SbbAutocompleteGridElement extends SbbAutocompleteBaseElement {
* and greater than zero when a button is 'focused', so asking for `querySelectorAll(...)[this._activeColumnIndex]`
* would always return a `SbbAutocompleteGridButtonElement`.
*/
- protected selectByKeyboard(event: KeyboardEvent): void {
+ protected selectByKeyboard(): void {
if (this._activeColumnIndex !== 0) {
(
this._row[this._activeItemIndex].querySelectorAll(
'sbb-autocomplete-grid-option, sbb-autocomplete-grid-button',
)[this._activeColumnIndex] as SbbAutocompleteGridButtonElement
- ).dispatchClick(event);
+ ).click();
} else {
this.options[this._activeItemIndex]?.setSelectedViaUserInteraction(true);
}
From 2b3b8a8b8dabe18b562ddad989ff032350d1de1f Mon Sep 17 00:00:00 2001
From: Jeremias Peier
Date: Tue, 9 Jul 2024 10:37:25 +0200
Subject: [PATCH 67/67] fix: snapshot formatting
---
.../__snapshots__/expansion-panel.snapshot.spec.snap.js | 2 +-
.../stepper/__snapshots__/stepper.snapshot.spec.snap.js | 2 +-
.../__snapshots__/table-wrapper.snapshot.spec.snap.js | 2 +-
.../__snapshots__/time-input.snapshot.spec.snap.js | 6 +++---
4 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/src/elements/expansion-panel/expansion-panel/__snapshots__/expansion-panel.snapshot.spec.snap.js b/src/elements/expansion-panel/expansion-panel/__snapshots__/expansion-panel.snapshot.spec.snap.js
index fdeda2e4d2..b070e0e27f 100644
--- a/src/elements/expansion-panel/expansion-panel/__snapshots__/expansion-panel.snapshot.spec.snap.js
+++ b/src/elements/expansion-panel/expansion-panel/__snapshots__/expansion-panel.snapshot.spec.snap.js
@@ -145,7 +145,7 @@ snapshots["sbb-expansion-panel renders with level set Shadow DOM"] =
`;
/* end snapshot sbb-expansion-panel renders with level set Shadow DOM */
-snapshots["sbb-expansion-panel renders with level set A11y tree Chrome"] =
+snapshots["sbb-expansion-panel renders with level set A11y tree Chrome"] =
`
{
"role": "WebArea",
diff --git a/src/elements/stepper/stepper/__snapshots__/stepper.snapshot.spec.snap.js b/src/elements/stepper/stepper/__snapshots__/stepper.snapshot.spec.snap.js
index 053a4acebd..f6909850dc 100644
--- a/src/elements/stepper/stepper/__snapshots__/stepper.snapshot.spec.snap.js
+++ b/src/elements/stepper/stepper/__snapshots__/stepper.snapshot.spec.snap.js
@@ -109,7 +109,7 @@ snapshots["sbb-stepper renders Shadow DOM"] =
`;
/* end snapshot sbb-stepper renders Shadow DOM */
-snapshots["sbb-stepper renders A11y tree Chrome"] =
+snapshots["sbb-stepper renders A11y tree Chrome"] =
`
{
"role": "WebArea",
diff --git a/src/elements/table/table-wrapper/__snapshots__/table-wrapper.snapshot.spec.snap.js b/src/elements/table/table-wrapper/__snapshots__/table-wrapper.snapshot.spec.snap.js
index af5743f875..956b7eacac 100644
--- a/src/elements/table/table-wrapper/__snapshots__/table-wrapper.snapshot.spec.snap.js
+++ b/src/elements/table/table-wrapper/__snapshots__/table-wrapper.snapshot.spec.snap.js
@@ -40,7 +40,7 @@ snapshots["sbb-table-wrapper renders Shadow DOM"] =
`;
/* end snapshot sbb-table-wrapper renders Shadow DOM */
-snapshots["sbb-table-wrapper renders A11y tree Chrome"] =
+snapshots["sbb-table-wrapper renders A11y tree Chrome"] =
`
{
"role": "WebArea",
diff --git a/src/elements/time-input/__snapshots__/time-input.snapshot.spec.snap.js b/src/elements/time-input/__snapshots__/time-input.snapshot.spec.snap.js
index 4e883f9860..3cad41657a 100644
--- a/src/elements/time-input/__snapshots__/time-input.snapshot.spec.snap.js
+++ b/src/elements/time-input/__snapshots__/time-input.snapshot.spec.snap.js
@@ -1,7 +1,7 @@
/* @web/test-runner snapshot v1 */
export const snapshots = {};
-snapshots["sbb-time-input A11y tree Chrome"] =
+snapshots["sbb-time-input A11y tree Chrome"] =
`
{
"role": "WebArea",
@@ -17,7 +17,7 @@ snapshots["sbb-time-input A11y tree Chrome"] =
`;
/* end snapshot sbb-time-input A11y tree Chrome */
-snapshots["sbb-time-input A11y tree Firefox"] =
+snapshots["sbb-time-input A11y tree Firefox"] =
`
{
"role": "document",
@@ -55,7 +55,7 @@ snapshots["sbb-time-input renders Shadow DOM"] =
`;
/* end snapshot sbb-time-input renders Shadow DOM */
-snapshots["sbb-time-input renders A11y tree Chrome"] =
+snapshots["sbb-time-input renders A11y tree Chrome"] =
`
{
"role": "WebArea",