mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 23:58:13 +08:00
feat(checkbox): add shadow part for label (#28604)
Issue number: Part of #28300 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Developers are unable to adjust margin, width, etc. of the checkbox label ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Checkbox label has a shadow part. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> As part of this work, I investigated moving `pointer-events: none` up the DOM tree so developers wouldn't be able to override it with the shadow part. In my testing, I was unable to see any difference in behavior with vs without `pointer-events: none`. Therefore, I removed it entirely.
This commit is contained in:
@ -2,6 +2,23 @@ import { newSpecPage } from '@stencil/core/testing';
|
||||
|
||||
import { Checkbox } from '../checkbox';
|
||||
|
||||
describe('ion-checkbox: shadow parts', () => {
|
||||
it('should render the checkbox with shadow parts', async () => {
|
||||
const page = await newSpecPage({
|
||||
components: [Checkbox],
|
||||
html: `
|
||||
<ion-checkbox>Checkbox</ion-checkbox>
|
||||
`,
|
||||
});
|
||||
|
||||
const checkbox = page.body.querySelector('ion-checkbox')!;
|
||||
|
||||
expect(checkbox).toHaveShadowPart('container');
|
||||
expect(checkbox).toHaveShadowPart('label');
|
||||
expect(checkbox).toHaveShadowPart('mark');
|
||||
});
|
||||
});
|
||||
|
||||
describe('ion-checkbox: disabled', () => {
|
||||
it('clicking disabled checkbox should not toggle checked state', async () => {
|
||||
const page = await newSpecPage({
|
||||
|
||||
Reference in New Issue
Block a user