fix(core/checkbox, core/radiobutton): hide native intput (#235)

siemens · Dec 12, 2022 · c481a6b · c481a6b
1 parent d569681
commit c481a6b
Show file tree

Hide file tree

Showing 10 changed files with 43 additions and 86 deletions.
diff --git a/packages/aggrid/scss/ix-aggrid.scss b/packages/aggrid/scss/ix-aggrid.scss
@@ -24,6 +24,16 @@
 
   --ag-checkbox-checked-color: var(--theme-color-input--focus);
 
+  .ag-checkbox-input {
+    clip: inherit !important;
+    clip-path: inherit !important;
+    height: inherit !important;
+    width: inherit !important;
+    overflow: inherit !important;
+    position: inherit !important;
+    white-space: inherit !important;
+  }
+
   .ag-root-wrapper {
     border: none;
   }

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -2255,8 +2255,7 @@
         "ix-menu",
         "ix-menu-avatar",
         "ix-select",
-        "ix-split-button",
-        "my-component"
+        "ix-split-button"
       ],
       "dependencies": [],
       "dependencyGraph": {
@@ -2277,9 +2276,6 @@
         ],
         "ix-split-button": [
           "ix-dropdown"
-        ],
-        "my-component": [
-          "ix-dropdown"
         ]
       },
       "props": [
@@ -2575,8 +2571,7 @@
         "ix-menu-avatar-item",
         "ix-select",
         "ix-select-item",
-        "ix-split-button-item",
-        "my-component"
+        "ix-split-button-item"
       ],
       "dependencies": [
         "ix-icon"
@@ -2602,9 +2597,6 @@
         ],
         "ix-split-button-item": [
           "ix-dropdown-item"
-        ],
-        "my-component": [
-          "ix-dropdown-item"
         ]
       },
       "props": [
@@ -3228,9 +3220,7 @@
       "docs": "<!--\nSPDX-FileCopyrightText: 2022 Siemens AG\n\nSPDX-License-Identifier: MIT\n-->",
       "docsTags": [],
       "encapsulation": "scoped",
-      "dependents": [
-        "my-component"
-      ],
+      "dependents": [],
       "dependencies": [
         "ix-icon",
         "ix-group-context-menu",
@@ -3250,9 +3240,6 @@
         ],
         "ix-group-item": [
           "ix-icon"
-        ],
-        "my-component": [
-          "ix-group"
         ]
       },
       "props": [
@@ -3532,8 +3519,7 @@
       "docsTags": [],
       "encapsulation": "scoped",
       "dependents": [
-        "ix-group",
-        "my-component"
+        "ix-group"
       ],
       "dependencies": [
         "ix-icon"
@@ -3544,9 +3530,6 @@
         ],
         "ix-group": [
           "ix-group-item"
-        ],
-        "my-component": [
-          "ix-group-item"
         ]
       },
       "props": [
@@ -9218,37 +9201,8 @@
       "docsTags": [],
       "encapsulation": "scoped",
       "dependents": [],
-      "dependencies": [
-        "ix-group",
-        "ix-dropdown",
-        "ix-dropdown-item",
-        "ix-group-item"
-      ],
-      "dependencyGraph": {
-        "my-component": [
-          "ix-group",
-          "ix-dropdown",
-          "ix-dropdown-item",
-          "ix-group-item"
-        ],
-        "ix-group": [
-          "ix-icon",
-          "ix-group-context-menu",
-          "ix-group-item"
-        ],
-        "ix-group-context-menu": [
-          "ix-icon-button"
-        ],
-        "ix-icon-button": [
-          "ix-icon"
-        ],
-        "ix-group-item": [
-          "ix-icon"
-        ],
-        "ix-dropdown-item": [
-          "ix-icon"
-        ]
-      },
+      "dependencies": [],
+      "dependencyGraph": {},
       "props": [],
       "methods": [],
       "events": [],

diff --git a/packages/core/scss/components/_checkboxes.scss b/packages/core/scss/components/_checkboxes.scss
@@ -13,17 +13,13 @@
   /* Base for label styling */
   [type='checkbox']:not(:checked),
   [type='checkbox']:checked {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
     position: absolute;
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  .ag-checkbox-input-wrapper {
-    [type='checkbox']:not(:checked),
-    [type='checkbox']:checked {
-      position: absolute;
-      visibility: unset;
-    }
+    white-space: nowrap;
   }
 
   [type='checkbox']:not(:checked) + label,
@@ -32,7 +28,6 @@
     display: inline-flex;
     align-items: flex-start;
     user-select: none;
-
     color: var(--theme-checkbox-label--color);
   }
 

diff --git a/packages/core/scss/components/_radiobuttons.scss b/packages/core/scss/components/_radiobuttons.scss
@@ -13,9 +13,13 @@
   /* Base for label styling */
   [type='radio']:not(:checked),
   [type='radio']:checked {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
     position: absolute;
-    opacity: 0;
-    pointer-events: none;
+    white-space: nowrap;
   }
 
   [type='radio']:not(:checked) + label,

diff --git a/packages/core/scss/theme/classic-dark/_variables.scss b/packages/core/scss/theme/classic-dark/_variables.scss
@@ -38,13 +38,14 @@ $classic-dark: (
     color-inv-weak-text: rgba(0, 0, 0, 0.3),
     color-lightbox: rgba(0, 0, 0, 0.55),
     color-backdrop: rgba(16, 24, 28, 0.85),
-    color-input-focus: #00ffb9,
+    color-input--focus: #00ffb9,
     app-header--color: rgba(255, 255, 255, 0.85),
     app-header--background: #555f69,
     app-header--border-color: rgba(0, 0, 0, 0),
     link-btn--border-color--hover: #41aaaa,
     btn-secondary--background--disabled: rgba(255, 255, 255, 0.25),
-    btn-invisible-secondary--background--selected-active: rgba(113, 191, 191, 0.32),
+    btn-invisible-secondary--background--selected-active:
+      rgba(113, 191, 191, 0.32),
     btn-secondary--color--active: rgba(255, 255, 255, 0.75),
     btn-primary--border-color--hover: rgba(255, 255, 255, 0),
     btn-secondary--color: rgba(255, 255, 255, 0.75),
@@ -823,5 +824,4 @@ $classic-dark: (
     chart-16: #baba9d,
     chart-17-40: rgba(181, 189, 0, 0.4),
     chart-17: #b5bd00,
-
 );
diff --git a/packages/core/scss/theme/classic-light/_variables.scss b/packages/core/scss/theme/classic-light/_variables.scss
@@ -38,7 +38,7 @@ $classic-light: (
     color-lightbox: rgba(255, 255, 255, 0.6),
     color-7: #879baa,
     color-backdrop: rgba(255, 255, 255, 0.85),
-    color-input-focus: #00d7a0,
+    color-input--focus: #00d7a0,
     app-header--color: rgba(255, 255, 255, 0.85),
     app-header--background: #555f69,
     app-header--border-color: rgba(0, 0, 0, 0),
@@ -826,5 +826,4 @@ $classic-light: (
     chart-1-40: rgba(0, 133, 120, 0.4),
     color-1: #fff,
     input-hint--color: rgba(0, 0, 0, 0.6),
-
 );
diff --git a/packages/core/src/components/group-item/group-item.scss b/packages/core/src/components/group-item/group-item.scss
@@ -80,7 +80,7 @@
     background-color: var(--theme-group-item--background--selected);
 
     .group-entry-selection-indicator {
-      background-color: var(--theme-color-input-focus);
+      background-color: var(--theme-color-input--focus);
     }
   }
 

diff --git a/packages/core/src/components/group/group.scss b/packages/core/src/components/group/group.scss
@@ -130,7 +130,7 @@
 
   .group-header.selected {
     .group-header-selection-indicator {
-      background-color: var(--theme-color-input-focus);
+      background-color: var(--theme-color-input--focus);
     }
   }
 

diff --git a/packages/core/src/components/my-component/my-component.tsx b/packages/core/src/components/my-component/my-component.tsx
@@ -16,19 +16,6 @@ import { Component, h, Host } from '@stencil/core';
 })
 export class MyComponent {
   render() {
-    return (
-      <Host>
-        <ix-group>
-          <ix-dropdown slot="dropdown">
-            <ix-dropdown-item label="dropdown 1"></ix-dropdown-item>
-            <ix-dropdown-item label="dropdown 2"></ix-dropdown-item>
-            <ix-dropdown-item label="dropdown 3"></ix-dropdown-item>
-          </ix-dropdown>
-          <ix-group-item>Test</ix-group-item>
-          <ix-group-item>Test</ix-group-item>
-          <ix-group-item>Test</ix-group-item>
-        </ix-group>
-      </Host>
-    );
+    return <Host></Host>;
   }
 }
diff --git a/packages/html-test-app/src/preview-examples/aggrid.html b/packages/html-test-app/src/preview-examples/aggrid.html
@@ -9,6 +9,14 @@
   <head>
     <title>Blind example</title>
     <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.css"
+    />
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->