Merge branch 'main' into pr-2377

Author: amir-ba

.github/workflows/build-pr.yml

@@ -6,7 +6,7 @@ on:
 
 jobs:
   prettier:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v3
@@ -15,7 +15,7 @@ jobs:
 
       - name: Restore Lerna
         id: yarn-cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: |
             node_modules
@@ -39,7 +39,7 @@ jobs:
         run: |
           sh scripts/porcelain.sh
   tslint:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v3
@@ -48,7 +48,7 @@ jobs:
 
       - name: Restore Lerna
         id: yarn-cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: |
             node_modules
@@ -68,7 +68,7 @@ jobs:
         run: |
           yarn workspace @telekom/scale-components lint
   unit-tests:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v3
@@ -77,7 +77,7 @@ jobs:
 
       - name: Restore Lerna
         id: yarn-cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: |
             node_modules
@@ -97,7 +97,7 @@ jobs:
         run: |
           yarn workspace @telekom/scale-components test --spec --max-workers=8
   e2e-tests:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v3
@@ -106,7 +106,7 @@ jobs:
 
       - name: Restore Lerna
         id: yarn-cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: |
             node_modules
@@ -131,7 +131,7 @@ jobs:
           yarn workspace @telekom/scale-components test --e2e --max-workers=8 --debug
 
   visual-tests:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
@@ -145,7 +145,7 @@ jobs:
           
       - name: Restore Lerna
         id: yarn-cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: |
             node_modules
@@ -204,7 +204,7 @@ jobs:
           branch: ${{ steps.vars.outputs.branch-name }}
 
   uncommitted-changes:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v3
@@ -213,7 +213,7 @@ jobs:
 
       - name: Restore Lerna
         id: yarn-cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: |
             node_modules

.github/workflows/codeql-analysis.yml

@@ -23,7 +23,7 @@ on:
 jobs:
   analyze:
     name: Analyze
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     permissions:
       actions: read
       contents: read

packages/components/src/components/button/button.tsx

@@ -40,7 +40,7 @@ export class Button {
   /** (optional) Button variant */
   @Prop() variant?: string = 'primary';
   /** (optional) If `true`, the button is disabled */
-  @Prop() disabled?: boolean = false;
+  @Prop({ reflect: true }) disabled?: boolean = false;
   /** (optional) Button type */
   @Prop() type?: 'reset' | 'submit' | 'button';
   /** (optional) The name of the button, submitted as a pair with the button's `value` as part of the form data */

packages/components/src/components/data-grid/readme.md

@@ -114,6 +114,7 @@ graph TD;
   scale-progress-bar --> scale-icon-alert-error
   scale-progress-bar --> scale-icon-action-success
   scale-dropdown-select --> scale-icon-action-checkmark
+  scale-dropdown-select --> scale-icon-action-close
   scale-dropdown-select --> scale-icon-navigation-collapse-up
   scale-dropdown-select --> scale-icon-navigation-collapse-down
   scale-dropdown-select --> scale-helper-text

packages/components/src/components/dropdown-select/dropdown-select.css

@@ -178,6 +178,16 @@
   transition: var(--transition-icon);
 }
 
+[part='clear'] {
+  top: 50%;
+  right: var(--spacing-x);
+  position: absolute;
+  transform: translateY(-50%);
+  height: var(--height-icon);
+  color: var(--color-icon);
+  transition: var(--transition-icon);
+}
+
 [part~='disabled'] [part='icon'] {
   color: var(--color-disabled);
 }

packages/components/src/components/dropdown-select/dropdown-select.e2e.ts

@@ -1,10 +1,8 @@
 import { E2EElement, E2EPage, newE2EPage } from '@stencil/core/testing';
-import { DropdownSelect } from './dropdown-select';
 
 describe('DropdownSelect', function () {
   it('should be able to change it`s value via keyboard nav', async () => {
     const page = await newE2EPage({
-      components: [DropdownSelect],
       html: `
       <scale-dropdown-select>
         <scale-dropdown-select-item value="caspar">Caspar</scale-dropdown-select-item>
@@ -31,7 +29,6 @@ describe('DropdownSelect', function () {
   });
   it('should be able to change it`s value via typing', async () => {
     const page = await newE2EPage({
-      components: [DropdownSelect],
       html: `
       <scale-dropdown-select>
         <scale-dropdown-select-item value="caspar">Caspar</scale-dropdown-select-item>
@@ -67,7 +64,6 @@ describe('DropdownSelect', function () {
 
     beforeEach(async () => {
       page = await newE2EPage({
-        components: [DropdownSelect],
         html: `
         <scale-dropdown-select>
           <scale-dropdown-select-item value="adam">Adam</scale-dropdown-select-item>
@@ -119,7 +115,6 @@ describe('DropdownSelect', function () {
 
     beforeEach(async () => {
       page = await newE2EPage({
-        components: [DropdownSelect],
         html: `
         <scale-dropdown-select value="default">
           <scale-dropdown-select-item disabled value="adam">Adam</scale-dropdown-select-item>

packages/components/src/components/dropdown-select/dropdown-select.spec.ts

@@ -64,10 +64,14 @@ describe('DropdownSelect', function () {
 
     const selectEl = page.doc.querySelector('scale-dropdown-select');
     selectEl.addEventListener('scale-change', changeSpy);
-    const comboboxEl = selectEl.shadowRoot.querySelector('[part="combobox"]');
+    const comboboxEl = selectEl.shadowRoot.querySelector(
+      '[part="combobox"]'
+    ) as HTMLElement;
     comboboxEl.scrollIntoView = function () {};
     comboboxEl.focus = function () {};
-    const optionsEls = selectEl.shadowRoot.querySelectorAll('[role="option"]');
+    const optionsEls = selectEl.shadowRoot.querySelectorAll(
+      '[role="option"]'
+    ) as NodeListOf<HTMLElement>;
 
     comboboxEl.click();
     optionsEls[2].click();

packages/components/src/components/dropdown-select/dropdown-select.tsx

@@ -259,6 +259,8 @@ export class DropdownSelect {
   @Prop() hcmLabelDisabled?: string = 'this field is disabled';
   /** (optional) id or space separated list of ids of elements that provide or link to additional related information. */
   @Prop() ariaDetailsId?: string;
+  @Prop() allowClear?: boolean = false;
+  /** (optional) clear button inside the dropdown, that clears all iputs and resets the dropdown */
 
   @Event({ eventName: 'scale-change' }) scaleChange!: EventEmitter<void>;
   @Event({ eventName: 'scale-focus' }) scaleFocus!: EventEmitter<void>;
@@ -581,22 +583,28 @@ export class DropdownSelect {
                 </div>
               </div>
             </div>
-
-            <div part="icon">
-              {this.open ? (
-                <scale-icon-navigation-collapse-up
-                  decorative
-                  size={DEFAULT_ICON_SIZE}
-                />
-              ) : (
-                <scale-icon-navigation-collapse-down
-                  decorative
-                  size={DEFAULT_ICON_SIZE}
-                />
-              )}
-            </div>
+            {this.allowClear && this.value ? (
+              <scale-icon-action-close
+                accessibility-title="close"
+                part="clear"
+                onClick={this.handleClearClick}
+              ></scale-icon-action-close>
+            ) : (
+              <div part="icon">
+                {this.open ? (
+                  <scale-icon-navigation-collapse-up
+                    decorative
+                    size={DEFAULT_ICON_SIZE}
+                  />
+                ) : (
+                  <scale-icon-navigation-collapse-down
+                    decorative
+                    size={DEFAULT_ICON_SIZE}
+                  />
+                )}
+              </div>
+            )}
           </div>
-
           {this.helperText && (
             <scale-helper-text
               helperText={this.helperText}
@@ -638,4 +646,15 @@ export class DropdownSelect {
       disabled && `disabled`
     );
   }
+
+  private handleClearClick = (event: MouseEvent) => {
+    event.stopPropagation();
+    if (this.disabled || this.readonly) {
+      return;
+    }
+
+    this.value = '';
+    this.currentIndex = -1;
+    emitEvent(this, 'scaleChange', { value: this.value });
+  };
 }

packages/components/src/components/dropdown-select/readme.md

@@ -9,6 +9,7 @@
 
 | Property            | Attribute             | Description                                                                                                      | Type                                                    | Default                    |
 | ------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | -------------------------- |
+| `allowClear`        | `allow-clear`         |                                                                                                                  | `boolean`                                               | `false`                    |
 | `ariaDetailsId`     | `aria-details-id`     | (optional) id or space separated list of ids of elements that provide or link to additional related information. | `string`                                                | `undefined`                |
 | `ariaLabelSelected` | `aria-label-selected` | (optional) Screen reader text appended to the selected element                                                   | `string`                                                | `'selected'`               |
 | `comboboxId`        | `combobox-id`         |                                                                                                                  | `string`                                                | `'combobox'`               |
@@ -28,18 +29,19 @@
 
 ## Events
 
-| Event           | Description | Type                |
-| --------------- | ----------- | ------------------- |
-| `scale-blur`    |             | `CustomEvent<void>` |
-| `scale-change`  |             | `CustomEvent<void>` |
-| `scale-focus`   |             | `CustomEvent<void>` |
-| `scale-keydown` |             | `CustomEvent<void>` |
+| Event           | Description                                                                                | Type                |
+| --------------- | ------------------------------------------------------------------------------------------ | ------------------- |
+| `scale-blur`    |                                                                                            | `CustomEvent<void>` |
+| `scale-change`  | (optional) clear button inside the dropdown, that clears all iputs and resets the dropdown | `CustomEvent<void>` |
+| `scale-focus`   |                                                                                            | `CustomEvent<void>` |
+| `scale-keydown` |                                                                                            | `CustomEvent<void>` |
 
 
 ## Shadow Parts
 
 | Part                         | Description |
 | ---------------------------- | ----------- |
+| `"clear"`                    |             |
 | `"combobox-container"`       |             |
 | `"combobox-value"`           |             |
 | `"icon"`                     |             |
@@ -58,6 +60,7 @@
 ### Depends on
 
 - [scale-icon-action-checkmark](../icons/action-checkmark)
+- [scale-icon-action-close](../icons/action-close)
 - [scale-icon-navigation-collapse-up](../icons/navigation-collapse-up)
 - [scale-icon-navigation-collapse-down](../icons/navigation-collapse-down)
 - [scale-helper-text](../helper-text)
@@ -66,6 +69,7 @@
 ```mermaid
 graph TD;
   scale-dropdown-select --> scale-icon-action-checkmark
+  scale-dropdown-select --> scale-icon-action-close
   scale-dropdown-select --> scale-icon-navigation-collapse-up
   scale-dropdown-select --> scale-icon-navigation-collapse-down
   scale-dropdown-select --> scale-helper-text

packages/components/src/components/helper-text/helper-text.spec.ts

@@ -13,11 +13,6 @@ import { newSpecPage } from '@stencil/core/testing';
 import { HelperText } from './helper-text';
 
 describe('Helper Text', () => {
-  let element;
-  beforeEach(async () => {
-    element = new HelperText();
-  });
-
   it('should render informational helper text with info icon if no variant is specified', async () => {
     const page = await newSpecPage({
       components: [HelperText],