feat(color-picker)!: update color field dimensions (#10903)

**Related Issue:** #9415 ## Summary This updates the `color-picker`'s default widths to be: * 200 (s) * 240 (m) * 304 (l) Additionally, the color-field will use an aspect ratio of 1.8. BREAKING CHANGE: The default width and height of the `color-picker` have been updated. Developers should review and adjust their layouts to accommodate these changes.
Esri · Nov 27, 2024 · 7fc2ab8 · 7fc2ab8
1 parent cb6d687
commit 7fc2ab8
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 54 deletions.
diff --git a/...ages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.scss b/...ages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.scss
@@ -11,25 +11,8 @@
 }
 
 .opacity-input {
-  inline-size: 68px;
+  inline-size: 100px;
   margin-inline-start: -1px;
 }
 
-:host([scale="s"]) {
-  .container {
-    @apply flex-wrap gap-y-0.5;
-  }
-
-  .opacity-input {
-    inline-size: unset;
-    margin-inline-start: unset;
-  }
-}
-
-:host([scale="l"]) {
-  .opacity-input {
-    inline-size: 88px;
-  }
-}
-
 @include base-component();
diff --git a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts b/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts
@@ -2279,15 +2279,15 @@ describe("calcite-color-picker", () => {
         await scope.press("ArrowDown");
         expect(await picker.getProperty("value")).toBe("#ffffff");
         await scope.press("ArrowDown");
-        expect(await picker.getProperty("value")).toBe("#ededed");
+        expect(await picker.getProperty("value")).toBe("#ebebeb");
         await scope.press("ArrowDown");
-        expect(await picker.getProperty("value")).toBe("#dbdbdb");
+        expect(await picker.getProperty("value")).toBe("#d6d6d6");
         await scope.press("ArrowUp");
-        expect(await picker.getProperty("value")).toBe("#ededed");
+        expect(await picker.getProperty("value")).toBe("#ebebeb");
         await scope.press("ArrowRight");
-        expect(await picker.getProperty("value")).toBe("#e4eaed");
+        expect(await picker.getProperty("value")).toBe("#e1e7eb");
         await scope.press("ArrowLeft");
-        expect(await picker.getProperty("value")).toBe("#ededed");
+        expect(await picker.getProperty("value")).toBe("#ebebeb");
       });
 
       it("allows nudging color's saturation even if it does not change RGB value", async () => {
@@ -2316,7 +2316,7 @@ describe("calcite-color-picker", () => {
         await page.setContent(`<calcite-color-picker value="#000"></calcite-color-picker>`);
         const scope = await page.find(`calcite-color-picker >>> .${CSS.hueScope}`);
 
-        const nudgeAQuarterOfSlider = async () => {
+        const nudgeAThirdOfSlider = async () => {
           let totalNudgesByTen = 12;
 
           while (totalNudgesByTen--) {
@@ -2330,16 +2330,16 @@ describe("calcite-color-picker", () => {
 
         expect(await getScopeLeftOffset()).toBeCloseTo(DIMENSIONS.m.thumb.radius - 0.5, 0);
 
-        await nudgeAQuarterOfSlider();
-        expect(await getScopeLeftOffset()).toBeCloseTo(70, 0);
+        await nudgeAThirdOfSlider();
+        expect(await getScopeLeftOffset()).toBeCloseTo(58.9, 0);
 
-        await nudgeAQuarterOfSlider();
-        expect(await getScopeLeftOffset()).toBeCloseTo(141, 0);
+        await nudgeAThirdOfSlider();
+        expect(await getScopeLeftOffset()).toBeCloseTo(118.5, 0);
 
-        await nudgeAQuarterOfSlider();
+        await nudgeAThirdOfSlider();
         // hue wraps around, so we nudge it back to assert position at the edge
         await scope.press("ArrowLeft");
-        expect(await getScopeLeftOffset()).toBeCloseTo(204.5, 0);
+        expect(await getScopeLeftOffset()).toBeCloseTo(170.5, 0);
 
         // nudge it to wrap around
         await scope.press("ArrowRight");

diff --git a/packages/calcite-components/src/components/color-picker/color-picker.scss b/packages/calcite-components/src/components/color-picker/color-picker.scss
@@ -8,7 +8,7 @@
   --calcite-color-picker-spacing: 8px;
 
   .container {
-    inline-size: 160px;
+    inline-size: 198px;
   }
 
   .saved-colors {
@@ -21,7 +21,7 @@
   --calcite-color-picker-spacing: 12px;
 
   .container {
-    inline-size: 272px;
+    inline-size: 238px;
   }
 }
 
@@ -31,7 +31,7 @@
   @apply text-n1h;
 
   .container {
-    inline-size: 464px;
+    inline-size: 302px;
   }
 
   .section {
@@ -141,35 +141,29 @@
 }
 
 .channels {
-  @apply flex gap-y-0.5;
+  @apply flex;
 }
 
 .channel {
+  flex-grow: 1;
   &[data-channel-index="3"] {
-    inline-size: 159px;
+    margin-inline-start: -1px;
+    min-inline-size: 81px;
   }
 }
 
 :host([scale="s"]) {
-  .channels {
-    @apply flex-wrap;
-  }
-
   .channel {
-    flex-basis: 30%;
-    flex-grow: 1;
-
     &[data-channel-index="3"] {
-      inline-size: unset;
-      margin-inline-start: unset;
+      min-inline-size: 68px;
     }
   }
 }
 
 :host([scale="l"]) {
   .channel {
     &[data-channel-index="3"] {
-      inline-size: 131px;
+      min-inline-size: 88px;
     }
   }
 }

diff --git a/packages/calcite-components/src/components/color-picker/resources.ts b/packages/calcite-components/src/components/color-picker/resources.ts
@@ -60,11 +60,11 @@ export const DIMENSIONS = {
   s: {
     slider: {
       height: 12,
-      width: 104,
+      width: 142,
     },
     colorField: {
-      height: 80,
-      width: 160,
+      height: 110,
+      width: 198,
     },
     thumb: {
       radius: 7,
@@ -76,11 +76,11 @@ export const DIMENSIONS = {
   m: {
     slider: {
       height: 12,
-      width: 204,
+      width: 170,
     },
     colorField: {
-      height: 150,
-      width: 272,
+      height: 132,
+      width: 238,
     },
     thumb: {
       radius: 7,
@@ -92,11 +92,11 @@ export const DIMENSIONS = {
   l: {
     slider: {
       height: 12,
-      width: 384,
+      width: 222,
     },
     colorField: {
-      height: 200,
-      width: 464,
+      height: 168,
+      width: 302,
     },
     thumb: {
       radius: 7,