Skip to content

Commit

Permalink
feat(core/toggle): add v7 styling, keyboard access and indeterminate …
Browse files Browse the repository at this point in the history 
…state
  • Loading branch information
@nuke-ellington
nuke-ellington committed Aug 11, 2022
1 parent de25a18 commit 7602def
Show file tree
Hide file tree
Showing 6 changed files with 253 additions and 59 deletions.
1 change: 1 addition & 0 deletions packages/core/scss/v7/theme/classic-dark/_sizes.scss
View file
Expand Up @@ -34,6 +34,7 @@ $classic-dark-sizes: (
0.5rem 0 1rem #000,
),
modal--border-thickness: 1px,
switch-thumb--box-shadow: none,
tile--border-radius: 0.25rem,
tile--box-shadow: (
0 0 8px rgba(0, 0, 0, 0.6),
Expand Down
1 change: 1 addition & 0 deletions packages/core/scss/v7/theme/classic-light/_sizes.scss
View file
Expand Up @@ -34,6 +34,7 @@ $classic-light-sizes: (
0.5rem 0 1rem rgba(0, 0, 0, 0.2),
),
modal--border-thickness: 1px,
switch-thumb--box-shadow: none,
tile--border-radius: 0.25rem,
tile--box-shadow: (
0 0 8px rgba(0, 0, 0, 0.1),
Expand Down
26 changes: 22 additions & 4 deletions packages/core/src/components.d.ts
View file
Expand Up @@ -1100,6 +1100,7 @@ export namespace Components {
"checked": boolean;
/**
* Basic and status colors from color palette
* @deprecated - Has no effect on the rendered control
*/
"color": string;
/**
Expand All @@ -1111,11 +1112,19 @@ export namespace Components {
*/
"hideText": boolean;
/**
* Test for toggle off
* If true the control is in indeterminate state
*/
"indeterminate": boolean;
/**
* Text for indeterminate state
*/
"textIndeterminate": string;
/**
* Text for off state
*/
"textOff": string;
/**
* Text for toggle on
* Text for on state
*/
"textOn": string;
}
Expand Down Expand Up @@ -2764,6 +2773,7 @@ declare namespace LocalJSX {
"checked"?: boolean;
/**
* Basic and status colors from color palette
* @deprecated - Has no effect on the rendered control
*/
"color"?: string;
/**
Expand All @@ -2774,16 +2784,24 @@ declare namespace LocalJSX {
* Hide `on` and `off` text
*/
"hideText"?: boolean;
/**
* If true the control is in indeterminate state
*/
"indeterminate"?: boolean;
/**
* An event will be dispatched each time the slide-toggle changes its value.
*/
"onCheckedChange"?: (event: CustomEvent<boolean>) => void;
/**
* Test for toggle off
* Text for indeterminate state
*/
"textIndeterminate"?: string;
/**
* Text for off state
*/
"textOff"?: string;
/**
* Text for toggle on
* Text for on state
*/
"textOn"?: string;
}
Expand Down
14 changes: 14 additions & 0 deletions packages/core/src/components/my-component/my-component.tsx
View file
Expand Up @@ -114,6 +114,20 @@ export class MyComponent {

<cw-modal-container></cw-modal-container>

<div
style={{
display: 'flex',
marginTop: '2rem',
}}
>
<cw-toggle></cw-toggle>
<cw-toggle checked></cw-toggle>
<cw-toggle disabled></cw-toggle>
<cw-toggle indeterminate></cw-toggle>
<cw-toggle textOff='Lorem ipsum' textOn='dolor sit'></cw-toggle>
<cw-toggle hideText></cw-toggle>
</div>

<div
style={{
display: 'flex',
Expand Down
195 changes: 146 additions & 49 deletions packages/core/src/components/toggle/toggle.scss
View file
Expand Up @@ -2,18 +2,99 @@
* COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
*/

@import '../../../scss/variables';
@import '../../../scss/colors';
@import '../../../scss/v7/common-variables';
@import '../../../scss/v7/mixins/hover';
@import '../../../scss/v7/mixins/text-truncation';

@mixin toggle($state, $suffix: '') {
@debug ('Toggle', #{$state});
.slider {
&:before {
background-color: var(
--theme-switch-thumb-#{$state}--background#{$suffix}
);
border-color: var(--theme-switch-thumb-#{$state}--border-color#{$suffix});
}

.slider-track {
background-color: var(--theme-switch-#{$state}--background#{$suffix});
border-color: var(--theme-switch-#{$state}--border-color#{$suffix});
}
}

.text {
color: var(--theme-switch--color);
}

@include hover {
.slider {
&:before {
background-color: var(
--theme-switch-thumb-#{$state}--background--hover#{$suffix}
);
border-color: var(
--theme-switch-thumb-#{$state}--border-color--hover#{$suffix}
);
}

.slider-track {
background-color: var(
--theme-switch-#{$state}--background--hover#{$suffix}
);
border-color: var(
--theme-switch-#{$state}--border-color--hover#{$suffix}
);
}
}

.text {
color: var(--theme-switch--color--hover);
}
}

@include active {
.slider:before {
background-color: var(
--theme-switch-thumb-#{$state}--background--active#{$suffix}
);
border-color: var(
--theme-switch-thumb-#{$state}--border-color--active#{$suffix}
);
}

.slider-track {
background-color: var(
--theme-switch-#{$state}--background--active#{$suffix}
);
border-color: var(
--theme-switch-#{$state}--border-color--active#{$suffix}
);
}

.text {
color: var(--theme-switch--color--active);
}
}
}

:host {
$slide-toggle-width: 3rem;
display: flex;
align-items: center;
outline: none;

.switch {
position: relative;
display: inline-flex;
align-items: center;
width: $slide-toggle-width;
height: 2rem;
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 @@ -34,11 +115,11 @@
bottom: 0;

.slider-track {
background-color: var(--theme-color-2);
background-color: var(--theme-switch-off--background);
border-radius: 2.125rem;
border: var(--theme-soft-bdr-1);
border: 1px solid var(--theme-switch-off--border-color);
width: 2.5rem;
height: 1rem;
height: $default-space;
}
}

Expand All @@ -47,56 +128,73 @@
content: '';
height: 1.5rem;
width: 1.5rem;
left: 0;
background-color: var(--theme-color-1);
-webkit-transition: $default-time;
transition: $default-time;
left: 0.125rem;
background-color: var(--theme-switch-thumb-off--background);
-webkit-transition: transform $default-time;
transition: transform $default-time;
border-radius: 50%;
border: var(--theme-std-bdr-1);
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.625rem);
-ms-transform: translateX(1.625rem);
transform: translateX(1.625rem);
left: 0rem;
-webkit-transform: translateX(1.125rem);
-ms-transform: translateX(1.125rem);
transform: translateX(1.125rem);
left: $tiny-space;
}

.text {
color: var(--theme-color-std-text);
@include ellipsis;

color: var(--theme-switch--color);
padding: 0 $small-space;
position: relative;
left: calc(#{$slide-toggle-width} + #{$small-space});
user-select: none;
}

@mixin checked-state($key, $value) {
.slide-toggle-color-#{$key} {
input:checked {
& + .slider:before {
background-color: $value;
}

&[disabled] + .slider:before {
background-color: var(--theme-color-5);
border: none;
}

&:hover:not([disabled]) + .slider:before {
background-color: darken($color: $value, $amount: 5%);
}

&:active:not([disabled]) + .slider:before {
background-color: darken($color: $value, $amount: 10%);
}
}
@include hover {
.slider:before {
background-color: var(--theme-switch-thumb-off--background--hover);
border-color: var(--theme-switch-thumb-off--border-color--hover);
}

.slider-track {
background-color: var(--theme-switch-off--background--hover);
border-color: var(--theme-switch-off--border-color--hover);
}

.text {
color: var(--theme-switch--color--hover);
}
}

@each $key, $value in $color-map-basic-ui {
@include checked-state($key, $value);
@include active {
.slider:before {
background-color: var(--theme-switch-thumb-off--background--active);
border-color: var(--theme-switch-thumb-off--border-color--active);
}

.slider-track {
background-color: var(--theme-switch-off--background--active);
border-color: var(--theme-switch-off--border-color--active);
}

.text {
color: var(--theme-switch--color--active);
}
}

&.checked {
@include toggle('on');
}

@each $key, $value in $color-map-status {
@include checked-state($key, $value);
&.indeterminate {
@include toggle('mixed');

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

&[disabled],
Expand All @@ -105,19 +203,18 @@
cursor: initial;

&:before {
background-color: var(--theme-color-2);
border-color: var(--theme-weak-bdr);
background-color: var(--theme-switch-thumb-off--background--disabled);
border-color: var(--theme-switch-thumb-off--border-color--disabled);
}

& .slider-track {
background-color: var(--theme-ghost-pressed);
border-color: var(--theme-color-disabled-btn);
border: none;
.slider-track {
background-color: var(--theme-switch-off--background--disabled);
border-color: var(--theme-switch-off--border-color--disabled);
}
}

.text {
color: var(--theme-color-weak-text);
color: var(--theme-switch--color--disabled);
}
}
}

0 comments on commit 7602def

Please sign in to comment.