feat(core/toggle-button|icon-toggle-button): add toggle button components

BREAKING_CHANGES.md

@@ -1,7 +1,39 @@
-# Breaking Changes
+Breaking Changes
 
 ## v2.0.0
 
+### `ix-button` & `ix-icon-button`
+
+#### `invisible` was removed. Use `ghost` instead.
+
+**_Before_**
+
+```tsx
+<ix-button invisible>OK</button>
+<ix-icon-button icon="context-menu" invisisble></ix-icon-button>
+```
+
+**_Now_**
+
+```tsx
+<ix-button ghost>OK</button>
+<ix-icon-button icon="context-menu" ghost></ix-icon-button>
+```
+
+#### `selected` was removed. Use `ix-toggle-button`/`ix-icon-toggle-button` with property `pressed="true"` instead.
+
+```tsx
+<ix-button selected>OK</button>
+<ix-icon-button icon="checkboxes" selected></ix-icon-button>
+```
+
+**_Now_**
+
+```tsx
+<ix-toggle-button pressed>OK</button>
+<ix-icon-toggle-button icon="checkboxes" pressed></ix-icon-toggle-button>
+```
+
 ### `ix-workflow-steps`
 
 ### Remove `linear` prop
@@ -39,7 +71,8 @@ Replaced with `ix-pill`
 
 Replaced with standard `ix-dropdown-item`
 
-___Now___
+**_Now_**
+
 ```tsx
 <ix-group header="Header text" sub-header="Subheader text">
   <ix-dropdown slot="dropdown">
@@ -61,22 +94,24 @@ ___Now___
 
 The submenu now appends a chevron icon automatically to the trigger element, if the trigger element is an ix-dropdown-item.
 
-___Before___
+**_Before_**
 
 ```tsx
 <ix-dropdown-item id="submenuTrigger" label="Submenu">
   <ix-icon name="chevron-right-small" size="24"></ix-icon>
 </ix-dropdown-item>
 ```
 
-___Now___
+**_Now_**
+
 ```tsx
 <ix-dropdown-item id="submenuTrigger" label="Submenu"></ix-dropdown-item>
 ```
 
 ### `ix-dropdown` `ix-validation-tooltip` auto placement type removed
 
 All automatic placement types are removed from placement type:
+
 ```
 export declare type AutoPlacement = 'auto' | 'auto-start' | 'auto-end';
 ```
@@ -89,32 +124,36 @@ Placement will be automatically chosen depending on remaining space. If you want
 
 This breaking change only affects the function `modal` which is exported from `@siemens/ix` (not `@siemens/ix-angular` etc).
 
-___Before___
+**_Before_**
 
 ```ts
-export async function modal<T = any>( config: ModalConfig<T>): Promise<ModalInstance<T>>
+export async function modal<T = any>(
+  config: ModalConfig<T>
+): Promise<ModalInstance<T>>;
 ```
 
-___Now___
+**_Now_**
+
 ```ts
-export async function showModal<T = any>( config: ModalConfig<T>): Promise<ModalInstance<T>>
+export async function showModal<T = any>(
+  config: ModalConfig<T>
+): Promise<ModalInstance<T>>;
 ```
 
-
-#### Container component `ix-modal-container` removed 
+#### Container component `ix-modal-container` removed
 
 Container is not needed anymore because the iX modal system is using `HTMLDialog` now as
 basic system to open modal dialogs
 
 #### Property `size` changed
 
-___Before___
+**_Before_**
 
 ```ts
 export type IxModalSize = 'sm' | 'lg' | 'xl';
 ```
 
-___Now___
+**_Now_**
 
 ```ts
 export type IxModalFixedSize = '360' | '480' | '600' | '720' | '840';
@@ -130,16 +169,16 @@ export type IxModalSize = IxModalFixedSize | IxModalDynamicSize;
 - `content` is now generic
 - `backdrop = 'static'` removed, successor will be `closeOnBackdropClick`.
 
-___Before___
+**_Before_**
 
 ```tsx
 const config: ModalConfig = {
   // Other properties
-  backdrop: 'static'
-}
+  backdrop: 'static',
+};
 ```
 
-___Now___
+**_Now_**
 
 ```tsx
 const config: ModalConfig = {
@@ -158,6 +197,7 @@ To get a consistent UI design we decided to remove custom backdrops.
 ### `ix-flip-tile`
 
 Change flip-state from
+
 ```ts
 export enum FlipTileState {
   None = 'None',
@@ -182,13 +222,13 @@ export enum FlipTileState {
 
 e.g for alarm state
 
-___Before___
+**_Before_**
 
 ```tsx
 <ix-flip-tile state="Alarm"></ix-flip-tile>
 ```
 
-___Now___
+**_Now_**
 
 ```tsx
 <ix-flip-tile state="alarm"></ix-flip-tile>
@@ -214,13 +254,13 @@ Change `Primary` and `Secondary` to lower case `primary` and `secondary`
 
 #### `tabIcon` is deprecated and gets replaced with `icon` property
 
-___Before___
+**_Before_**
 
 ```tsx
 <ix-menu-item tabIcon="rocket"></ix-menu-item>
 ```
 
-___Now___
+**_Now_**
 
 ```tsx
 <ix-menu-item icon="rocket"></ix-menu-item>
@@ -230,12 +270,14 @@ ___Now___
 
 ### `close` event
 
-___Before___
+**_Before_**
+
 ```typescript
 @Event() close: EventEmitter<string>;
 ```
 
-___Now___
+**_Now_**
+
 ```typescript
 @Event() close: EventEmitter<{
   nativeEvent: MouseEvent;
@@ -251,14 +293,14 @@ Remove typo `sencodary` from `variant` property
 
 Remove deprecated `invisible`-property
 
-___Before___
+**_Before_**
+
 ```tsx
 <ix-split-button invisible></ix-split-button>
 ```
 
-___Now___
+**_Now_**
+
 ```tsx
 <ix-split-button ghost></ix-split-button>
-
 ```
-

packages/angular-test-app/src/app/app-routing.module.ts

@@ -19,7 +19,6 @@ import Breadcrumb from 'src/preview-examples/breadcrumb';
 import BreadcrumbNextItems from 'src/preview-examples/breadcrumb-next-items';
 import BreadcrumbTruncate from 'src/preview-examples/breadcrumb-truncate';
 import ButtonGroup from 'src/preview-examples/button-group';
-import ButtonSelected from 'src/preview-examples/button-selected';
 import ButtonWithIcon from 'src/preview-examples/button-with-icon';
 import Buttons from 'src/preview-examples/buttons';
 import CardList from 'src/preview-examples/card-list';
@@ -50,6 +49,11 @@ import Group from 'src/preview-examples/group';
 import GroupContextMenu from 'src/preview-examples/group-context-menu';
 import GroupCustomEntry from 'src/preview-examples/group-custom-entry';
 import GroupHeaderSuppressed from 'src/preview-examples/group-header-suppressed';
+import IconToggleButtonPrimaryGhost from 'src/preview-examples/icon-toggle-button-primary-ghost';
+import IconToggleButtonPrimaryOutline from 'src/preview-examples/icon-toggle-button-primary-outline';
+import IconToggleButtonSecondary from 'src/preview-examples/icon-toggle-button-secondary';
+import IconToggleButtonSecondaryGhost from 'src/preview-examples/icon-toggle-button-secondary-ghost';
+import IconToggleButtonSecondaryOutline from 'src/preview-examples/icon-toggle-button-secondary-outline';
 import Input from 'src/preview-examples/input';
 import InputDisabled from 'src/preview-examples/input-disabled';
 import InputReadonly from 'src/preview-examples/input-readonly';
@@ -93,6 +97,11 @@ import Toast from 'src/preview-examples/toast';
 import ToastCustom from 'src/preview-examples/toast-custom';
 import ToastPosition from 'src/preview-examples/toast-position';
 import Toggle from 'src/preview-examples/toggle';
+import ToggleButtonPrimaryGhost from 'src/preview-examples/toggle-button-primary-ghost';
+import ToggleButtonPrimaryOutline from 'src/preview-examples/toggle-button-primary-outline';
+import ToggleButtonSecondary from 'src/preview-examples/toggle-button-secondary';
+import ToggleButtonSecondaryGhost from 'src/preview-examples/toggle-button-secondary-ghost';
+import ToggleButtonSecondaryOutline from 'src/preview-examples/toggle-button-secondary-outline';
 import ToggleCustomLabel from 'src/preview-examples/toggle-custom-label';
 import ToggleCustomDisabled from 'src/preview-examples/toggle-disabled';
 import Tooltip from 'src/preview-examples/tooltip';
@@ -190,7 +199,6 @@ const routes: Routes = [
       { path: 'breadcrumb-next-items', component: BreadcrumbNextItems },
       { path: 'breadcrumb-truncate', component: BreadcrumbTruncate },
       { path: 'breadcrumb', component: Breadcrumb },
-      { path: 'button-selected', component: ButtonSelected },
       { path: 'button-with-icon', component: ButtonWithIcon },
       {
         path: 'category-filter-suggestions',
@@ -248,6 +256,26 @@ const routes: Routes = [
       { path: 'group-custom-entry', component: GroupCustomEntry },
       { path: 'group-header-suppressed', component: GroupHeaderSuppressed },
       { path: 'group', component: Group },
+      {
+        path: 'icon-toggle-button-secondary',
+        component: IconToggleButtonSecondary,
+      },
+      {
+        path: 'icon-toggle-button-secondary-ghost',
+        component: IconToggleButtonSecondaryGhost,
+      },
+      {
+        path: 'icon-toggle-button-secondary-outline',
+        component: IconToggleButtonSecondaryOutline,
+      },
+      {
+        path: 'icon-toggle-button-primary-ghost',
+        component: IconToggleButtonPrimaryGhost,
+      },
+      {
+        path: 'icon-toggle-button-primary-outline',
+        component: IconToggleButtonPrimaryOutline,
+      },
       { path: 'input-disabled', component: InputDisabled },
       { path: 'input-readonly', component: InputReadonly },
       { path: 'input-with-icon', component: InputWithIcon },
@@ -273,6 +301,23 @@ const routes: Routes = [
       { path: 'theme-switcher', component: ThemeService },
       { path: 'tile', component: Tile },
       { path: 'timepicker', component: Timepicker },
+      { path: 'toggle-button-secondary', component: ToggleButtonSecondary },
+      {
+        path: 'toggle-button-secondary-ghost',
+        component: ToggleButtonSecondaryGhost,
+      },
+      {
+        path: 'toggle-button-secondary-outline',
+        component: ToggleButtonSecondaryOutline,
+      },
+      {
+        path: 'toggle-button-primary-ghost',
+        component: ToggleButtonPrimaryGhost,
+      },
+      {
+        path: 'toggle-button-primary-outline',
+        component: ToggleButtonPrimaryOutline,
+      },
       { path: 'toggle-disabled', component: ToggleCustomDisabled },
       { path: 'toggle-custom-label', component: ToggleCustomLabel },
       { path: 'toggle', component: Toggle },

packages/angular-test-app/src/app/app.module.ts

@@ -26,7 +26,6 @@ import Breadcrumb from 'src/preview-examples/breadcrumb';
 import BreadcrumbNextItems from 'src/preview-examples/breadcrumb-next-items';
 import BreadcrumbTruncate from 'src/preview-examples/breadcrumb-truncate';
 import ButtonGroup from 'src/preview-examples/button-group';
-import ButtonSelected from 'src/preview-examples/button-selected';
 import ButtonWithIcon from 'src/preview-examples/button-with-icon';
 import Buttons from 'src/preview-examples/buttons';
 import CardList from 'src/preview-examples/card-list';
@@ -57,6 +56,11 @@ import Group from 'src/preview-examples/group';
 import GroupContextMenu from 'src/preview-examples/group-context-menu';
 import GroupCustomEntry from 'src/preview-examples/group-custom-entry';
 import GroupHeaderSuppressed from 'src/preview-examples/group-header-suppressed';
+import IconToggleButtonPrimaryGhost from 'src/preview-examples/icon-toggle-button-primary-ghost';
+import IconToggleButtonPrimaryOutline from 'src/preview-examples/icon-toggle-button-primary-outline';
+import IconToggleButtonSecondary from 'src/preview-examples/icon-toggle-button-secondary';
+import IconToggleButtonSecondaryGhost from 'src/preview-examples/icon-toggle-button-secondary-ghost';
+import IconToggleButtonSecondaryOutline from 'src/preview-examples/icon-toggle-button-secondary-outline';
 import Input from 'src/preview-examples/input';
 import InputDisabled from 'src/preview-examples/input-disabled';
 import InputReadonly from 'src/preview-examples/input-readonly';
@@ -101,6 +105,11 @@ import Toast from 'src/preview-examples/toast';
 import ToastCustom from 'src/preview-examples/toast-custom';
 import ToastPosition from 'src/preview-examples/toast-position';
 import Toggle from 'src/preview-examples/toggle';
+import ToggleButtonPrimaryGhost from 'src/preview-examples/toggle-button-primary-ghost';
+import ToggleButtonPrimaryOutline from 'src/preview-examples/toggle-button-primary-outline';
+import ToggleButtonSecondary from 'src/preview-examples/toggle-button-secondary';
+import ToggleButtonSecondaryGhost from 'src/preview-examples/toggle-button-secondary-ghost';
+import ToggleButtonSecondaryOutline from 'src/preview-examples/toggle-button-secondary-outline';
 import ToggleCustomLabel from 'src/preview-examples/toggle-custom-label';
 import ToggleCustomDisabled from 'src/preview-examples/toggle-disabled';
 import Tooltip from 'src/preview-examples/tooltip';
@@ -135,7 +144,6 @@ import { NavigationTestComponent } from './components/navigation-test.component'
     BreadcrumbTruncate,
     Breadcrumb,
     NavigationTestComponent,
-    ButtonSelected,
     ButtonWithIcon,
     CategoryFilterSuggestions,
     CategoryFilter,
@@ -158,6 +166,11 @@ import { NavigationTestComponent } from './components/navigation-test.component'
     GroupCustomEntry,
     GroupHeaderSuppressed,
     Group,
+    IconToggleButtonPrimaryGhost,
+    IconToggleButtonPrimaryOutline,
+    IconToggleButtonSecondary,
+    IconToggleButtonSecondaryGhost,
+    IconToggleButtonSecondaryOutline,
     InputDisabled,
     InputReadonly,
     InputWithIcon,
@@ -182,6 +195,11 @@ import { NavigationTestComponent } from './components/navigation-test.component'
     ThemeSwitcherService,
     Tile,
     Timepicker,
+    ToggleButtonPrimaryGhost,
+    ToggleButtonPrimaryOutline,
+    ToggleButtonSecondary,
+    ToggleButtonSecondaryGhost,
+    ToggleButtonSecondaryOutline,
     ToggleCustomDisabled,
     ToggleCustomLabel,
     Toggle,