Skip to content

Commit

Permalink
feat(core/toggle): component rework (#568)
Browse files Browse the repository at this point in the history
Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>
  • Loading branch information
goncalosard and danielleroux committed Jul 27, 2023
1 parent 0421bf5 commit 17daf4b
Show file tree
Hide file tree
Showing 19 changed files with 313 additions and 140 deletions.
16 changes: 16 additions & 0 deletions packages/angular-test-app/src/preview-examples/toggle-checked.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/*
* 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 { Component } from '@angular/core';

@Component({
selector: 'app-example',
template: ` <ix-toggle checked></ix-toggle> `,
})
export default class ToggleChecked {}
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/*
* 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 { Component } from '@angular/core';

@Component({
selector: 'app-example',
template: ` <ix-toggle indeterminate></ix-toggle> `,
})
export default class ToggleIndeterminate {}
2 changes: 1 addition & 1 deletion packages/core/scss/theme/classic-dark/_borderRadius.scss
Original file line number Diff line number Diff line change
Expand Up @@ -21,4 +21,4 @@
--theme-upload--border-radius: var(--theme-default-border-radius);
--theme-workflow--border-radius: var(--theme-default-border-radius);
}
}
}
90 changes: 45 additions & 45 deletions packages/core/scss/theme/classic-dark/_color.scss
Original file line number Diff line number Diff line change
Expand Up @@ -430,7 +430,7 @@
--theme-chip-primary-outline--background--display: var(--theme-color-secondary);
--theme-chip-primary-outline--border-color--display: var(--theme-color-primary);
--theme-chip-primary-outline--color--display: var(--theme-color-std-text);
--theme-switch-off--background: var(--theme-color-2);
--theme-switch-off--background: var(--theme-color-component-3);
--theme-menu--background: var(--theme-color-1);
--theme-menu--border-color: var(--theme-color-soft-bdr);
--theme-menu-header--color: var(--theme-color-soft-text);
Expand Down Expand Up @@ -531,53 +531,53 @@
--theme-input-select-icon--color: var(--theme-color-soft-text);
--theme-input-select-icon--color--hover: var(--theme-color-std-text);
--theme-input-select-icon--color--active: var(--theme-color-std-text);
--theme-switch-off--background--hover: var(--theme-color-2);
--theme-switch-off--background--active: var(--theme-color-2);
--theme-switch-off--background--disabled: var(--theme-color-component-2);
--theme-switch-on--background: var(--theme-color-2);
--theme-switch-on--background--hover: var(--theme-color-2);
--theme-switch-on--background--active: var(--theme-color-2);
--theme-switch-on--background--disabled: var(--theme-color-component-2);
--theme-switch-mixed--background: var(--theme-color-2);
--theme-switch-mixed--background--hover: var(--theme-color-2);
--theme-switch-mixed--background--active: var(--theme-color-2);
--theme-switch-mixed--background--disabled: var(--theme-color-component-2);
--theme-switch-off--border-color: var(--theme-color-soft-bdr);
--theme-switch-off--border-color--hover: var(--theme-color-soft-bdr);
--theme-switch-off--border-color--active: var(--theme-color-soft-bdr);
--theme-switch-off--background--hover: var(--theme-color-component-4);
--theme-switch-off--background--active: var(--theme-color-component-3);
--theme-switch-off--background--disabled: var(--theme-color-component-3);
--theme-switch-on--background: var(--theme-color-dynamic);
--theme-switch-on--background--hover: var(--theme-color-dynamic--hover);
--theme-switch-on--background--active: var(--theme-color-dynamic--active);
--theme-switch-on--background--disabled: var(--theme-color-component-3);
--theme-switch-mixed--background: var(--theme-color-component-3);
--theme-switch-mixed--background--hover: var(--theme-color-component-4);
--theme-switch-mixed--background--active: var(--theme-color-component-3);
--theme-switch-mixed--background--disabled: var(--theme-color-component-3);
--theme-switch-off--border-color: var(--theme-color-0);
--theme-switch-off--border-color--hover: var(--theme-color-0);
--theme-switch-off--border-color--active: var(--theme-color-0);
--theme-switch-off--border-color--disabled: var(--theme-color-0);
--theme-switch-on--border-color: var(--theme-color-soft-bdr);
--theme-switch-on--border-color--hover: var(--theme-color-soft-bdr);
--theme-switch-on--border-color--active: var(--theme-color-soft-bdr);
--theme-switch-on--border-color: var(--theme-color-0);
--theme-switch-on--border-color--hover: var(--theme-color-0);
--theme-switch-on--border-color--active: var(--theme-color-0);
--theme-switch-on--border-color--disabled: var(--theme-color-0);
--theme-switch-mixed--border-color: var(--theme-color-soft-bdr);
--theme-switch-mixed--border-color--hover: var(--theme-color-soft-bdr);
--theme-switch-mixed--border-color--active: var(--theme-color-soft-bdr);
--theme-switch-mixed--border-color: var(--theme-color-0);
--theme-switch-mixed--border-color--hover: var(--theme-color-0);
--theme-switch-mixed--border-color--active: var(--theme-color-0);
--theme-switch-mixed--border-color--disabled: var(--theme-color-0);
--theme-switch-thumb-off--background: var(--theme-color-secondary);
--theme-switch-thumb-off--background--hover: var(--theme-color-secondary--hover);
--theme-switch-thumb-off--background--disabled: var(--theme-color-2);
--theme-switch-thumb-off--background--active: var(--theme-color-secondary--active);
--theme-switch-thumb-on--background: var(--theme-color-primary);
--theme-switch-thumb-on--background--hover: var(--theme-color-primary--hover);
--theme-switch-thumb-on--background--active: var(--theme-color-primary--active);
--theme-switch-thumb-on--background--disabled: var(--theme-color-component-6);
--theme-switch-thumb-mixed--background: var(--theme-color-secondary);
--theme-switch-thumb-mixed--background--hover: var(--theme-color-secondary--hover);
--theme-switch-thumb-mixed--background--active: var(--theme-color-secondary--active);
--theme-switch-thumb-mixed--background--disabled: var(--theme-color-2);
--theme-switch-thumb-off--border-color: var(--theme-color-soft-bdr);
--theme-switch-thumb-off--border-color--hover: var(--theme-color-soft-bdr);
--theme-switch-thumb-off--border-color--active: var(--theme-color-soft-bdr);
--theme-switch-thumb-off--border-color--disabled: var(--theme-color-5);
--theme-switch-thumb-on--border-color: var(--theme-color-weak-bdr);
--theme-switch-thumb-on--border-color--hover: var(--theme-color-weak-bdr);
--theme-switch-thumb-on--border-color--active: var(--theme-color-weak-bdr);
--theme-switch-thumb-on--border-color--disabled: var(--theme-color-5);
--theme-switch-thumb-mixed--border-color: var(--theme-color-soft-bdr);
--theme-switch-thumb-mixed--border-color--hover: var(--theme-color-soft-bdr);
--theme-switch-thumb-mixed--border-color--active: var(--theme-color-soft-bdr);
--theme-switch-thumb-mixed--border-color--disabled: var(--theme-color-5);
--theme-switch-thumb-off--background: var(--theme-color-1);
--theme-switch-thumb-off--background--hover: var(--theme-color-1);
--theme-switch-thumb-off--background--active: var(--theme-color-1);
--theme-switch-thumb-off--background--disabled: var(--theme-color-std-bdr);
--theme-switch-thumb-on--background: var(--theme-color-1);
--theme-switch-thumb-on--background--hover: var(--theme-color-1);
--theme-switch-thumb-on--background--active: var(--theme-color-1);
--theme-switch-thumb-on--background--disabled: var(--theme-color-std-bdr);
--theme-switch-thumb-mixed--background: var(--theme-color-1);
--theme-switch-thumb-mixed--background--hover: var(--theme-color-1);
--theme-switch-thumb-mixed--background--active: var(--theme-color-1);
--theme-switch-thumb-mixed--background--disabled: var(--theme-color-std-bdr);
--theme-switch-thumb-off--border-color: var(--theme-color-0);
--theme-switch-thumb-off--border-color--hover: var(--theme-color-0);
--theme-switch-thumb-off--border-color--active: var(--theme-color-0);
--theme-switch-thumb-off--border-color--disabled: var(--theme-color-0);
--theme-switch-thumb-on--border-color: var(--theme-color-0);
--theme-switch-thumb-on--border-color--hover: var(--theme-color-0);
--theme-switch-thumb-on--border-color--active: var(--theme-color-0);
--theme-switch-thumb-on--border-color--disabled: var(--theme-color-0);
--theme-switch-thumb-mixed--border-color: var(--theme-color-0);
--theme-switch-thumb-mixed--border-color--hover: var(--theme-color-0);
--theme-switch-thumb-mixed--border-color--active: var(--theme-color-0);
--theme-switch-thumb-mixed--border-color--disabled: var(--theme-color-0);
--theme-switch--color: var(--theme-color-std-text);
--theme-switch--color--hover: var(--theme-color-std-text);
--theme-switch--color--active: var(--theme-color-std-text);
Expand Down
90 changes: 45 additions & 45 deletions packages/core/scss/theme/classic-light/_color.scss
Original file line number Diff line number Diff line change
Expand Up @@ -430,7 +430,7 @@
--theme-chip-primary-outline--background--display: var(--theme-color-secondary);
--theme-chip-primary-outline--border-color--display: var(--theme-color-primary);
--theme-chip-primary-outline--color--display: var(--theme-color-std-text);
--theme-switch-off--background: var(--theme-color-2);
--theme-switch-off--background: var(--theme-color-component-3);
--theme-menu--background: var(--theme-color-1);
--theme-menu--border-color: var(--theme-color-soft-bdr);
--theme-menu-header--color: var(--theme-color-soft-text);
Expand Down Expand Up @@ -531,53 +531,53 @@
--theme-input-select-icon--color: var(--theme-color-soft-text);
--theme-input-select-icon--color--hover: var(--theme-color-std-text);
--theme-input-select-icon--color--active: var(--theme-color-std-text);
--theme-switch-off--background--hover: var(--theme-color-2);
--theme-switch-off--background--active: var(--theme-color-2);
--theme-switch-off--background--disabled: var(--theme-color-component-2);
--theme-switch-on--background: var(--theme-color-2);
--theme-switch-on--background--hover: var(--theme-color-2);
--theme-switch-on--background--active: var(--theme-color-2);
--theme-switch-on--background--disabled: var(--theme-color-component-2);
--theme-switch-mixed--background: var(--theme-color-2);
--theme-switch-mixed--background--hover: var(--theme-color-2);
--theme-switch-mixed--background--active: var(--theme-color-2);
--theme-switch-mixed--background--disabled: var(--theme-color-component-2);
--theme-switch-off--border-color: var(--theme-color-soft-bdr);
--theme-switch-off--border-color--hover: var(--theme-color-soft-bdr);
--theme-switch-off--border-color--active: var(--theme-color-soft-bdr);
--theme-switch-off--background--hover: var(--theme-color-component-4);
--theme-switch-off--background--active: var(--theme-color-component-3);
--theme-switch-off--background--disabled: var(--theme-color-component-3);
--theme-switch-on--background: var(--theme-color-dynamic);
--theme-switch-on--background--hover: var(--theme-color-dynamic--hover);
--theme-switch-on--background--active: var(--theme-color-dynamic--active);
--theme-switch-on--background--disabled: var(--theme-color-component-3);
--theme-switch-mixed--background: var(--theme-color-component-3);
--theme-switch-mixed--background--hover: var(--theme-color-component-4);
--theme-switch-mixed--background--active: var(--theme-color-component-3);
--theme-switch-mixed--background--disabled: var(--theme-color-component-3);
--theme-switch-off--border-color: var(--theme-color-0);
--theme-switch-off--border-color--hover: var(--theme-color-0);
--theme-switch-off--border-color--active: var(--theme-color-0);
--theme-switch-off--border-color--disabled: var(--theme-color-0);
--theme-switch-on--border-color: var(--theme-color-soft-bdr);
--theme-switch-on--border-color--hover: var(--theme-color-soft-bdr);
--theme-switch-on--border-color--active: var(--theme-color-soft-bdr);
--theme-switch-on--border-color: var(--theme-color-0);
--theme-switch-on--border-color--hover: var(--theme-color-0);
--theme-switch-on--border-color--active: var(--theme-color-0);
--theme-switch-on--border-color--disabled: var(--theme-color-0);
--theme-switch-mixed--border-color: var(--theme-color-soft-bdr);
--theme-switch-mixed--border-color--hover: var(--theme-color-soft-bdr);
--theme-switch-mixed--border-color--active: var(--theme-color-soft-bdr);
--theme-switch-mixed--border-color: var(--theme-color-0);
--theme-switch-mixed--border-color--hover: var(--theme-color-0);
--theme-switch-mixed--border-color--active: var(--theme-color-0);
--theme-switch-mixed--border-color--disabled: var(--theme-color-0);
--theme-switch-thumb-off--background: var(--theme-color-secondary);
--theme-switch-thumb-off--background--hover: var(--theme-color-secondary--hover);
--theme-switch-thumb-off--background--disabled: var(--theme-color-2);
--theme-switch-thumb-off--background--active: var(--theme-color-secondary--active);
--theme-switch-thumb-on--background: var(--theme-color-primary);
--theme-switch-thumb-on--background--hover: var(--theme-color-primary--hover);
--theme-switch-thumb-on--background--active: var(--theme-color-primary--active);
--theme-switch-thumb-on--background--disabled: var(--theme-color-component-6);
--theme-switch-thumb-mixed--background: var(--theme-color-secondary);
--theme-switch-thumb-mixed--background--hover: var(--theme-color-secondary--hover);
--theme-switch-thumb-mixed--background--active: var(--theme-color-secondary--active);
--theme-switch-thumb-mixed--background--disabled: var(--theme-color-2);
--theme-switch-thumb-off--border-color: var(--theme-color-soft-bdr);
--theme-switch-thumb-off--border-color--hover: var(--theme-color-soft-bdr);
--theme-switch-thumb-off--border-color--active: var(--theme-color-soft-bdr);
--theme-switch-thumb-off--border-color--disabled: var(--theme-color-5);
--theme-switch-thumb-on--border-color: var(--theme-color-weak-bdr);
--theme-switch-thumb-on--border-color--hover: var(--theme-color-weak-bdr);
--theme-switch-thumb-on--border-color--active: var(--theme-color-weak-bdr);
--theme-switch-thumb-on--border-color--disabled: var(--theme-color-5);
--theme-switch-thumb-mixed--border-color: var(--theme-color-soft-bdr);
--theme-switch-thumb-mixed--border-color--hover: var(--theme-color-soft-bdr);
--theme-switch-thumb-mixed--border-color--active: var(--theme-color-soft-bdr);
--theme-switch-thumb-mixed--border-color--disabled: var(--theme-color-5);
--theme-switch-thumb-off--background: var(--theme-color-1);
--theme-switch-thumb-off--background--hover: var(--theme-color-1);
--theme-switch-thumb-off--background--active: var(--theme-color-1);
--theme-switch-thumb-off--background--disabled: var(--theme-color-std-bdr);
--theme-switch-thumb-on--background: var(--theme-color-1);
--theme-switch-thumb-on--background--hover: var(--theme-color-1);
--theme-switch-thumb-on--background--active: var(--theme-color-1);
--theme-switch-thumb-on--background--disabled: var(--theme-color-std-bdr);
--theme-switch-thumb-mixed--background: var(--theme-color-1);
--theme-switch-thumb-mixed--background--hover: var(--theme-color-1);
--theme-switch-thumb-mixed--background--active: var(--theme-color-1);
--theme-switch-thumb-mixed--background--disabled: var(--theme-color-std-bdr);
--theme-switch-thumb-off--border-color: var(--theme-color-0);
--theme-switch-thumb-off--border-color--hover: var(--theme-color-0);
--theme-switch-thumb-off--border-color--active: var(--theme-color-0);
--theme-switch-thumb-off--border-color--disabled: var(--theme-color-0);
--theme-switch-thumb-on--border-color: var(--theme-color-0);
--theme-switch-thumb-on--border-color--hover: var(--theme-color-0);
--theme-switch-thumb-on--border-color--active: var(--theme-color-0);
--theme-switch-thumb-on--border-color--disabled: var(--theme-color-0);
--theme-switch-thumb-mixed--border-color: var(--theme-color-0);
--theme-switch-thumb-mixed--border-color--hover: var(--theme-color-0);
--theme-switch-thumb-mixed--border-color--active: var(--theme-color-0);
--theme-switch-thumb-mixed--border-color--disabled: var(--theme-color-0);
--theme-switch--color: var(--theme-color-std-text);
--theme-switch--color--hover: var(--theme-color-std-text);
--theme-switch--color--active: var(--theme-color-std-text);
Expand Down
38 changes: 20 additions & 18 deletions packages/core/src/components/toggle/toggle.scss
Original file line number Diff line number Diff line change
Expand Up @@ -86,19 +86,14 @@
display: flex;
align-items: center;
outline: none;
width: fit-content;

.switch {
position: relative;
display: inline-flex;
align-items: center;
min-width: $slide-toggle-width;
height: $default-control-height;

@include focus-visible {
outline-color: var(--focus--border-color);
outline-style: solid;
outline-width: 1px;
}
}

.switch input {
Expand All @@ -122,30 +117,27 @@
background-color: var(--theme-switch-off--background);
border-radius: 2.125rem;
border: 1px solid var(--theme-switch-off--border-color);
width: 2.5rem;
height: $default-space;
width: 3rem;
height: 1.5rem;
}
}

.slider:before {
position: absolute;
content: '';
height: 1.5rem;
width: 1.5rem;
left: 0.125rem;
height: 1.125rem;
width: 1.125rem;
left: 0.188rem;
background-color: var(--theme-switch-thumb-off--background);
-webkit-transition: transform $default-time;
transition: transform $default-time;
border-radius: 50%;
border: 1px solid var(--theme-switch-thumb-off--border-color);
box-shadow: var(--theme-switch-thumb--box-shadow);
}

input:checked + .slider:before {
-webkit-transform: translateX(1.125rem);
-ms-transform: translateX(1.125rem);
transform: translateX(1.125rem);
left: $tiny-space;
-webkit-transform: translateX(1.5rem);
-ms-transform: translateX(1.5rem);
transform: translateX(1.5rem);
}

.text {
Expand Down Expand Up @@ -173,6 +165,16 @@
}
}

:focus-visible {
outline: none;
.slider-track {
outline-color: var(--theme-color-focus-bdr);
outline-style: solid;
outline-width: 1px;
outline-offset: 2px;
}
}

@include active {
.slider:before {
background-color: var(--theme-switch-thumb-off--background--active);
Expand All @@ -197,7 +199,7 @@
@include toggle('mixed');

.slider:before {
transform: translateX(0.625rem);
transform: translateX(0.75rem);
}
}

Expand Down
32 changes: 17 additions & 15 deletions packages/core/src/tests/toggle/basic/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,20 @@
-->

<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
/>
<title>Stencil Component Starter</title>
</head>
<body style="padding: 2rem">
<ix-toggle></ix-toggle>
<br />
<ix-toggle checked></ix-toggle>
<script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
</body>
</html>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>Stencil Component Starter</title>
</head>

<body style="padding: 2rem">
<ix-toggle></ix-toggle>
<br />
<ix-toggle checked></ix-toggle>
<br />
<ix-toggle indeterminate></ix-toggle>
<script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
</body>

</html>
Loading

0 comments on commit 17daf4b

Please sign in to comment.