fix: adapting Nicos solution regarding Angular consumption (#572)

* fix: adapting Nicos solution regarding Angular consumption * refactor: added relevant entry and renamed accordingly to the correct filetype * chore: removed obsolete section * chore: removed obsolete section Co-authored-by: Nicolas Merget <[email protected]>
db-ui · Nov 21, 2022 · 47a7499 · 47a7499
1 parent a6d3a94
commit 47a7499
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 75 deletions.
diff --git a/README.md b/README.md
@@ -61,23 +61,6 @@ If you miss a component than [contribute](CONTRIBUTING.md), please.
 * [DB UI Elements with Angular](showcase/angular-showcase/README.md)
 * [DB UI Elements with Vue](showcase/vue-showcase/README.md)
 
-## FAQ
-
-### 
-
-- I'm facing problems like the following when using `@db-ui/ngx-elements` with Angular version 14:
-  ```
-  Interface 'HTMLDbBreadcrumbElement' cannot simultaneously extend types 'DbBreadcrumb' and 'HTMLStencilElement'.
-  Named property 'ariaLabel' of types 'DbBreadcrumb' and 'HTMLStencilElement' are not identical
-  ```
-
-  ![Bildschirmfoto 2022-09-15 um 10 31 21](https://user-images.githubusercontent.com/2963522/190355655-429251e6-0048-4c66-aebc-c6e45268768f.png)
-
-  The solution is to set the following option within the `CompileOptions` section within your `TsConfig`, until we provide a central solution:
-  ```JSON
-  "skipLibCheck": true
-  ```
-
 ## Deutsche Bahn brand
 
 As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound to clear guidelines and restrictions even when being used with the code that we're providing with this product.

diff --git a/doc/migrationGuide.adoc b/doc/migrationGuide.adoc
@@ -0,0 +1,11 @@
+= Migration Guides
+
+As with every release you're recommended to do a visual regression testing for your application.
+
+Especially the following aspects have changed through the various different releases and would need your review and probably adaptions within your code base.
+
+== DB UI Core 0.17.0 Migration Guide
+
+=== db-breadcrumb
+
+**BREAKING CHANGE**: We needed to change the Breadcrumbs `aria-label` attribute to `arialabel` for compatibility reasons.
diff --git a/doc/migrationGuide.html b/doc/migrationGuide.html
diff --git a/packages/db-ui-elements-angular/README.md b/packages/db-ui-elements-angular/README.md
@@ -5,23 +5,6 @@
 [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://makeapullrequest.com)
 
-## FAQ
-
-### 
-
-- I'm facing problems like the following when using `@db-ui/ngx-elements` with Angular version 14:
-  ```
-  Interface 'HTMLDbBreadcrumbElement' cannot simultaneously extend types 'DbBreadcrumb' and 'HTMLStencilElement'.
-  Named property 'ariaLabel' of types 'DbBreadcrumb' and 'HTMLStencilElement' are not identical
-  ```
-
-  ![Bildschirmfoto 2022-09-15 um 10 31 21](https://user-images.githubusercontent.com/2963522/190355655-429251e6-0048-4c66-aebc-c6e45268768f.png)
-
-  The solution is to set the following option within the `CompileOptions` section within your `TsConfig`, until we provide a central solution:
-  ```JSON
-  "skipLibCheck": true
-  ```
-
 ## Deutsche Bahn brand
 
 As we'd like to perfectly support our users and customers on their digital journey, the usage of Deutsche Bahn brand and trademarks are bound of clear guidelines and restrictions even when being used with the code that we're provide with this product; Deutsche Bahn fully reserves all rights regarding the Deutsche Bahn brand, even though that we're providing the code of DB UI products free to use and release it under the Apache 2.0 license.

diff --git a/...ages/db-ui-elements-stencil/src/components/db-breadcrumb/__tests__/db-breadcrumb.spec.tsx b/...ages/db-ui-elements-stencil/src/components/db-breadcrumb/__tests__/db-breadcrumb.spec.tsx
@@ -21,15 +21,15 @@ describe('db-breadcrumb', () => {
     const page = await newSpecPage({
       components: [DbBreadcrumb],
       html: `
-        <db-breadcrumb aria-label='Aria-Breadcrumb'>
+        <db-breadcrumb arialabel='Aria-Breadcrumb'>
           <db-link href='http://db.test/link1'>Link 1</db-link>
           <db-link href='//db.test/link2'>Link 2</db-link>
           <db-link href='#link3' aria-current='location'>Link 3</db-link>
         </db-breadcrumb>
       `
     });
     expect(page.root).toEqualHtml(`
-      <db-breadcrumb aria-label='Aria-Breadcrumb' >
+      <db-breadcrumb arialabel='Aria-Breadcrumb' >
           <nav class='cmp-breadcrumb' aria-label='Aria-Breadcrumb'>
             <ol>
               <li><db-link href='http://db.test/link1'>Link 1</db-link></li>

diff --git a/packages/db-ui-elements-stencil/src/components/db-breadcrumb/db-breadcrumb.tsx b/packages/db-ui-elements-stencil/src/components/db-breadcrumb/db-breadcrumb.tsx
@@ -24,7 +24,7 @@ export class DbBreadcrumb {
   /**
    * an optional [`aria-label`-attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)
    */
-  @Prop({ reflect: true, attribute: 'aria-label' }) ariaLabel: string;
+  @Prop({ reflect: true }) arialabel: string;
   private compData: DbLinkType[];
 
   private hasItemsWrapper: boolean;
@@ -55,7 +55,7 @@ export class DbBreadcrumb {
 
   render() {
     return (
-      <nav class="cmp-breadcrumb" aria-label={this.ariaLabel}>
+      <nav class="cmp-breadcrumb" aria-label={this.arialabel}>
         {this.compData && <ol innerHTML={getCompDataHtml(this.compData)} />}
         {!this.compData && (
           <ol>

diff --git a/packages/db-ui-elements-stencil/src/components/db-breadcrumb/readme.md b/packages/db-ui-elements-stencil/src/components/db-breadcrumb/readme.md
@@ -7,10 +7,10 @@
 
 ## Properties
 
-| Property    | Attribute    | Description                                                                                                                 | Type     | Default     |
-| ----------- | ------------ | --------------------------------------------------------------------------------------------------------------------------- | -------- | ----------- |
-| `ariaLabel` | `aria-label` | an optional [`aria-label`-attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) | `string` | `undefined` |
-| `data`      | `data`       | The data attribute can be used to generate breadcrumb by data.                                                              | `string` | `undefined` |
+| Property    | Attribute   | Description                                                                                                                 | Type     | Default     |
+| ----------- | ----------- | --------------------------------------------------------------------------------------------------------------------------- | -------- | ----------- |
+| `arialabel` | `arialabel` | an optional [`aria-label`-attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) | `string` | `undefined` |
+| `data`      | `data`      | The data attribute can be used to generate breadcrumb by data.                                                              | `string` | `undefined` |
 
 
 ----------------------------------------------

diff --git a/showcase/angular-showcase/package-lock.json b/showcase/angular-showcase/package-lock.json