Skip to content

Commit

Permalink
fix(core/toggle): toggle disable style (#356)
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 authored Feb 8, 2023
1 parent 38f55dc commit 5c4faf8
Show file tree
Hide file tree
Showing 10 changed files with 92 additions and 8 deletions.
2 changes: 1 addition & 1 deletion packages/core/scss/theme/classic-dark/_borderWidth.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
--theme-focus--border-thickness: 0.0625rem;
--theme-radiobtn--border-thickness: 0.125rem;
--theme-input--border-thickness: 0.0625rem;
--theme-menu--border-thickness: 0rem;
--theme-menu--border-thickness: 0.0625rem;
--theme-message-bar--border-thickness: 0.125rem;
--theme-modal--border-thickness: 0.0625rem;
--theme-toast--border-thickness: 0rem;
Expand Down
6 changes: 3 additions & 3 deletions packages/core/scss/theme/classic-dark/_color.scss
Original file line number Diff line number Diff line change
Expand Up @@ -569,15 +569,15 @@
--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-0);
--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-0);
--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-0);
--theme-switch-thumb-mixed--border-color--disabled: var(--theme-color-5);
--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
2 changes: 1 addition & 1 deletion packages/core/scss/theme/classic-light/_borderWidth.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
--theme-focus--border-thickness: 0.0625rem;
--theme-radiobtn--border-thickness: 0.125rem;
--theme-input--border-thickness: 0.0625rem;
--theme-menu--border-thickness: 0rem;
--theme-menu--border-thickness: 0.0625rem;
--theme-message-bar--border-thickness: 0.125rem;
--theme-modal--border-thickness: 0.0625rem;
--theme-toast--border-thickness: 0rem;
Expand Down
6 changes: 3 additions & 3 deletions packages/core/scss/theme/classic-light/_color.scss
Original file line number Diff line number Diff line change
Expand Up @@ -569,15 +569,15 @@
--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-0);
--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-0);
--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-0);
--theme-switch-thumb-mixed--border-color--disabled: var(--theme-color-5);
--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
21 changes: 21 additions & 0 deletions packages/core/src/components/toggle/test/disabled/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!--
SPDX-FileCopyrightText: 2022 Siemens AG
SPDX-License-Identifier: MIT
-->

<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 text-off="Offline" text-on="Online" disabled checked></ix-toggle>
<ix-toggle text-off="Offline" text-on="Online" disabled></ix-toggle>
<script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
</body>
</html>
5 changes: 5 additions & 0 deletions packages/core/src/components/toggle/test/toggle.e2e.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,9 @@ regressionTest.describe('toggle', () => {
await page.goto('toggle/test/basic');
expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
});

regressionTest('disabled', async ({ page }) => {
await page.goto('toggle/test/disabled');
expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
});
});
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
57 changes: 57 additions & 0 deletions packages/core/src/components/toggle/test/toggle.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
/*
* 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.
*/
/*
* SPDX-FileCopyrightText: 2022 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 { newSpecPage, SpecPage } from '@stencil/core/testing';
import { CuiToggle } from '../toggle';

describe('ix-toggle', () => {
let page: SpecPage;

it('should toggle', async () => {
page = await newSpecPage({
components: [CuiToggle],
html: '<ix-toggle></ix-toggle>',
});

await page.waitForChanges();

(
page.doc.querySelector('ix-toggle > label > input') as HTMLElement
).dispatchEvent(new Event('change'));
await page.waitForChanges();

expect(page.doc.querySelector('ix-toggle').checked).toBeTruthy();
expect(page.doc.querySelector('ix-toggle').className).toContain('checked');
});

it('should be disabled', async () => {
page = await newSpecPage({
components: [CuiToggle],
html: '<ix-toggle disabled></ix-toggle>',
});

await page.waitForChanges();

(
page.doc.querySelector('ix-toggle > label > input') as HTMLElement
).dispatchEvent(new Event('change'));
await page.waitForChanges();

expect(page.doc.querySelector('ix-toggle').checked).toBeFalsy();
expect(page.doc.querySelector('ix-toggle').className).toContain('disabled');
});
});
1 change: 1 addition & 0 deletions packages/core/src/components/toggle/toggle.scss
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,7 @@
&.disabled {
.slider {
cursor: initial;
opacity: 0.5;

&:before {
background-color: var(--theme-switch-thumb-off--background--disabled);
Expand Down

0 comments on commit 5c4faf8

Please sign in to comment.