material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-10-26 21:56:56 +03:00
Code Issues Projects Releases Wiki Activity

chore(radio): remove compat deps

Browse Source 
PiperOrigin-RevId: 478566674
This commit is contained in:
Elizabeth Mitchell 2022-10-03 11:57:50 -07:00 committed by Copybara-Service
parent 4115cbc77e
commit 37b1d10031
3 changed files with 58 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
radio/lib/_radio-theme.scss
View File

@ -10,7 +10,6 @@
@use 'sass:selector';
@use '@material/web/ripple/ripple-theme';
@use '@material/web/compat/theme/shadow-dom';
@use '@material/web/sass/theme';
@use '@material/web/tokens';
@ -322,8 +321,10 @@ $_theme-extension-keys: (
}
@mixin _checked-selector() {
@include shadow-dom.host-aware(selector.append(&, '[checked]')) {
@content;
@at-root {
:host([checked]) {
@content;
}
}
}

15
radio/lib/radio.ts
View File

@ -11,7 +11,6 @@ import '@material/web/focus/focus-ring.js';
import '@material/web/ripple/ripple.js';
import {ActionElement, BeginPressConfig, EndPressConfig} from '@material/web/actionelement/action-element.js';
import {ariaProperty as legacyAriaProperty} from '@material/web/compat/base/aria-property.js';
import {ariaProperty} from '@material/web/decorators/aria-property.js';
import {pointerPress, shouldShowStrongFocus} from '@material/web/focus/strong-focus.js';
import {MdRipple} from '@material/web/ripple/ripple.js';
@ -107,19 +106,17 @@ export class Radio extends ActionElement {
@state() protected focused = false;
/** @soyPrefixAttribute */
@ariaProperty // tslint:disable-line:no-new-decorators
@property({attribute: 'aria-label'})
@property({attribute: 'data-aria-label', noAccessor: true})
override ariaLabel!: string;
/** @soyPrefixAttribute */
@legacyAriaProperty // tslint:disable-line:no-new-decorators
@property({attribute: 'aria-labelledby'})
@ariaProperty // tslint:disable-line:no-new-decorators
@property({attribute: 'data-aria-labelledby', noAccessor: true})
ariaLabelledBy!: string;
/** @soyPrefixAttribute */
@legacyAriaProperty // tslint:disable-line:no-new-decorators
@property({type: String, attribute: 'aria-describedby'})
@ariaProperty // tslint:disable-line:no-new-decorators
@property(
{type: String, attribute: 'data-aria-describedby', noAccessor: true})
ariaDescribedBy!: undefined|string;
protected rippleElement: MdRipple|null = null;

87
radio/md-radio_test.ts
View File

@ -8,10 +8,11 @@
// tslint:disable:strip-private-property-underscore
import {fixture, TestFixture} from '@material/web/compat/testing/helpers.js'; // TODO(b/235474830): remove the use of fixtures
import {MdFocusRing} from '@material/web/focus/focus-ring.js';
import {html} from 'lit';
import {Environment} from '../testing/environment.js';
import {RadioHarness} from './harness.js';
import {MdRadio} from './radio.js';
@ -42,24 +43,23 @@ const repeatedRadio = (values: string[]) => {
};
describe('md-radio', () => {
let fixt: TestFixture;
const env = new Environment();
let element: MdRadio;
let harness: RadioHarness;
afterEach(() => {
fixt.remove();
});
describe('basic', () => {
it('initializes as an md-radio', async () => {
fixt = await fixture(defaultRadio);
element = fixt.root.querySelector('md-radio')!;
const root = env.render(defaultRadio);
await env.waitForStability();
element = root.querySelector('md-radio')!;
expect(element).toBeInstanceOf(MdRadio);
});
it('clicking a radio should select it', async () => {
fixt = await fixture(radioGroup);
element = fixt.root.querySelectorAll('md-radio')[1];
const root = env.render(radioGroup);
await env.waitForStability();
element = root.querySelectorAll('md-radio')[1];
harness = new RadioHarness(element);
await harness.clickWithMouse();
expect(element.checked).toBeTrue();
@ -67,11 +67,12 @@ describe('md-radio', () => {
it('clicking a radio should unselect other radio which is already selected',
async () => {
fixt = await fixture(radioGroupPreSelected);
const a2 = fixt.root.querySelectorAll('md-radio')[1];
const root = env.render(radioGroupPreSelected);
await env.waitForStability();
const a2 = root.querySelectorAll('md-radio')[1];
expect(a2.checked).toBeTrue();
const a3 = fixt.root.querySelectorAll('md-radio')[2];
const a3 = root.querySelectorAll('md-radio')[2];
harness = new RadioHarness(a3);
await harness.clickWithMouse();
expect(a3.checked).toBeTrue();
@ -79,10 +80,11 @@ describe('md-radio', () => {
});
it('disabled radio should not be selected when clicked', async () => {
fixt = await fixture(radioGroupDisabled);
const a1 = fixt.root.querySelectorAll('md-radio')[0];
const root = env.render(radioGroupDisabled);
await env.waitForStability();
const a1 = root.querySelectorAll('md-radio')[0];
expect(a1.checked).toBeFalse();
const a2 = fixt.root.querySelectorAll('md-radio')[1];
const a2 = root.querySelectorAll('md-radio')[1];
expect(a2.checked).toBeTrue();
await (new RadioHarness(a1)).clickWithMouse();
@ -95,11 +97,12 @@ describe('md-radio', () => {
describe('events', () => {
it('Should trigger change event when a radio is selected', async () => {
fixt = await fixture(radioGroupPreSelected);
const root = env.render(radioGroupPreSelected);
await env.waitForStability();
const changeHandler = jasmine.createSpy('changeHandler');
fixt.root.addEventListener('change', changeHandler);
root.addEventListener('change', changeHandler);
const a3 = fixt.root.querySelectorAll('md-radio')[2];
const a3 = root.querySelectorAll('md-radio')[2];
harness = new RadioHarness(a3);
await harness.clickWithMouse();
@ -111,45 +114,48 @@ describe('md-radio', () => {
describe('navigation', () => {
it('Using arrow right should select the next radio button', async () => {
fixt = await fixture(radioGroupPreSelected);
const a2 = fixt.root.querySelectorAll('md-radio')[1];
const root = env.render(radioGroupPreSelected);
await env.waitForStability();
const a2 = root.querySelectorAll('md-radio')[1];
expect(a2.checked).toBeTrue();
const eventRight =
new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true});
a2.dispatchEvent(eventRight);
const a3 = fixt.root.querySelectorAll('md-radio')[2];
const a3 = root.querySelectorAll('md-radio')[2];
expect(a3.checked).toBeTrue();
expect(a2.checked).toBeFalse();
});
it('Using arrow right on the last radio should select the first radio in that group',
async () => {
fixt = await fixture(radioGroupPreSelected);
const root = env.render(radioGroupPreSelected);
await env.waitForStability();
const a2 = fixt.root.querySelectorAll('md-radio')[1];
const a2 = root.querySelectorAll('md-radio')[1];
expect(a2.checked).toBeTrue();
const eventRight = new KeyboardEvent(
'keydown', {key: 'ArrowRight', bubbles: true});
const eventRight =
new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true});
a2.dispatchEvent(eventRight);
const a3 = fixt.root.querySelectorAll('md-radio')[2];
const a3 = root.querySelectorAll('md-radio')[2];
a3.dispatchEvent(eventRight);
expect(a3.checked).toBeFalse();
const a1 = fixt.root.querySelectorAll('md-radio')[0];
const a1 = root.querySelectorAll('md-radio')[0];
expect(a1.checked).toBeTrue();
const b1 = fixt.root.querySelectorAll('md-radio')[3];
const b1 = root.querySelectorAll('md-radio')[3];
expect(b1.checked).toBeFalse();
});
});
describe('manages selection groups', () => {
it('synchronously', async () => {
fixt = await fixture(radioGroup);
const root = env.render(radioGroup);
await env.waitForStability();
const [a1, a2, b1] = [...fixt.root.querySelectorAll('md-radio')];
const [a1, a2, b1] = [...root.querySelectorAll('md-radio')];
expect(a1.checked).toBeFalse();
expect(a2.checked).toBeFalse();
@ -187,9 +193,10 @@ describe('md-radio', () => {
});
it('after updates settle', async () => {
fixt = await fixture(radioGroup);
const root = env.render(radioGroup);
await env.waitForStability();
const radios = [...fixt.root.querySelectorAll('md-radio')];
const radios = [...root.querySelectorAll('md-radio')];
const [a1, a2, b1] = radios;
const allUpdatesComplete = () =>
Promise.all(radios.map((radio) => radio.updateComplete));
@ -234,8 +241,8 @@ describe('md-radio', () => {
});
it('when checked before connected', async () => {
fixt = await fixture(html`<main></main>`);
const container = fixt.root.querySelector('main')!;
const root = env.render(html`<main></main>`);
const container = root.querySelector('main')!;
const r1 = document.createElement('md-radio');
r1.name = 'a';
@ -283,8 +290,9 @@ describe('md-radio', () => {
it('in a lit repeat', async () => {
const values = ['a1', 'a2'];
fixt = await fixture(repeatedRadio(values));
const [a1, a2] = fixt.root.querySelectorAll('md-radio');
const root = env.render(repeatedRadio(values));
await env.waitForStability();
const [a1, a2] = root.querySelectorAll('md-radio');
expect(a1.checked).toBeFalse();
expect(a2.checked).toBeFalse();
@ -309,8 +317,9 @@ describe('md-radio', () => {
let focusRing: MdFocusRing;
beforeEach(async () => {
fixt = await fixture(defaultRadio);
element = fixt.root.querySelector('md-radio')!;
const root = env.render(defaultRadio);
await env.waitForStability();
element = root.querySelector('md-radio')!;
focusRing = element.shadowRoot!.querySelector('md-focus-ring')!;
harness = new RadioHarness(element);
});