From f9f5654ab0e920bf97089fbabfb9eedbcf6fe8ae Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 1 Dec 2023 11:26:05 -0500
Subject: [PATCH] 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.
---
 core/api.txt                                    |  1 +
 core/src/components/checkbox/checkbox.scss      | 12 ------------
 core/src/components/checkbox/checkbox.tsx       |  2 ++
 .../components/checkbox/test/checkbox.spec.ts   | 17 +++++++++++++++++
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index 91038fa3b4..9f30c35c09 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -315,6 +315,7 @@ ion-checkbox,css-prop,--checkmark-width
 ion-checkbox,css-prop,--size
 ion-checkbox,css-prop,--transition
 ion-checkbox,part,container
+ion-checkbox,part,label
 ion-checkbox,part,mark
 
 ion-chip,shadow
diff --git a/core/src/components/checkbox/checkbox.scss b/core/src/components/checkbox/checkbox.scss
index c5b8030e84..4119c7d754 100644
--- a/core/src/components/checkbox/checkbox.scss
+++ b/core/src/components/checkbox/checkbox.scss
@@ -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
 // ---------------------------------------------
 
diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
index 096fbea383..ab65f51a83 100644
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -18,6 +18,7 @@ import type { CheckboxChangeEventDetail } from './checkbox-interface';
  * @slot - The label text to associate with the checkbox. Use the "labelPlacement" property to control where the label is placed relative to the checkbox.
  *
  * @part container - The container for the checkbox mark.
+ * @part label - The label text describing the checkbox.
  * @part mark - The checkmark used to indicate the checked state.
  */
 @Component({
@@ -284,6 +285,7 @@ export class Checkbox implements ComponentInterface {
               'label-text-wrapper': true,
               'label-text-wrapper-hidden': el.textContent === '',
             }}
+            part="label"
           >
             <slot></slot>
           </div>
diff --git a/core/src/components/checkbox/test/checkbox.spec.ts b/core/src/components/checkbox/test/checkbox.spec.ts
index f695fdded9..5cc256ecd0 100644
--- a/core/src/components/checkbox/test/checkbox.spec.ts
+++ b/core/src/components/checkbox/test/checkbox.spec.ts
@@ -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({