@bonniernews/dn-design-system-web 9.1.1 → 10.0.0-beta.1

package/CHANGELOG.md

@@ -4,6 +4,33 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [10.0.0-beta.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@9.1.1...@bonniernews/dn-design-system-web@10.0.0-beta.1) (2024-01-10)
+
+
+### ⚠ BREAKING CHANGES
+
+* **web:** refactor all buttons
+
+### Bug Fixes
+
+* **web:** refactor all buttons ([0c59e5c](https://github.com/BonnierNews/dn-design-system/commit/0c59e5c2cc10c25784338a5c39e8a464c180fdcf))
+
+
+### Maintenance
+
+* **web:** released version v10.0.0-beta.0 ([50a3e7e](https://github.com/BonnierNews/dn-design-system/commit/50a3e7e2cda4c8514348943ad08b0325a14f7b5f))
+
+## [10.0.0-beta.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@9.0.0...@bonniernews/dn-design-system-web@10.0.0-beta.0) (2024-01-04)
+
+
+### ⚠ BREAKING CHANGES
+
+* **web:** refactor all buttons
+
+### Bug Fixes
+
+* **web:** refactor all buttons ([7f89354](https://github.com/BonnierNews/dn-design-system/commit/7f893549c25b585bbd9de2f5fc95e33164b8bd75))
+
 ## [9.1.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@9.1.0...@bonniernews/dn-design-system-web@9.1.1) (2024-01-09)
 
 

package/components/blocked-content/blocked-content.js

@@ -15,7 +15,7 @@ function dsBlockedContent(params) {
           <h2 class="ds-blocked-content__title">Hoppsan, här saknas något</h2>
           <div class="ds-blocked-content__body">Innehållet ${ params.vendor ? `från ${params.vendor}` : '' } kunde inte visas på grund av dina val i cookie-inställningarna.</div>
         </div>
-        <button type="button" class="ds-btn ds-btn--secondaryFilled ds-btn--condensed ds-btn--small ds-btn--full-width">
+        <button type="button" class="ds-btn ds-btn--secondaryFilled ds-btn--small ds-btn--full-width">
           <div class="ds-btn__inner">
             <span>Integritetsinställningar</span>
             <div class="ds-spinner ds-spinner--small ds-spinner--primary">

package/components/blocked-content/blocked-content.njk

@@ -28,7 +28,6 @@
           classNames: '',
           fullWidth: true,
           forcePx: params.forcePx,
-          condensed: true,
           attributes: params.elementAttributes
         })}}
     </div>

package/components/buddy-menu/buddy-menu.scss

@@ -44,8 +44,8 @@
   }
   .ds-buddy-menu__close {
     position: absolute;
-    right: ds-spacing($ds-s-025);
-    top: ds-spacing($ds-s-025);
+    right: ds-spacing($ds-s-075);
+    top: ds-spacing($ds-s-075);
   }
   .ds-buddy-menu__greeting {
     @include ds-typography($ds-typography-functional-heading03bold);

package/components/button/README.md

@@ -16,7 +16,6 @@
 |size| String | no | default, small | default | |
 |fullWidth | bool | no | true, false | false | Button will be full width on both desktop and mobile |
 |mobile.fullWidth | bool | no | true, false | false | Ex mobile: { fullWidth: true } |
-|condensed | bool | no | true, false | false | Condensed reduces spacing to a bare minimum, use with care since this might make touch target area smaller than recommended size |
 |iconPosition | String | no | none, left, right | none | |
 |iconName | String | no | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons |
 |loading | bool | no | true, false | false | |

package/components/button/button.njk

@@ -12,11 +12,11 @@
   {%- set spinnerMap = { primary: "secondary", brand: "onBrand", business: "onBusiness", staticWhiteFilled: "staticBlack", staticWhiteOutlined: "staticWhite" } %}
   {%- set spinnerVariant = spinnerMap[buttonVariant] | default("primary") %}
   {%- set loadingHtml %}
-    {{ Spinner({ size: 'small', variant: spinnerVariant, forcePx: params.forcePx }) }}
+    {{ Spinner({ size: 'small', variant: spinnerVariant, forcePx: params.forcePx, attributes: { "aria-hidden": "true" } }) }}
   {% endset %}
 
   {%- if params.iconName and params.iconPosition and params.iconPosition != "none" %}
-    {% set iconSvg =  IconUse({ icon: params.iconName }) %}
+    {% set iconSvg =  IconUse({ icon: params.iconName, attributes: { "aria-hidden": "true" } }) %}
   {% endif %}
 
   {%- set classes = [
@@ -26,7 +26,6 @@
     classNamePrefix + params.size if params.size and params.size !== "default",
     classNamePrefix + "full-width" if params.fullWidth,
     classNamePrefix + "mobile-full-width" if params.mobile and params.mobile.fullWidth,
-    classNamePrefix + "condensed" if params.condensed,
     classNamePrefix + "icon-" + params.iconPosition if iconSvg,
     "ds-loading" if params.loading,
     "ds-force-px" if params.forcePx,
@@ -35,17 +34,13 @@
 
   {%- if params.href %}
     <a href="{{ params.href | default('#', true) }}" {{ ariaLabel | safe }} class="{{ classes }}" {{- attributes | safe}}>
-      <span class="{{ componentClassName + '__inner' }}" aria-hidden="true">
-        <span>{{ text }}</span>
-        {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
-      </span>
+      <span aria-hidden="true">{{ text }}</span>
+      {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
     </a>
   {% else %}
     <button type="{{ params.type | default('button') }}" {{ ariaLabel | safe }} class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe}}>
-      <span class="{{ componentClassName + '__inner' }}" aria-hidden="true">
-        <span>{{ text }}</span>
-        {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
-      </span>
+      <span aria-hidden="true">{{ text }}</span>
+      {{- iconSvg | safe if iconSvg -}} {{ loadingHtml | safe }}
     </button>
   {% endif %}
 {% endmacro %}

package/components/button/button.scss

@@ -4,34 +4,108 @@
 @use "../spinner/spinner.scss" as *;
 
 $ds-btn-outlined__border-width: ds-border-width(x1);
-$ds-btn__min-clickable-area: 48px;
 $ds-btn__icon-size: 24px;
 
 .ds-btn {
+  --ds-btn__background-color: transparent;
+  --ds-btn__background-color-hover: #{$ds-color-component-primary-overlay};
+  --ds-btn__background-color-active: #{$ds-color-component-primary-overlay-02};
+  --ds-btn__border-color: #{$ds-color-border-primary-03};
+  --ds-btn__outline-color: #{$ds-color-border-focus-02};
+  --ds-btn__color: #{$ds-color-text-primary};
+
+  &.ds-btn--primary {
+    --ds-btn__background-color: #{$ds-color-component-primary};
+    --ds-btn__background-color-hover: #{$ds-color-component-secondary-overlay};
+    --ds-btn__background-color-active: #{$ds-color-component-secondary-overlay-02};
+    --ds-btn__border-color: transparent;
+    --ds-btn__color: #{$ds-color-text-secondary};
+  }
+
+  &.ds-btn--brand {
+    --ds-btn__background-color: #{$ds-color-component-brand};
+    --ds-btn__border-color: transparent;
+    --ds-btn__color: #{$ds-color-text-on-brand};
+    --ds-btn__outline-color: #{$ds-color-border-focus};
+  }
+
+  &.ds-btn--business {
+    --ds-btn__background-color: #{$ds-color-component-business};
+    --ds-btn__border-color: transparent;
+    --ds-btn__color: #{$ds-color-text-on-business};
+    --ds-btn__outline-color: #{$ds-color-border-focus-04};
+  }
+
+  &.ds-btn--secondaryFilled {
+    --ds-btn__background-color: #{$ds-color-component-primary-overlay};
+    --ds-btn__border-color: transparent;
+  }
+
+  &.ds-btn--staticWhiteFilled {
+    --ds-btn__background-color: #{$ds-color-static-white};
+    --ds-btn__background-color-hover: #0808081a; // static version of lightmode component-secondary-overlay
+    --ds-btn__background-color-active: #08080833; // static version of lightmode component-secondary-overlay-2
+    --ds-btn__border-color: transparent;
+    --ds-btn__color: #{$ds-color-static-black};
+  }
+
+  &.ds-btn--staticWhiteOutlined {
+    // static version of darkmode component-secondary-overlay
+    --ds-btn__background-color-hover: rgba(255, 255, 255, 0.101960784);
+    // static version of darkmode component-secondary-overlay-2
+    --ds-btn__background-color-active: rgba(255, 255, 255, 0.2);
+    --ds-btn__border-color: #{$ds-color-static-white};
+    --ds-btn__color: #{$ds-color-static-white};
+    --ds-btn__outline-color: #{$ds-color-static-white};
+
+    &:not(:disabled) .ds-icon {
+      --ds-btn__color: #{$ds-color-static-white};
+    }
+  }
+
+  &.ds-btn--criticalOutlined {
+    --ds-btn__border-color: #{$ds-color-border-critical};
+    --ds-btn__color: #{$ds-color-text-critical};
+    --ds-btn__outline-color: #{$ds-color-border-focus-03};
+
+    &:not(:disabled) .ds-icon {
+      --ds-btn__color: #{$ds-color-icon-critical};
+    }
+  }
+
+  &.ds-btn--secondaryFilled,
+  &.ds-btn--secondaryOutlined,
+  &.ds-btn--criticalOutlined,
+  &.ds-btn--staticWhiteOutlined {
+    &:not(.ds-loading):disabled {
+      --ds-btn__background-color: #{$ds-color-component-primary-overlay};
+      --ds-btn__border-color: transparent;
+      --ds-btn__color: #{ds-color-text-disabled};
+      cursor: not-allowed;
+    }
+  }
+
+  @include ds-typography($ds-typography-detailstandard-button);
   cursor: pointer;
-  background-color: transparent;
-  border: none;
+  border: $ds-btn-outlined__border-width solid var(--ds-btn__border-color);
+  border-radius: ds-border-radius(x1);
+  padding: ds-spacing($ds-s-075, rem) - ds-px-to-rem($ds-btn-outlined__border-width) ds-spacing($ds-s-150, rem) - ds-px-to-rem(
+      $ds-btn-outlined__border-width
+    );
+  position: relative;
+  background-color: var(--ds-btn__background-color);
+  color: var(--ds-btn__color);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0;
-  position: relative;
 
   span {
     pointer-events: none;
   }
 
-  &:not(.ds-btn--condensed) {
-    min-width: $ds-btn__min-clickable-area;
-    min-height: $ds-btn__min-clickable-area;
-  }
-
   &:focus-visible {
-    outline: none;
-    .ds-btn__inner {
-      outline: ds-border-width(x2) solid;
-      outline-offset: 2px;
-    }
+    outline: ds-border-width(x2) solid var(--ds-btn__outline-color);
+    outline-offset: 2px;
   }
 
   @at-root a#{&} {
@@ -40,66 +114,61 @@ $ds-btn__icon-size: 24px;
     text-decoration: none;
   }
 
-  .ds-btn__inner {
-    @include ds-typography($ds-typography-detailstandard-button);
-    border: $ds-btn-outlined__border-width solid;
-    border-radius: ds-border-radius(x1);
-    padding: ds-spacing($ds-s-075, rem) - ds-px-to-rem($ds-btn-outlined__border-width) ds-spacing($ds-s-150, rem) - ds-px-to-rem(
-        $ds-btn-outlined__border-width
-      );
+  &::before {
+    content: "";
+    border-radius: inherit;
+    pointer-events: none;
+    position: absolute;
+    top: -$ds-btn-outlined__border-width;
+    left: -$ds-btn-outlined__border-width;
+    bottom: -$ds-btn-outlined__border-width;
+    right: -$ds-btn-outlined__border-width;
+    background-color: transparent;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    min-width: $ds-btn__min-clickable-area;
+    min-height: $ds-btn__min-clickable-area;
+    width: 100%;
+  }
+
+  span,
+  i {
     position: relative;
-    &::before {
-      content: "";
-      border-radius: inherit;
-      pointer-events: none;
-      position: absolute;
-      top: -$ds-btn-outlined__border-width;
-      left: -$ds-btn-outlined__border-width;
-      bottom: -$ds-btn-outlined__border-width;
-      right: -$ds-btn-outlined__border-width;
-    }
-    span,
-    i {
-      position: relative;
-    }
   }
 
   @include ds-hover() {
-    &:hover:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
-      background-color: $ds-color-component-primary-overlay;
+    &:hover:not(:disabled):not(.ds-loading)::before {
+      background: var(--ds-btn__background-color-hover);
     }
   }
-  &:active:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
-    background-color: $ds-color-component-primary-overlay-02;
+  &:active:not(:disabled):not(.ds-loading)::before {
+    background: var(--ds-btn__background-color-active);
   }
 
   @include ds-loading();
 }
 
 .ds-btn--full-width {
-  &,
-  & .ds-btn__inner {
-    width: 100%;
-    box-sizing: border-box;
-  }
+  width: 100%;
+  box-sizing: border-box;
 }
 
-.ds-btn--small .ds-btn__inner {
+.ds-btn--small {
   padding: ds-px-to-rem(ds-spacing($ds-s-050) - $ds-btn-outlined__border-width)
     ds-px-to-rem(ds-spacing($ds-s-125) - $ds-btn-outlined__border-width);
 }
 
 @include ds-mq-only-breakpoint(mobile) {
   .ds-btn--mobile-full-width {
-    &,
-    & .ds-btn__inner {
-      width: 100%;
-    }
+    width: 100%;
   }
 }
 
-.ds-btn--icon-left .ds-btn__inner,
-.ds-btn--icon-right .ds-btn__inner {
+.ds-btn--icon-left,
+.ds-btn--icon-right {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -115,206 +184,62 @@ $ds-btn__icon-size: 24px;
 }
 
 .ds-btn--icon-right {
-  .ds-btn__inner {
-    padding-right: ds-px-to-rem(ds-spacing($ds-s-125) - $ds-btn-outlined__border-width);
-  }
-  &.ds-btn--small .ds-btn__inner {
+  padding-right: ds-px-to-rem(ds-spacing($ds-s-125) - $ds-btn-outlined__border-width);
+  &.ds-btn--small {
     padding-right: ds-px-to-rem(ds-spacing($ds-s-100) - $ds-btn-outlined__border-width);
   }
 }
 
 .ds-btn--icon-left {
-  .ds-btn__inner {
-    flex-direction: row-reverse;
-    padding-left: ds-px-to-rem(ds-spacing($ds-s-125) - $ds-btn-outlined__border-width);
-    .ds-icon {
-      margin: ds-spacing(0 $ds-s-050 0 0, rem);
-    }
+  flex-direction: row-reverse;
+  padding-left: ds-px-to-rem(ds-spacing($ds-s-125) - $ds-btn-outlined__border-width);
+  .ds-icon {
+    margin: ds-spacing(0 $ds-s-050 0 0, rem);
   }
-  &.ds-btn--small .ds-btn__inner {
+  &.ds-btn--small {
     padding-left: ds-px-to-rem(ds-spacing($ds-s-100) - $ds-btn-outlined__border-width);
   }
 }
 
-.ds-btn--brand {
-  .ds-btn__inner {
-    border-color: transparent;
-    background-color: $ds-color-component-brand;
-    color: $ds-color-text-on-brand;
-  }
-  &:focus-visible .ds-btn__inner {
-    outline-color: $ds-color-border-focus;
-  }
-}
-
-.ds-btn--business {
-  .ds-btn__inner {
-    background-color: $ds-color-component-business;
-    border-color: transparent;
-    color: $ds-color-text-on-business;
-  }
-  &:focus-visible .ds-btn__inner {
-    outline-color: $ds-color-border-focus-04;
-  }
-}
-
-.ds-btn--primary {
-  .ds-btn__inner {
-    border-color: transparent;
-    background-color: $ds-color-component-primary;
-    color: $ds-color-text-secondary;
-  }
-  &:focus-visible .ds-btn__inner {
-    outline-color: $ds-color-border-focus-02;
-  }
-  @include ds-hover() {
-    &:hover:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
-      background-color: $ds-color-component-secondary-overlay;
-    }
-  }
-  &:active:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
-    background-color: $ds-color-component-secondary-overlay-02;
-  }
-}
-
-.ds-btn--secondaryOutlined {
-  .ds-btn__inner {
-    background-color: transparent;
-    border-color: $ds-color-border-primary-03;
-    color: $ds-color-text-primary;
-  }
-  &:focus-visible .ds-btn__inner {
-    outline-color: $ds-color-border-focus-02;
-  }
-}
-
-.ds-btn--secondaryFilled {
-  .ds-btn__inner {
-    border-color: transparent;
-    background-color: $ds-color-component-primary-overlay;
-    color: $ds-color-text-primary;
-  }
-  &:focus-visible .ds-btn__inner {
-    outline-color: $ds-color-border-focus-02;
-  }
-}
-
-.ds-btn--criticalOutlined {
-  .ds-btn__inner {
-    background-color: transparent;
-    border-color: $ds-color-border-critical;
-    color: $ds-color-text-critical;
-  }
-  &:not(:disabled) .ds-icon {
-    color: $ds-color-icon-critical;
-  }
-  &:focus-visible .ds-btn__inner {
-    outline-color: $ds-color-border-focus-03;
-  }
-}
-
-.ds-btn--staticWhiteFilled {
-  .ds-btn__inner {
-    border-color: transparent;
-    background-color: $ds-color-static-white;
-    color: $ds-color-static-black;
-  }
-  &:focus-visible .ds-btn__inner {
-    outline-color: $ds-color-border-focus-02;
-  }
-  @include ds-hover() {
-    &:hover:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
-      background-color: #0808081a; // static version of lightmode component-secondary-overlay
-    }
-  }
-  &:active:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
-    background-color: #08080833; // static version of lightmode component-secondary-overlay-2
-  }
-}
-
-.ds-btn--staticWhiteOutlined {
-  .ds-btn__inner {
-    background-color: transparent;
-    border-color: $ds-color-static-white;
-    color: $ds-color-static-white;
-  }
-  &:not(:disabled) .ds-icon {
-    color: $ds-color-static-white;
-  }
-  &:focus-visible .ds-btn__inner {
-    outline-color: $ds-color-static-white;
-  }
-  @include ds-hover() {
-    &:hover:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
-      background-color: rgba(255, 255, 255, 0.101960784);
-      // static version of darkmode component-secondary-overlay
-    }
-  }
-  &:active:not(:disabled):not(.ds-loading) .ds-btn__inner::before {
-    background-color: rgba(255, 255, 255, 0.2);
-    // static version of darkmode component-secondary-overlay-2
-  }
-}
-
-.ds-btn--secondaryFilled,
-.ds-btn--secondaryOutlined,
-.ds-btn--criticalOutlined,
-.ds-btn--staticWhiteOutlined {
-  &:not(.ds-loading):disabled .ds-btn__inner {
-    cursor: not-allowed;
-    background-color: $ds-color-component-primary-overlay;
-    border-color: transparent;
-    color: $ds-color-text-disabled;
-    &::before {
-      background-color: unset;
-    }
-  }
-}
-
 .ds-btn--brand,
 .ds-btn--business,
 .ds-btn--primary,
 .ds-btn--staticWhiteFilled {
   &:not(.ds-loading):disabled {
     opacity: $ds-opacity-component-disabled;
-    .ds-btn__inner {
-      cursor: not-allowed;
-    }
+    cursor: not-allowed;
   }
 }
 
 .ds-btn.ds-force-px {
-  .ds-btn__inner {
-    /* stylelint-disable-next-line */
-    padding: ds-spacing($ds-s-075) - $ds-btn-outlined__border-width ds-spacing($ds-s-150) -
-      $ds-btn-outlined__border-width;
-    @include ds-typography($ds-typography-detailstandard-button, true);
-  }
-  &.ds-btn--icon-left .ds-btn__inner,
-  &.ds-btn--icon-right .ds-btn__inner {
+  /* stylelint-disable-next-line */
+  padding: ds-spacing($ds-s-075) - $ds-btn-outlined__border-width ds-spacing($ds-s-150) -
+  $ds-btn-outlined__border-width;
+  @include ds-typography($ds-typography-detailstandard-button, true);
+
+  &.ds-btn--icon-left,
+  &.ds-btn--icon-right {
     .ds-icon {
       margin: ds-spacing(0 0 0 $ds-s-050);
       height: $ds-btn__icon-size;
       width: $ds-btn__icon-size;
     }
   }
-  &.ds-btn--icon-right .ds-btn__inner {
+  &.ds-btn--icon-right {
     padding-right: ds-spacing($ds-s-125)-$ds-btn-outlined__border-width;
   }
-  &.ds-btn--icon-left .ds-btn__inner {
+  &.ds-btn--icon-left {
     padding-left: ds-spacing($ds-s-125)-$ds-btn-outlined__border-width;
     .ds-icon {
       margin: ds-spacing(0 $ds-s-050 0 0);
     }
   }
   &.ds-btn--small {
-    .ds-btn__inner {
-      padding: ds-spacing($ds-s-050)-$ds-btn-outlined__border-width ds-spacing($ds-s-125)-$ds-btn-outlined__border-width;
-    }
-    &.ds-btn--icon-right .ds-btn__inner {
+    padding: ds-spacing($ds-s-050)-$ds-btn-outlined__border-width ds-spacing($ds-s-125)-$ds-btn-outlined__border-width;
+    &.ds-btn--icon-right {
       padding-right: ds-spacing($ds-s-100)-$ds-btn-outlined__border-width;
     }
-    &.ds-btn--icon-left .ds-btn__inner {
+    &.ds-btn--icon-left {
       padding-left: ds-spacing($ds-s-100)-$ds-btn-outlined__border-width;
     }
   }

package/components/button-toggle/README.md

@@ -17,7 +17,6 @@
 |variant | String | no | brand, SecondaryFilled | brand | Design variant |
 |size| String | no | default, small, xsmall | default | |
 |fullWidth | bool | no | true, false | false | Button will be full width on both desktop and mobile |
-|condensed | bool | no | true, false | false | Condensed reduces spacing to a bare minimum, use with care since this might make touch target area smaller than recommended size |
 |mobile.fullWidth | bool | no | true, false | false | Ex mobile: { fullWidth: true } |
 |loading | bool | no | true, false | false | |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |

package/components/button-toggle/button-toggle.njk

@@ -14,7 +14,7 @@
   {%- set spinnerSize = "xsmall" if params.size == "xsmall" else "small" %}
 
   {%- set loadingHtml %}
-    {{ Spinner({ size: spinnerSize, variant: spinnerVariant, forcePx: params.forcePx }) }}
+    {{ Spinner({ size: spinnerSize, variant: spinnerVariant, forcePx: params.forcePx, attributes: { "aria-hidden": "true" } }) }}
   {% endset %}
 
   {%- set classes = [
@@ -24,19 +24,16 @@
     classNamePrefix + params.size if params.size and params.size !== "default",
     classNamePrefix + "full-width" if params.fullWidth,
     classNamePrefix + "mobile-full-width" if params.mobile and params.mobile.fullWidth,
-    classNamePrefix + "condensed" if params.condensed,
     "ds-loading" if params.loading,
     "ds-force-px" if params.forcePx,
     params.classNames if params.classNames
   ] | join(" ") %}
 
   <button type="button" role="switch" {{ ariaLabel | safe }} aria-checked="{{ "true" if params.selected else "false" }}" class="{{ classes }}" {{ "disabled" if params.disabled }} {{- attributes | safe }}>
-    <span class="{{ componentClassName + '__inner' }}" aria-hidden="true">
-      <span class="{{ componentClassName + '__off' }}"><span>{{ params.text }}</span></span>
-      <span class="{{ componentClassName + '__on' }}">
-        {{ IconUse({ icon: "check" }) }} <span>{{ params.selectedText }}</span>
-      </span>
-      {{ loadingHtml | safe }}
+    <span class="{{ componentClassName + '__off' }}" aria-hidden="true"><span>{{ params.text }}</span></span>
+    <span class="{{ componentClassName + '__on' }}" aria-hidden="true">
+      {{ IconUse({ icon: "check" }) }} <span>{{ params.selectedText }}</span>
     </span>
+    {{ loadingHtml | safe }}
   </button>
 {% endmacro %}