fix(form components): ux dark mode updates (#311)

* fix(number input): ux dark mode updates * fix: errorIcon update * fix: get border-color from form-input.scss * fix: simplify outlineOnly * fix: update error icon color * fix: replace +/- with chevrons to match ux * fix: priyanka corrections * fix: remove icon disabled override * fix: pressed, disabled * fix: icon token update * fix: disabled
kyndryl-design-system · Jan 6, 2025 · d56ef46 · d56ef46
1 parent a66fd33
commit d56ef46
Show file tree

Hide file tree

Showing 13 changed files with 3,403 additions and 3,375 deletions.
diff --git a/custom-elements.json b/custom-elements.json
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
     "swiper": "^11.1.12"
   },
   "peerDependencies": {
-    "@kyndryl-design-system/shidoka-foundation": "^2.0.0-next.26"
+    "@kyndryl-design-system/shidoka-foundation": "^2.0.0-next.27"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
@@ -52,7 +52,7 @@
     "@commitlint/config-conventional": "^17.4.4",
     "@custom-elements-manifest/analyzer": "^0.9.4",
     "@kyndryl-design-system/shidoka-charts": "^2.0.0-next.3",
-    "@kyndryl-design-system/shidoka-foundation": "^2.0.0-next.26",
+    "@kyndryl-design-system/shidoka-foundation": "^2.0.0-next.27",
     "@open-wc/testing": "^3.1.7",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-json": "^6.1.0",

diff --git a/src/common/scss/form-input.scss b/src/common/scss/form-input.scss
@@ -37,7 +37,7 @@
   input[disabled],
   .input-custom[disabled],
   textarea[disabled] {
-    & ~ .input-icon {
+    &~.input-icon {
       color: var(--kd-color-icon-disabled);
     }
   }
@@ -54,8 +54,8 @@ input,
 textarea {
   pointer-events: auto;
   @include typography.type-body-02;
-  border-color: var(--kd-color-border-ui-default);
-  color: var(--kd-color-text-forms-input-field-text);
+  border-color: var(--kd-color-border-forms-default);
+  color: var(--kd-color-text-level-primary);
   transition: background-color 150ms ease-out, border-color 150ms ease-out,
     outline-color 150ms ease-out;
   background: var(--kd-color-background-forms-default);
@@ -90,20 +90,21 @@ textarea {
     &[invalid] {
       border-color: var(--kd-color-border-ui-disabled);
     }
+
     &::placeholder {
       color: var(--kd-color-text-link-level-disabled);
     }
   }
 
-  input:not([disabled])[invalid] {
-    border-color: var(--kd-color-status-error-dark);
+  &:not([disabled])[invalid] {
+    border-color: var(--kd-color-border-variants-destructive);
   }
 }
 
 .error {
   display: flex;
   align-items: center;
-  color: var(--kd-color-status-error-dark);
+  color: var(--kd-color-text-variant-destructive);
   margin-top: 8px;
   cursor: default;
 
@@ -116,11 +117,16 @@ textarea {
 
   [disabled] & {
     color: var(--kd-color-text-link-level-disabled);
+
+    span svg {
+      color: var(--kd-color-text-link-level-disabled);
+    }
   }
 
   span svg {
     margin-right: 8px;
     display: block;
+    color: var(--kd-color-icon-destructive);
   }
 }
 

diff --git a/src/components/reusable/dropdown/dropdown.ts b/src/components/reusable/dropdown/dropdown.ts
@@ -13,7 +13,7 @@ import './dropdownOption';
 import '../tag';
 import { FormMixin } from '../../../common/mixins/form-input';
 import downIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-down.svg';
-import errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/warning-filled.svg';
+import errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';
 import clearIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';
 import clearIcon16 from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';
 import { deepmerge } from 'deepmerge-ts';

diff --git a/src/components/reusable/numberInput/numberInput.scss b/src/components/reusable/numberInput/numberInput.scss
@@ -16,8 +16,9 @@ input {
   appearance: none;
   display: block;
   flex-grow: 1;
-  min-width: 48px;
-  border: 1px solid var(--kd-color-border-ui-default);
+  min-width: 170px;
+  border-width: 1px;
+  border-style: solid;
   border-radius: 4px;
   height: 48px;
   padding: 0 16px;
@@ -37,6 +38,16 @@ input {
   &.icon--left {
     padding-left: 48px;
   }
+
+  &:not([disabled])[invalid] {
+    border-color: var(--kd-color-border-variants-destructive);
+  }
+
+  &:not([disabled]) {
+    &:active {
+      outline: 2px solid var(--kd-color-border-ui-pressed);
+    }
+  }
 }
 
 /* Hide native arrow controls */

diff --git a/src/components/reusable/numberInput/numberInput.ts b/src/components/reusable/numberInput/numberInput.ts
@@ -8,9 +8,9 @@ import { FormMixin } from '../../../common/mixins/form-input';
 import '@kyndryl-design-system/shidoka-foundation/components/button';
 import { deepmerge } from 'deepmerge-ts';
 
-import addIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/add-simple.svg';
-import subtractIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/substract-simple.svg';
-import errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/warning-filled.svg';
+import chevronLeft from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-left.svg';
+import chevronRight from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/chevron-right.svg';
+import errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';
 
 const _defaultTextStrings = {
   requiredText: 'Required',
@@ -114,13 +114,14 @@ export class NumberInput extends FormMixin(LitElement) {
           })}"
         >
           <kd-button
-            kind="secondary"
+            kind="primary-app"
             size=${this._sizeMap(this.size)}
             ?disabled=${this.disabled || this.value <= this.min}
+            outlineOnly
             description=${this._textStrings.subtract}
             @on-click=${this._handleSubtract}
           >
-            <span slot="icon">${unsafeSVG(subtractIcon)}</span>
+            <span slot="icon">${unsafeSVG(chevronLeft)}</span>
           </kd-button>
 
           <input
@@ -145,13 +146,14 @@ export class NumberInput extends FormMixin(LitElement) {
           />
 
           <kd-button
-            kind="secondary"
+            kind="primary-app"
             size=${this._sizeMap(this.size)}
             ?disabled=${this.disabled || this.value >= this.max}
+            outlineOnly
             description=${this._textStrings.add}
             @on-click=${this._handleAdd}
           >
-            <span slot="icon">${unsafeSVG(addIcon)}</span>
+            <span slot="icon">${unsafeSVG(chevronRight)}</span>
           </kd-button>
         </div>
 
@@ -172,8 +174,8 @@ export class NumberInput extends FormMixin(LitElement) {
     `;
   }
 
-  private _sizeMap(size: string) {
-    let btnSize = 'medium';
+  private _sizeMap(size: string): 'small' | 'medium' | 'large' {
+    let btnSize: 'small' | 'medium' | 'large' = 'medium';
 
     switch (size) {
       case 'lg':

diff --git a/src/components/reusable/progressBar/progressBar.ts b/src/components/reusable/progressBar/progressBar.ts
@@ -7,7 +7,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import '../loaders';
 import '../tooltip';
 import checkmarkIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/checkmark-filled.svg';
-import errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/warning-filled.svg';
+import errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';
 
 import ProgressBarStyles from './progressBar.scss';
 

diff --git a/src/components/reusable/radioButton/radioButtonGroup.ts b/src/components/reusable/radioButton/radioButtonGroup.ts
@@ -9,7 +9,7 @@ import {
 import { deepmerge } from 'deepmerge-ts';
 import RadioButtonGroupScss from './radioButtonGroup.scss';
 import { FormMixin } from '../../../common/mixins/form-input';
-import errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/warning-filled.svg';
+import errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';
 
 const _defaultTextStrings = {
   required: 'Required',

diff --git a/src/components/reusable/textArea/textArea.scss b/src/components/reusable/textArea/textArea.scss
@@ -12,7 +12,8 @@ textarea {
   display: block;
   width: 100%;
   resize: vertical;
-  border: 1px solid var(--kd-color-border-ui-default);
+  border-width: 1px;
+  border-style: solid;
   border-radius: 4px;
   margin: 0;
   padding: 16px;

diff --git a/src/components/reusable/textArea/textArea.ts b/src/components/reusable/textArea/textArea.ts
@@ -2,11 +2,13 @@ import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';
 import { LitElement, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import TextAreaScss from './textArea.scss';
 import { FormMixin } from '../../../common/mixins/form-input';
-import errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/warning-filled.svg';
 import { deepmerge } from 'deepmerge-ts';
 
+import errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';
+
+import TextAreaScss from './textArea.scss';
+
 const _defaultTextStrings = {
   requiredText: 'Required',
   errorText: 'Error',

diff --git a/src/components/reusable/textInput/textInput.scss b/src/components/reusable/textInput/textInput.scss
@@ -38,7 +38,8 @@ input {
   appearance: none;
   display: block;
   width: 100%;
-  border: 1px solid var(--kd-color-border-forms-default);
+  border-width: 1px;
+  border-style: solid;
   border-radius: 4px;
   height: 48px;
   padding: 0 48px 0 16px;

diff --git a/src/components/reusable/textInput/textInput.ts b/src/components/reusable/textInput/textInput.ts
@@ -12,7 +12,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
 
 import clearIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';
-import errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/warning-filled.svg';
+import errorIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/error-filled.svg';
 
 import { FormMixin } from '../../../common/mixins/form-input';
 import TextInputScss from './textInput.scss';
@@ -43,7 +43,7 @@ export class TextInput extends FormMixin(LitElement) {
 
   /** Input type, limited to options that are "text like". */
   @property({ type: String })
-  type = 'text';
+  type: 'text' | 'password' | 'email' | 'search' | 'tel' | 'url' = 'text';
 
   /** Input size. "sm", "md", or "lg". */
   @property({ type: String })