Merge branch 'main' into release (#2355)

* ci: sets up docker compose alias for compatibility (#2342) * fix: dropdown scroll fixed (#2333) * chip accessibility fix (#2332) * feat: chip keyboard handling fixed * feat: chip html added * fix: snapshot updated * fix: focus issues fixed * fix: readme fix * checkbox and switch css fixes for high contrast mode (#2317) fix: checkbox and switch CSS fixes for high contrast mode * ghost btn in storybook (#2341) * fix: ghost btn in storybook fixed * fix: one more ghost fixed * event part in storybook fixed (#2345) * fix: event part in storybook fixed * fix: german versions fixed * aria details vs aria describedby fixed for text field (#2352) * refactor: aria details vs aria describedby fixed for text field * fix: reverted to ariaDetailedId + description added to storybook * chore(release): publish (#2354) * chore(release): publish --------- Co-authored-by: tshimber <[email protected]>
telekom · Sep 19, 2024 · 942c406 · 942c406
1 parent 66614cf
commit 942c406
Show file tree

Hide file tree

Showing 38 changed files with 359 additions and 114 deletions.
diff --git a/.github/workflows/build-pr.yml b/.github/workflows/build-pr.yml
@@ -134,12 +134,15 @@ jobs:
     runs-on: ubuntu-20.04
     steps:
       - uses: actions/checkout@v3
-        with:
-          ref: ${{ github.head_ref }}
       - uses: actions/setup-node@v3
         with:
           node-version: 16
-
+      - name: Set up Docker Compose alias 
+        run: |
+          sudo touch /usr/bin/docker-compose
+          echo 'docker compose --compatibility "$@"' | sudo tee /usr/bin/docker-compose
+          sudo chmod +x /usr/bin/docker-compose
+          
       - name: Restore Lerna
         id: yarn-cache
         uses: actions/cache@v2

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.153](https://github.com/amir-ba/scale/compare/v3.0.0-beta.152...v3.0.0-beta.153) (2024-09-19)
+
+
+### Bug Fixes
+
+* dropdown scroll fixed ([#2327](https://github.com/scale/issues/2327)) ([6f326eb](https://github.com/telekom/scale/commit/6f326eb138eff93080d39b1c74d48d9393fd1684))
+* chip accessibility fix ([#2328](https://github.com/telekom/scale/issues/2328)) ([0b21978](https://github.com/telekom/scale/commit/0b21978bad9516d9958aa61e733a3f8348d11799))
+* checkbox and switch css fixes for high contrast mode ([#2300](https://github.com/scale/issues/2300)) ([318df56](https://github.com/telekom/scale/commit/318df5658a21b7eea44abe37eba1fc6bedfc243c))
+* ghost btn in storybook ([#2312](https://github.com/scale/issues/2312)) ([168f710](https://github.com/telekom/scale/commit/168f710fedae9df7f08decb79066b14bd7f73d1e))
+* update of event descriptions in storybook ([#2315](https://github.com/scale/issues/2315)) ([8681ed8](https://github.com/telekom/scale/commit/8681ed8d4f1cd08a756cf7e952e520df840c40b4))
+* aria describedby added extended for other use cases in text field ([#2349](https://github.com/scale/issues/2349)) ([2706542](https://github.com/telekom/scale/commit/270654297695571068c894aee30178729f361833))
+
+
+
 # [3.0.0-beta.152](https://github.com/telekom/scale/compare/v3.0.0-beta.151...v3.0.0-beta.152) (2024-07-10)
 
 

diff --git a/lerna.json b/lerna.json
@@ -7,7 +7,7 @@
     "--pure-lockfile"
   ],
   "useWorkspaces": true,
-  "version": "3.0.0-beta.152",
+  "version": "3.0.0-beta.153",
   "command": {
     "version": {
       "allowBranch": "main"

diff --git a/packages/components-angular/CHANGELOG.md b/packages/components-angular/CHANGELOG.md
@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.153](https://github.com/telekom/scale/compare/v3.0.0-beta.152...v3.0.0-beta.153) (2024-09-19)
+
+**Note:** Version bump only for package @telekom/scale-components-angular
+
+
+
+
+
+
 # [3.0.0-beta.152](https://github.com/telekom/scale/compare/v3.0.0-beta.151...v3.0.0-beta.152) (2024-07-10)
 
 **Note:** Version bump only for package @telekom/scale-components-angular

diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@telekom/scale-components-angular",
-  "version": "3.0.0-beta.152",
+  "version": "3.0.0-beta.153",
   "description": "Angular specific wrapper for @telekom/scale-components",
   "license": "MPL-2.0",
   "homepage": "https://github.com/telekom/scale",

diff --git a/packages/components-react/CHANGELOG.md b/packages/components-react/CHANGELOG.md
@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.153](https://github.com/telekom/scale/compare/v3.0.0-beta.152...v3.0.0-beta.153) (2024-09-19)
+
+**Note:** Version bump only for package @telekom/scale-components-react
+
+
+
+
+
+
 # [3.0.0-beta.152](https://github.com/telekom/scale/compare/v3.0.0-beta.151...v3.0.0-beta.152) (2024-07-10)
 
 **Note:** Version bump only for package @telekom/scale-components-react

diff --git a/packages/components-react/package.json b/packages/components-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@telekom/scale-components-react",
   "sideEffects": false,
-  "version": "3.0.0-beta.152",
+  "version": "3.0.0-beta.153",
   "description": "React proxy for @telekom/scale-components",
   "license": "MPL-2.0",
   "homepage": "https://github.com/telekom/scale",

diff --git a/packages/components-vue/CHANGELOG.md b/packages/components-vue/CHANGELOG.md
@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.153](https://github.com/telekom/scale/compare/v3.0.0-beta.152...v3.0.0-beta.153) (2024-09-19)
+
+**Note:** Version bump only for package @telekom/scale-components-vue
+
+
+
+
+
+
 # [3.0.0-beta.152](https://github.com/telekom/scale/compare/v3.0.0-beta.151...v3.0.0-beta.152) (2024-07-10)
 
 **Note:** Version bump only for package @telekom/scale-components-vue

diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@telekom/scale-components-vue",
   "sideEffects": false,
-  "version": "3.0.0-beta.152",
+  "version": "3.0.0-beta.153",
   "description": "Vue specific wrapper for @telekom/scale-components",
   "license": "MPL-2.0",
   "homepage": "https://github.com/telekom/scale",

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.153](https://github.com/telekom/scale/compare/v3.0.0-beta.152...v3.0.0-beta.153) (2024-09-19)
+
+
+### Bug Fixes
+
+* dropdown scroll fixed ([#2327](https://github.com/scale/issues/2327)) ([6f326eb](https://github.com/telekom/scale/commit/6f326eb138eff93080d39b1c74d48d9393fd1684))
+* chip accessibility fix ([#2328](https://github.com/telekom/scale/issues/2328)) ([0b21978](https://github.com/telekom/scale/commit/0b21978bad9516d9958aa61e733a3f8348d11799))
+* checkbox and switch css fixes for high contrast mode ([#2300](https://github.com/scale/issues/2300)) ([318df56](https://github.com/telekom/scale/commit/318df5658a21b7eea44abe37eba1fc6bedfc243c))
+* ghost btn in storybook ([#2312](https://github.com/scale/issues/2312)) ([168f710](https://github.com/telekom/scale/commit/168f710fedae9df7f08decb79066b14bd7f73d1e))
+* update of event descriptions in storybook ([#2315](https://github.com/scale/issues/2315)) ([8681ed8](https://github.com/telekom/scale/commit/8681ed8d4f1cd08a756cf7e952e520df840c40b4))
+* aria describedby added extended for other use cases in text field ([#2349](https://github.com/scale/issues/2349)) ([2706542](https://github.com/telekom/scale/commit/270654297695571068c894aee30178729f361833))
+
+
+
+
 # [3.0.0-beta.152](https://github.com/telekom/scale/compare/v3.0.0-beta.151...v3.0.0-beta.152) (2024-07-10)
 
 

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@telekom/scale-components",
-  "version": "3.0.0-beta.152",
+  "version": "3.0.0-beta.153",
   "description": "Scale is the digital design system for Telekom products and experiences.",
   "homepage": "https://github.com/telekom/scale",
   "repository": {

diff --git a/packages/components/src/components/checkbox/checkbox.css b/packages/components/src/components/checkbox/checkbox.css
@@ -147,6 +147,13 @@ scale-checkbox.indeterminate [part='checkbox'] {
   border: none;
   color: var(--color-icon-checked-active);
 }
+
+@media screen and (forced-colors: active), (-ms-high-contrast: active) {
+  scale-checkbox.indeterminate [part='checkbox'] {
+    border: 1px solid;
+  }
+}
+
 scale-checkbox.indeterminate [part='icon'] {
   color: var(--color-icon-checked-active);
 }
@@ -256,6 +263,12 @@ scale-checkbox.error [part='checkbox'] {
   border: none;
 }
 
+@media screen and (forced-colors: active), (-ms-high-contrast: active) {
+  scale-checkbox.error [part='checkbox'] {
+    border: 1px solid;
+  }
+}
+
 scale-checkbox.error
   [part='input']:focus
   ~ [part='container']

diff --git a/packages/components/src/components/chip/__snapshots__/chip.spec.ts.snap b/packages/components/src/components/chip/__snapshots__/chip.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`Chip should match snapshot 1`] = `
 <scale-chip>
   <mock:shadow-root>
-    <span aria-checked="false" class="chip chip--type-persistent chip--variant-standard" part="base type-persistent variant-standard" role="switch" tabindex="-1">
+    <span aria-checked="false" class="chip chip--type-persistent chip--variant-standard" part="base type-persistent variant-standard" role="switch" tabindex="0">
       <slot name="chip-icon"></slot>
       <span class="chip-label">
         <slot></slot>

diff --git a/packages/components/src/components/chip/chip.css b/packages/components/src/components/chip/chip.css
@@ -85,8 +85,7 @@
   color: var(--telekom-color-text-and-icon-inverted-standard);
 }
 
-.chip:not(.chip--disabled):not(.chip--type-dynamic):focus,
-.chip.chip--type-dynamic:not(.chip--selected):focus {
+.chip:not(.chip--disabled):focus {
   outline: var(--telekom-spacing-composition-space-02) solid var(--color-focus);
   outline-offset: var(--telekom-spacing-composition-space-01);
 }

diff --git a/packages/components/src/components/chip/chip.tsx b/packages/components/src/components/chip/chip.tsx
@@ -32,7 +32,7 @@ export class Chip {
   /** (optional) */
   @Prop() type?: 'dynamic' | 'persistent' = 'persistent';
   /** (optional) */
-  @Prop() selected?: boolean = false;
+  @Prop({ mutable: true }) selected?: boolean = false;
   /** (optional) chip aria-role */
   @Prop() ariaRoleTitle?:
     | 'switch'
@@ -52,7 +52,7 @@ export class Chip {
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
 
-  /** (optional) Change icon click event */
+  /** (optional) Change event */
   @Event({ eventName: 'scale-change' }) scaleChange: EventEmitter<MouseEvent>;
   /** @deprecated in v3 in favor of kebab-case event names */
   @Event({ eventName: 'scaleChange' })
@@ -87,21 +87,26 @@ export class Chip {
   handleClose = (event: MouseEvent) => {
     event.preventDefault();
     event.stopPropagation();
-    if (this.disabled && this.type !== 'dynamic') {
-      return;
-    }
     emitEvent(this, 'scaleClose', event);
   };
 
   handleClick = (event: MouseEvent) => {
-    if (this.type !== 'dynamic') {
-      this.selected = !this.selected;
+    this.handleChange(event);
+  };
+
+  handleKeyDown = (event: KeyboardEvent) => {
+    if (event.code === 'Space') {
+      this.handleChange(event);
     }
+  };
+
+  handleChange = (event: MouseEvent | KeyboardEvent): void => {
     event.preventDefault();
     event.stopPropagation();
-    if (this.disabled && this.type !== 'dynamic') {
+    if (this.disabled || this.type === 'dynamic') {
       return;
     }
+    this.selected = !this.selected;
     emitEvent(this, 'scaleChange', event);
   };
 
@@ -140,45 +145,21 @@ export class Chip {
     return (
       <Host>
         {this.styles && <style>{this.styles}</style>}
-        {this.type === 'dynamic' && this.selected ? (
-          <span
-            role={this.ariaRoleTitle}
-            tabindex={this.selected ? '0' : '-1'}
-            part={this.getBasePartMap()}
-            class={this.getCssClassMap()}
-            aria-checked={this.selected.toString()}
-            onClick={
-              !this.disabled || this.type === 'dynamic'
-                ? this.handleClick
-                : null
-            }
-          >
-            <slot name="chip-icon"></slot>
-            <span class="chip-label">
-              <slot />
-            </span>
-            {this.selected ? this.getIcon() : null}
-          </span>
-        ) : (
-          <span
-            role={this.ariaRoleTitle}
-            aria-checked={this.selected.toString()}
-            tabindex={this.selected ? '0' : '-1'}
-            part={this.getBasePartMap()}
-            class={this.getCssClassMap()}
-            onClick={
-              !this.disabled || this.type === 'dynamic'
-                ? this.handleClick
-                : null
-            }
-          >
-            <slot name="chip-icon"></slot>
-            <span class="chip-label">
-              <slot />
-            </span>
-            {this.selected ? this.getIcon() : null}
+        <span
+          role={this.ariaRoleTitle}
+          aria-checked={this.selected.toString()}
+          tabindex={this.disabled ? '-1' : '0'}
+          part={this.getBasePartMap()}
+          class={this.getCssClassMap()}
+          onClick={this.handleClick}
+          onKeyDown={this.handleKeyDown}
+        >
+          <slot name="chip-icon"></slot>
+          <span class="chip-label">
+            <slot />
           </span>
-        )}
+          {this.selected ? this.getIcon() : null}
+        </span>
       </Host>
     );
   }

diff --git a/packages/components/src/components/chip/readme.md b/packages/components/src/components/chip/readme.md
@@ -24,7 +24,7 @@
 
 | Event          | Description                                                                                        | Type                      |
 | -------------- | -------------------------------------------------------------------------------------------------- | ------------------------- |
-| `scale-change` | (optional) Change icon click event                                                                 | `CustomEvent<MouseEvent>` |
+| `scale-change` | (optional) Change event                                                                            | `CustomEvent<MouseEvent>` |
 | `scale-close`  | (optional) Close icon click event                                                                  | `CustomEvent<MouseEvent>` |
 | `scaleChange`  | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<MouseEvent>` |
 | `scaleClose`   | <span style="color:red">**[DEPRECATED]**</span> in v3 in favor of kebab-case event names<br/><br/> | `CustomEvent<MouseEvent>` |

diff --git a/packages/components/src/components/dropdown-select/dropdown-select.tsx b/packages/components/src/components/dropdown-select/dropdown-select.tsx
@@ -270,7 +270,7 @@ export class DropdownSelect {
   @State() hasFocus: boolean = false;
 
   private comboEl: HTMLElement;
-  private listboxEl: HTMLElement;
+  private scrollContainer: HTMLElement;
   private listboxPadEl: HTMLElement;
   private hiddenInput: HTMLInputElement;
 
@@ -346,10 +346,10 @@ export class DropdownSelect {
 
   bringIntoView(index) {
     const options: NodeListOf<HTMLElement> =
-      this.listboxEl.querySelectorAll('[role=option]');
+      this.scrollContainer.querySelectorAll('[role=option]');
 
-    if (hasOverflow(this.listboxEl)) {
-      keepInView(options[index], this.listboxEl);
+    if (hasOverflow(this.scrollContainer)) {
+      keepInView(options[index], this.scrollContainer);
     }
 
     if (!isInView(options[index])) {
@@ -530,13 +530,13 @@ export class DropdownSelect {
             </div>
             <div part="listbox-pad" ref={(el) => (this.listboxPadEl = el)}>
               <div
+                ref={(el) => (this.scrollContainer = el)}
                 part="listbox-scroll-container"
                 onMouseDown={(e) => {
                   e.preventDefault();
                 }}
               >
                 <div
-                  ref={(el) => (this.listboxEl = el)}
                   part="listbox"
                   role="listbox"
                   id={`${this.comboboxId}-listbox`}

diff --git a/packages/components/src/components/switch/switch.css b/packages/components/src/components/switch/switch.css
@@ -307,7 +307,7 @@ scale-switch scale-icon-action-success {
   .switch__toggle {
     border: 1px solid;
   }
-  scale-icon-action-checkmark {
+  scale-switch scale-icon-action-checkmark {
     visibility: hidden !important;
   }
 }
diff --git a/packages/components/src/components/text-field/readme.md b/packages/components/src/components/text-field/readme.md
@@ -1,7 +1,5 @@
 # scale-text-field
 
-
-
 <!-- Auto Generated Below -->
Original file line number	Diff line number	Diff line change
		@@ -1,7 +1,5 @@
		# scale-text-field



		<!-- Auto Generated Below -->


Expand Down