fix(sbb-icon): change sanitize prop to no-sanitize (#2197)

BREAKING CHANGE: sbb-icon: Invert property default behavior from sanitize = true to noSanitize = false.
sbb-design-systems · Nov 21, 2023 · 6e8c660 · 6e8c660
1 parent 562f39c
commit 6e8c660
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
@@ -32,12 +32,12 @@ export class SbbIcon extends LitElement {
   @property({ reflect: true }) public name: string;
 
   /**
-   * When set to `false`, SVG content that is HTTP fetched will not be checked
+   * When set to `true`, SVG content that is HTTP fetched will not be checked
    * if the response SVG content has any `<script>` elements, or any attributes
    * that start with `on`, such as `onclick`.
-   * @default true
+   * @default false
    */
-  @property({ type: Boolean }) public sanitize = true;
+  @property({ attribute: 'no-sanitize', type: Boolean }) public noSanitize = false;
 
   /**
    * The aria-hidden property is set to "true" by default, since an icon alone
@@ -92,7 +92,7 @@ export class SbbIcon extends LitElement {
     }
 
     this._svgFetchInProgress = true;
-    this._svgIcon = await getSvgContent(this._svgNamespace, this._svgName, this.sanitize);
+    this._svgIcon = await getSvgContent(this._svgNamespace, this._svgName, !this.noSanitize);
     this._svgFetchInProgress = false;
   }
 

diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md
@@ -34,6 +34,6 @@ In thinking about accessibility, it is useful to place icon use into one of thre
 | Name         | Attribute     | Privacy | Type      | Default  | Description                                                                                                                                                                                                   |
 | ------------ | ------------- | ------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `name`       | `name`        | public  | `string`  |          | The provided name consisting of the namespace and the name of the icon. If the namespace is missing, the default namespace "sbb" will be used. E.g. `name` (will use "sbb" as namespace) or `namespace:name`. |
-| `sanitize`   | `sanitize`    | public  | `boolean` | `true`   | When set to `false`, SVG content that is HTTP fetched will not be checked if the response SVG content has any `<script>` elements, or any attributes that start with `on`, such as `onclick`.                 |
+| `noSanitize` | `no-sanitize` | public  | `boolean` | `false`  | When set to `true`, SVG content that is HTTP fetched will not be checked if the response SVG content has any `<script>` elements, or any attributes that start with `on`, such as `onclick`.                  |
 | `ariaHidden` | `aria-hidden` | public  | `string`  | `'true'` | The aria-hidden property is set to "true" by default, since an icon alone does not convey any useful information for a screen-reader user.                                                                    |
 | `ariaLabel`  | `aria-label`  | public  | `string`  |          | Only set the aria-label if aria-hidden is set to "false".                                                                                                                                                     |