@scania/tegel 0.0.1-beta.7 → 0.0.2

package/dist/collection/components/button/button-native.stories.js

@@ -0,0 +1,187 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import { iconsNames } from '../icon/iconsArray';
+export default {
+  title: 'Components/Button',
+  parameters: {
+    layout: 'padded',
+    chromatic: {
+      disableSnapshot: false, // enables snapshotting for the component
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    text: {
+      name: 'Text',
+      description: 'The text to be displayed on the button',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'onlyIcon', truthy: false },
+    },
+    btnType: {
+      name: 'Type',
+      description: 'Four different button types to help the user to distinguish the level of importance of the task they represent',
+      control: {
+        type: 'radio',
+      },
+      options: ['Primary', 'Secondary', 'Ghost', 'Danger'],
+      table: {
+        defaultValue: { summary: 'primary' },
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Size of the button',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Medium', 'Small', 'Extra small'],
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+    },
+    modeVariant: {
+      name: 'Mode variant',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      description: 'Button mode variant.',
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    fullbleed: {
+      name: 'Fullbleed',
+      defaultValue: false,
+      description: 'Fluid width in certain components-old',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+      if: { arg: 'onlyIcon', eq: false },
+    },
+    disabled: {
+      name: 'Disabled',
+      type: 'boolean',
+      description: 'Choose to disable the button',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    onlyIcon: {
+      name: 'Only Icon',
+      description: 'Displays only the icon and excludes any text from the button',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+      if: { arg: 'size', neq: 'Extra small' },
+    },
+    icon: {
+      name: 'Icon',
+      description: 'Icon to display on the button. Choose "none" to exclude the icon.',
+      control: {
+        type: 'select',
+      },
+      options: ['none', ...iconsNames],
+      if: { arg: 'size', neq: 'Extra small' },
+    },
+    iconType: {
+      name: 'Icon type',
+      description: 'Native/Web Component',
+      control: {
+        type: 'radio',
+      },
+      options: ['Native', 'Web Component'],
+      if: { arg: 'size', neq: 'Extra small' },
+    },
+  },
+  args: {
+    text: 'Button',
+    btnType: 'Primary',
+    size: 'Large',
+    modeVariant: 'Primary',
+    fullbleed: false,
+    disabled: false,
+    onlyIcon: false,
+    icon: 'none',
+    iconType: 'Native',
+  },
+};
+const NativeTemplate = ({ size, modeVariant, btnType, fullbleed, text = 'Button', disabled = '', onlyIcon, icon, iconType, }) => {
+  const fbClass = fullbleed ? 'sdds-btn-fullbleed' : '';
+  const onlyIconCss = onlyIcon ? 'sdds-btn-icon' : '';
+  const btnTypeLookUp = {
+    Primary: 'primary',
+    Secondary: 'secondary',
+    Ghost: 'ghost',
+    Danger: 'danger',
+  };
+  const sizeLookUp = {
+    'Large': 'lg',
+    'Medium': 'md',
+    'Small': 'sm',
+    'Extra small': 'xs',
+  };
+  const modeVariantLookup = {
+    Primary: 'primary',
+    Secondary: 'secondary',
+  };
+  return formatHtmlPreview(`
+  <style>
+  /* demo-wrapper is for demonstration purposes only*/
+    ${icon && iconType === 'Native'
+    ? `@import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');
+    i.sdds-btn-icon{
+      font-size: ${size === 'Small' ? '16' : '20'}px;
+    }`
+    : ''} .demo-wrapper{
+      width: 100%;
+    }
+  </style>
+
+  <div class="demo-wrapper">
+<button class="sdds-btn sdds-btn-${btnTypeLookUp[btnType]} ${modeVariant !== 'Inherit from parent'
+    ? `sdds-mode-variant-${modeVariantLookup[modeVariant]}`
+    : ''} sdds-btn-${sizeLookUp[size]} ${fbClass} ${disabled ? 'disabled' : ''} ${onlyIconCss} 
+   ${onlyIcon ? 'sdds-btn-only-icon' : ''}">
+  ${!onlyIcon ? `<span class="sdds-btn-text">${text}</span>` : ''}
+  ${onlyIcon || (icon && icon !== 'none')
+    ? `
+    ${iconType === 'Native'
+      ? `<i class="sdds-btn-icon sdds-icon ${icon}"></i>`
+      : `<sdds-icon class='sdds-btn-icon ' size='${sizeLookUp[size] === 'sm' ? '16px' : '20px'}' name='${icon}'></sdds-icon>`}
+  `
+    : ''}
+</button>
+  </div>
+  `);
+};
+export const Native = NativeTemplate.bind({});
+Native.args = {};
+export const NativeWithIcon = NativeTemplate.bind({});
+NativeWithIcon.args = {
+  icon: 'truck',
+};
+export const NativeOnlyIcon = NativeTemplate.bind({});
+NativeOnlyIcon.args = {
+  text: '',
+  onlyIcon: true,
+  icon: 'truck',
+};

package/dist/collection/components/button/button-webcomponent.stories.js

@@ -0,0 +1,189 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import { iconsNames } from '../icon/iconsArray';
+import readme from './readme.md';
+export default {
+  title: 'Components/Button',
+  parameters: {
+    notes: readme,
+    layout: 'padded',
+    chromatic: {
+      disableSnapshot: false, // enables snapshotting for the component
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    text: {
+      name: 'Text',
+      description: 'The text to be displayed on the button',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'onlyIcon', truthy: false },
+    },
+    btnType: {
+      name: 'Type',
+      description: 'Four different button types to help the user to distinguish the level of importance of the task they represent',
+      control: {
+        type: 'radio',
+      },
+      options: ['Primary', 'Secondary', 'Ghost', 'Danger'],
+      table: {
+        defaultValue: { summary: 'primary' },
+      },
+    },
+    size: {
+      name: 'Size',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Medium', 'Small', 'Extra small'],
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+      description: 'Size of the button',
+    },
+    modeVariant: {
+      name: 'Mode variant',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      description: 'Button mode variant.',
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    fullbleed: {
+      name: 'Fullbleed',
+      type: 'boolean',
+      description: 'Fluid width in certain components-old',
+      table: {
+        defaultValue: { summary: false },
+      },
+      if: { arg: 'onlyIcon', truthy: false },
+    },
+    disabled: {
+      name: 'Disabled',
+      type: 'boolean',
+      description: 'Choose to disable the button',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    onlyIcon: {
+      name: 'Only Icon',
+      description: 'Displays only the icon and excludes any text from the button',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+      if: { arg: 'size', neq: 'Extra small' },
+    },
+    icon: {
+      name: 'Icon',
+      description: 'Icon to display on the button. Choose "none" to exclude the icon.',
+      control: {
+        type: 'select',
+      },
+      options: ['none', ...iconsNames],
+      if: { arg: 'size', neq: 'Extra small' },
+    },
+    iconType: {
+      name: 'Icon type',
+      description: 'Native/Web Component',
+      control: {
+        type: 'radio',
+      },
+      options: ['Native', 'Web Component'],
+      if: { arg: 'size', neq: 'Extra small' },
+    },
+  },
+  args: {
+    text: 'Button',
+    btnType: 'Primary',
+    size: 'Large',
+    modeVariant: 'Primary',
+    fullbleed: false,
+    disabled: false,
+    onlyIcon: false,
+    icon: 'none',
+    iconType: 'Web Component',
+  },
+};
+const WebComponentTemplate = ({ onlyIcon, size, modeVariant, btnType, fullbleed, disabled, icon, iconType, text = 'Button', }) => {
+  const btnTypeLookUp = {
+    Primary: 'primary',
+    Secondary: 'secondary',
+    Ghost: 'ghost',
+    Danger: 'danger',
+  };
+  const sizeLookUp = {
+    'Large': 'lg',
+    'Medium': 'md',
+    'Small': 'sm',
+    'Extra small': 'xs',
+  };
+  const modeVariantLookup = {
+    Primary: 'primary',
+    Secondary: 'secondary',
+  };
+  return formatHtmlPreview(`
+    <style>
+    /* demo-wrapper is for demonstration purposes only*/${icon && iconType === 'Native'
+    ? `@import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');
+    i.sdds-icon::before{
+      font-size: ${size === 'Large' || size === 'Medium' ? '20' : '16'}px;
+    }`
+    : ''},
+    .demo-wrapper{
+      width: 100%;
+    }
+  </style>
+
+  <div class="demo-wrapper">
+  <sdds-button type="${btnTypeLookUp[btnType]}" size="${sizeLookUp[size]}" ${disabled ? 'disabled' : ''} ${fullbleed ? 'fullbleed' : ''}
+    ${!onlyIcon ? `text="${text}"` : ''}
+    text="${onlyIcon ? '' : text}" 
+    ${modeVariant !== 'Inherit from parent'
+    ? `mode-variant="${modeVariantLookup[modeVariant]}"`
+    : ''}
+    >
+    ${onlyIcon || (icon && icon !== 'none')
+    ? `
+    ${iconType === 'Native'
+      ? `<i class="sdds-btn-icon sdds-icon ${icon}" slot="icon"></i>`
+      : `<sdds-icon slot="icon" class='sdds-btn-icon ' size='${sizeLookUp[size] === 'sm' ? '16px' : '20px'}' name='${icon}'></sdds-icon>`}
+  `
+    : ''}
+</sdds-button>
+  </div>
+  `);
+};
+/** Button as web component */
+export const WebComponent = WebComponentTemplate.bind({});
+WebComponent.args = {};
+export const WebComponentWithIcon = WebComponentTemplate.bind({});
+WebComponentWithIcon.args = {
+  icon: 'truck',
+  iconType: 'Web Component',
+};
+export const WebComponentOnlyIcon = WebComponentTemplate.bind({});
+WebComponentOnlyIcon.args = {
+  text: '',
+  iconType: 'Web Component',
+  onlyIcon: true,
+  icon: 'truck',
+};

package/dist/collection/components/button/button.css

@@ -1,6 +1,5 @@
 :root,
-html,
-.sdds-theme-light {
+.sdds-mode-light {
   --sdds-btn-primary-background: var(--sdds-blue-600);
   --sdds-btn-primary-color: var(--sdds-white);
   --sdds-btn-primary-border-color: transparent;
@@ -14,14 +13,14 @@ html,
   --sdds-btn-primary-color-focus: var(--sdds-white);
   --sdds-btn-primary-border-color-focus: var(--sdds-blue-600);
   --sdds-btn-primary-outline-color-focus: var(--sdds-blue-600);
-  --sdds-btn-primary-background-disabled: var(--sdds-white);
+  --sdds-btn-primary-background-disabled-primary: var(--sdds-grey-50);
+  --sdds-btn-primary-background-disabled-secondary: var(--sdds-white);
+  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-disabled-primary);
   --sdds-btn-primary-color-disabled: var(--sdds-grey-400);
   --sdds-btn-primary-border-color-disabled: transparent;
   /* ICON */
   --sdds-btn-icon-primary-fill: var(--sdds-grey-50);
   --sdds-btn-icon-primary-color: var(--sdds-grey-50);
-  --sdds-btn-primary-on-white-background-disabled: var(--sdds-grey-50);
-  --sdds-btn-danger-on-white-background-disabled: var(--sdds-grey-50);
   --sdds-btn-secondary-background: transparent;
   --sdds-btn-secondary-color: var(--sdds-black);
   --sdds-btn-secondary-border-color: rgb(0 0 0 / 38%);
@@ -67,10 +66,10 @@ html,
   /* ICON */
   --sdds-btn-icon-ghost-fill: var(--sdds-black);
   --sdds-btn-icon-ghost-color: var(--sdds-black);
-  --sdds-btn-danger-background: var(--sdds-red-600);
+  --sdds-btn-danger-background: var(--sdds-negative);
   --sdds-btn-danger-color: var(--sdds-white);
   --sdds-btn-danger-border-color: transparent;
-  --sdds-btn-danger-background-hover: var(--sdds-red-500);
+  --sdds-btn-danger-background-hover: var(--sdds-red-600);
   --sdds-btn-danger-color-hover: var(--sdds-white);
   --sdds-btn-danger-border-color-hover: transparent;
   --sdds-btn-danger-background-active: var(--sdds-red-700);
@@ -78,39 +77,42 @@ html,
   --sdds-btn-danger-border-color-active: transparent;
   --sdds-btn-danger-background-focus: var(--sdds-red-400);
   --sdds-btn-danger-color-focus: var(--sdds-white);
-  --sdds-btn-danger-border-color-focus: var(--sdds-red-700);
+  --sdds-btn-danger-border-color-focus: var(--sdds-red-400);
   --sdds-btn-danger-outline-color-focus: var(--sdds-red-700);
-  --sdds-btn-danger-background-disabled: var(--sdds-white);
+  --sdds-btn-danger-background-disabled-primary: var(--sdds-grey-50);
+  --sdds-btn-danger-background-disabled-secondary: var(--sdds-white);
+  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-disabled-primary);
   --sdds-btn-danger-color-disabled: rgb(0 0 0 / 38%);
   --sdds-btn-danger-border-color-disabled: transparent;
   /* ICON */
   --sdds-btn-icon-danger-fill: var(--sdds-white);
   --sdds-btn-icon-danger-color: var(--sdds-white);
 }
-:root .sdds-theme-dark,
-html .sdds-theme-dark,
-.sdds-theme-light .sdds-theme-dark {
-  --sdds-btn-primary-background: var(--sdds-blue-600);
-  --sdds-btn-primary-color: var(--sdds-white);
-  --sdds-btn-primary-border-color: transparent;
+:root .sdds-mode-variant-primary,
+.sdds-mode-light .sdds-mode-variant-primary {
+  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-disabled-primary);
+  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-disabled-primary);
+}
+:root .sdds-mode-variant-secondary,
+.sdds-mode-light .sdds-mode-variant-secondary {
+  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-disabled-secondary);
+  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-disabled-secondary);
+}
+
+.sdds-mode-dark {
+  --sdds-btn-primary-background: var(--sdds-blue-400);
   --sdds-btn-primary-background-hover: var(--sdds-blue-500);
-  --sdds-btn-primary-color-hover: var(--sdds-white);
-  --sdds-btn-primary-border-color-hover: transparent;
-  --sdds-btn-primary-background-active: var(--sdds-blue-700);
-  --sdds-btn-primary-color-active: var(--sdds-white);
-  --sdds-btn-primary-border-color-active: transparent;
-  --sdds-btn-primary-background-focus: var(--sdds-blue-400);
-  --sdds-btn-primary-color-focus: var(--sdds-white);
-  --sdds-btn-primary-border-color-focus: var(--sdds-blue-600);
-  --sdds-btn-primary-outline-color-focus: var(--sdds-blue-600);
-  --sdds-btn-primary-background-disabled: var(--sdds-white);
-  --sdds-btn-primary-color-disabled: var(--sdds-grey-400);
-  --sdds-btn-primary-border-color-disabled: transparent;
+  --sdds-btn-primary-background-active: var(--sdds-blue-300);
+  --sdds-btn-primary-background-focus: var(--sdds-blue-600);
+  --sdds-btn-primary-border-color-focus: var(--sdds-blue-400);
+  --sdds-btn-primary-outline-color-focus: var(--sdds-blue-400);
+  --sdds-btn-primary-background-disabled-primary: var(--sdds-grey-900);
+  --sdds-btn-primary-background-disabled-secondary: var(--sdds-grey-868);
+  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-disabled-primary);
+  --sdds-btn-primary-color-disabled: var(--sdds-grey-600);
   /* ICON */
   --sdds-btn-icon-primary-fill: var(--sdds-grey-50);
   --sdds-btn-icon-primary-color: var(--sdds-grey-50);
-  --sdds-btn-primary-on-white-background-disabled: var(--sdds-grey-50);
-  --sdds-btn-danger-on-white-background-disabled: var(--sdds-grey-50);
   --sdds-btn-secondary-background: transparent;
   --sdds-btn-secondary-color: var(--sdds-white);
   --sdds-btn-secondary-border-color: var(--sdds-white);
@@ -129,8 +131,8 @@ html .sdds-theme-dark,
   --sdds-btn-secondary-color-disabled: rgb(255 255 255 / 38%);
   --sdds-btn-secondary-border-color-disabled: rgb(255 255 255 / 38%);
   /* ICON */
-  --sdds-btn-icon-secondary-fill: var(--sdds-black);
-  --sdds-btn-icon-secondary-color: var(--sdds-black);
+  --sdds-btn-icon-secondary-fill: var(--sdds-grey-50);
+  --sdds-btn-icon-secondary-color: var(--sdds-grey-50);
   --sdds-btn-ghost-background: transparent;
   --sdds-btn-ghost-color: var(--sdds-white);
   --sdds-btn-ghost-border-color: transparent;
@@ -149,12 +151,12 @@ html .sdds-theme-dark,
   --sdds-btn-ghost-color-disabled: rgb(255 255 255/ 38%);
   --sdds-btn-ghost-border-color-disabled: transparent;
   /* ICON */
-  --sdds-btn-icon-ghost-fill: var(--sdds-black);
-  --sdds-btn-icon-ghost-color: var(--sdds-black);
-  --sdds-btn-danger-background: var(--sdds-red-600);
+  --sdds-btn-icon-ghost-fill: var(--sdds-grey-50);
+  --sdds-btn-icon-ghost-color: var(--sdds-grey-50);
+  --sdds-btn-danger-background: var(--sdds-negative);
   --sdds-btn-danger-color: var(--sdds-white);
   --sdds-btn-danger-border-color: transparent;
-  --sdds-btn-danger-background-hover: var(--sdds-red-500);
+  --sdds-btn-danger-background-hover: var(--sdds-red-600);
   --sdds-btn-danger-color-hover: var(--sdds-white);
   --sdds-btn-danger-border-color-hover: transparent;
   --sdds-btn-danger-background-active: var(--sdds-red-700);
@@ -162,19 +164,29 @@ html .sdds-theme-dark,
   --sdds-btn-danger-border-color-active: transparent;
   --sdds-btn-danger-background-focus: var(--sdds-red-400);
   --sdds-btn-danger-color-focus: var(--sdds-white);
-  --sdds-btn-danger-border-color-focus: var(--sdds-red-700);
+  --sdds-btn-danger-border-color-focus: var(--sdds-red-400);
   --sdds-btn-danger-outline-color-focus: var(--sdds-red-700);
-  --sdds-btn-danger-background-disabled: var(--sdds-grey-868);
+  --sdds-btn-danger-background-disabled-primary: var(--sdds-grey-900);
+  --sdds-btn-danger-background-disabled-secondary: var(--sdds-grey-868);
+  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-disabled-primary);
   --sdds-btn-danger-color-disabled: rgb(255 255 255 / 38%);
   --sdds-btn-danger-border-color-disabled: transparent;
   /* ICON */
-  --sdds-btn-icon-danger-fill: var(--sdds-black);
-  --sdds-btn-icon-danger-color: var(--sdds-black);
+  --sdds-btn-icon-danger-fill: var(--sdds-white);
+  --sdds-btn-icon-danger-color: var(--sdds-white);
+}
+.sdds-mode-dark .sdds-mode-variant-primary {
+  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-disabled-primary);
+  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-disabled-primary);
+}
+.sdds-mode-dark .sdds-mode-variant-secondary {
+  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-disabled-secondary);
+  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-disabled-secondary);
 }
 
 .sdds-on-white-bg {
-  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-on-white-background-disabled);
-  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-on-white-background-disabled);
+  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-secondary-disabled);
+  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-secondary-disabled);
 }
 
 .sdds-btn-lg:not(.sdds-btn-only-icon) i.sdds-btn-icon {
@@ -618,41 +630,41 @@ i.sdds-btn-icon[slot=icon] {
   justify-content: center;
 }
 
-:host(sdds-button[onlyIcon]) .sdds-btn-sm {
+:host(sdds-button[only-icon]) .sdds-btn-sm {
   padding: 11px;
 }
-:host(sdds-button[onlyIcon]) .sdds-btn-md {
+:host(sdds-button[only-icon]) .sdds-btn-md {
   padding: 13px;
 }
-:host(sdds-button[onlyIcon]) .sdds-btn-lg {
+:host(sdds-button[only-icon]) .sdds-btn-lg {
   padding: 17px;
 }
 
-:host(sdds-button:not([onlyIcon])) {
+:host(sdds-button:not([only-icon])) {
   display: flex;
   align-items: center;
 }
-:host(sdds-button:not([onlyIcon])) .sdds-btn-sm ::slotted([slot=icon]) {
+:host(sdds-button:not([only-icon])) .sdds-btn-sm ::slotted([slot=icon]) {
   margin-left: var(--sdds-spacing-element-24);
   width: var(--sdds-spacing-element-16);
   height: var(--sdds-spacing-element-16);
 }
-:host(sdds-button:not([onlyIcon])) .sdds-btn-sm.sdds-btn-fullbleed ::slotted([slot=icon]) {
+:host(sdds-button:not([only-icon])) .sdds-btn-sm.sdds-btn-fullbleed ::slotted([slot=icon]) {
   margin-left: var(--sdds-spacing-element-12);
 }
-:host(sdds-button:not([onlyIcon])) .sdds-btn-md ::slotted([slot=icon]) {
+:host(sdds-button:not([only-icon])) .sdds-btn-md ::slotted([slot=icon]) {
   margin-left: var(--sdds-spacing-element-20);
   width: var(--sdds-spacing-element-20);
   height: var(--sdds-spacing-element-20);
 }
-:host(sdds-button:not([onlyIcon])) .sdds-btn-md.sdds-btn-fullbleed ::slotted([slot=icon]) {
+:host(sdds-button:not([only-icon])) .sdds-btn-md.sdds-btn-fullbleed ::slotted([slot=icon]) {
   margin-left: var(--sdds-spacing-element-16);
 }
-:host(sdds-button:not([onlyIcon])) .sdds-btn-lg ::slotted([slot=icon]) {
+:host(sdds-button:not([only-icon])) .sdds-btn-lg ::slotted([slot=icon]) {
   margin-left: 28px;
   width: var(--sdds-spacing-element-20);
   height: var(--sdds-spacing-element-20);
 }
-:host(sdds-button:not([onlyIcon])) .sdds-btn-lg.sdds-btn-fullbleed ::slotted([slot=icon]) {
+:host(sdds-button:not([only-icon])) .sdds-btn-lg.sdds-btn-fullbleed ::slotted([slot=icon]) {
   margin-left: var(--sdds-spacing-element-16);
 }