Merge branch 'main' into release

telekom · Jan 15, 2024 · b8c8a22 · b8c8a22
2 parents c86e777 + 1073fd2
commit b8c8a22
Show file tree

Hide file tree

Showing 34 changed files with 527 additions and 57 deletions.
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.147](https://github.com/telekom/scale/compare/v3.0.0-beta.146...v3.0.0-beta.147) (2024-01-15)
+
+
+### Bug Fixes
+
+* allow sorting of dynamically added columns2 ([#2246](https://github.com/telekom/scale/issues/2246)) ([c33b083](https://github.com/telekom/scale/commit/c33b083d3895abe65545da6e0b3e62be4c3a9525))
+* enable programmatic disabled [#2248](https://github.com/telekom/scale/issues/2248) ([bab9369](https://github.com/telekom/scale/commit/bab9369d8761664454c74847b8d652929d21d743))
+* remove unnecessary prop, add required aria attribute ([#2192](https://github.com/telekom/scale/issues/2192)) ([e63dbc1](https://github.com/telekom/scale/commit/e63dbc16f9eec9fd35e9a5146a984be3035a89b7))
+* set color scheme ([#2257](https://github.com/telekom/scale/issues/2257)) ([0f4bdee](https://github.com/telekom/scale/commit/0f4bdee5aa2942d17c98ad002bdff599cbc73050))
+
+
+
+
+
 # [3.0.0-beta.146](https://github.com/telekom/scale/compare/v3.0.0-beta.145...v3.0.0-beta.146) (2023-12-22)
 
 

diff --git a/examples/angular-reactive-forms/package.json b/examples/angular-reactive-forms/package.json
@@ -18,7 +18,7 @@
     "@angular/platform-browser": "^14.2.10",
     "@angular/platform-browser-dynamic": "^14.2.10",
     "@angular/router": "^14.2.10",
-    "@telekom/scale-components-neutral": "^3.0.0-beta.117",
+    "@telekom/scale-components-neutral": "^3.0.0-beta.143",
     "rxjs": "~6.6.0",
     "tslib": "^2.1.0",
     "zone.js": "~0.11.4"
@@ -41,4 +41,4 @@
     "node": "14.17.0",
     "npm": "6.14.13"
   }
-}
+}
diff --git a/examples/angular-reactive-forms/src/app/app.module.ts b/examples/angular-reactive-forms/src/app/app.module.ts
@@ -8,6 +8,8 @@ import { AppComponent } from './app.component';
 import { TextValueAccessorDirective } from 'src/directives/text-value-accessor';
 import { CheckedValueAccessorDirective } from 'src/directives/checked-value-accessor';
 import { NumberValueAccessorDirective } from 'src/directives/number-value-accessor';
+import { SelectValueAccessorDirective } from 'src/directives/select-value-accessor';
+import { DateValueAccessorDirective } from 'src/directives/date-value-accessor';
 import { ReactiveFormComponent } from './reactive-form/reactive-form.component';
 import { SimpleBindingComponent } from './simple-binding/simple-binding.component';
 import { TestingComponent } from './testing/testing.component';
@@ -17,18 +19,20 @@ import { VanillaExampleComponent } from './vanilla-example/vanilla-example.compo
   declarations: [
     AppComponent,
     TextValueAccessorDirective,
+    SelectValueAccessorDirective,
+    DateValueAccessorDirective,
     CheckedValueAccessorDirective,
     NumberValueAccessorDirective,
     ReactiveFormComponent,
     SimpleBindingComponent,
     TestingComponent,
-    VanillaExampleComponent
+    VanillaExampleComponent,
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     ReactiveFormsModule,
-    FormsModule
+    FormsModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

diff --git a/examples/angular-reactive-forms/src/app/reactive-form/reactive-form.component.html b/examples/angular-reactive-forms/src/app/reactive-form/reactive-form.component.html
@@ -8,6 +8,21 @@
   <p>
     <scale-checkbox label="I agree with the privacy policy" formControlName="consent"></scale-checkbox>
   </p>
+  <p>
+    <scale-dropdown-select label="select" formControlName="select">
+      <scale-dropdown-select-item value="foo">Foo</scale-dropdown-select-item>
+      <scale-dropdown-select-item value="bar">Bar</scale-dropdown-select-item>
+    </scale-dropdown-select>
+  </p>
+
+  <p>
+    <scale-date-picker
+    label="Standard"
+    value="2020-12-31"
+    placeholder="Select date"
+    formControlName="date"
+    ></scale-date-picker>
+  </p>
   <scale-button type="submit">console.log</scale-button>
   <scale-button type="reset" variant="secondary">Reset</scale-button>
 </form>

diff --git a/examples/angular-reactive-forms/src/app/reactive-form/reactive-form.component.ts b/examples/angular-reactive-forms/src/app/reactive-form/reactive-form.component.ts
@@ -16,7 +16,9 @@ export class ReactiveFormComponent implements OnInit {
   signupForm = new UntypedFormGroup({
     username: new UntypedFormControl('admin'),
     password: new UntypedFormControl({ value: '', disabled: false }),
-    consent: new UntypedFormControl()
+    consent: new UntypedFormControl(),
+    select: new UntypedFormControl('foo'),
+    date: new UntypedFormControl(),
   });
 
   onSubmit() {

diff --git a/examples/angular-reactive-forms/src/directives/base-value-accessor.ts b/examples/angular-reactive-forms/src/directives/base-value-accessor.ts
@@ -40,4 +40,8 @@ export class BaseValueAccessorDirective implements ControlValueAccessor {
     this.onChange(value);
   }
 
+  _handleDatePickerSelect(target: any): void {
+    const value = target.querySelector('duet-date-picker').value;
+    this.onChange(value);
+  }
 }
diff --git a/examples/angular-reactive-forms/src/directives/date-value-accessor.ts b/examples/angular-reactive-forms/src/directives/date-value-accessor.ts
@@ -0,0 +1,24 @@
+import { Directive, ElementRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { BaseValueAccessorDirective } from './base-value-accessor';
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: 'scale-date-picker[formControlName],[sclDateControl]',
+  host: {
+    '(scale-change)': '_handleDatePickerSelect($event.target)',
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: DateValueAccessorDirective,
+      multi: true
+    }
+  ]
+})
+export class DateValueAccessorDirective extends BaseValueAccessorDirective {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+}
diff --git a/examples/angular-reactive-forms/src/directives/select-value-accessor.ts b/examples/angular-reactive-forms/src/directives/select-value-accessor.ts
@@ -0,0 +1,24 @@
+import { Directive, ElementRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { BaseValueAccessorDirective } from './base-value-accessor';
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: 'scale-dropdown-select[formControlName],[sclSelectControl]',
+  host: {
+    '(scale-change)': '_handleInput($event.target.value)'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: SelectValueAccessorDirective,
+      multi: true
+    }
+  ]
+})
+export class SelectValueAccessorDirective extends BaseValueAccessorDirective {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+}
diff --git a/lerna.json b/lerna.json
@@ -7,7 +7,7 @@
     "--pure-lockfile"
   ],
   "useWorkspaces": true,
-  "version": "3.0.0-beta.146",
+  "version": "3.0.0-beta.147",
   "command": {
     "version": {
       "allowBranch": "main"

diff --git a/packages/components-angular/CHANGELOG.md b/packages/components-angular/CHANGELOG.md
@@ -3,6 +3,14 @@
 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.147](https://github.com/telekom/scale/compare/v3.0.0-beta.146...v3.0.0-beta.147) (2024-01-15)
+
+**Note:** Version bump only for package @telekom/scale-components-angular
+
+
+
+
+
 # [3.0.0-beta.146](https://github.com/telekom/scale/compare/v3.0.0-beta.145...v3.0.0-beta.146) (2023-12-22)
 
 **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.146",
+  "version": "3.0.0-beta.147",
   "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,14 @@
 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.147](https://github.com/telekom/scale/compare/v3.0.0-beta.146...v3.0.0-beta.147) (2024-01-15)
+
+**Note:** Version bump only for package @telekom/scale-components-react
+
+
+
+
+
 # [3.0.0-beta.146](https://github.com/telekom/scale/compare/v3.0.0-beta.145...v3.0.0-beta.146) (2023-12-22)
 
 **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.146",
+  "version": "3.0.0-beta.147",
   "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,14 @@
 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.147](https://github.com/telekom/scale/compare/v3.0.0-beta.146...v3.0.0-beta.147) (2024-01-15)
+
+**Note:** Version bump only for package @telekom/scale-components-vue
+
+
+
+
+
 # [3.0.0-beta.146](https://github.com/telekom/scale/compare/v3.0.0-beta.145...v3.0.0-beta.146) (2023-12-22)
 
 **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.146",
+  "version": "3.0.0-beta.147",
   "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,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.147](https://github.com/telekom/scale/compare/v3.0.0-beta.146...v3.0.0-beta.147) (2024-01-15)
+
+
+### Bug Fixes
+
+* allow sorting of dynamically added columns2 ([#2246](https://github.com/telekom/scale/issues/2246)) ([c33b083](https://github.com/telekom/scale/commit/c33b083d3895abe65545da6e0b3e62be4c3a9525))
+* enable programmatic disabled [#2248](https://github.com/telekom/scale/issues/2248) ([bab9369](https://github.com/telekom/scale/commit/bab9369d8761664454c74847b8d652929d21d743))
+* remove unnecessary prop, add required aria attribute ([#2192](https://github.com/telekom/scale/issues/2192)) ([e63dbc1](https://github.com/telekom/scale/commit/e63dbc16f9eec9fd35e9a5146a984be3035a89b7))
+* set color scheme ([#2257](https://github.com/telekom/scale/issues/2257)) ([0f4bdee](https://github.com/telekom/scale/commit/0f4bdee5aa2942d17c98ad002bdff599cbc73050))
+
+
+
+
+
 # [3.0.0-beta.146](https://github.com/telekom/scale/compare/v3.0.0-beta.145...v3.0.0-beta.146) (2023-12-22)
 
 

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.146",
+  "version": "3.0.0-beta.147",
   "description": "Scale is the digital design system for Telekom products and experiences.",
   "homepage": "https://github.com/telekom/scale",
   "repository": {
@@ -73,7 +73,7 @@
     "@floating-ui/dom": "^1.2.8",
     "@stencil/core": "^2.17.0",
     "@telekom/design-tokens": "1.0.0-beta.10",
-    "@telekom/scale-design-tokens": "^3.0.0-beta.146",
+    "@telekom/scale-design-tokens": "^3.0.0-beta.147",
     "classnames": "^2.2.6",
     "composed-offset-position": "^0.0.4",
     "stencil-inline-svg": "^1.0.1"

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 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="-1">
       <slot name="chip-icon"></slot>
       <span class="chip-label">
         <slot></slot>

diff --git a/packages/components/src/components/chip/chip.tsx b/packages/components/src/components/chip/chip.tsx
@@ -34,9 +34,15 @@ export class Chip {
   /** (optional) */
   @Prop() selected?: boolean = false;
   /** (optional) chip aria-role */
-  @Prop() ariaRoleTitle?: string;
-  /** (optional) chip aria-checked */
-  @Prop() ariaCheckedState?: boolean;
+  @Prop() ariaRoleTitle?:
+    | 'switch'
+    | 'radio'
+    | 'option'
+    | 'menuitemreadio'
+    | 'menuitemcheckbox'
+    | 'checkbox' = 'switch';
+  /** @deprecated (optional) chip aria-checked - should be derived from selected state attribute */
+  @Prop() ariaCheckedState?: boolean = false;
   /** (optional) chip label */
   @Prop() label?: string;
   /** (optional) chip disabled */
@@ -140,6 +146,7 @@ export class Chip {
             tabindex={this.selected ? '0' : '-1'}
             part={this.getBasePartMap()}
             class={this.getCssClassMap()}
+            aria-checked={this.selected.toString()}
             onClick={
               !this.disabled || this.type === 'dynamic'
                 ? this.handleClick
@@ -154,10 +161,8 @@ export class Chip {
           </span>
         ) : (
           <span
-            role={this.ariaRoleTitle ? this.ariaRoleTitle : 'switch'}
-            aria-checked={
-              this.ariaCheckedState ? this.ariaCheckedState : this.selected
-            }
+            role={this.ariaRoleTitle}
+            aria-checked={this.selected.toString()}
             tabindex={this.selected ? '0' : '-1'}
             part={this.getBasePartMap()}
             class={this.getCssClassMap()}

diff --git a/packages/components/src/components/chip/readme.md b/packages/components/src/components/chip/readme.md
@@ -7,17 +7,17 @@
 
 ## Properties
 
-| Property           | Attribute            | Description                    | Type                        | Default        |
-| ------------------ | -------------------- | ------------------------------ | --------------------------- | -------------- |
-| `ariaCheckedState` | `aria-checked-state` | (optional) chip aria-checked   | `boolean`                   | `undefined`    |
-| `ariaRoleTitle`    | `aria-role-title`    | (optional) chip aria-role      | `string`                    | `undefined`    |
-| `disabled`         | `disabled`           | (optional) chip disabled       | `boolean`                   | `false`        |
-| `dismissText`      | `dismiss-text`       | (optional) Dismiss label       | `string`                    | `'dismiss'`    |
-| `label`            | `label`              | (optional) chip label          | `string`                    | `undefined`    |
-| `selected`         | `selected`           | (optional)                     | `boolean`                   | `false`        |
-| `styles`           | `styles`             | (optional) Injected CSS styles | `string`                    | `undefined`    |
-| `type`             | `type`               | (optional)                     | `"dynamic" \| "persistent"` | `'persistent'` |
-| `variant`          | `variant`            | (optional)                     | `"outline" \| "standard"`   | `'standard'`   |
+| Property           | Attribute            | Description                                                                                                                              | Type                                                                                      | Default        |
+| ------------------ | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | -------------- |
+| `ariaCheckedState` | `aria-checked-state` | <span style="color:red">**[DEPRECATED]**</span> (optional) chip aria-checked - should be derived from selected state attribute<br/><br/> | `boolean`                                                                                 | `false`        |
+| `ariaRoleTitle`    | `aria-role-title`    | (optional) chip aria-role                                                                                                                | `"checkbox" \| "menuitemcheckbox" \| "menuitemreadio" \| "option" \| "radio" \| "switch"` | `'switch'`     |
+| `disabled`         | `disabled`           | (optional) chip disabled                                                                                                                 | `boolean`                                                                                 | `false`        |
+| `dismissText`      | `dismiss-text`       | (optional) Dismiss label                                                                                                                 | `string`                                                                                  | `'dismiss'`    |
+| `label`            | `label`              | (optional) chip label                                                                                                                    | `string`                                                                                  | `undefined`    |
+| `selected`         | `selected`           | (optional)                                                                                                                               | `boolean`                                                                                 | `false`        |
+| `styles`           | `styles`             | (optional) Injected CSS styles                                                                                                           | `string`                                                                                  | `undefined`    |
+| `type`             | `type`               | (optional)                                                                                                                               | `"dynamic" \| "persistent"`                                                               | `'persistent'` |
+| `variant`          | `variant`            | (optional)                                                                                                                               | `"outline" \| "standard"`                                                                 | `'standard'`   |
 
 
 ## Events

diff --git a/packages/components/src/components/data-grid/cell-handlers/link-cell.tsx b/packages/components/src/components/data-grid/cell-handlers/link-cell.tsx
@@ -19,12 +19,20 @@ export const LinkCell: Cell = {
     sortBy: 'text',
   },
   render: ({ content }) => {
-    // Remove protocol (http/https)
-    const urlNoProtocol = content.replace(/^https?\:\/\//i, '');
-    return (
-      <scale-link href={content} target="_blank">
-        {urlNoProtocol}
-      </scale-link>
-    );
+    if (typeof content === 'string') {
+      // Remove protocol (http/https)
+      const urlNoProtocol = content.replace(/^https?\:\/\//i, '');
+      return (
+        <scale-link href={content} target="_blank">
+          {urlNoProtocol}
+        </scale-link>
+      );
+    } else {
+      // if the type of content is not a string, the content is handled as
+      // object of text and props (spread) which are passed as attributes to
+      // the scale-link element
+      const { text, ...props } = content;
+      return <scale-link {...props}>{text}</scale-link>;
+    }
   },
 };