Changed label support for dnn-checkbox

Closes #1186
DNNCommunity · Sep 30, 2024 · 89ce2ee · 89ce2ee
1 parent f9713b9
commit 89ce2ee
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 39 deletions.
diff --git a/packages/stencil-library/custom-elements.json b/packages/stencil-library/custom-elements.json
@@ -385,10 +385,6 @@
             }
           ],
           "slots": [
-            {
-              "name": " ",
-              "description": "The label for the checkbox."
-            },
             {
               "name": "checkedicon",
               "description": "Allows overriding the default checked icon."

diff --git a/packages/stencil-library/src/components.d.ts b/packages/stencil-library/src/components.d.ts
@@ -125,6 +125,9 @@ export namespace Components {
          */
         "type": 'primary' | 'danger' | 'secondary' | 'tertiary';
     }
+    /**
+     * @deprecated - The label for the checkbox - Obsolete, implement your own label.
+     */
     interface DnnCheckbox {
         /**
           * Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined)
@@ -865,6 +868,9 @@ declare global {
     interface HTMLDnnCheckboxElementEventMap {
         "checkedchange": "checked" | "unchecked" | "intermediate";
     }
+    /**
+     * @deprecated - The label for the checkbox - Obsolete, implement your own label.
+     */
     interface HTMLDnnCheckboxElement extends Components.DnnCheckbox, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDnnCheckboxElementEventMap>(type: K, listener: (this: HTMLDnnCheckboxElement, ev: DnnCheckboxCustomEvent<HTMLDnnCheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1401,6 +1407,9 @@ declare namespace LocalJSX {
          */
         "type"?: 'primary' | 'danger' | 'secondary' | 'tertiary';
     }
+    /**
+     * @deprecated - The label for the checkbox - Obsolete, implement your own label.
+     */
     interface DnnCheckbox {
         /**
           * Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined)
@@ -2074,6 +2083,9 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "dnn-autocomplete": LocalJSX.DnnAutocomplete & JSXBase.HTMLAttributes<HTMLDnnAutocompleteElement>;
             "dnn-button": LocalJSX.DnnButton & JSXBase.HTMLAttributes<HTMLDnnButtonElement>;
+            /**
+             * @deprecated - The label for the checkbox - Obsolete, implement your own label.
+             */
             "dnn-checkbox": LocalJSX.DnnCheckbox & JSXBase.HTMLAttributes<HTMLDnnCheckboxElement>;
             "dnn-chevron": LocalJSX.DnnChevron & JSXBase.HTMLAttributes<HTMLDnnChevronElement>;
             "dnn-collapsible": LocalJSX.DnnCollapsible & JSXBase.HTMLAttributes<HTMLDnnCollapsibleElement>;

diff --git a/packages/stencil-library/src/components/dnn-checkbox/dnn-checkbox.tsx b/packages/stencil-library/src/components/dnn-checkbox/dnn-checkbox.tsx
@@ -1,8 +1,8 @@
-import { Component, Element, Host, h, Prop, Event, EventEmitter, AttachInternals, Watch, State } from '@stencil/core';
+import { Component, Element, Host, h, Prop, Event, EventEmitter, AttachInternals, Watch, State, Listen } from '@stencil/core';
 import { CheckedState } from './types';
 
 /**
- * @slot - The label for the checkbox.
+ * @slot @deprecated - The label for the checkbox - Obsolete, implement your own label.
  * @slot checkedicon - Allows overriding the default checked icon.
  * @slot uncheckedicon - Allows overriding the unchecked icon.
  * @slot intermediateicon - If intermadiate state is used, allows overriding its icon.
@@ -31,6 +31,11 @@ export class DnnCheckbox {
   /** Fires up when the checkbox checked property changes. */
   @Event() checkedchange: EventEmitter<"checked" | "unchecked" | "intermediate">;
 
+  @Listen("click", { capture: true })
+  handleClick() {
+    this.changeState();
+  }
+
   @State() focused = false;
 
   @AttachInternals() internals: ElementInternals;
@@ -102,7 +107,6 @@ export class DnnCheckbox {
           onFocus={() => this.focused = true}
           onBlur={() => this.focused = false}
           class={`icon ${this.checked}`}
-          onClick={() => this.changeState()}
         >
           <div class="unchecked">
             <slot name="uncheckedicon">
@@ -120,7 +124,6 @@ export class DnnCheckbox {
             </slot>
           </div>
         </button>
-        <label htmlFor={this.el.id} onClick={() => this.changeState()}><slot></slot></label>
       </Host>
     );
   }

diff --git a/packages/stencil-library/src/components/dnn-checkbox/readme.md b/packages/stencil-library/src/components/dnn-checkbox/readme.md
@@ -5,6 +5,8 @@
 <!-- Auto Generated Below -->
 
 
+> **[DEPRECATED]** - The label for the checkbox - Obsolete, implement your own label.
+
 ## Usage
 
 ### HTML
@@ -53,7 +55,6 @@
 
 | Slot                 | Description                                                |
 | -------------------- | ---------------------------------------------------------- |
-|                      | The label for the checkbox.                                |
 | `"checkedicon"`      | Allows overriding the default checked icon.                |
 | `"intermediateicon"` | If intermadiate state is used, allows overriding its icon. |
 | `"uncheckedicon"`    | Allows overriding the unchecked icon.                      |

diff --git a/packages/stencil-library/src/components/dnn-permissions-grid/dnn-permissions-grid.scss b/packages/stencil-library/src/components/dnn-permissions-grid/dnn-permissions-grid.scss
@@ -67,8 +67,8 @@ table{
       }
       td{
         text-align: center;
-        dnn-checkbox{
-          span{
+        label{
+          .hidden{
             display: none;
           }
         }

diff --git a/packages/stencil-library/src/components/dnn-permissions-grid/dnn-permissions-grid.tsx b/packages/stencil-library/src/components/dnn-permissions-grid/dnn-permissions-grid.tsx
@@ -163,19 +163,21 @@ export class DnnPermissionsGrid {
 
     const checked = item == undefined ? "intermediate" : item.allowAccess ? "checked" : "unchecked";
     return(
-      <dnn-checkbox
-        use-intermediate
-        checked={checked}
-        onCheckedchange={e => this.handleRoleChanged(e.detail, rolePermission, permissionDefinition)}
-      >
-        <div slot="intermediateicon">
-          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>
-        </div>
-        <div slot="uncheckedicon">
-          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z"/></svg>
-        </div>
-        <span>{permissionDefinition.permissionName}</span>
-      </dnn-checkbox>
+      <label>
+        <span class="hidden">{permissionDefinition.permissionName}</span>
+        <dnn-checkbox
+          use-intermediate
+          checked={checked}
+          onCheckedchange={e => this.handleRoleChanged(e.detail, rolePermission, permissionDefinition)}
+        >
+          <div slot="intermediateicon">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>
+          </div>
+          <div slot="uncheckedicon">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z"/></svg>
+          </div>
+        </dnn-checkbox>
+      </label>
     )
   }
 
@@ -184,19 +186,21 @@ export class DnnPermissionsGrid {
 
     const checked = item == undefined ? "intermediate" : item.allowAccess ? "checked" : "unchecked";
     return(
-      <dnn-checkbox
-        use-intermediate
-        checked={checked}
-        onCheckedchange={e => this.handleUserChanged(e.detail, userPermission, permissionDefinition)}
-      >
-        <div slot="intermediateicon">
-          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>
-        </div>
-        <div slot="uncheckedicon">
-          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z"/></svg>
-        </div>
-        <span>{permissionDefinition.permissionName}</span>
-      </dnn-checkbox>
+      <label>
+        <span class="hidden">{permissionDefinition.permissionName}</span>
+        <dnn-checkbox
+          use-intermediate
+          checked={checked}
+          onCheckedchange={e => this.handleUserChanged(e.detail, userPermission, permissionDefinition)}
+        >
+          <div slot="intermediateicon">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>
+          </div>
+          <div slot="uncheckedicon">
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z"/></svg>
+          </div>
+        </dnn-checkbox>
+      </label>
     )
   }
 

diff --git a/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx b/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx
@@ -245,9 +245,10 @@ export class DnnExampleForm {
                 helpText="Please enter the URL of your website."
                 name="website"
               />
-                <dnn-checkbox name="rememberMe" value="true">
+              <label>
+                <dnn-checkbox name="rememberMe" value="true" />
                   Remember me
-                </dnn-checkbox>
+              </label>
               <dnn-color-input
                 label="Favorite Color"
                 name="favoriteColor"