Skip to content

refactor(switch): remove MDC dependency #3964

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Kiarokh merged 3 commits into from
Mar 24, 2026
Merged

refactor(switch): remove MDC dependency #3964

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4eb07a9
refactor(switch): remove MDC dependency
adrianschmidt-bot Mar 19, 2026
76a13fb
fix(switch): ensure the helper text renders below the switch
Kiarokh Mar 23, 2026
91dc847
docs(switch): improve `helperText` example
Kiarokh Mar 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 38 additions & 36 deletions src/components/switch/examples/switch-helper-text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { Component, h, State } from '@stencil/core';
import { Component, h, Host, State } from '@stencil/core';

/**
* With `helperText`
*
* Switch can have a helper text, which is useful when providing additional information and
* can clarify functionality of the switch for the user.
* Switch can have a helper text, which is useful when providing
* additional information and can clarify functionality of the
* switch for the user.
*
* The helper text is displayed when the user puts focus on the switch, and works with keyboard
* navigation as well. However, on touchscreen devices, the helper text is always displayed.
* The helper text is displayed when the user interacts with the switch.
*/

@Component({
Expand All @@ -28,40 +28,42 @@ export class SwitchExampleHelperText {
private invalid = false;

public render() {
return [
<limel-switch
label={`Ask Siri: ${this.value.toString()}`}
value={this.value}
disabled={this.disabled}
readonly={this.readonly}
invalid={this.invalid}
onChange={this.changeHandler}
helperText={'Siri helps you get things done, just by asking.'}
/>,
<limel-example-controls>
<limel-switch
value={this.disabled}
label="Disabled"
onChange={this.setDisabled}
/>
<limel-switch
value={this.readonly}
label="Readonly"
onChange={this.setReadonly}
/>
<limel-switch
value={this.invalid}
label="Invalid"
onChange={this.setInvalid}
/>
return (
<Host>
<limel-switch
label="Ask Siri"
helperText="Siri helps you get things done, just by asking."
value={this.value}
label="Selected"
onChange={this.setChecked}
disabled={this.disabled}
readonly={this.readonly}
invalid={this.invalid}
onChange={this.changeHandler}
/>
</limel-example-controls>,
<limel-example-value value={this.value} />,
];
<limel-example-controls>
<limel-switch
value={this.disabled}
label="Disabled"
onChange={this.setDisabled}
/>
<limel-switch
value={this.readonly}
label="Readonly"
onChange={this.setReadonly}
/>
<limel-switch
value={this.invalid}
label="Invalid"
onChange={this.setInvalid}
/>
<limel-switch
value={this.value}
label="Selected"
onChange={this.setChecked}
/>
</limel-example-controls>
<limel-example-value value={this.value} />
</Host>
);
}

private changeHandler = (event: CustomEvent<boolean>) => {
Expand Down
2 changes: 0 additions & 2 deletions src/components/switch/partial-styles/_helper-text.scss
View file
Open in desktop

This file was deleted.

40 changes: 16 additions & 24 deletions src/components/switch/switch.e2e.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,8 @@ describe('limel-switch', () => {
);
await waitForChanges();

const mdcSwitch = root.shadowRoot.querySelector('.mdc-switch');
expect(mdcSwitch.classList.contains('mdc-switch--selected')).toBe(
false
);
const switchEl = root.shadowRoot.querySelector('button');
expect(switchEl.getAttribute('aria-checked')).toBe('false');
expect((root as any).value).toBeFalsy();
});

Expand All @@ -46,10 +44,8 @@ describe('limel-switch', () => {
);
await waitForChanges();

const mdcSwitch = root.shadowRoot.querySelector('.mdc-switch');
expect(mdcSwitch.classList.contains('mdc-switch--selected')).toBe(
true
);
const switchEl = root.shadowRoot.querySelector('button');
expect(switchEl.getAttribute('aria-checked')).toBe('true');
expect((root as any).value).toEqual(true);
});

Expand All @@ -62,10 +58,8 @@ describe('limel-switch', () => {
await setProps({ value: true });
await waitForChanges();

const mdcSwitch = root.shadowRoot.querySelector('.mdc-switch');
expect(mdcSwitch.classList.contains('mdc-switch--selected')).toBe(
true
);
const switchEl = root.shadowRoot.querySelector('button');
expect(switchEl.getAttribute('aria-checked')).toBe('true');
});

it('turns "off" when set to false via setProps', async () => {
Expand All @@ -77,10 +71,8 @@ describe('limel-switch', () => {
await setProps({ value: false });
await waitForChanges();

const mdcSwitch = root.shadowRoot.querySelector('.mdc-switch');
expect(mdcSwitch.classList.contains('mdc-switch--selected')).toBe(
false
);
const switchEl = root.shadowRoot.querySelector('button');
expect(switchEl.getAttribute('aria-checked')).toBe('false');
});
});

Expand All @@ -91,8 +83,8 @@ describe('limel-switch', () => {
);
await waitForChanges();

const mdcSwitch = root.shadowRoot.querySelector('.mdc-switch');
expect(mdcSwitch.hasAttribute('disabled')).toBe(false);
const switchEl = root.shadowRoot.querySelector('button');
expect(switchEl.hasAttribute('disabled')).toBe(false);
expect((root as any).disabled).toBeFalsy();
});

Expand All @@ -102,8 +94,8 @@ describe('limel-switch', () => {
);
await waitForChanges();

const mdcSwitch = root.shadowRoot.querySelector('.mdc-switch');
expect(mdcSwitch.hasAttribute('disabled')).toBe(true);
const switchEl = root.shadowRoot.querySelector('button');
expect(switchEl.hasAttribute('disabled')).toBe(true);
expect((root as any).disabled).toEqual(true);
});

Expand All @@ -116,8 +108,8 @@ describe('limel-switch', () => {
await setProps({ disabled: true });
await waitForChanges();

const mdcSwitch = root.shadowRoot.querySelector('.mdc-switch');
expect(mdcSwitch.hasAttribute('disabled')).toBe(true);
const switchEl = root.shadowRoot.querySelector('button');
expect(switchEl.hasAttribute('disabled')).toBe(true);
});

it('becomes enabled when property changes to false', async () => {
Expand All @@ -129,8 +121,8 @@ describe('limel-switch', () => {
await setProps({ disabled: false });
await waitForChanges();

const mdcSwitch = root.shadowRoot.querySelector('.mdc-switch');
expect(mdcSwitch.hasAttribute('disabled')).toBe(false);
const switchEl = root.shadowRoot.querySelector('button');
expect(switchEl.hasAttribute('disabled')).toBe(false);
});
});
});
Loading
Loading