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:
Shawn Taylor
2023-12-01 11:26:05 -05:00
committed by GitHub
parent a34188f7db
commit f9f5654ab0
4 changed files with 20 additions and 12 deletions

View File

@ -90,13 +90,6 @@
}
.label-text-wrapper {
/**
* This ensures that double tapping this text
* clicks the <label> and focuses the checkbox
* when a screen reader is enabled.
*/
pointer-events: none;
text-overflow: ellipsis;
white-space: nowrap;
@ -173,7 +166,6 @@ input {
opacity: 0;
}
// Justify Content
// ---------------------------------------------
@ -200,7 +192,6 @@ input {
align-items: center;
}
// Label Placement - Start
// ----------------------------------------------------------------
@ -221,7 +212,6 @@ input {
@include margin(null, $form-control-label-margin, null, 0);
}
// Label Placement - End
// ----------------------------------------------------------------
@ -242,7 +232,6 @@ input {
@include margin(null, 0, null, $form-control-label-margin);
}
// Label Placement - Fixed
// ----------------------------------------------------------------
@ -317,7 +306,6 @@ input {
opacity: 1;
}
// Disabled Checkbox
// ---------------------------------------------