feat(ld-select): invalid prop and checkbox mode for multiselect

emdgroup-liquid · Jul 12, 2021 · ec46f6a · ec46f6a
1 parent 4479484
commit ec46f6a
Show file tree

Hide file tree

Showing 7 changed files with 303 additions and 115 deletions.
diff --git a/src/liquid/components/ld-checkbox/readme.md b/src/liquid/components/ld-checkbox/readme.md
@@ -596,6 +596,19 @@ The `ld-checkbox` web component provides a low level API for integrating the com
 | `tone`     | `tone`     | Checkbox tone. Use `'dark'` on white backgrounds. Default is a light tone.     | `"dark"`                  | `undefined` |
 
 
+## Dependencies
+
+### Used by
+
+ - [ld-option](../ld-option)
+
+### Graph
+```mermaid
+graph TD;
+  ld-option --> ld-checkbox
+  style ld-checkbox fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/liquid/components/ld-option/ld-option.css b/src/liquid/components/ld-option/ld-option.css
@@ -51,13 +51,22 @@
   }
 }
 
-.ld-option__check {
+.ld-option__check,
+.ld-option__checkbox {
   align-self: center;
   flex-shrink: 0;
-  margin-right: var(--ld-sp-4);
   transform: translateX(calc(-1 * var(--ld-sp-2)));
 }
 
+.ld-option__check {
+  margin-right: var(--ld-sp-4);
+}
+
+.ld-option__checkbox {
+  margin-left: var(--ld-sp-2);
+  margin-right: var(--ld-sp-6);
+}
+
 /* .ld-theme-ocean -> default */
 .ld-option,
 .ld-theme-ocean .ld-option,
@@ -73,15 +82,27 @@
 
     &:where(:focus:focus-visible) {
       background-color: var(--ld-col-rb1);
+
+      :where(.ld-option__check) {
+        color: var(--ld-col-rb-focus);
+      }
     }
     @media (hover: hover) {
       &:where(:hover) {
         background-color: var(--ld-col-rb1);
+
+        :where(.ld-option__check) {
+          color: var(--ld-col-rb-hover);
+        }
       }
     }
     &:where(:active),
     &:where(:active:focus-visible) {
       background-color: var(--ld-col-rb1);
+
+      :where(.ld-option__check) {
+        color: var(--ld-col-rb-active);
+      }
     }
   }
 }
@@ -99,20 +120,32 @@
 
     &:where(:not([disabled]):not([aria-disabled='true'])) {
       :where(.ld-option__check) {
-        color: var(--ld-thm-solvent-bg-primary);
+        color: var(--ld-col-rp-default);
       }
 
       &:where(:focus:focus-visible) {
         background-color: var(--ld-col-rp1);
+
+        :where(.ld-option__check) {
+          color: var(--ld-col-rp-focus);
+        }
       }
       @media (hover: hover) {
         &:where(:hover) {
           background-color: var(--ld-col-rp1);
+
+          :where(.ld-option__check) {
+            color: var(--ld-col-rp-hover);
+          }
         }
       }
       &:where(:active),
       &:where(:active:focus-visible) {
         background-color: var(--ld-col-rp1);
+
+        :where(.ld-option__check) {
+          color: var(--ld-col-rp-active);
+        }
       }
     }
   }
@@ -132,15 +165,27 @@
 
       &:where(:focus:focus-visible) {
         background-color: var(--ld-col-rg1);
+
+        :where(.ld-option__check) {
+          color: var(--ld-col-rg-focus);
+        }
       }
       @media (hover: hover) {
         &:where(:hover) {
           background-color: var(--ld-col-rg1);
+
+          :where(.ld-option__check) {
+            color: var(--ld-col-rg-hover);
+          }
         }
       }
       &:where(:active),
       &:where(:active:focus-visible) {
         background-color: var(--ld-col-rg1);
+
+        :where(.ld-option__check) {
+          color: var(--ld-col-rg-active);
+        }
       }
     }
   }

diff --git a/src/liquid/components/ld-option/ld-option.tsx b/src/liquid/components/ld-option/ld-option.tsx
@@ -44,6 +44,11 @@ export class LdOption {
    */
   @Prop() disabled = false
 
+  /**
+   * If true the option displays a checkbox, either checked or unchecked, instead of a simple check icon.
+   */
+  @Prop() checkbox = false
+
   /**
    * Emitted on either selection or de-selection of the option.
    */
@@ -98,23 +103,34 @@ export class LdOption {
         onClick={this.handleClick.bind(this)}
         tabindex="-1"
       >
-        <svg
-          style={{ visibility: this.selected ? 'inherit' : 'hidden' }}
-          class="ld-option__check"
-          width="20"
-          height="20"
-          viewBox="0 0 20 20"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M15 7L8.40795 13L5 9.63964"
-            stroke="currentColor"
-            stroke-width="3"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
-        </svg>
+        {this.checkbox ? (
+          <ld-checkbox
+            role="presentation"
+            class="ld-option__checkbox"
+            checked={this.selected}
+            disabled={this.disabled}
+          ></ld-checkbox>
+        ) : (
+          <svg
+            role={'presentation'}
+            class="ld-option__check"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              style={{ visibility: this.selected ? 'inherit' : 'hidden' }}
+              d="M15 7L8.40795 13L5 9.63964"
+              stroke="currentColor"
+              stroke-width="3"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        )}
+
         <span
           ref={(el) => (this.optionLabelRef = el as HTMLElement)}
           class="ld-option__label"

diff --git a/src/liquid/components/ld-option/readme.md b/src/liquid/components/ld-option/readme.md
@@ -9,6 +9,7 @@
 
 | Property             | Attribute             | Description                                                                                                                                                                                                     | Type      | Default     |
 | -------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
+| `checkbox`           | `checkbox`            | If true the option displays a checkbox, either checked or unchecked, instead of a simple check icon.                                                                                                            | `boolean` | `false`     |
 | `disabled`           | `disabled`            | Disables the option.                                                                                                                                                                                            | `boolean` | `false`     |
 | `preventDeselection` | `prevent-deselection` | Prevents deselection of a selected option using a repeated mouse or keyboard interaction.                                                                                                                       | `boolean` | `false`     |
 | `selected`           | `selected`            | If present, this boolean attribute indicates that the option is selected.                                                                                                                                       | `boolean` | `false`     |
@@ -22,6 +23,19 @@
 | `ldOptionSelect` | Emitted on either selection or de-selection of the option. | `CustomEvent<boolean>` |
 
 
+## Dependencies
+
+### Depends on
+
+- [ld-checkbox](../ld-checkbox)
+
+### Graph
+```mermaid
+graph TD;
+  ld-option --> ld-checkbox
+  style ld-option fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*