🐧

sl-design-system · Oct 25, 2024 · 1c19b94 · 1c19b94
1 parent 125546d
commit 1c19b94
Show file tree

Hide file tree

Showing 17 changed files with 42 additions and 124 deletions.
diff --git a/.changeset/nice-games-press.md b/.changeset/nice-games-press.md
@@ -0,0 +1,7 @@
+---
+'@sl-design-system/listbox': patch
+---
+
+Various improvements:
+- Support `<option>` and `<optgroup>` elements in addition to `<sl-option>` and `<sl-option-group>` inside `<sl-listbox>`
+- Override `textContent` in `<sl-option>` to return only the text directly inside the element
diff --git a/.changeset/thirty-kings-happen.md b/.changeset/thirty-kings-happen.md
@@ -0,0 +1,8 @@
+---
+'@sl-design-system/combobox': patch
+---
+
+Various improvements:
+- For improved performance, also support `<option>` and `<optgroup>`
+- Scroll to the selected option when opening the popover in single mode
+- Actually toggle the popover when clicking the button
diff --git a/packages/components/listbox/src/listbox.ts b/packages/components/listbox/src/listbox.ts
@@ -1,5 +1,3 @@
-import { type IconLibrary } from '@sl-design-system/icon';
-import { Config } from '@sl-design-system/shared';
 import { type CSSResultGroup, LitElement, type TemplateResult, html } from 'lit';
 import styles from './listbox.scss.js';
 
@@ -15,13 +13,13 @@ export class Listbox extends LitElement {
 
   #lightStyles?: HTMLStyleElement;
 
-  override async connectedCallback(): Promise<void> {
+  override connectedCallback(): void {
     super.connectedCallback();
 
     this.setAttribute('role', 'listbox');
 
     if (!this.#lightStyles) {
-      const { check } = await Config.getConfigSetting<IconLibrary>('icons');
+      const { check } = window.SLDS.icons;
 
       this.#lightStyles = document.createElement('style');
       this.#lightStyles.textContent = `

diff --git a/packages/themes/bingel-dc/index.ts b/packages/themes/bingel-dc/index.ts
@@ -1,11 +1,7 @@
-import type { IconLibrary } from '@sl-design-system/icon';
-import { Icon } from '@sl-design-system/icon';
+import { Icon, type IconLibrary } from '@sl-design-system/icon';
 import { icons } from './icons.js';
 
-/**
- * initializes all necessary things to load your theme,
- * like icons, ...
- */
+/** Setup the theme. */
 export const setup = (): void => {
   Icon.register(icons as IconLibrary);
 };
diff --git a/packages/themes/bingel-int/index.ts b/packages/themes/bingel-int/index.ts
@@ -1,11 +1,7 @@
-import type { IconLibrary } from '@sl-design-system/icon';
-import { Icon } from '@sl-design-system/icon';
+import { Icon, type IconLibrary } from '@sl-design-system/icon';
 import { icons } from './icons.js';
 
-/**
- * initializes all necessary things to load your theme,
- * like icons, ...
- */
+/** Setup the theme. */
 export const setup = (): void => {
   Icon.register(icons as IconLibrary);
 };
diff --git a/packages/themes/clickedu/index.ts b/packages/themes/clickedu/index.ts
@@ -1,11 +1,7 @@
-import type { IconLibrary } from '@sl-design-system/icon';
-import { Icon } from '@sl-design-system/icon';
+import { Icon, type IconLibrary } from '@sl-design-system/icon';
 import { icons } from './icons.js';
 
-/**
- * initializes all necessary things to load your theme,
- * like icons, ...
- */
+/** Setup the theme. */
 export const setup = (): void => {
   Icon.register(icons as IconLibrary);
 };
diff --git a/packages/themes/editorial-suite/index.ts b/packages/themes/editorial-suite/index.ts
@@ -1,28 +1,7 @@
-import type { IconLibrary } from '@sl-design-system/icon';
-import { Icon } from '@sl-design-system/icon';
-import type { ConfigSettings } from '@sl-design-system/shared';
-import { Config } from '@sl-design-system/shared';
+import { Icon, type IconLibrary } from '@sl-design-system/icon';
 import { icons } from './icons.js';
 
-// export const setup = (): void => {
-// 1. Add typekit url to `<head>`
-// 2. Add theme icons
-// 3. Load the base stylesheet/css variables
-// 4. Start using the SLDS in your application
-// };
-
-/**
- * initializes all necessary things to load your theme,
- * like icons, ...
- */
+/** Setup the theme. */
 export const setup = (): void => {
-  const config: ConfigSettings = {
-    avatar: {
-      shape: 'circle',
-      badgeGapWidth: 2
-    }
-  };
-
   Icon.register(icons as IconLibrary);
-  Config.setConfig(config);
 };
diff --git a/packages/themes/itslearning/index.ts b/packages/themes/itslearning/index.ts
@@ -1,11 +1,7 @@
-import type { IconLibrary } from '@sl-design-system/icon';
-import { Icon } from '@sl-design-system/icon';
+import { Icon, type IconLibrary } from '@sl-design-system/icon';
 import { icons } from './icons.js';
 
-/**
- * initializes all necessary things to load your theme,
- * like icons, ...
- */
+/** Setup the theme. */
 export const setup = (): void => {
   Icon.register(icons as IconLibrary);
 };
diff --git a/packages/themes/kampus/index.ts b/packages/themes/kampus/index.ts
@@ -1,11 +1,7 @@
-import type { IconLibrary } from '@sl-design-system/icon';
-import { Icon } from '@sl-design-system/icon';
+import { Icon, type IconLibrary } from '@sl-design-system/icon';
 import { icons } from './icons.js';
 
-/**
- * initializes all necessary things to load your theme,
- * like icons, ...
- */
+/** Setup the theme. */
 export const setup = (): void => {
   Icon.register(icons as IconLibrary);
 };
diff --git a/packages/themes/magister/index.ts b/packages/themes/magister/index.ts
@@ -1,11 +1,7 @@
-import type { IconLibrary } from '@sl-design-system/icon';
-import { Icon } from '@sl-design-system/icon';
+import { Icon, type IconLibrary } from '@sl-design-system/icon';
 import { icons } from './icons.js';
 
-/**
- * initializes all necessary things to load your theme,
- * like icons, ...
- */
+/** Setup the theme. */
 export const setup = (): void => {
   Icon.register(icons as IconLibrary);
 };
diff --git a/packages/themes/max/index.ts b/packages/themes/max/index.ts
@@ -1,11 +1,7 @@
-import type { IconLibrary } from '@sl-design-system/icon';
-import { Icon } from '@sl-design-system/icon';
+import { Icon, type IconLibrary } from '@sl-design-system/icon';
 import { icons } from './icons.js';
 
-/**
- * initializes all necessary things to load your theme,
- * like icons, ...
- */
+/** Setup the theme. */
 export const setup = (): void => {
   Icon.register(icons as IconLibrary);
 };
diff --git a/packages/themes/my-digital-book/index.ts b/packages/themes/my-digital-book/index.ts
@@ -1,11 +1,7 @@
-import type { IconLibrary } from '@sl-design-system/icon';
-import { Icon } from '@sl-design-system/icon';
+import { Icon, type IconLibrary } from '@sl-design-system/icon';
 import { icons } from './icons.js';
 
-/**
- * initializes all necessary things to load your theme,
- * like icons, ...
- */
+/** Setup the theme. */
 export const setup = (): void => {
   Icon.register(icons as IconLibrary);
 };
diff --git a/packages/themes/myvanin_onhold/index.ts b/packages/themes/myvanin_onhold/index.ts
@@ -1,11 +1,7 @@
-import type { IconLibrary } from '@sl-design-system/icon';
-import { Icon } from '@sl-design-system/icon';
+import { Icon, type IconLibrary } from '@sl-design-system/icon';
 import { icons } from './icons.js';
 
-/**
- * initializes all necessary things to load your theme,
- * like icons, ...
- */
+/** Setup the theme. */
 export const setup = (): void => {
   Icon.register(icons as IconLibrary);
 };
diff --git a/packages/themes/neon/index.ts b/packages/themes/neon/index.ts
@@ -1,11 +1,7 @@
-import type { IconLibrary } from '@sl-design-system/icon';
-import { Icon } from '@sl-design-system/icon';
+import { Icon, type IconLibrary } from '@sl-design-system/icon';
 import { icons } from './icons.js';
 
-/**
- * initializes all necessary things to load your theme,
- * like icons, ...
- */
+/** Setup the theme. */
 export const setup = (): void => {
   Icon.register(icons as IconLibrary);
 };
diff --git a/packages/themes/sanoma-learning/index.ts b/packages/themes/sanoma-learning/index.ts
@@ -1,27 +1,7 @@
 import { Icon, type IconLibrary } from '@sl-design-system/icon';
-import { Config, type ConfigSettings } from '@sl-design-system/shared';
 import { icons } from './icons.js';
 
-// export const setup = (): void => {
-// 1. Add typekit url to `<head>`
-// 2. Add theme icons
-// 3. Load the base stylesheet/css variables
-// 4. Start using the SLDS in your application
-// };
-
-/**
- * initializes all necessary things to load your theme,
- * like icons, ...
- */
+/** Setup the theme. */
 export const setup = (): void => {
-  const config: ConfigSettings = {
-    avatar: {
-      shape: 'circle',
-      badgeGapWidth: 2
-    },
-    icons
-  };
-
   Icon.register(icons as IconLibrary);
-  Config.setConfig(config);
 };
diff --git a/packages/themes/sanoma-utbildning_onhold/index.ts b/packages/themes/sanoma-utbildning_onhold/index.ts
@@ -1,11 +1,7 @@
 import { Icon, type IconLibrary } from '@sl-design-system/icon';
 import { icons } from './icons.js';
 
-/**
- * initializes all necessary things to load your theme,
- * like icons, ...
- */
+/** Setup the theme. */
 export const setup = (): void => {
-  console.log('register Icons');
   Icon.register(icons as IconLibrary);
 };
diff --git a/packages/themes/teas/index.ts b/packages/themes/teas/index.ts
@@ -1,17 +1,7 @@
 import { Icon, type IconLibrary } from '@sl-design-system/icon';
 import { icons } from './icons.js';
 
-// export const setup = (): void => {
-// 1. Add typekit url to `<head>`
-// 2. Add theme icons
-// 3. Load the base stylesheet/css variables
-// 4. Start using the SLDS in your application
-// };
-
-/**
- * initializes all necessary things to load your theme,
- * like icons, ...
- */
+/** Setup the theme. */
 export const setup = (): void => {
   Icon.register(icons as IconLibrary);
 };