Fix: [IGL-106] Input character count color fix and version updates

workleap · Dec 19, 2023 · 4eb1f53 · 4eb1f53
1 parent 6b0da7b
commit 4eb1f53
Show file tree

Hide file tree

Showing 54 changed files with 137 additions and 83 deletions.
diff --git a/.changeset/clean-needles-taste.md b/.changeset/clean-needles-taste.md
@@ -0,0 +1,51 @@
+---
+"@igloo-ui/action-menu": patch
+"@igloo-ui/alert": patch
+"@igloo-ui/area-chart": patch
+"@igloo-ui/avatar": patch
+"@igloo-ui/bar-chart": patch
+"@igloo-ui/breadcrumb": patch
+"@igloo-ui/button": patch
+"@igloo-ui/button-group": patch
+"@igloo-ui/card": patch
+"@igloo-ui/carousel": patch
+"@igloo-ui/checkbox": patch
+"@igloo-ui/color": patch
+"@igloo-ui/color-picker": patch
+"@igloo-ui/combobox": patch
+"@igloo-ui/datepicker": patch
+"@igloo-ui/dialog": patch
+"@igloo-ui/disclosure": patch
+"@igloo-ui/dropdown": patch
+"@igloo-ui/ellipsis": patch
+"@igloo-ui/filter": patch
+"@igloo-ui/form-group": patch
+"@igloo-ui/helper-text": patch
+"@igloo-ui/hyperlink": patch
+"@igloo-ui/icon-button": patch
+"@igloo-ui/input": patch
+"@igloo-ui/list": patch
+"@igloo-ui/metric": patch
+"@igloo-ui/modal": patch
+"@igloo-ui/option-button": patch
+"@igloo-ui/pager": patch
+"@igloo-ui/pie-chart": patch
+"@igloo-ui/popover": patch
+"@igloo-ui/progress-bar": patch
+"@igloo-ui/radio": patch
+"@igloo-ui/select": patch
+"@igloo-ui/stacked-bar": patch
+"@igloo-ui/stepper": patch
+"@igloo-ui/tabs": patch
+"@igloo-ui/tag": patch
+"@igloo-ui/tag-picker": patch
+"@igloo-ui/text-editor": patch
+"@igloo-ui/textarea": patch
+"@igloo-ui/toaster": patch
+"@igloo-ui/toggle": patch
+"@igloo-ui/tooltip": patch
+"@igloo-ui/vertical-bar-chart": patch
+"docs": patch
+---
+
+Updated input icon and character count colors. Also updated hopper token versions and igloo icon versions.
diff --git a/packages/ActionMenu/package.json b/packages/ActionMenu/package.json
@@ -27,11 +27,11 @@
     "@igloo-ui/tokens": "^2.0.0",
     "@igloo-ui/dropdown": "^1.6.4",
     "@igloo-ui/list": "^0.5.2",
-    "@hopper-ui/tokens": "^3.1.1",
+    "@hopper-ui/tokens": "^3.1.2",
     "classnames": "^2.3.2"
   },
   "devDependencies": {
-    "@igloo-ui/icons": "^1.11.0",
+    "@igloo-ui/icons": "^1.12.2",
     "@igloo-ui/button": "^0.7.3",
     "@igloo-ui/icon-button": "^1.1.5"
   },

diff --git a/packages/Alert/package.json b/packages/Alert/package.json
@@ -26,9 +26,9 @@
   "dependencies": {
     "@igloo-ui/button": "^0.7.3",
     "@igloo-ui/icon-button": "^1.1.5",
-    "@igloo-ui/icons": "^1.11.0",
+    "@igloo-ui/icons": "^1.12.2",
     "@igloo-ui/tokens": "^2.0.0",
-    "@hopper-ui/tokens": "^3.1.1",
+    "@hopper-ui/tokens": "^3.1.2",
     "classnames": "^2.3.2"
   },
   "devDependencies": {

diff --git a/packages/AreaChart/package.json b/packages/AreaChart/package.json
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@igloo-ui/tokens": "^2.0.0",
-    "@hopper-ui/tokens": "^3.1.1",
+    "@hopper-ui/tokens": "^3.1.2",
     "classnames": "^2.3.2",
     "luxon": "^3.2.1",
     "recharts": "^2.9.2"

diff --git a/packages/Avatar/package.json b/packages/Avatar/package.json
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@igloo-ui/tokens": "^2.0.0",
-    "@hopper-ui/tokens": "^3.1.1",
+    "@hopper-ui/tokens": "^3.1.2",
     "classnames": "^2.3.2"
   },
   "browserslist": [

diff --git a/packages/BarChart/package.json b/packages/BarChart/package.json
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@igloo-ui/tokens": "^2.0.0",
-    "@hopper-ui/tokens": "^3.1.1",
+    "@hopper-ui/tokens": "^3.1.2",
     "classnames": "^2.3.2",
     "framer-motion": "^6.5.1"
   },

diff --git a/packages/Breadcrumb/package.json b/packages/Breadcrumb/package.json
@@ -25,9 +25,9 @@
   },
   "dependencies": {
     "@igloo-ui/tokens": "^2.0.0",
-    "@hopper-ui/tokens": "^3.1.1",
+    "@hopper-ui/tokens": "^3.1.2",
     "classnames": "^2.3.2",
-    "@igloo-ui/icons": "^1.11.0"
+    "@igloo-ui/icons": "^1.12.2"
   },
   "browserslist": [
     "> 1%",

diff --git a/packages/Button/package.json b/packages/Button/package.json
@@ -25,11 +25,11 @@
   },
   "dependencies": {
     "@igloo-ui/tokens": "^2.0.0",
-    "@hopper-ui/tokens": "^3.1.1",
+    "@hopper-ui/tokens": "^3.1.2",
     "classnames": "^2.3.2"
   },
   "devDependencies": {
-    "@igloo-ui/icons": "^1.11.0"
+    "@igloo-ui/icons": "^1.12.2"
   },
   "browserslist": [
     "> 1%",

diff --git a/packages/ButtonGroup/package.json b/packages/ButtonGroup/package.json
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@igloo-ui/tokens": "^2.0.0",
-    "@hopper-ui/tokens": "^3.1.1",
+    "@hopper-ui/tokens": "^3.1.2",
     "classnames": "^2.3.2"
   },
   "browserslist": [
@@ -34,7 +34,7 @@
     "IE >= 11"
   ],
   "devDependencies": {
-    "@igloo-ui/icons": "^1.11.0",
+    "@igloo-ui/icons": "^1.12.2",
     "@igloo-ui/tooltip": "^3.4.2"
   }
 }
diff --git a/packages/Card/package.json b/packages/Card/package.json
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@igloo-ui/tokens": "^2.0.0",
-    "@hopper-ui/tokens": "^3.1.1",
+    "@hopper-ui/tokens": "^3.1.2",
     "classnames": "^2.3.2"
   },
   "browserslist": [

diff --git a/packages/Carousel/package.json b/packages/Carousel/package.json
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@igloo-ui/tokens": "^2.0.0",
-    "@hopper-ui/tokens": "^3.1.1",
+    "@hopper-ui/tokens": "^3.1.2",
     "classnames": "^2.3.2"
   },
   "devDependencies": {

diff --git a/packages/Checkbox/package.json b/packages/Checkbox/package.json
@@ -25,7 +25,7 @@
     },
     "dependencies": {
         "@igloo-ui/tokens": "^2.0.0",
-        "@hopper-ui/tokens": "^3.1.1",
+        "@hopper-ui/tokens": "^3.1.2",
         "classnames": "^2.3.2"
     },
     "browserslist": [

diff --git a/packages/Color/package.json b/packages/Color/package.json
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@igloo-ui/tokens": "^2.0.0",
-    "@hopper-ui/tokens": "^3.1.1",
+    "@hopper-ui/tokens": "^3.1.2",
     "classnames": "^2.3.2"
   },
   "browserslist": [

diff --git a/packages/ColorPicker/package.json b/packages/ColorPicker/package.json
@@ -27,7 +27,7 @@
     "@igloo-ui/color": "^0.3.1",
     "@igloo-ui/dropdown": "^1.6.4",
     "@igloo-ui/tokens": "^2.0.0",
-    "@hopper-ui/tokens": "^3.1.1",
+    "@hopper-ui/tokens": "^3.1.2",
     "classnames": "^2.3.2",
     "react-aria": "^3.30.0",
     "react-aria-components": "^1.0.0-rc.0",

diff --git a/packages/Combobox/package.json b/packages/Combobox/package.json
@@ -26,11 +26,11 @@
     "dependencies": {
         "@igloo-ui/dropdown": "^1.6.4",
         "@igloo-ui/list": "^0.5.2",
-        "@igloo-ui/icons": "^1.11.0",
+        "@igloo-ui/icons": "^1.12.2",
         "@igloo-ui/icon-button": "^1.1.5",
         "@igloo-ui/input": "^2.1.6",
         "@igloo-ui/tokens": "^2.0.0",
-        "@hopper-ui/tokens": "^3.1.1",
+        "@hopper-ui/tokens": "^3.1.2",
         "@igloo-ui/tooltip": "^3.4.2",
         "classnames": "^2.3.2"
     },

diff --git a/packages/Datepicker/package.json b/packages/Datepicker/package.json
@@ -27,9 +27,9 @@
     "@igloo-ui/button": "^0.7.3",
     "@igloo-ui/dropdown": "^1.6.4",
     "@igloo-ui/icon-button": "^1.1.5",
-    "@igloo-ui/icons": "^1.11.0",
+    "@igloo-ui/icons": "^1.12.2",
     "@igloo-ui/tokens": "^2.0.0",
-    "@hopper-ui/tokens": "^3.1.1",
+    "@hopper-ui/tokens": "^3.1.2",
     "@internationalized/date": "^3.5.0",
     "classnames": "^2.3.2",
     "luxon": "^3.4.0",

diff --git a/packages/Dialog/package.json b/packages/Dialog/package.json
@@ -28,7 +28,7 @@
     "classnames": "^2.3.2",
     "@igloo-ui/modal": "*",
     "@igloo-ui/button": "*",
-    "@hopper-ui/tokens": "^3.1.1"
+    "@hopper-ui/tokens": "^3.1.2"
   },
   "browserslist": [
     "> 1%",

diff --git a/packages/Disclosure/package.json b/packages/Disclosure/package.json
@@ -25,7 +25,7 @@
     },
     "dependencies": {
         "@igloo-ui/tokens": "^2.0.0",
-        "@hopper-ui/tokens": "^3.1.1",
+        "@hopper-ui/tokens": "^3.1.2",
         "classnames": "^2.3.2",
         "framer-motion": "^6.5.1",
         "react-aria": "^3.30.0",

diff --git a/packages/Disclosure/src/disclosure.scss b/packages/Disclosure/src/disclosure.scss
@@ -142,6 +142,10 @@
 
 .ids-disclosure .ids-disclosure__header-icon {
     margin: var(--ids-disclosure-header-icon-margin);
+
+    & svg {
+        display: block;
+    }
 }
 
 .ids-disclosure--low-contrast .ids-disclosure__header-icon {

diff --git a/packages/Dropdown/package.json b/packages/Dropdown/package.json
@@ -26,7 +26,7 @@
     "dependencies": {
         "@floating-ui/react": "^0.24.8",
         "@igloo-ui/tokens": "^2.0.0",
-        "@hopper-ui/tokens": "^3.1.1",
+        "@hopper-ui/tokens": "^3.1.2",
         "classnames": "^2.3.2"
     },
     "browserslist": [

diff --git a/packages/Ellipsis/package.json b/packages/Ellipsis/package.json
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@igloo-ui/tokens": "^2.0.0",
-    "@hopper-ui/tokens": "^3.1.1",
+    "@hopper-ui/tokens": "^3.1.2",
     "classnames": "^2.3.2"
   },
   "browserslist": [

diff --git a/packages/Filter/package.json b/packages/Filter/package.json
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@igloo-ui/tokens": "^2.0.0",
-    "@hopper-ui/tokens": "^3.1.1",
+    "@hopper-ui/tokens": "^3.1.2",
     "classnames": "^2.3.2"
   },
   "browserslist": [

diff --git a/packages/FormGroup/package.json b/packages/FormGroup/package.json
@@ -25,8 +25,8 @@
     },
     "dependencies": {
         "@igloo-ui/tokens": "^2.0.0",
-        "@igloo-ui/icons": "^1.11.0",
-        "@hopper-ui/tokens": "^3.1.1",
+        "@igloo-ui/icons": "^1.12.2",
+        "@hopper-ui/tokens": "^3.1.2",
         "classnames": "^2.3.2",
         "@igloo-ui/helper-text": "^0.2.15"
     },

diff --git a/packages/HelperText/package.json b/packages/HelperText/package.json
@@ -24,9 +24,9 @@
         "build": "rollup -c rollup.config.js"
     },
     "dependencies": {
-        "@igloo-ui/icons": "^1.11.0",
+        "@igloo-ui/icons": "^1.12.2",
         "@igloo-ui/tokens": "^2.0.0",
-        "@hopper-ui/tokens": "^3.1.1",
+        "@hopper-ui/tokens": "^3.1.2",
         "classnames": "^2.3.2"
     },
     "browserslist": [

diff --git a/packages/Hyperlink/package.json b/packages/Hyperlink/package.json
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@igloo-ui/tokens": "^2.0.0",
-    "@hopper-ui/tokens": "^3.1.1",
+    "@hopper-ui/tokens": "^3.1.2",
     "@react-aria/link": "^3.6.2",
     "classnames": "^2.3.2"
   },

diff --git a/packages/IconButton/package.json b/packages/IconButton/package.json
@@ -26,11 +26,11 @@
   "dependencies": {
     "@igloo-ui/button": "^0.7.3",
     "@igloo-ui/tokens": "^2.0.0",
-    "@hopper-ui/tokens": "^3.1.1",
+    "@hopper-ui/tokens": "^3.1.2",
     "classnames": "^2.3.2"
   },
   "devDependencies": {
-    "@igloo-ui/icons": "^1.11.0"
+    "@igloo-ui/icons": "^1.12.2"
   },
   "browserslist": [
     "> 1%",

diff --git a/packages/Input/package.json b/packages/Input/package.json
@@ -25,12 +25,12 @@
     },
     "dependencies": {
         "@igloo-ui/tokens": "^2.0.0",
-        "@hopper-ui/tokens": "^3.1.1",
+        "@hopper-ui/tokens": "^3.1.2",
         "classnames": "^2.3.2",
         "graphemer": "^1.4.0"
     },
     "devDependencies": {
-        "@igloo-ui/icons": "^1.11.0"
+        "@igloo-ui/icons": "^1.12.2"
     },
     "browserslist": [
         "> 1%",

diff --git a/packages/Input/src/input.scss b/packages/Input/src/input.scss
@@ -25,8 +25,7 @@
     --ids-input-letter-spacing-compact: #{tokens.$font-weight-regular};
 
     /* with icon */
-    --ids-input-color-icon: #{tokens.$grey-400};
-    --ids-input-color-icon-compact: #{tokens.$grey-800};
+    --ids-input-color-icon: #{tokens.$grey-500};
 
     /* with prefix icon */
     --ids-input-width-prefix: #{tokens.$space-7};
@@ -45,6 +44,7 @@
     --ids-input-min-width-character-indicator: #{tokens.$space-4};
     --ids-input-width-character-indicator-suffix: #{tokens.$space-9};
     --ids-input-width-character-indicator-suffix-compact: #{tokens.$space-8};
+    --ids-input-character-indicator-color: #{tokens.$grey-400};
 
     /* Placeholder */
     --ids-input-color-placeholder: #{tokens.$grey-400};
@@ -87,7 +87,6 @@
 
     /* with icon */
     --ids-input-color-icon: var(--hop-neutral-icon-weak);
-    --ids-input-color-icon-compact: var(--hop-neutral-icon-weak);
 
     /* with prefix icon */
     --ids-input-width-prefix: 2.5rem;
@@ -125,6 +124,7 @@
     --ids-input-min-width-character-indicator: 2rem;
     --ids-input-width-character-indicator-suffix: 6rem;
     --ids-input-width-character-indicator-suffix-compact: 5rem;
+    --ids-input-character-indicator-color: var(--hop-neutral-text-weakest);
 }
 
 %ids-input-asset {
@@ -196,6 +196,7 @@
 }
 
 .ids-input__char-indicator {
+    color: var(--ids-input-character-indicator-color);
     font-size: var(--ids-input-font-size-character-indicator);
     min-width: var(--ids-input-min-width-character-indicator);
     padding: var(--ids-input-padding-character-indicator);
@@ -219,12 +220,10 @@
 }
 
 .ids-input__asset--prefix--compact {
-    color: var(--ids-input-color-icon-compact);
     width: var(--ids-input-width-prefix-compact);
 }
 
 .ids-input__asset--suffix--compact {
-    color: var(--ids-input-color-icon-compact);
     width: var(--ids-input-width-suffix-compact);
 }