extends LitElement {
}
private _nextYearRangeDisabled(): boolean {
- const lastYear = (isBreakpoint('medium') && this.wide ? this._nextMonthYears : this._years)
- .at(-1)!
- .at(-1)!;
+ const years = isBreakpoint('medium') && this.wide ? this._nextMonthYears : this._years;
+ const lastYearRange = years[years.length - 1];
+ const lastYear = lastYearRange[lastYearRange.length - 1];
const nextYear = this._dateAdapter.createDate(lastYear + 1, 1, 1);
return this._nextDisabled(nextYear);
}
diff --git a/src/components/vite.config.ts b/src/components/vite.config.ts
index 67ad1354da..59e5473423 100644
--- a/src/components/vite.config.ts
+++ b/src/components/vite.config.ts
@@ -33,8 +33,7 @@ export default defineConfig((config) =>
...(isProdBuild(config)
? [
dts({
- entryRoot: '.',
- include: `**/*.ts`,
+ entryRoot: packageRoot.pathname,
exclude: [
'**/*[.-]{stories,spec,e2e,test-utils}.ts',
'**/private/*',
diff --git a/src/react/core/ssr-extensions.ts b/src/react/core/ssr-extensions.ts
index abfd212451..0c350e53b2 100644
--- a/src/react/core/ssr-extensions.ts
+++ b/src/react/core/ssr-extensions.ts
@@ -18,7 +18,8 @@ export const withSsrDataSlotNames = (
): ComponentType
=> {
return !isServer
? component
- : (props: WithChildren
) => {
+ : (originalProps) => {
+ const props = originalProps as WithChildren
;
if (!props.children) {
return react.createElement(component, props);
}
@@ -69,7 +70,8 @@ export const withSsrDataChildCount =
(
): ComponentType
=> {
return !isServer
? component
- : (props: WithChildren
) => {
+ : (originalProps) => {
+ const props = originalProps as WithChildren
;
if (!props.children) {
return react.createElement(component, props);
}
diff --git a/src/react/vite.config.ts b/src/react/vite.config.ts
index e4c91a2208..61e85e414c 100644
--- a/src/react/vite.config.ts
+++ b/src/react/vite.config.ts
@@ -15,6 +15,7 @@ import type {
ClassField,
CustomElementDeclaration,
Declaration,
+ Export,
Module,
Package,
} from 'custom-elements-manifest/schema';
@@ -39,10 +40,14 @@ export default defineConfig((config) =>
...(isProdBuild(config)
? [
dts({
- entryRoot: '.',
- include: `**/*.ts`,
+ entryRoot: packageRoot.pathname,
exclude: ['**/*.{stories,spec,e2e}.ts', 'vite.config.ts'],
pathsToAliases: false,
+ afterDiagnostic(diagnostics) {
+ if (diagnostics.length) {
+ throw new Error('dts generation for react package failed! See logs for details.');
+ }
+ },
}),
packageJsonTemplate(),
]
@@ -86,15 +91,19 @@ function generateReactWrappers(): PluginOption {
name: 'generate-react-wrappers',
config(config) {
const declarations = manifest.modules
- .filter((m) => m.kind === 'javascript-module')
+ .filter((m) => m.kind === 'javascript-module' && m.declarations?.length)
.reduce((current, next) => current.concat(next.declarations ?? []), [] as Declaration[]);
- for (const module of manifest.modules) {
+ const exports = manifest.modules.reduce(
+ (current, next) => current.concat(next.exports ?? []),
+ [] as Export[],
+ );
+ for (const module of manifest.modules.filter((m) => !m.path.startsWith('core/'))) {
for (const declaration of module.declarations?.filter(
(d): d is CustomElementDeclaration => 'customElement' in d && d.customElement,
) ?? []) {
const targetPath = new URL(`./${module.path}/index.ts`, packageRoot);
createDir(new URL('.', targetPath));
- const reactTemplate = renderTemplate(declaration, declarations, module);
+ const reactTemplate = renderTemplate(declaration, declarations, module, exports);
generatedPaths.push(targetPath);
writeFileSync(targetPath, reactTemplate, 'utf8');
}
@@ -140,6 +149,7 @@ function renderTemplate(
declaration: CustomElementDeclaration,
declarations: Declaration[],
module: Module,
+ exports: Export[],
): string {
const extensions = findExtensionUsage(declaration, declarations);
const relativeCoreImportPath = `${'../'.repeat(module.path.split('/').length)}core`;
@@ -152,9 +162,47 @@ import { ${Array.from(extensions.keys()).join(', ')} } from '${relativeCoreImpor
(current, next) => (v) => current(next(v)),
(v: string) => v,
);
+ const componentsImports = new Map().set(module.path, [declaration.name]);
+ const customEventTypes =
+ declaration.events
+ ?.filter(
+ (e) =>
+ e.type.text.startsWith('CustomEvent<') &&
+ ['void', '{', 'File'].every((m) => !e.type.text.includes(`<${m}`)),
+ )
+ .map((e) => e.type.text.substring(12).slice(0, -1))
+ .sort()
+ .filter((v, i, a) => a.indexOf(v) === i && v.length > 1) ?? [];
+ // If a type or interface needs to be imported, the custom elements analyzer will not
+ // detect/extract these and therefore we need to have a manual list of required
+ // types/interfaces.
+ const interfaces = new Map().set('ValidationChangeEvent', 'core/interfaces');
+ for (const customEventType of customEventTypes) {
+ const exportModule = exports.find((e) => e.name === customEventType);
+ if (exportModule) {
+ if (!componentsImports.has(exportModule.declaration.module!)) {
+ componentsImports.set(exportModule.declaration.module!, [`type ${customEventType}`]);
+ } else {
+ componentsImports.get(exportModule.declaration.module!)!.push(`type ${customEventType}`);
+ }
+ } else if (interfaces.has(customEventType)) {
+ const moduleName = interfaces.get(customEventType)!;
+ if (!componentsImports.has(moduleName)) {
+ componentsImports.set(moduleName, [`type ${customEventType}`]);
+ } else {
+ componentsImports.get(moduleName)!.push(`type ${customEventType}`);
+ }
+ } else {
+ componentsImports.get(module.path)!.push(`type ${customEventType}`);
+ }
+ }
const reactTemplate = `/* autogenerated */
-import { createComponent, type EventName } from '${relativeCoreImportPath}';
-import { ${declaration.name} } from '@sbb-esta/lyne-components/${module.path}';
+import { createComponent${declaration.events?.length ? ', type EventName' : ''} } from '${relativeCoreImportPath}';
+${Array.from(componentsImports)
+ .map(
+ ([key, imports]) => `import { ${imports.join(', ')} } from '@sbb-esta/lyne-components/${key}';`,
+ )
+ .join('\n')}
import react from 'react';${extensionImport}
// eslint-disable-next-line @typescript-eslint/naming-convention
@@ -167,9 +215,10 @@ export const ${declaration.name.replace(/Element$/, '')} = ${extension(`createCo
events: {${declaration
.events!.map(
(e) =>
- `\n 'on${e.name.charAt(0).toUpperCase() + e.name.slice(1)}': '${e.name}' as EventName<${
- e.type.text
- }>,`,
+ `\n 'on${e.name.charAt(0).toUpperCase() + e.name.slice(1)}': '${e.name}' as EventName<${e.type.text.replace(
+ '',
+ '',
+ )}>,`,
)
.join('')}
},
From 5ea4fb79c98495cf7859c99a3b16778a633c81d7 Mon Sep 17 00:00:00 2001
From: Marco D'Auria <101181211+dauriamarco@users.noreply.github.com>
Date: Tue, 2 Apr 2024 15:37:05 +0200
Subject: [PATCH 015/110] feat(sbb-overlay): extract `sbb-overlay` component
from dialog (#2477)
Closes #2476
Closes #2470
Co-authored-by: Jeremias Peier
---
src/components/autocomplete/autocomplete.scss | 5 +-
src/components/autocomplete/autocomplete.ts | 4 +-
src/components/autocomplete/readme.md | 6 +-
.../core/styles/core/variables.scss | 2 +-
src/components/core/styles/typography.scss | 1 +
src/components/dialog/dialog.scss | 4 +-
src/components/dialog/dialog.ts | 4 +-
src/components/dialog/readme.md | 6 +-
src/components/menu/menu/menu.scss | 2 +-
src/components/menu/menu/menu.ts | 4 +-
src/components/menu/menu/readme.md | 6 +-
.../navigation-section.scss | 2 +-
.../navigation/navigation/navigation.scss | 4 +-
.../navigation/navigation/navigation.ts | 4 +-
.../navigation/navigation/readme.md | 6 +-
.../__snapshots__/overlay.spec.snap.js | 92 +++++
src/components/overlay/index.ts | 1 +
src/components/overlay/overlay.e2e.ts | 255 ++++++++++++
src/components/overlay/overlay.scss | 159 +++++++
src/components/overlay/overlay.spec.ts | 24 ++
src/components/overlay/overlay.stories.ts | 350 ++++++++++++++++
src/components/overlay/overlay.ts | 387 ++++++++++++++++++
src/components/overlay/readme.md | 114 ++++++
src/components/popover/popover/popover.scss | 2 +-
src/components/popover/popover/popover.ts | 4 +-
src/components/popover/popover/readme.md | 6 +-
.../screenreader-only.spec.snap.js | 35 --
src/components/select/readme.md | 6 +-
src/components/select/select.scss | 5 +-
src/components/select/select.ts | 4 +-
src/components/skiplink-list/readme.md | 6 +-
.../skiplink-list/skiplink-list.scss | 2 +-
src/components/skiplink-list/skiplink-list.ts | 4 +-
src/components/toast/readme.md | 6 +-
src/components/toast/toast.scss | 2 +-
src/components/toast/toast.ts | 4 +-
tsconfig.json | 1 +
37 files changed, 1442 insertions(+), 87 deletions(-)
create mode 100644 src/components/overlay/__snapshots__/overlay.spec.snap.js
create mode 100644 src/components/overlay/index.ts
create mode 100644 src/components/overlay/overlay.e2e.ts
create mode 100644 src/components/overlay/overlay.scss
create mode 100644 src/components/overlay/overlay.spec.ts
create mode 100644 src/components/overlay/overlay.stories.ts
create mode 100644 src/components/overlay/overlay.ts
create mode 100644 src/components/overlay/readme.md
delete mode 100644 src/components/screenreader-only/__snapshots__/screenreader-only.spec.snap.js
diff --git a/src/components/autocomplete/autocomplete.scss b/src/components/autocomplete/autocomplete.scss
index 97626deeb3..1ee74e2307 100644
--- a/src/components/autocomplete/autocomplete.scss
+++ b/src/components/autocomplete/autocomplete.scss
@@ -11,7 +11,10 @@
:host {
@include sbb.options-panel-overlay-variables;
- --sbb-options-panel-internal-z-index: var(--sbb-autocomplete-z-index, var(--sbb-overlay-z-index));
+ --sbb-options-panel-internal-z-index: var(
+ --sbb-autocomplete-z-index,
+ var(--sbb-overlay-default-z-index)
+ );
}
:host([negative]) {
diff --git a/src/components/autocomplete/autocomplete.ts b/src/components/autocomplete/autocomplete.ts
index f27589a696..2f71146cc4 100644
--- a/src/components/autocomplete/autocomplete.ts
+++ b/src/components/autocomplete/autocomplete.ts
@@ -36,9 +36,9 @@ let nextId = 0;
* @event {CustomEvent} didOpen - Emits whenever the `sbb-autocomplete` is opened.
* @event {CustomEvent} willClose - Emits whenever the `sbb-autocomplete` begins the closing transition. Can be canceled.
* @event {CustomEvent} didClose - Emits whenever the `sbb-autocomplete` 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')
@hostAttributes({
diff --git a/src/components/autocomplete/readme.md b/src/components/autocomplete/readme.md
index b4bcd5dce5..83901da3ee 100644
--- a/src/components/autocomplete/readme.md
+++ b/src/components/autocomplete/readme.md
@@ -125,9 +125,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/styles/core/variables.scss b/src/components/core/styles/core/variables.scss
index 315d1951a7..30ae8cda75 100644
--- a/src/components/core/styles/core/variables.scss
+++ b/src/components/core/styles/core/variables.scss
@@ -65,7 +65,7 @@
--sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
// Overlay
- --sbb-overlay-z-index: 1000;
+ --sbb-overlay-default-z-index: 1000;
// Infinity border radius, can be used to achieve rounded border on start and end
// TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity);
diff --git a/src/components/core/styles/typography.scss b/src/components/core/styles/typography.scss
index a544ac5d03..f7693d8895 100644
--- a/src/components/core/styles/typography.scss
+++ b/src/components/core/styles/typography.scss
@@ -50,6 +50,7 @@ sbb-form-field {
sbb-menu,
sbb-navigation,
sbb-navigation-section,
+ sbb-overlay,
sbb-select,
sbb-skiplink-list,
sbb-toast,
diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
index 0313f39d89..db56e3c232 100644
--- a/src/components/dialog/dialog.scss
+++ b/src/components/dialog/dialog.scss
@@ -29,7 +29,7 @@
position: fixed;
inset: var(--sbb-dialog-inset);
- z-index: var(--sbb-dialog-z-index, var(--sbb-overlay-z-index));
+ z-index: var(--sbb-dialog-z-index, var(--sbb-overlay-default-z-index));
@include sbb.mq($from: micro) {
--sbb-dialog-padding-inline: var(--sbb-spacing-fixed-6x);
@@ -192,7 +192,7 @@
padding-inline: var(--sbb-dialog-padding-inline);
padding-block: var(--sbb-dialog-header-padding-block);
background-color: var(--sbb-dialog-background-color);
- z-index: var(--sbb-dialog-z-index, var(--sbb-overlay-z-index));
+ z-index: var(--sbb-dialog-z-index, var(--sbb-overlay-default-z-index));
* {
pointer-events: all;
diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts
index c1dd4ebbc0..b7a58ca23a 100644
--- a/src/components/dialog/dialog.ts
+++ b/src/components/dialog/dialog.ts
@@ -40,9 +40,9 @@ let nextId = 0;
* @event {CustomEvent} willClose - Emits whenever the `sbb-dialog` begins the closing transition. Can be canceled.
* @event {CustomEvent} didClose - Emits whenever the `sbb-dialog` is closed.
* @event {CustomEvent} requestBackAction - Emits whenever the back button is clicked.
- * @cssprop [--sbb-dialog-z-index=var(--sbb-overlay-z-index)] - To specify a custom stack order,
+ * @cssprop [--sbb-dialog-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-dialog')
export class SbbDialogElement extends SbbNegativeMixin(LitElement) {
diff --git a/src/components/dialog/readme.md b/src/components/dialog/readme.md
index d9c6cb1f81..98e4732711 100644
--- a/src/components/dialog/readme.md
+++ b/src/components/dialog/readme.md
@@ -109,9 +109,9 @@ It's possible to display the component in `negative` variant using the self-name
## CSS Properties
-| Name | Default | Description |
-| ---------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--sbb-dialog-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-dialog-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/menu/menu/menu.scss b/src/components/menu/menu/menu.scss
index 60d9ba77dc..516a46a824 100644
--- a/src/components/menu/menu/menu.scss
+++ b/src/components/menu/menu/menu.scss
@@ -73,7 +73,7 @@
pointer-events: none;
inset: var(--sbb-menu-inset);
height: var(--sbb-menu-container-height);
- z-index: var(--sbb-menu-z-index, var(--sbb-overlay-z-index));
+ z-index: var(--sbb-menu-z-index, var(--sbb-overlay-default-z-index));
// Menu backdrop (only visible on mobile)
&::before {
diff --git a/src/components/menu/menu/menu.ts b/src/components/menu/menu/menu.ts
index 08285c738a..e3b85cd83d 100644
--- a/src/components/menu/menu/menu.ts
+++ b/src/components/menu/menu/menu.ts
@@ -54,9 +54,9 @@ let nextId = 0;
* @event {CustomEvent} didOpen - Emits whenever the `sbb-menu` is opened.
* @event {CustomEvent} willClose - Emits whenever the `sbb-menu` begins the closing transition. Can be canceled.
* @event {CustomEvent} didClose - Emits whenever the `sbb-menu` is closed.
- * @cssprop [--sbb-menu-z-index=var(--sbb-overlay-z-index)] - To specify a custom stack order,
+ * @cssprop [--sbb-menu-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-menu')
export class SbbMenuElement extends SbbNamedSlotListMixin<
diff --git a/src/components/menu/menu/readme.md b/src/components/menu/menu/readme.md
index ee90b081d5..8b8747fdf5 100644
--- a/src/components/menu/menu/readme.md
+++ b/src/components/menu/menu/readme.md
@@ -85,9 +85,9 @@ to identify which actions are active and which are not.
## CSS Properties
-| Name | Default | Description |
-| -------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--sbb-menu-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-menu-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/navigation/navigation-section/navigation-section.scss b/src/components/navigation/navigation-section/navigation-section.scss
index 57d65008e2..5d35b176fc 100644
--- a/src/components/navigation/navigation-section/navigation-section.scss
+++ b/src/components/navigation/navigation-section/navigation-section.scss
@@ -27,7 +27,7 @@
inset-block-start: 0;
width: var(--sbb-navigation-section-width);
height: var(--sbb-navigation-section-height);
- z-index: var(--sbb-navigation-z-index, var(--sbb-overlay-z-index));
+ z-index: var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));
// Needed for backwards compatibility on Chromatic
// TODO: Remove once not needed
diff --git a/src/components/navigation/navigation/navigation.scss b/src/components/navigation/navigation/navigation.scss
index 4b72ba66e0..4011790e47 100644
--- a/src/components/navigation/navigation/navigation.scss
+++ b/src/components/navigation/navigation/navigation.scss
@@ -33,7 +33,7 @@
position: fixed;
inset: var(--sbb-navigation-inset);
- z-index: var(--sbb-navigation-z-index, var(--sbb-overlay-z-index));
+ z-index: var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index));
overflow: hidden;
// Needed for backwards compatibility on Chromatic
@@ -183,7 +183,7 @@
width: var(--sbb-navigation-expanded-width);
pointer-events: none;
padding: var(--sbb-spacing-responsive-xs);
- z-index: calc(var(--sbb-navigation-z-index, var(--sbb-overlay-z-index)) + 1);
+ z-index: calc(var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index)) + 1);
}
.sbb-navigation__close {
diff --git a/src/components/navigation/navigation/navigation.ts b/src/components/navigation/navigation/navigation.ts
index 1873316a1c..8c4e64c1f9 100644
--- a/src/components/navigation/navigation/navigation.ts
+++ b/src/components/navigation/navigation/navigation.ts
@@ -45,9 +45,9 @@ const DEBOUNCE_TIME = 150;
* @event {CustomEvent} didOpen - Emits whenever the `sbb-navigation` is opened.
* @event {CustomEvent} willClose - Emits whenever the `sbb-navigation` begins the closing transition. Can be canceled.
* @event {CustomEvent} didClose - Emits whenever the `sbb-navigation` is closed.
- * @cssprop [--sbb-navigation-z-index=var(--sbb-overlay-z-index)] - To specify a custom stack order,
+ * @cssprop [--sbb-navigation-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-navigation')
@hostAttributes({
diff --git a/src/components/navigation/navigation/readme.md b/src/components/navigation/navigation/readme.md
index c01c42f5b5..5932e3d857 100644
--- a/src/components/navigation/navigation/readme.md
+++ b/src/components/navigation/navigation/readme.md
@@ -83,9 +83,9 @@ Similarly, if a navigation action is marked to indicate a selected option (e.g.,
## CSS Properties
-| Name | Default | Description |
-| -------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--sbb-navigation-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-navigation-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/overlay/__snapshots__/overlay.spec.snap.js b/src/components/overlay/__snapshots__/overlay.spec.snap.js
new file mode 100644
index 0000000000..e8dde01015
--- /dev/null
+++ b/src/components/overlay/__snapshots__/overlay.spec.snap.js
@@ -0,0 +1,92 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-overlay renders - Dom"] =
+`
+
+`;
+/* end snapshot sbb-overlay renders - Dom */
+
+snapshots["sbb-overlay renders - ShadowDom"] =
+`
+
+
+`;
+/* end snapshot sbb-overlay renders - ShadowDom */
+
+snapshots["sbb-overlay A11y tree Chrome"] =
+`
+ {
+ "role": "WebArea",
+ "name": "",
+ "children": [
+ {
+ "role": "button",
+ "name": "Close secondary window",
+ "focused": true
+ },
+ {
+ "role": "text",
+ "name": "Dialog "
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-overlay A11y tree Chrome */
+
+snapshots["sbb-overlay A11y tree Firefox"] =
+`
+ {
+ "role": "document",
+ "name": "",
+ "children": [
+ {
+ "role": "button",
+ "name": "Close secondary window",
+ "focused": true
+ },
+ {
+ "role": "text leaf",
+ "name": "Dialog "
+ }
+ ]
+}
+
+`;
+/* end snapshot sbb-overlay A11y tree Firefox */
+
diff --git a/src/components/overlay/index.ts b/src/components/overlay/index.ts
new file mode 100644
index 0000000000..40adbf0f47
--- /dev/null
+++ b/src/components/overlay/index.ts
@@ -0,0 +1 @@
+export * from './overlay';
diff --git a/src/components/overlay/overlay.e2e.ts b/src/components/overlay/overlay.e2e.ts
new file mode 100644
index 0000000000..9cb122e4ec
--- /dev/null
+++ b/src/components/overlay/overlay.e2e.ts
@@ -0,0 +1,255 @@
+import { assert, expect, fixture } from '@open-wc/testing';
+import { sendKeys, setViewport } from '@web/test-runner-commands';
+import { html } from 'lit/static-html.js';
+
+import { i18nDialog } from '../core/i18n';
+import { EventSpy, waitForCondition, waitForLitRender } from '../core/testing';
+
+import { SbbOverlayElement } from './overlay';
+import '../button';
+import '../icon';
+
+async function openOverlay(element: SbbOverlayElement): Promise {
+ const willOpen = new EventSpy(SbbOverlayElement.events.willOpen);
+ const didOpen = new EventSpy(SbbOverlayElement.events.didOpen);
+
+ element.open();
+ await waitForLitRender(element);
+
+ await waitForCondition(() => willOpen.events.length === 1);
+ expect(willOpen.count).to.be.equal(1);
+ await waitForLitRender(element);
+
+ await waitForCondition(() => didOpen.events.length === 1);
+ expect(didOpen.count).to.be.equal(1);
+ await waitForLitRender(element);
+
+ expect(element).to.have.attribute('data-state', 'opened');
+}
+
+describe('sbb-overlay', () => {
+ let element: SbbOverlayElement, ariaLiveRef: HTMLElement;
+
+ beforeEach(async () => {
+ await setViewport({ width: 900, height: 600 });
+ element = await fixture(html`
+
+ Overlay content
+
+ `);
+ ariaLiveRef = element.shadowRoot!.querySelector('sbb-screen-reader-only')!;
+ });
+
+ it('renders', () => {
+ assert.instanceOf(element, SbbOverlayElement);
+ });
+
+ it('opens the overlay', async () => {
+ await openOverlay(element);
+ });
+
+ it('does not open the overlay if prevented', async () => {
+ const willOpen = new EventSpy(SbbOverlayElement.events.willOpen);
+ const didOpen = new EventSpy(SbbOverlayElement.events.didOpen);
+
+ element.addEventListener(SbbOverlayElement.events.willOpen, (ev) => ev.preventDefault());
+
+ element.open();
+ await waitForLitRender(element);
+
+ await waitForCondition(() => willOpen.events.length === 1);
+ expect(willOpen.count).to.be.equal(1);
+ await waitForLitRender(element);
+
+ expect(didOpen.count).to.be.equal(0);
+ expect(element).to.have.attribute('data-state', 'closed');
+ });
+
+ it('closes the overlay', async () => {
+ const willClose = new EventSpy(SbbOverlayElement.events.willClose);
+ const didClose = new EventSpy(SbbOverlayElement.events.didClose);
+
+ await openOverlay(element);
+
+ await waitForCondition(() => ariaLiveRef.textContent!.trim() === `${i18nDialog.en}, Label`);
+
+ element.close();
+ await waitForLitRender(element);
+
+ await waitForCondition(() => willClose.events.length === 1);
+ expect(willClose.count).to.be.equal(1);
+ await waitForLitRender(element);
+
+ await waitForCondition(() => didClose.events.length === 1);
+ expect(didClose.count).to.be.equal(1);
+ await waitForLitRender(element);
+
+ expect(element).to.have.attribute('data-state', 'closed');
+ expect(ariaLiveRef.textContent).to.be.equal('');
+ });
+
+ it('does not close the overlay if prevented', async () => {
+ const willClose = new EventSpy(SbbOverlayElement.events.willClose);
+ const didClose = new EventSpy(SbbOverlayElement.events.didClose);
+
+ await openOverlay(element);
+
+ element.addEventListener(SbbOverlayElement.events.willClose, (ev) => ev.preventDefault());
+
+ element.close();
+ await waitForLitRender(element);
+
+ await waitForCondition(() => willClose.events.length === 1);
+ expect(willClose.count).to.be.equal(1);
+ await waitForLitRender(element);
+
+ expect(didClose.count).to.be.equal(0);
+ expect(element).to.have.attribute('data-state', 'opened');
+ });
+
+ it('closes the overlay on close button click', async () => {
+ const closeButton = element.shadowRoot!.querySelector('[sbb-overlay-close]') as HTMLElement;
+ const willClose = new EventSpy(SbbOverlayElement.events.willClose);
+ const didClose = new EventSpy(SbbOverlayElement.events.didClose);
+
+ await openOverlay(element);
+
+ closeButton.click();
+ await waitForLitRender(element);
+
+ await waitForCondition(() => willClose.events.length === 1);
+ expect(willClose.count).to.be.equal(1);
+ await waitForLitRender(element);
+
+ await waitForCondition(() => didClose.events.length === 1);
+ expect(didClose.count).to.be.equal(1);
+ await waitForLitRender(element);
+
+ expect(element).to.have.attribute('data-state', 'closed');
+ });
+
+ it('closes the overlay on Esc key press', async () => {
+ const willClose = new EventSpy(SbbOverlayElement.events.willClose);
+ const didClose = new EventSpy(SbbOverlayElement.events.didClose);
+
+ await openOverlay(element);
+
+ await sendKeys({ down: 'Tab' });
+ await waitForLitRender(element);
+
+ await sendKeys({ down: 'Escape' });
+ await waitForLitRender(element);
+
+ await waitForCondition(() => willClose.events.length === 1);
+ expect(willClose.count).to.be.equal(1);
+ await waitForLitRender(element);
+
+ await waitForCondition(() => didClose.events.length === 1);
+ expect(didClose.count).to.be.equal(1);
+ await waitForLitRender(element);
+
+ expect(element).to.have.attribute('data-state', 'closed');
+ });
+
+ it('closes stacked overlays one by one on ESC key pressed', async () => {
+ element = await fixture(html`
+
+ Overlay content
+
+
+
+ Stacked overlay content
+
+ `);
+
+ const willOpen = new EventSpy(SbbOverlayElement.events.willOpen);
+ const didOpen = new EventSpy(SbbOverlayElement.events.didOpen);
+ const willClose = new EventSpy(SbbOverlayElement.events.willClose);
+ const didClose = new EventSpy(SbbOverlayElement.events.didClose);
+
+ await openOverlay(element);
+
+ const stackedOverlay = document.querySelector('#stacked-overlay') as SbbOverlayElement;
+
+ stackedOverlay.open();
+ await waitForLitRender(element);
+
+ await waitForCondition(() => willOpen.events.length === 2);
+ expect(willOpen.count).to.be.equal(2);
+ await waitForLitRender(element);
+
+ await waitForCondition(() => didOpen.events.length === 2);
+ expect(didOpen.count).to.be.equal(2);
+ await waitForLitRender(element);
+
+ expect(stackedOverlay).to.have.attribute('data-state', 'opened');
+
+ await sendKeys({ down: 'Tab' });
+ await waitForLitRender(element);
+
+ await sendKeys({ down: 'Escape' });
+ await waitForLitRender(element);
+
+ await waitForCondition(() => willClose.events.length === 1);
+ expect(willClose.count).to.be.equal(1);
+ await waitForLitRender(element);
+
+ await waitForCondition(() => didClose.events.length === 1);
+ expect(didClose.count).to.be.equal(1);
+ await waitForLitRender(element);
+
+ expect(stackedOverlay).to.have.attribute('data-state', 'closed');
+ expect(element).to.have.attribute('data-state', 'opened');
+
+ await sendKeys({ down: 'Tab' });
+ await waitForLitRender(element);
+
+ await sendKeys({ down: 'Escape' });
+ await waitForLitRender(element);
+
+ await waitForCondition(() => willClose.events.length === 2);
+ expect(willClose.count).to.be.equal(2);
+ await waitForLitRender(element);
+
+ await waitForCondition(() => didClose.events.length === 2);
+ expect(didClose.count).to.be.equal(2);
+ await waitForLitRender(element);
+
+ expect(stackedOverlay).to.have.attribute('data-state', 'closed');
+ expect(element).to.have.attribute('data-state', 'closed');
+ });
+
+ it('should remove ariaLiveRef content on any keyboard interaction', async () => {
+ await openOverlay(element);
+
+ await waitForCondition(() => ariaLiveRef.textContent!.trim() === `${i18nDialog.en}, Label`);
+
+ await sendKeys({ down: 'Tab' });
+ await waitForLitRender(element);
+
+ expect(ariaLiveRef.textContent!.trim()).to.be.equal('');
+ });
+
+ it('should remove ariaLiveRef content on any click interaction', async () => {
+ await openOverlay(element);
+
+ await waitForCondition(() => ariaLiveRef.textContent!.trim() === `${i18nDialog.en}, Label`);
+
+ element.click();
+ await waitForLitRender(element);
+
+ expect(ariaLiveRef.textContent).to.be.equal('');
+ });
+
+ it('should announce accessibility label in ariaLiveRef if explicitly set', async () => {
+ element.accessibilityLabel = 'Special Overlay';
+
+ await openOverlay(element);
+
+ await waitForCondition(
+ () => ariaLiveRef.textContent!.trim() === `${i18nDialog.en}, Special Overlay`,
+ );
+
+ expect(ariaLiveRef.textContent!.trim()).to.be.equal(`${i18nDialog.en}, Special Overlay`);
+ });
+});
diff --git a/src/components/overlay/overlay.scss b/src/components/overlay/overlay.scss
new file mode 100644
index 0000000000..354ec44a32
--- /dev/null
+++ b/src/components/overlay/overlay.scss
@@ -0,0 +1,159 @@
+@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;
+
+:host {
+ @include sbb.scrollbar-variables;
+
+ --sbb-overlay-background-color: var(--sbb-color-milk);
+ --sbb-overlay-height: 100%;
+ --sbb-overlay-inset: 0 auto auto 0;
+ --sbb-overlay-padding-block: calc(
+ var(--sbb-spacing-responsive-xxl) + var(--sbb-spacing-responsive-l)
+ );
+ --sbb-overlay-animation-duration: var(--sbb-animation-duration-6x);
+ --sbb-overlay-animation-easing: ease;
+ --sbb-overlay-pointer-events: none;
+ --sbb-overlay-content-transition: transform var(--sbb-overlay-animation-duration)
+ var(--sbb-overlay-animation-easing);
+
+ position: fixed;
+ inset: var(--sbb-overlay-inset);
+ z-index: var(--sbb-overlay-z-index, var(--sbb-overlay-default-z-index));
+
+ @include sbb.mq($from: large) {
+ --sbb-overlay-padding-block: var(--sbb-spacing-responsive-xl);
+ }
+}
+
+:host(:is([data-state='opened'], [data-state='opening'])) {
+ --sbb-overlay-pointer-events: all;
+}
+
+:host([negative]) {
+ @include sbb.scrollbar-variables--color-negative;
+
+ --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
+ --sbb-overlay-color: var(--sbb-color-white);
+ --sbb-overlay-background-color: var(--sbb-color-midnight);
+}
+
+:host([disable-animation]) {
+ --sbb-overlay-animation-duration: 0.1ms;
+}
+
+:host(:not([data-state='closed'])) {
+ --sbb-overlay-inset: 0;
+}
+
+.sbb-overlay__container {
+ background-color: var(--sbb-overlay-background-color);
+ pointer-events: var(--sbb-overlay-pointer-events);
+ display: flex;
+ align-items: center;
+ position: fixed;
+ inset: var(--sbb-overlay-inset);
+}
+
+.sbb-overlay {
+ display: none;
+ position: absolute;
+ inset-inline: 0;
+ margin: auto;
+ padding: 0;
+ border: none;
+ height: var(--sbb-overlay-height);
+ overflow: auto;
+ color: var(--sbb-overlay-color);
+
+ :host([data-state]:not([data-state='closed'])) & {
+ display: block;
+
+ animation: {
+ name: open;
+ duration: var(--sbb-overlay-animation-duration);
+ timing-function: ease;
+ }
+ }
+
+ :host([data-state][data-state='closing']) & {
+ pointer-events: none;
+ animation-name: close;
+ }
+}
+
+.sbb-overlay__wrapper {
+ display: flex;
+ flex-direction: column;
+ height: var(--sbb-overlay-height);
+ outline: none;
+ position: fixed;
+
+ @include sbb.mq($from: medium) {
+ position: sticky;
+ inset-block-start: 0;
+ height: auto;
+ }
+}
+
+.sbb-overlay__header {
+ position: absolute;
+ inset-inline-start: 0;
+ display: flex;
+ pointer-events: none;
+ align-items: start;
+ justify-content: space-between;
+ width: 100%;
+ padding: var(--sbb-spacing-responsive-xs);
+ padding-block-end: 0;
+ z-index: 1;
+
+ * {
+ pointer-events: all;
+ }
+}
+
+.sbb-overlay__close {
+ margin-inline-start: auto;
+}
+
+.sbb-overlay__content {
+ @include sbb.scrollbar-rules;
+
+ height: 100vh;
+ overflow: auto;
+ -webkit-overflow-scrolling: touch;
+}
+
+.sbb-overlay__content-container {
+ padding-block: var(--sbb-overlay-padding-block);
+}
+
+// It is necessary to use animations with keyframes instead of transitions in order not to alter
+// the default `display: block` of the modal otherwise it causes several problems,
+// especially for accessibility.
+@keyframes open {
+ from {
+ opacity: 0;
+ transform: translateY(var(--sbb-spacing-fixed-4x));
+ }
+
+ to {
+ opacity: 1;
+ transform: translateY(0%);
+ }
+}
+
+@keyframes close {
+ from {
+ opacity: 1;
+ transform: translateY(0%);
+ }
+
+ to {
+ opacity: 0;
+ transform: translateY(var(--sbb-spacing-fixed-4x));
+ }
+}
diff --git a/src/components/overlay/overlay.spec.ts b/src/components/overlay/overlay.spec.ts
new file mode 100644
index 0000000000..c9c8c57c4a
--- /dev/null
+++ b/src/components/overlay/overlay.spec.ts
@@ -0,0 +1,24 @@
+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 type { SbbOverlayElement } from './overlay';
+import './overlay';
+
+describe('sbb-overlay', () => {
+ let root: SbbOverlayElement;
+ beforeEach(async () => {
+ root = await fixture(html``);
+ root.open();
+ await waitForLitRender(root);
+ });
+ it('renders - Dom', async () => {
+ await expect(root).dom.to.be.equalSnapshot();
+ });
+ it('renders - ShadowDom', async () => {
+ await expect(root).shadowDom.to.be.equalSnapshot();
+ });
+ testA11yTreeSnapshot();
+});
diff --git a/src/components/overlay/overlay.stories.ts b/src/components/overlay/overlay.stories.ts
new file mode 100644
index 0000000000..435ac5f3f9
--- /dev/null
+++ b/src/components/overlay/overlay.stories.ts
@@ -0,0 +1,350 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+import { userEvent, within } from '@storybook/test';
+import type { InputType } from '@storybook/types';
+import type {
+ Meta,
+ StoryObj,
+ ArgTypes,
+ Args,
+ Decorator,
+ StoryContext,
+} from '@storybook/web-components';
+import isChromatic from 'chromatic';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit';
+import { styleMap, type StyleInfo } 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 { sbbSpread } from '../core/dom';
+import sampleImages from '../core/images';
+
+import { SbbOverlayElement } from './overlay';
+import readme from './readme.md?raw';
+
+import '../button';
+import '../form-field';
+import '../image';
+import '../link';
+import '../title';
+
+// Story interaction executed after the story renders
+const playStory = async ({ canvasElement }: StoryContext): Promise => {
+ const canvas = within(canvasElement);
+
+ await waitForComponentsReady(() =>
+ canvas.getByTestId('overlay').shadowRoot!.querySelector('.sbb-overlay'),
+ );
+
+ await waitForStablePosition(() => canvas.getByTestId('overlay-trigger'));
+
+ const button = canvas.getByTestId('overlay-trigger');
+ await userEvent.click(button);
+};
+
+const expanded: InputType = {
+ control: {
+ type: 'boolean',
+ },
+};
+
+const backButton: InputType = {
+ control: {
+ type: 'boolean',
+ },
+};
+
+const negative: InputType = {
+ control: {
+ type: 'boolean',
+ },
+};
+
+const accessibilityLabel: InputType = {
+ control: {
+ type: 'text',
+ },
+ table: {
+ category: 'Accessibility',
+ },
+};
+
+const accessibilityCloseLabel: InputType = {
+ control: {
+ type: 'text',
+ },
+ table: {
+ category: 'Accessibility',
+ },
+};
+
+const accessibilityBackLabel: InputType = {
+ control: {
+ type: 'text',
+ },
+ table: {
+ category: 'Accessibility',
+ },
+};
+
+const disableAnimation: InputType = {
+ control: {
+ type: 'boolean',
+ },
+};
+
+const basicArgTypes: ArgTypes = {
+ expanded,
+ 'back-button': backButton,
+ accessibilityCloseLabel,
+ accessibilityBackLabel,
+ negative,
+ 'accessibility-label': accessibilityLabel,
+ 'disable-animation': disableAnimation,
+};
+
+const basicArgs: Args = {
+ expanded: false,
+ 'back-button': false,
+ accessibilityCloseLabel: 'Close overlay',
+ accessibilityBackLabel: 'Go back',
+ negative: false,
+ 'accessibility-label': undefined,
+ 'disable-animation': isChromatic(),
+};
+
+const openOverlay = (_event: PointerEvent, id: string): void => {
+ const overlay = document.getElementById(id) as SbbOverlayElement;
+ overlay.open();
+};
+
+const triggerButton = (overlayId: string, triggerId?: string): TemplateResult => html`
+ openOverlay(event, overlayId)}
+ >
+ Open overlay
+
+`;
+
+const codeStyle: Readonly = {
+ padding: 'var(--sbb-spacing-fixed-1x) var(--sbb-spacing-fixed-2x)',
+ borderRadius: 'var(--sbb-border-radius-4x)',
+ backgroundColor: 'var(--sbb-color-smoke-alpha-20)',
+};
+
+const formDetailsStyle: Readonly = {
+ marginTop: 'var(--sbb-spacing-fixed-4x)',
+ padding: 'var(--sbb-spacing-fixed-4x)',
+ borderRadius: 'var(--sbb-border-radius-8x)',
+ backgroundColor: 'var(--sbb-color-milk)',
+};
+
+const formStyle: Readonly = {
+ display: 'flex',
+ flexWrap: 'wrap',
+ alignItems: 'center',
+ gap: 'var(--sbb-spacing-fixed-4x)',
+};
+
+const textBlockStyle = (negative: boolean): Readonly => {
+ return {
+ position: 'relative',
+ marginBlockStart: '1rem',
+ padding: '1rem',
+ backgroundColor: negative ? 'var(--sbb-color-metal)' : 'var(--sbb-color-cloud)',
+ borderRadius: 'var(--sbb-border-radius-4x)',
+ };
+};
+
+const textBlock = (negative: boolean): TemplateResult => html`
+
+ J.R.R. Tolkien, the mastermind behind Middle-earth's enchanting world, was born on January 3,
+ 1892. With "The Hobbit" and "The Lord of the Rings", he pioneered fantasy literature. Tolkien's
+ linguistic brilliance and mythic passion converge in a literary legacy that continues to
+ transport readers to magical realms.
+
+`;
+
+const DefaultTemplate = (args: Args): TemplateResult => html`
+ ${triggerButton('my-overlay-2')}
+
+
+
+ Many Meetings
+
+ Frodo halted for a moment, looking back. Elrond was in his chair and the fire was on his face
+ like summer-light upon the trees. Near him sat the Lady Arwen. To his surprise Frodo saw that
+ Aragorn stood beside her; his dark cloak was thrown back, and he seemed to be clad in
+ elven-mail, and a star shone on his breast. They spoke together, and then suddenly it seemed
+ to Frodo that Arwen turned towards him, and the light of her eyes fell on him from afar and
+ pierced his heart.
+
+ He stood still enchanted, while the sweet syllables of the elvish song fell like clear jewels
+ of blended word and melody. 'It is a song to Elbereth,'' said Bilbo. 'They will sing that, and
+ other songs of the Blessed Realm, many times tonight. Come on!’ —J.R.R. Tolkien, The Lord of
+ the Rings: The Fellowship of the Ring, “Many Meetings” ${textBlock(args.negative)}
+
+
+`;
+
+const FormTemplate = (args: Args): TemplateResult => html`
+ ${triggerButton('my-overlay-3')}
+
+
+
Your message: Hello 👋
+
Your favorite animal: Red Panda
+
+
+
+ Submit the form below to close the overlay box using the
+ close(result?: any, target?: HTMLElement)
+ method and returning the form values to update the details.
+
+
+
+ Click the button to open a nested
+ overlay. ${triggerButton('my-overlay-6', 'nested-trigger-id')}
+
+
+
+ Nested overlay content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+ nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+ irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+ anim id est laborum.
+
+
+
+`;
+
+export const Default: StoryObj = {
+ render: DefaultTemplate,
+ argTypes: basicArgTypes,
+ args: { ...basicArgs },
+ play: isChromatic() ? playStory : undefined,
+};
+
+export const Negative: StoryObj = {
+ render: DefaultTemplate,
+ argTypes: basicArgTypes,
+ args: {
+ ...basicArgs,
+ negative: true,
+ },
+ play: isChromatic() ? playStory : undefined,
+};
+
+export const Expanded: StoryObj = {
+ render: DefaultTemplate,
+ argTypes: basicArgTypes,
+ args: {
+ ...basicArgs,
+ expanded: true,
+ },
+ play: isChromatic() ? playStory : undefined,
+};
+
+export const WithBackButton: StoryObj = {
+ render: DefaultTemplate,
+ argTypes: basicArgTypes,
+ args: {
+ ...basicArgs,
+ 'back-button': true,
+ },
+ play: isChromatic() ? playStory : undefined,
+};
+
+export const Form: StoryObj = {
+ render: FormTemplate,
+ argTypes: basicArgTypes,
+ args: { ...basicArgs },
+ play: isChromatic() ? playStory : undefined,
+};
+
+export const Nested: StoryObj = {
+ render: NestedTemplate,
+ argTypes: basicArgTypes,
+ args: { ...basicArgs },
+ play: isChromatic() ? playStory : undefined,
+};
+
+const meta: Meta = {
+ decorators: [
+ (story) => html`
+
+ ${story()}
+
+ `,
+ withActions as Decorator,
+ ],
+ parameters: {
+ chromatic: { disableSnapshot: false },
+ actions: {
+ handles: [
+ SbbOverlayElement.events.willOpen,
+ SbbOverlayElement.events.didOpen,
+ SbbOverlayElement.events.willClose,
+ SbbOverlayElement.events.didClose,
+ SbbOverlayElement.events.backClick,
+ ],
+ },
+ backgrounds: {
+ disable: true,
+ },
+ docs: {
+ story: { inline: false, iframeHeight: '600px' },
+ extractComponentDescription: () => readme,
+ },
+ layout: 'fullscreen',
+ },
+ title: 'components/sbb-overlay',
+};
+
+export default meta;
diff --git a/src/components/overlay/overlay.ts b/src/components/overlay/overlay.ts
new file mode 100644
index 0000000000..b24e932a54
--- /dev/null
+++ b/src/components/overlay/overlay.ts
@@ -0,0 +1,387 @@
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { html, unsafeStatic } from 'lit/static-html.js';
+
+import { FocusHandler, getFirstFocusableElement, setModalityOnNextFocus } from '../core/a11y';
+import { LanguageController, SbbNegativeMixin } from '../core/common-behaviors';
+import { ScrollHandler, isValidAttribute, hostContext } from '../core/dom';
+import { EventEmitter } from '../core/eventing';
+import { i18nCloseDialog, i18nDialog, i18nGoBack } from '../core/i18n';
+import type { SbbOverlayState } from '../core/overlay';
+import { applyInertMechanism, removeInertMechanism } from '../core/overlay';
+import type { SbbScreenReaderOnlyElement } from '../screen-reader-only';
+
+import style from './overlay.scss?lit&inline';
+
+import '../button/secondary-button';
+import '../button/transparent-button';
+import '../container';
+import '../screen-reader-only';
+
+// A global collection of existing overlays
+const overlayRefs: SbbOverlayElement[] = [];
+
+export type SbbOverlayCloseEventDetails = {
+ returnValue?: any;
+ closeTarget?: HTMLElement;
+};
+
+/**
+ * It displays an interactive overlay element.
+ *
+ * @slot - Use the unnamed slot to provide a content for the overlay.
+ * @event {CustomEvent} willOpen - Emits whenever the `sbb-overlay` starts the opening transition. Can be canceled.
+ * @event {CustomEvent} didOpen - Emits whenever the `sbb-overlay` is opened.
+ * @event {CustomEvent} willClose - Emits whenever the `sbb-overlay` begins the closing transition. Can be canceled.
+ * @event {CustomEvent} didClose - Emits whenever the `sbb-overlay` is closed.
+ * @event {CustomEvent} requestBackAction - Emits whenever the back button is clicked.
+ * @cssprop [--sbb-overlay-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`.
+ */
+@customElement('sbb-overlay')
+export class SbbOverlayElement extends SbbNegativeMixin(LitElement) {
+ public static override styles: CSSResultGroup = style;
+ public static readonly events = {
+ willOpen: 'willOpen',
+ didOpen: 'didOpen',
+ willClose: 'willClose',
+ didClose: 'didClose',
+ backClick: 'requestBackAction',
+ } as const;
+
+ /**
+ * Whether to allow the overlay content to stretch to full width.
+ * By default, the content has the appropriate page size.
+ */
+ @property({ reflect: true, type: Boolean }) public expanded = false;
+
+ /**
+ * Whether a back button is displayed next to the title.
+ */
+ @property({ attribute: 'back-button', type: Boolean }) public backButton = false;
+
+ /**
+ * This will be forwarded as aria-label to the close button element.
+ */
+ @property({ attribute: 'accessibility-close-label' }) public accessibilityCloseLabel:
+ | string
+ | undefined;
+
+ /**
+ * This will be forwarded as aria-label to the back button element.
+ */
+ @property({ attribute: 'accessibility-back-label' }) public accessibilityBackLabel:
+ | string
+ | undefined;
+
+ /**
+ * This will be forwarded as aria-label adn will describe the purpose of the dialog.
+ */
+ @property({ attribute: 'accessibility-label' }) public accessibilityLabel: string | undefined;
+
+ /**
+ * Whether the animation is enabled.
+ */
+ @property({ attribute: 'disable-animation', reflect: true, type: Boolean })
+ public disableAnimation = false;
+
+ /*
+ * The state of the overlay.
+ */
+ private set _state(state: SbbOverlayState) {
+ this.dataset.state = state;
+ }
+ private get _state(): SbbOverlayState {
+ return this.dataset?.state as SbbOverlayState;
+ }
+
+ private _ariaLiveRef!: SbbScreenReaderOnlyElement;
+ private _ariaLiveRefToggle = false;
+
+ /** Emits whenever the `sbb-overlay` starts the opening transition. */
+ private _willOpen: EventEmitter = new EventEmitter(this, SbbOverlayElement.events.willOpen);
+
+ /** Emits whenever the `sbb-overlay` is opened. */
+ private _didOpen: EventEmitter = new EventEmitter(this, SbbOverlayElement.events.didOpen);
+
+ /** Emits whenever the `sbb-overlay` begins the closing transition. */
+ private _willClose: EventEmitter = new EventEmitter(this, SbbOverlayElement.events.willClose);
+
+ /** Emits whenever the `sbb-overlay` is closed. */
+ private _didClose: EventEmitter = new EventEmitter(
+ this,
+ SbbOverlayElement.events.didClose,
+ );
+
+ /** Emits whenever the back button is clicked. */
+ private _backClick: EventEmitter = new EventEmitter(
+ this,
+ SbbOverlayElement.events.backClick,
+ );
+
+ private _overlayContentElement: HTMLElement | null = null;
+ private _overlayCloseElement?: HTMLElement;
+ private _overlayController!: AbortController;
+ private _openOverlayController!: AbortController;
+ private _focusHandler = new FocusHandler();
+ private _scrollHandler = new ScrollHandler();
+ private _returnValue: any;
+
+ // Last element which had focus before the overlay was opened.
+ private _lastFocusedElement?: HTMLElement;
+
+ private _language = new LanguageController(this);
+
+ /**
+ * Opens the overlay element.
+ */
+ public open(): void {
+ if (this._state !== 'closed') {
+ return;
+ }
+ this._lastFocusedElement = document.activeElement as HTMLElement;
+
+ this._overlayContentElement = this.shadowRoot?.querySelector(
+ '.sbb-overlay__content',
+ ) as HTMLElement;
+
+ if (!this._willOpen.emit()) {
+ return;
+ }
+ this._state = 'opening';
+
+ // Add this overlay to the global collection
+ overlayRefs.push(this as SbbOverlayElement);
+
+ // Disable scrolling for content below the overlay
+ this._scrollHandler.disableScroll();
+ }
+
+ /**
+ * Closes the overlay element.
+ */
+ public close(result?: any, target?: HTMLElement): any {
+ if (this._state !== 'opened') {
+ return;
+ }
+
+ this._returnValue = result;
+ this._overlayCloseElement = target;
+ const eventData = {
+ returnValue: this._returnValue,
+ closeTarget: this._overlayCloseElement,
+ };
+
+ if (!this._willClose.emit(eventData)) {
+ return;
+ }
+ this._state = 'closing';
+ this._removeAriaLiveRefContent();
+ }
+
+ // Closes the overlay on "Esc" key pressed.
+ private _onKeydownEvent(event: KeyboardEvent): void {
+ if (this._state !== 'opened') {
+ return;
+ }
+
+ if (event.key === 'Escape') {
+ overlayRefs[overlayRefs.length - 1].close();
+ return;
+ }
+ }
+
+ public override connectedCallback(): void {
+ super.connectedCallback();
+ this._state = this._state || 'closed';
+ this._overlayController?.abort();
+ this._overlayController = new AbortController();
+
+ if (this._state === 'opened') {
+ applyInertMechanism(this);
+ }
+ }
+
+ public override disconnectedCallback(): void {
+ super.disconnectedCallback();
+ this._overlayController?.abort();
+ this._openOverlayController?.abort();
+ this._focusHandler.disconnect();
+ this._removeInstanceFromGlobalCollection();
+ removeInertMechanism();
+ }
+
+ protected override firstUpdated(_changedProperties: PropertyValues): void {
+ this._ariaLiveRef =
+ this.shadowRoot!.querySelector('sbb-screen-reader-only')!;
+ super.firstUpdated(_changedProperties);
+ }
+
+ private _removeInstanceFromGlobalCollection(): void {
+ overlayRefs.splice(overlayRefs.indexOf(this), 1);
+ }
+
+ private _attachOpenOverlayEvents(): void {
+ this._openOverlayController = new AbortController();
+ // Remove overlay label as soon as it is not needed anymore to prevent accessing it with browse mode.
+ window.addEventListener(
+ 'keydown',
+ (event: KeyboardEvent) => {
+ this._removeAriaLiveRefContent();
+ this._onKeydownEvent(event);
+ },
+ {
+ signal: this._openOverlayController.signal,
+ },
+ );
+ window.addEventListener('click', () => this._removeAriaLiveRefContent(), {
+ signal: this._openOverlayController.signal,
+ });
+ }
+
+ // Close the overlay on click of any element that has the 'sbb-overlay-close' attribute.
+ private _closeOnSbbOverlayCloseClick(event: Event): void {
+ const overlayCloseElement = event
+ .composedPath()
+ .filter((e): e is HTMLElement => e instanceof window.HTMLElement)
+ .find(
+ (target) =>
+ target.hasAttribute('sbb-overlay-close') && !isValidAttribute(target, 'disabled'),
+ );
+
+ if (!overlayCloseElement) {
+ return;
+ }
+
+ // Check if the target is a submission element within a form and return the form, if present
+ const closestForm =
+ overlayCloseElement.getAttribute('type') === 'submit'
+ ? (hostContext('form', overlayCloseElement) as HTMLFormElement)
+ : undefined;
+ overlayRefs[overlayRefs.length - 1].close(closestForm, overlayCloseElement);
+ }
+
+ // Wait for overlay transition to complete.
+ // In rare cases it can be that the animationEnd event is triggered twice.
+ // To avoid entering a corrupt state, exit when state is not expected.
+ private _onOverlayAnimationEnd(event: AnimationEvent): void {
+ if (event.animationName === 'open' && this._state === 'opening') {
+ this._state = 'opened';
+ this._didOpen.emit();
+ applyInertMechanism(this);
+ this._attachOpenOverlayEvents();
+ this._setOverlayFocus();
+ // Use timeout to read label after focused element
+ setTimeout(() => this._setAriaLiveRefContent());
+ this._focusHandler.trap(this);
+ } else if (event.animationName === 'close' && this._state === 'closing') {
+ this._overlayContentElement?.scrollTo(0, 0);
+ this._state = 'closed';
+ removeInertMechanism();
+ setModalityOnNextFocus(this._lastFocusedElement);
+ // Manually focus last focused element
+ this._lastFocusedElement?.focus();
+ this._openOverlayController?.abort();
+ this._focusHandler.disconnect();
+ this._removeInstanceFromGlobalCollection();
+ // Enable scrolling for content below the overlay if no overlay is open
+ !overlayRefs.length && this._scrollHandler.enableScroll();
+ this._didClose.emit({
+ returnValue: this._returnValue,
+ closeTarget: this._overlayCloseElement,
+ });
+ }
+ }
+
+ private _setAriaLiveRefContent(): void {
+ this._ariaLiveRefToggle = !this._ariaLiveRefToggle;
+
+ // If the text content remains the same, on VoiceOver the aria-live region is not announced a second time.
+ // In order to support reading on every opening, we toggle an invisible space.
+ this._ariaLiveRef.textContent = `${i18nDialog[this._language.current]}${
+ this.accessibilityLabel ? `, ${this.accessibilityLabel}` : ''
+ }${this._ariaLiveRefToggle ? ' ' : ''}`;
+ }
+
+ private _removeAriaLiveRefContent(): void {
+ this._ariaLiveRef.textContent = '';
+ }
+
+ // Set focus on the first focusable element.
+ private _setOverlayFocus(): void {
+ const firstFocusable = getFirstFocusableElement(
+ Array.from(this.shadowRoot!.children).filter(
+ (e): e is HTMLElement => e instanceof window.HTMLElement,
+ ),
+ );
+ setModalityOnNextFocus(firstFocusable);
+ firstFocusable?.focus();
+ }
+
+ protected override render(): TemplateResult {
+ const TAG_NAME = this.negative ? 'sbb-transparent-button' : 'sbb-secondary-button';
+
+ /* eslint-disable lit/binding-positions */
+ const closeButton = html`
+ <${unsafeStatic(TAG_NAME)}
+ class="sbb-overlay__close"
+ aria-label=${this.accessibilityCloseLabel || i18nCloseDialog[this._language.current]}
+ ?negative=${this.negative}
+ size="m"
+ type="button"
+ icon-name="cross-small"
+ sbb-overlay-close
+ >
+ `;
+
+ const backButton = html`
+ <${unsafeStatic(TAG_NAME)}
+ class="sbb-overlay__back"
+ aria-label=${this.accessibilityBackLabel || i18nGoBack[this._language.current]}
+ ?negative=${this.negative}
+ size="m"
+ type="button"
+ icon-name="chevron-small-left-small"
+ @click=${() => this._backClick.emit()}
+ >
+ `;
+ /* eslint-enable lit/binding-positions */
+
+ return html`
+
+
this._onOverlayAnimationEnd(event)}
+ class="sbb-overlay"
+ >
+
this._closeOnSbbOverlayCloseClick(event)}
+ class="sbb-overlay__wrapper"
+ >
+
+
+
+
+
+
+
+
+
Overlay content.
+
+```
+
+## Slots
+
+There is only one unnamed slot to provide the overlay content.
+
+## Style
+
+Setting the `expanded` property will cause the `sbb-overlay` component to take up the full width of the page.
+
+It's possible to display the component in `negative` variant using the self-named property.
+
+```html
+
+ Overlay content.
+
+```
+
+## Interactions
+
+In order to show the overlay, you need to call the `open(event?: PointerEvent)` method on the `sbb-overlay` component.
+It is necessary to pass the event object to the `open()` method to allow the overlay to detect
+whether it has been opened by click or keyboard, so that the focus can be better handled.
+
+```html
+
+
+
+ Overlay content.
+
+
+
+```
+
+To dismiss the overlay, you need to get a reference to the `sbb-overlay` element and call
+the `close(result?: any, target?: HTMLElement)` method, which will close the overlay element and
+emit a close event with an optional result as a payload.
+
+The component can also be dismissed by clicking on the close button, clicking on the backdrop, pressing the `Esc` key,
+or, if an element within the `sbb-overlay` has the `sbb-overlay-close` attribute, by clicking on it.
+
+You can also set the property `backButton` on the `sbb-overlay-title` component to display the back button in the title section which will emit the event `requestBackAction` when clicked.
+
+## Accessibility
+
+When using a button to trigger the overlay, ensure to manage the appropriate ARIA attributes on the button element itself. This includes: `aria-haspopup="dialog"` that signals to assistive technologies that the button controls an overlay element,
+`aria-controls="overlay-id"` that connects the button to the overlay by referencing the overlay's ID. Consider using `aria-expanded` to indicate the overlay's current state (open or closed).
+
+
+
+## Properties
+
+| Name | Attribute | Privacy | Type | Default | Description |
+| ------------------------- | --------------------------- | ------- | ---------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------- |
+| `expanded` | `expanded` | public | `boolean` | `false` | Whether to allow the overlay content to stretch to full width. By default, the content has the appropriate page size. |
+| `backButton` | `back-button` | public | `boolean` | `false` | Whether a back button is displayed next to the title. |
+| `accessibilityCloseLabel` | `accessibility-close-label` | public | `\| string \| undefined` | | This will be forwarded as aria-label to the close button element. |
+| `accessibilityBackLabel` | `accessibility-back-label` | public | `\| string \| undefined` | | This will be forwarded as aria-label to the back button element. |
+| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label adn will describe the purpose of the dialog. |
+| `disableAnimation` | `disable-animation` | public | `boolean` | `false` | Whether the animation is enabled. |
+| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. |
+
+## Methods
+
+| Name | Privacy | Description | Parameters | Return | Inherited From |
+| ------- | ------- | --------------------------- | ---------------------------------- | ------ | -------------- |
+| `open` | public | Opens the overlay element. | | `void` | |
+| `close` | public | Closes the overlay element. | `result: any, target: HTMLElement` | `any` | |
+
+## Events
+
+| Name | Type | Description | Inherited From |
+| ------------------- | ------------------------------------------ | -------------------------------------------------------------------------------- | -------------- |
+| `willOpen` | `CustomEvent` | Emits whenever the `sbb-overlay` starts the opening transition. Can be canceled. | |
+| `didOpen` | `CustomEvent` | Emits whenever the `sbb-overlay` is opened. | |
+| `willClose` | `CustomEvent` | Emits whenever the `sbb-overlay` begins the closing transition. Can be canceled. | |
+| `didClose` | `CustomEvent` | Emits whenever the `sbb-overlay` is closed. | |
+| `requestBackAction` | `CustomEvent` | Emits whenever the back button is clicked. | |
+
+## CSS Properties
+
+| Name | Default | Description |
+| ----------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--sbb-overlay-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
+
+| Name | Description |
+| ---- | ---------------------------------------------------------- |
+| | Use the unnamed slot to provide a content for the overlay. |
diff --git a/src/components/popover/popover/popover.scss b/src/components/popover/popover/popover.scss
index 70d4c1e6d9..06552332ac 100644
--- a/src/components/popover/popover/popover.scss
+++ b/src/components/popover/popover/popover.scss
@@ -56,7 +56,7 @@
position: fixed;
inset: var(--sbb-popover-inset);
pointer-events: none;
- z-index: var(--sbb-popover-z-index, var(--sbb-overlay-z-index));
+ z-index: var(--sbb-popover-z-index, var(--sbb-overlay-default-z-index));
color: var(--sbb-popover-color);
}
diff --git a/src/components/popover/popover/popover.ts b/src/components/popover/popover/popover.ts
index c583920987..40ae74ebb8 100644
--- a/src/components/popover/popover/popover.ts
+++ b/src/components/popover/popover/popover.ts
@@ -40,9 +40,9 @@ const popoversRef = new Set();
* @event {CustomEvent<{ closeTarget: HTMLElement }>} willClose - Emits whenever the `sbb-popover` begins the closing
* transition. Can be canceled.
* @event {CustomEvent<{ closeTarget: HTMLElement }>} didClose - Emits whenever the `sbb-popover` is closed.
- * @cssprop [--sbb-popover-z-index=var(--sbb-overlay-z-index)] - To specify a custom stack order,
+ * @cssprop [--sbb-popover-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-popover')
export class SbbPopoverElement extends LitElement {
diff --git a/src/components/popover/popover/readme.md b/src/components/popover/popover/readme.md
index 9275b19dfb..58163b65fb 100644
--- a/src/components/popover/popover/readme.md
+++ b/src/components/popover/popover/readme.md
@@ -106,9 +106,9 @@ Overlays should always contain a heading level 2 title. It can be visually hidde
## CSS Properties
-| Name | Default | Description |
-| ----------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--sbb-popover-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-popover-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/screenreader-only/__snapshots__/screenreader-only.spec.snap.js b/src/components/screenreader-only/__snapshots__/screenreader-only.spec.snap.js
deleted file mode 100644
index 97e8aaa322..0000000000
--- a/src/components/screenreader-only/__snapshots__/screenreader-only.spec.snap.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/* @web/test-runner snapshot v1 */
-export const snapshots = {};
-
-snapshots["sbb-screenreader-only renders with Light DOM"] =
-`
-
-`;
-/* end snapshot sbb-screenreader-only renders with Light DOM */
-
-snapshots["sbb-screenreader-only renders with Shadow DOM"] =
-`
-
-`;
-/* end snapshot sbb-screenreader-only renders with Shadow DOM */
-
-snapshots["sbb-screenreader-only renders A11y tree Chrome"] =
-`
- {
- "role": "WebArea",
- "name": ""
-}
-
-`;
-/* end snapshot sbb-screenreader-only renders A11y tree Chrome */
-
-snapshots["sbb-screenreader-only renders A11y tree Firefox"] =
-`
- {
- "role": "document",
- "name": ""
-}
-
-`;
-/* end snapshot sbb-screenreader-only renders A11y tree Firefox */
-
diff --git a/src/components/select/readme.md b/src/components/select/readme.md
index 83c14462e1..90fae9be50 100644
--- a/src/components/select/readme.md
+++ b/src/components/select/readme.md
@@ -137,9 +137,9 @@ Opened panel:
## CSS Properties
-| Name | Default | Description |
-| ---------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--sbb-select-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-select-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/select/select.scss b/src/components/select/select.scss
index 55b7036a35..e263475426 100644
--- a/src/components/select/select.scss
+++ b/src/components/select/select.scss
@@ -11,7 +11,10 @@
:host {
@include sbb.options-panel-overlay-variables;
- --sbb-options-panel-internal-z-index: var(--sbb-select-z-index, var(--sbb-overlay-z-index));
+ --sbb-options-panel-internal-z-index: var(
+ --sbb-select-z-index,
+ var(--sbb-overlay-default-z-index)
+ );
}
:host([negative]) {
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index fae859a16c..69b09c80cb 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -42,9 +42,9 @@ export interface SelectChange {
* @event {CustomEvent} didOpen - Emits whenever the `sbb-select` is opened.
* @event {CustomEvent} willClose - Emits whenever the `sbb-select` begins the closing transition. Can be canceled.
* @event {CustomEvent} didClose - Emits whenever the `sbb-select` is closed.
- * @cssprop [--sbb-select-z-index=var(--sbb-overlay-z-index)] - To specify a custom stack order,
+ * @cssprop [--sbb-select-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-select')
@hostAttributes({
diff --git a/src/components/skiplink-list/readme.md b/src/components/skiplink-list/readme.md
index e593df9dd5..18e9268e69 100644
--- a/src/components/skiplink-list/readme.md
+++ b/src/components/skiplink-list/readme.md
@@ -25,9 +25,9 @@ and it can be set using the `title-content` property.
## CSS Properties
-| Name | Default | Description |
-| ----------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--sbb-skiplink-list-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-skiplink-list-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/skiplink-list/skiplink-list.scss b/src/components/skiplink-list/skiplink-list.scss
index 8ce4519aa5..1e3ba4563b 100644
--- a/src/components/skiplink-list/skiplink-list.scss
+++ b/src/components/skiplink-list/skiplink-list.scss
@@ -15,7 +15,7 @@
position: fixed;
inset-block-start: var(--sbb-spacing-fixed-4x);
inset-inline-start: var(--sbb-spacing-fixed-4x);
- z-index: calc(var(--sbb-skiplink-list-z-index, var(--sbb-overlay-z-index)) + 1);
+ z-index: calc(var(--sbb-skiplink-list-z-index, var(--sbb-overlay-default-z-index)) + 1);
}
.sbb-skiplink-list {
diff --git a/src/components/skiplink-list/skiplink-list.ts b/src/components/skiplink-list/skiplink-list.ts
index cac0c89521..64ef7c8f37 100644
--- a/src/components/skiplink-list/skiplink-list.ts
+++ b/src/components/skiplink-list/skiplink-list.ts
@@ -24,9 +24,9 @@ import '../title';
* It displays a list of `sbb-block-link`/`sbb-block-link-button` which are visible only when focused.
*
* @slot - Use the unnamed slot to add `sbb-block-link`/`sbb-block-link-button` elements to the `sbb-skiplink-list`.
- * @cssprop [--sbb-skiplink-list-z-index=var(--sbb-overlay-z-index)] - To specify a custom stack order,
+ * @cssprop [--sbb-skiplink-list-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-skiplink-list')
export class SbbSkiplinkListElement extends SbbNamedSlotListMixin<
diff --git a/src/components/toast/readme.md b/src/components/toast/readme.md
index 7b70860087..1becfac49c 100644
--- a/src/components/toast/readme.md
+++ b/src/components/toast/readme.md
@@ -129,9 +129,9 @@ Unless strictly necessary, we advise you not to wrap it preventively and let the
## CSS Properties
-| Name | Default | Description |
-| --------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--sbb-toast-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-toast-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/toast/toast.scss b/src/components/toast/toast.scss
index 77604fd2a7..e40017fe4d 100644
--- a/src/components/toast/toast.scss
+++ b/src/components/toast/toast.scss
@@ -75,7 +75,7 @@
}
.sbb-toast {
- z-index: var(--sbb-toast-z-index, var(--sbb-overlay-z-index));
+ z-index: var(--sbb-toast-z-index, var(--sbb-overlay-default-z-index));
pointer-events: auto;
margin: var(--sbb-toast-margin);
padding-block: var(--sbb-toast-padding-block);
diff --git a/src/components/toast/toast.ts b/src/components/toast/toast.ts
index f60bb234c9..029fa5dbc3 100644
--- a/src/components/toast/toast.ts
+++ b/src/components/toast/toast.ts
@@ -35,9 +35,9 @@ const toastRefs = new Set();
* @event {CustomEvent} didOpen - Emits whenever the `sbb-toast` is opened.
* @event {CustomEvent} willClose - Emits whenever the `sbb-toast` begins the closing transition. Can be canceled.
* @event {CustomEvent} didClose - Emits whenever the `sbb-toast` is closed.
- * @cssprop [--sbb-toast-z-index=var(--sbb-overlay-z-index)] - To specify a custom stack order,
+ * @cssprop [--sbb-toast-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-toast')
export class SbbToastElement extends SbbIconNameMixin(LitElement) {
diff --git a/tsconfig.json b/tsconfig.json
index 2a7cb6c518..6936f94cc9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -50,6 +50,7 @@
"sbb-dialog-close",
"sbb-navigation-close",
"sbb-navigation-section-close",
+ "sbb-overlay-close",
"sbb-popover-close",
"sbb-toast-close"
]
From f8316f074a36fe91c46d36ace2f5ebb2194e1e3a Mon Sep 17 00:00:00 2001
From: Marco D'Auria <101181211+dauriamarco@users.noreply.github.com>
Date: Tue, 2 Apr 2024 18:11:07 +0200
Subject: [PATCH 016/110] feat(sbb-form-field): support the textarea inside the
`` (#2506)
Closes #2497
BREAKING CHANGE: The css var `--sbb-form-field-height` has been renamed to `--sbb-form-field-min-height`.
---
.../core/styles/mixins/buttons.scss | 3 +
src/components/core/styles/typography.scss | 13 +-
.../datepicker-toggle/datepicker-toggle.scss | 11 +-
.../form-field/form-field/form-field.e2e.ts | 141 +++++
.../form-field/form-field/form-field.scss | 101 +++-
.../form-field/form-field.stories.ts | 481 +++++++++++-------
.../form-field/form-field/form-field.ts | 13 +-
.../form-field/form-field/readme.md | 1 +
src/components/slider/slider.scss | 2 +-
9 files changed, 563 insertions(+), 203 deletions(-)
diff --git a/src/components/core/styles/mixins/buttons.scss b/src/components/core/styles/mixins/buttons.scss
index 2ebc944790..734b5e9c12 100644
--- a/src/components/core/styles/mixins/buttons.scss
+++ b/src/components/core/styles/mixins/buttons.scss
@@ -95,6 +95,8 @@
@mixin icon-button-base($host-selector, $button-selector, $icon-selector) {
#{$host-selector} {
display: inline-block;
+ -webkit-tap-highlight-color: transparent;
+ height: fit-content;
// Use !important here to not interfere with Firefox focus ring definition
// which appears in normalize css of several frameworks.
@@ -111,6 +113,7 @@
color: var(--sbb-button-color-default-text);
cursor: pointer;
user-select: none;
+ display: var(--sbb-button-display);
// Renders background and border in the background absolute to enable the hover animation
&::before {
diff --git a/src/components/core/styles/typography.scss b/src/components/core/styles/typography.scss
index f7693d8895..378509c451 100644
--- a/src/components/core/styles/typography.scss
+++ b/src/components/core/styles/typography.scss
@@ -2,6 +2,7 @@
@use './mixins/a11y';
@use './mixins/layout';
@use './mixins/lists';
+@use './mixins/scrollbar';
@use './mixins/typo';
@include font-face.font-declarations;
@@ -27,12 +28,12 @@ sup {
// TODO: Remove if webkit bug is resolved: https://bugs.webkit.org/show_bug.cgi?id=223814
sbb-form-field {
- input:disabled::placeholder {
+ :where(input, textarea):disabled::placeholder {
color: var(--sbb-color-granite);
-webkit-text-fill-color: var(--sbb-color-granite);
}
- &[floating-label] input::placeholder {
+ &[floating-label] :where(input, textarea)::placeholder {
color: transparent;
-webkit-text-fill-color: transparent;
@@ -41,6 +42,14 @@ sbb-form-field {
-webkit-text-fill-color: Canvas;
}
}
+
+ textarea {
+ @include scrollbar.scrollbar;
+ }
+
+ &[negative] textarea {
+ @include scrollbar.scrollbar($negative: true);
+ }
}
// Hiding components until they are instantiated
diff --git a/src/components/datepicker/datepicker-toggle/datepicker-toggle.scss b/src/components/datepicker/datepicker-toggle/datepicker-toggle.scss
index 65cb78dc69..486a427571 100644
--- a/src/components/datepicker/datepicker-toggle/datepicker-toggle.scss
+++ b/src/components/datepicker/datepicker-toggle/datepicker-toggle.scss
@@ -7,14 +7,17 @@
:host {
--sbb-datepicker-control-radius: var(--sbb-border-radius-4x);
--sbb-datepicker-control-color: var(--sbb-color-black);
+
+ display: inline-flex;
}
sbb-popover-trigger {
+ --sbb-button-display: flex;
+
color: var(--sbb-datepicker-control-color);
- height: var(--sbb-form-field-height);
- display: flex;
- align-items: center;
- -webkit-tap-highlight-color: transparent;
+
+ // Enables taking full height in order to shift the calendar position to the border bottom of the form field.
+ height: unset;
}
sbb-icon {
diff --git a/src/components/form-field/form-field/form-field.e2e.ts b/src/components/form-field/form-field/form-field.e2e.ts
index 018c6ee65a..93a6ebc942 100644
--- a/src/components/form-field/form-field/form-field.e2e.ts
+++ b/src/components/form-field/form-field/form-field.e2e.ts
@@ -129,6 +129,147 @@ describe(`sbb-form-field with ${fixture.name}`, () => {
});
});
+ describe('with textarea', () => {
+ let element: SbbFormFieldElement;
+ let textarea: HTMLTextAreaElement;
+
+ beforeEach(async () => {
+ element = await fixture(html``, {
+ modules: ['./form-field.ts'],
+ });
+ textarea = element.querySelector('textarea')!;
+ });
+
+ it('renders', async () => {
+ assert.instanceOf(element, SbbFormFieldElement);
+ });
+
+ it('should set default rows', () => {
+ expect(textarea.rows).to.be.equal(3);
+ });
+
+ it('should respect user defined rows attribute', async () => {
+ element = await fixture(
+ html``,
+ {
+ modules: ['./form-field.ts'],
+ },
+ );
+ expect(element.querySelector('textarea')!.rows).to.be.equal(2);
+ });
+
+ it('should respect changing rows at a later time', async () => {
+ textarea.rows = 1;
+ expect(textarea.rows).to.be.equal(1);
+
+ textarea.setAttribute('rows', '4');
+ expect(textarea.rows).to.be.equal(4);
+ });
+
+ it('should update empty input state', async () => {
+ expect(element).to.have.attribute('data-input-empty');
+
+ textarea.focus();
+ await sendKeys({ type: 'v' });
+ await waitForLitRender(element);
+ expect(element).not.to.have.attribute('data-input-empty');
+
+ await sendKeys({ press: 'Backspace' });
+ await waitForLitRender(element);
+ expect(element).to.have.attribute('data-input-empty');
+
+ await sendKeys({ type: 'v' });
+ await waitForLitRender(element);
+ expect(element).not.to.have.attribute('data-input-empty');
+
+ // Clearing value programmatically which does not trigger input event but can be caught by blur event.
+ textarea.value = '';
+ textarea.blur();
+ await waitForLitRender(element);
+ expect(element).to.have.attribute('data-input-empty');
+ });
+
+ it('should react to focus state', async () => {
+ element = await fixture(
+ html`
+
+
+ `,
+ { modules: ['./form-field.ts'] },
+ );
+ textarea = element.querySelector('textarea')!;
+
+ expect(element).not.to.have.attribute('data-input-focused');
+
+ textarea.focus();
+ await sendKeys({ type: 'v' });
+ await waitForLitRender(element);
+ expect(element).to.have.attribute('data-input-focused');
+
+ textarea.focus();
+ await sendKeys({ press: 'Tab' });
+ await waitForLitRender(element);
+
+ expect(element).not.to.have.attribute('data-input-focused');
+ });
+
+ it('should assign id to input and reference it in the label', async () => {
+ const newLabel = document.createElement('label');
+ newLabel.textContent = 'Example';
+ element.prepend(newLabel);
+
+ await waitForLitRender(element);
+ const label = element.querySelector('label');
+
+ expect(textarea.id).to.match(/^sbb-form-field-input-/);
+ expect(label).to.have.attribute('for', textarea.id);
+ });
+
+ it('should reference sbb-form-error', async () => {
+ // When adding a sbb-form-error
+ const formError = document.createElement('sbb-form-error');
+ element.append(formError);
+ await waitForLitRender(element);
+ await nextFrame();
+
+ // Then input should be linked and sbb-form-error configured
+ expect(textarea)
+ .to.have.attribute('aria-describedby')
+ .match(/^sbb-form-field-error-/);
+ expect(formError.id).to.be.equal(textarea.getAttribute('aria-describedby'));
+ expect(formError).to.have.attribute('role', 'status');
+
+ // When removing sbb-form-error
+ formError.remove();
+ await waitForLitRender(element);
+
+ // Then aria-describedby should be removed
+ expect(textarea).not.to.have.attribute('aria-describedby');
+ });
+
+ it('should reference sbb-form-error with original aria-describedby', async () => {
+ textarea.setAttribute('aria-describedby', 'foo');
+ // When adding a sbb-form-error
+ const formError = document.createElement('sbb-form-error');
+ element.append(formError);
+ await waitForLitRender(element);
+ await nextFrame();
+
+ // Then input should be linked and original aria-describedby preserved
+ expect(textarea)
+ .to.have.attribute('aria-describedby')
+ .match(/^foo sbb-form-field-error-/);
+
+ // When removing sbb-form-error
+
+ formError.remove();
+ await waitForLitRender(element);
+
+ // Then aria-describedby should be set to foo
+ expect(textarea).to.have.attribute('aria-describedby');
+ });
+ });
+
describe('with sbb-select', () => {
let element: SbbFormFieldElement;
let select: SbbSelectElement;
diff --git a/src/components/form-field/form-field/form-field.scss b/src/components/form-field/form-field/form-field.scss
index 16ff3d8093..ffe8122468 100644
--- a/src/components/form-field/form-field/form-field.scss
+++ b/src/components/form-field/form-field/form-field.scss
@@ -10,7 +10,7 @@
--sbb-form-field-border-style: solid;
--sbb-form-field-border-radius: var(--sbb-border-radius-4x);
--sbb-form-field-border-width: var(--sbb-border-width-1x);
- --sbb-form-field-height: var(--sbb-size-form-element-m-min-height);
+ --sbb-form-field-min-height: var(--sbb-size-form-element-m-min-height);
--sbb-form-field-label-color: var(--sbb-color-metal);
--sbb-form-field-prefix-color: var(--sbb-color-metal);
--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);
@@ -19,11 +19,24 @@
--sbb-form-field-error-divider-width: var(--sbb-spacing-fixed-1x);
--sbb-form-field-error-padding-block-start: var(--sbb-form-field-error-divider-width);
--sbb-form-field-gap: var(--sbb-spacing-fixed-2x);
- --sbb-form-field-label-to-input-gap: calc(-1 * var(--sbb-spacing-fixed-1x));
+ --sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);
--sbb-form-field-select-inline-padding-end: calc(
var(--sbb-icon-svg-width) + var(--sbb-form-field-gap)
);
--sbb-form-field-overflow: hidden;
+ --sbb-form-field-label-size: calc(
+ var(--sbb-font-size-text-xs) * var(--sbb-typo-line-height-body-text)
+ );
+ --sbb-form-field-input-size: calc(
+ var(--sbb-font-size-text-m) * var(--sbb-typo-line-height-body-text)
+ );
+ --sbb-form-field-margin-block-start: calc(
+ (
+ var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var(
+ --sbb-form-field-input-size
+ ) + var(--sbb-form-field-label-to-input-overlapping)
+ ) / 2
+ );
// Lock sbb-icon size
--sbb-icon-svg-width: var(--sbb-size-icon-ui-small);
@@ -60,7 +73,7 @@
}
:host([size='l']) {
- --sbb-form-field-height: var(--sbb-size-form-element-l-min-height);
+ --sbb-form-field-min-height: var(--sbb-size-form-element-l-min-height);
--sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs);
}
@@ -154,10 +167,18 @@
}
}
-// Should be after other definitions to override overflow and background
+:host(:is(:not([data-slot-names~='label'], [label]), [hidden-label])) {
+ --sbb-form-field-label-size: 0rem;
+ --sbb-form-field-label-to-input-overlapping: 0rem;
+}
+
+// Should be after other definitions to override overflow
:host([data-input-type='sbb-slider']) {
--sbb-form-field-overflow: visible;
- --sbb-form-field-background-color: var(--sbb-color-white);
+}
+
+:host([data-input-type='textarea']) {
+ --sbb-form-field-max-height: fit-content;
}
.sbb-form-field__space-wrapper {
@@ -169,14 +190,24 @@
.sbb-form-field__wrapper {
display: flex;
- align-items: center;
gap: var(--sbb-form-field-gap);
- padding-inline: calc(var(--sbb-form-field-padding-inline) - var(--sbb-form-field-border-width));
- border: var(--sbb-form-field-border-width) var(--sbb-form-field-border-style)
- var(--sbb-form-field-border-color);
+ padding-inline: var(--sbb-form-field-padding-inline);
border-radius: var(--sbb-form-field-border-radius);
- height: var(--sbb-form-field-height);
+ min-height: var(--sbb-form-field-min-height);
+ max-height: var(--sbb-form-field-max-height);
background-color: var(--sbb-form-field-background-color);
+ position: relative;
+
+ // Use ::before to avoid content shifting when border width changes.
+ &::before {
+ content: '';
+ display: block;
+ position: absolute;
+ inset: 0;
+ border: var(--sbb-form-field-border-width) var(--sbb-form-field-border-style)
+ var(--sbb-form-field-border-color);
+ border-radius: var(--sbb-form-field-border-radius);
+ }
:host([data-input-focused][data-focus-origin='keyboard']) & {
@include sbb.focus-outline;
@@ -185,33 +216,34 @@
// In high contrast, there is no borderless variant
@media (forced-colors: none) {
:host(:is([borderless], [data-input-type='sbb-slider'])) & {
- border-color: transparent;
+ &::before {
+ border-color: transparent;
+ }
}
:host(:is([data-input-focused], [data-has-popup-open])[borderless]) & {
- position: relative;
-
&::after {
content: '';
position: absolute;
border-block-end: var(--sbb-border-width-1x) var(--sbb-form-field-border-style)
var(--sbb-form-field-border-color);
- inset-inline: calc(var(--sbb-form-field-padding-inline) - 2 * var(--sbb-border-width-1x));
- inset-block-end: calc(-2 * var(--sbb-border-width-1x));
+ inset-inline: var(--sbb-form-field-padding-inline);
+ inset-block-end: 0;
}
}
}
}
+::slotted(*[slot='prefix']) {
+ color: var(--sbb-form-field-prefix-color);
+}
+
// Ensure slotted inline elements are vertically centered
::slotted(*[slot='prefix']),
::slotted(*[slot='suffix']) {
- min-width: var(--sbb-icon-svg-width);
display: flex;
-}
-
-::slotted(*[slot='prefix']) {
- color: var(--sbb-form-field-prefix-color);
+ min-width: var(--sbb-icon-svg-width);
+ margin-block-start: calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);
}
::slotted(sbb-form-field-clear) {
@@ -220,6 +252,11 @@
}
}
+// As the calendar should be shown below the form field border, we have to stretch the toggle's height.
+::slotted(sbb-datepicker-toggle) {
+ height: calc((var(--sbb-form-field-min-height) + var(--sbb-size-icon-ui-small)) / 2);
+}
+
@include sbb.if-forced-colors {
// Align with prefix color
::slotted(*[slot='suffix']) {
@@ -230,8 +267,9 @@
.sbb-form-field__select-input-icon {
@include sbb.absolute-center-y;
- inset-inline-end: 0;
position: absolute;
+ inset-inline-end: 0;
+ margin-block-start: calc(-1 * var(--sbb-form-field-margin-block-start) / 2);
pointer-events: none;
color: var(--sbb-form-field-arrow-color);
}
@@ -239,6 +277,7 @@
.sbb-form-field__input-container {
flex: 1 1 auto;
position: relative;
+ margin-block-start: var(--sbb-form-field-margin-block-start);
// Prevents overflowing parent
min-width: 0;
@@ -249,7 +288,7 @@
height: calc(var(--sbb-font-size-text-xs) * var(--sbb-typo-line-height-body-text));
// Moves label down and input up to meet positioning requirements
- margin-block-end: var(--sbb-form-field-label-to-input-gap);
+ margin-block-end: calc(-1 * var(--sbb-form-field-label-to-input-overlapping));
}
// To avoid doubled payload, we group the rules.
@@ -317,7 +356,7 @@
// Input
-.sbb-form-field__input ::slotted(:where(input, select, sbb-select)) {
+.sbb-form-field__input ::slotted(:where(input, select, textarea, sbb-select)) {
@include sbb.text-m--regular;
@include sbb.ellipsis;
@include sbb.input-reset;
@@ -370,6 +409,22 @@
padding-inline-end: var(--sbb-form-field-select-inline-padding-end);
}
+.sbb-form-field__input ::slotted(textarea) {
+ @include sbb.scrollbar;
+
+ position: relative;
+ resize: none;
+
+ // White-space break needed for Firefox
+ white-space: break-spaces;
+ overflow-y: auto;
+ min-height: calc((var(--sbb-typo-line-height-body-text) * 1em));
+
+ :host([negative]) & {
+ @include sbb.scrollbar($negative: true);
+ }
+}
+
.sbb-form-field__error {
display: flex;
min-height: var(--form-field-error-min-height);
diff --git a/src/components/form-field/form-field/form-field.stories.ts b/src/components/form-field/form-field/form-field.stories.ts
index 466eb84ac5..df5da31875 100644
--- a/src/components/form-field/form-field/form-field.stories.ts
+++ b/src/components/form-field/form-field/form-field.stories.ts
@@ -4,7 +4,6 @@ import type { TemplateResult } from 'lit';
import { html, nothing } from 'lit';
import { styleMap } from 'lit/directives/style-map.js';
-import { sbbSpread } from '../../core/dom';
import type { SbbFormErrorElement } from '../../form-error';
import readme from './readme.md?raw';
@@ -20,6 +19,39 @@ const wrapperStyle = (context: StoryContext): Record => ({
'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
});
+const formField = (
+ {
+ 'error-space': errorSpace,
+ label,
+ optional,
+ size,
+ borderless,
+ width,
+ negative,
+ 'hidden-label': hiddenLabel,
+ 'floating-label': floatingLabel,
+ slottedLabel,
+ }: Args,
+ template: TemplateResult,
+): TemplateResult =>
+ html`
+ ${label && !slottedLabel
+ ? html``
+ : label && slottedLabel
+ ? html`${label}`
+ : nothing}
+ ${template}
+ `;
+
const PopoverTrigger = (): TemplateResult => html`
ht
`;
-const TemplateInput = ({
- 'error-space': errorSpace,
- label,
- optional,
- size,
- borderless,
- width,
- negative,
- 'hidden-label': hiddenLabel,
- 'floating-label': floatingLabel,
- ...args
-}: Args): TemplateResult => html`
-
+ html` `;
-const TemplateInputWithSlottedSpanLabel = ({
- 'error-space': errorSpace,
- label,
- optional,
- size,
- borderless,
- width,
- negative,
- 'hidden-label': hiddenLabel,
- 'floating-label': floatingLabel,
- ...args
-}: Args): TemplateResult => html`
-
- ${label}
- ${TemplateBasicInput(args)}
-
-`;
+const TemplateInput = (args: Args): TemplateResult => formField(args, TemplateBasicInput(args));
+
+const TemplateInputWithSlottedSpanLabel = (args: Args): TemplateResult =>
+ formField({ ...args, slottedLabel: true }, TemplateBasicInput(args));
const TemplateInputWithErrorSpace = (args: Args): TemplateResult => {
const sbbFormError: SbbFormErrorElement = document.createElement('sbb-form-error');
@@ -124,35 +124,26 @@ const TemplateInputWithErrorSpace = (args: Args): TemplateResult => {
return html`