feat(core/button): remove bootstrap base styling

packages/core/component-doc.json

@@ -324,7 +324,9 @@
           "ix-burger-menu"
         ],
         "ix-burger-menu": [
-          "ix-icon-button"
+          "ix-icon-button",
+          "ix-spinner",
+          "ix-icon"
         ],
         "ix-icon-button": [
           "ix-spinner",
@@ -453,7 +455,9 @@
           "ix-burger-menu"
         ],
         "ix-burger-menu": [
-          "ix-icon-button"
+          "ix-icon-button",
+          "ix-spinner",
+          "ix-icon"
         ],
         "ix-icon-button": [
           "ix-spinner",
@@ -5796,7 +5800,9 @@
           "ix-burger-menu"
         ],
         "ix-burger-menu": [
-          "ix-icon-button"
+          "ix-icon-button",
+          "ix-spinner",
+          "ix-icon"
         ]
       },
       "props": [
@@ -6069,7 +6075,9 @@
           "ix-menu-item"
         ],
         "ix-burger-menu": [
-          "ix-icon-button"
+          "ix-icon-button",
+          "ix-spinner",
+          "ix-icon"
         ],
         "ix-icon-button": [
           "ix-spinner",
@@ -8969,12 +8977,16 @@
       "docsTags": [],
       "encapsulation": "shadow",
       "dependents": [
+        "ix-burger-menu",
         "ix-button",
         "ix-icon-button",
         "ix-upload"
       ],
       "dependencies": [],
       "dependencyGraph": {
+        "ix-burger-menu": [
+          "ix-spinner"
+        ],
         "ix-button": [
           "ix-spinner"
         ],

packages/core/src/components/button/base-button.tsx

@@ -6,7 +6,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
+import { h } from '@stencil/core';
 import { ButtonVariant } from './button';
 
 const isPrimary = (variant: string) => {
@@ -40,3 +40,52 @@ export const getButtonClasses = (
     disabled: disabled,
   };
 };
+
+export type BaseButtonProps = {
+  type: string;
+  variant: ButtonVariant;
+  outline: boolean;
+  ghost: boolean;
+  iconOnly: boolean;
+  iconOval: boolean;
+  selected: boolean;
+  disabled: boolean;
+  loading: boolean;
+  icon: string;
+  onClick: Function;
+  extraClasses?: { [key: string]: boolean };
+  iconSize?: string;
+  iconColor?: string;
+};
+
+export function BaseButton(props: BaseButtonProps, children) {
+  const extraClasses = props.extraClasses ?? {};
+  return (
+    <button
+      onClick={() => props.onClick()}
+      type={props.type}
+      class={{
+        ...getButtonClasses(
+          props.variant,
+          props.outline,
+          props.ghost,
+          props.iconOnly,
+          props.iconOval,
+          props.selected,
+          props.disabled || props.loading
+        ),
+        ...extraClasses,
+      }}
+    >
+      {props.loading ? <ix-spinner size="small" hideTrack></ix-spinner> : null}
+      {props.icon && !props.loading ? (
+        <ix-icon
+          name={props.icon}
+          size={props.iconSize as any}
+          color={props.iconColor}
+        ></ix-icon>
+      ) : null}
+      <div class={'content'}>{children}</div>
+    </button>
+  );
+}

packages/core/src/components/button/button-mixin.scss

@@ -0,0 +1,136 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@import 'common-variables';
+@import 'mixins/fonts';
+@import 'mixins/shadow-dom/component';
+@import 'mixins/hover';
+
+@mixin btn-variant($name, $enable-border: true) {
+  :host {
+    .btn-#{$name} {
+      border-radius: var(--theme-btn--border-radius);
+
+      &,
+      &.focus,
+      &:focus-visible {
+        background-color: var(--theme-btn-#{$name}--background);
+        color: var(--theme-btn-#{$name}--color);
+
+        --ix-button-color: var(--theme-btn-#{$name}--color);
+
+        @if $enable-border {
+          border-width: var(--theme-btn--border-thickness);
+          border-color: var(--theme-btn-#{$name}--border-color);
+          border-style: solid;
+        } @else {
+          border-color: transparent;
+        }
+      }
+
+      @include focus-visible {
+        outline: 1px solid var(--theme-color-focus-bdr);
+        outline-offset: var(--theme-btn--focus--outline-offset);
+      }
+
+      &.selected {
+        background-color: var(--theme-btn-#{$name}--background--selected);
+      }
+
+      &.hover,
+      &:hover {
+        @if $enable-border {
+          border-color: var(--theme-btn-#{$name}--border-color--hover);
+        }
+
+        background-color: var(--theme-btn-#{$name}--background--hover);
+        color: var(--theme-btn-#{$name}--color--hover);
+      }
+
+      &:not(:disabled):not(.disabled):active,
+      &:not(:disabled):not(.disabled).active {
+        @if $enable-border {
+          border-color: var(--theme-btn-#{$name}--border-color--active);
+        }
+
+        background-color: var(--theme-btn-#{$name}--background--active);
+        color: var(--theme-btn-#{$name}--color--active);
+      }
+    }
+  }
+
+  :host(.disabled) {
+    .btn-#{$name} {
+      &.disabled,
+      &:disabled {
+        pointer-events: none;
+
+        @if $enable-border {
+          border-color: var(--theme-btn-#{$name}--border-color--disabled);
+        }
+
+        background-color: var(--theme-btn-#{$name}--background--disabled);
+        color: var(--theme-btn-#{$name}--color--disabled);
+        opacity: 1;
+
+        --ix-button-color: var(--theme-btn-#{$name}--color--disabled);
+      }
+    }
+  }
+}
+
+@mixin btn {
+  :host {
+    @include ix-component;
+    display: inline-block;
+    height: 2rem;
+    vertical-align: middle;
+    cursor: pointer;
+
+    @include text-default-title;
+
+    button {
+      all: unset;
+      box-sizing: border-box;
+      display: inline-flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+
+      overflow: hidden;
+
+      align-items: center;
+      justify-content: center;
+
+      width: 100%;
+      height: 100%;
+
+      padding: 0 0.5rem;
+    }
+
+    ix-spinner {
+      margin-right: 0.25rem;
+    }
+
+    ix-icon {
+      margin-right: 0.25rem;
+    }
+
+    .content {
+      display: inline-block;
+      position: relative;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  :host(.disabled) {
+    cursor: default;
+  }
+}

packages/core/src/components/button/button.scss

@@ -6,32 +6,16 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+@import './button-mixin';
 
-@import 'common-variables';
-@import './components/buttons';
-@import 'mixins/shadow-dom/component';
-
-:host {
-  @include ix-component;
-  display: inline-block;
-  width: auto;
-  height: 2rem;
-  vertical-align: middle;
-
-  .btn {
-    width: 100%;
-    height: 100%;
-  }
-
-  button:not(:disabled) {
-    cursor: pointer;
-  }
-
-  ix-spinner {
-    margin-right: 0.25rem;
-  }
+@include btn;
+$button-categories: (primary, secondary);
+@each $category in $button-categories {
+  @include btn-variant($category);
+  @include btn-variant('outline-#{$category}');
+  @include btn-variant('invisible-#{$category}', false);
 }
 
-:host(.disabled) {
-  pointer-events: none;
+:host {
+  min-width: 5rem;
 }

packages/core/src/components/button/button.tsx

@@ -8,7 +8,7 @@
  */
 
 import { Component, Element, h, Host, Prop } from '@stencil/core';
-import { getButtonClasses } from './base-button';
+import { BaseButton, BaseButtonProps } from './base-button';
 
 export type ButtonVariant = 'primary' | 'secondary';
 
@@ -93,33 +93,29 @@ export class Button {
   }
 
   render() {
+    const baseButtonProps: BaseButtonProps = {
+      variant: this.variant,
+      outline: this.outline,
+      ghost: this.ghost,
+      iconOnly: false,
+      iconOval: false,
+      selected: this.selected,
+      disabled: this.disabled || this.loading,
+      icon: this.icon,
+      loading: this.loading,
+      onClick: () => this.dispatchFormEvents(),
+      type: this.type,
+    };
+
     return (
       <Host
         class={{
           disabled: this.disabled,
         }}
       >
-        <button
-          onClick={() => this.dispatchFormEvents()}
-          type={this.type}
-          class={getButtonClasses(
-            this.variant,
-            this.outline,
-            this.ghost || this.invisible,
-            false,
-            false,
-            this.selected,
-            this.disabled || this.loading
-          )}
-        >
-          {this.loading ? (
-            <ix-spinner size="small" hideTrack></ix-spinner>
-          ) : null}
-          {this.icon && !this.loading ? (
-            <ix-icon name={this.icon}></ix-icon>
-          ) : null}
+        <BaseButton {...baseButtonProps}>
           <slot></slot>
-        </button>
+        </BaseButton>
       </Host>
     );
   }

packages/core/src/components/chip/chip.scss

@@ -51,7 +51,7 @@ $predefined-chips: alarm, critical, warning, info, neutral, success;
 
   .close-button-container {
     display: inline-flex;
-    margin-left: $medium-space;
+    margin-left: 0.5rem;
   }
 
   .slot-container {

packages/core/src/components/dropdown-button/dropdown-button.scss

@@ -35,6 +35,14 @@
 
   .dropdown-button .button-label {
     margin-right: auto;
+    min-width: 0px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .dropdown-button .dropdown-icon {
+    margin-right: 0.25rem;
   }
 
   .triangle {
@@ -97,6 +105,11 @@
     inset: auto !important;
     transform: unset !important;
   }
+
+  .content {
+    display: flex;
+    align-items: center;
+  }
 }
 
 :host(.disabled) {