[Emotion] Convert EuiSaturation and EuiHue

packages/eui/changelogs/upcoming/7859.md

@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Removed `$euiColorPickerValueRange0`, `$euiColorPickerValueRange1`,  `$euiColorPickerSaturationRange0`, `$euiColorPickerSaturationRange1`, and `$euiColorPickerIndicatorSize`

packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap

@@ -295,25 +295,25 @@ exports[`EuiColorPicker inline 1`] = `
   class="euiColorPicker testClass1 testClass2 emotion-euiColorPicker-euiTestCss"
 >
   <div
-    class="euiSaturation"
+    class="euiSaturation emotion-euiSaturation"
     data-test-subj="euiSaturation"
     style="background: hsl(30, 100%, 50%);"
     tabindex="-1"
   >
     <div
-      class="euiSaturation__lightness"
+      class="euiSaturation__lightness emotion-euiSaturation__lightness"
     >
       <div
-        class="euiSaturation__saturation"
+        class="euiSaturation__saturation emotion-euiSaturation__saturation"
       />
     </div>
     <button
-      aria-describedby="undefined-instructions"
+      aria-describedby="generated-id-instructions"
       aria-label="#ffeedd"
       aria-roledescription="HSV color mode saturation and value 2-axis slider"
-      class="euiSaturation__indicator"
-      id="undefined-saturationIndicator"
-      style="left: 0px; top: 0px;"
+      class="euiSaturation__indicator emotion-euiSaturation__indicator"
+      id="generated-id-saturationIndicator"
+      style="inset-inline-start: 0; inset-block-start: 0;"
     />
     <span
       aria-live="assertive"
@@ -323,13 +323,13 @@ exports[`EuiColorPicker inline 1`] = `
     </span>
     <span
       hidden=""
-      id="undefined-instructions"
+      id="generated-id-instructions"
     >
       Arrow keys to navigate the square color gradient. Coordinates will be used to calculate HSV color mode 'saturation' and 'value' numbers, in the range of 0 to 1. Left and right to change the saturation. Up and down change the value.
     </span>
   </div>
   <div
-    class="euiHue"
+    class="euiHue emotion-euiHue"
   >
     <label
       class="emotion-euiScreenReaderOnly"
@@ -344,7 +344,7 @@ exports[`EuiColorPicker inline 1`] = `
       #ffeedd
     </p>
     <input
-      class="euiHue__range"
+      class="euiHue__range emotion-euiHue__range"
       id="undefined-hue"
       max="359"
       min="0"

packages/eui/src/components/color_picker/__snapshots__/hue.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`EuiHue accepts a hex value 1`] = `
 <div>
   <div
-    class="euiHue testClass1 testClass2 emotion-euiTestCss"
+    class="euiHue testClass1 testClass2 emotion-euiHue-euiTestCss"
   >
     <label
       class="emotion-euiScreenReaderOnly"
@@ -19,7 +19,7 @@ exports[`EuiHue accepts a hex value 1`] = `
     </p>
     <input
       aria-label="aria-label"
-      class="euiHue__range"
+      class="euiHue__range emotion-euiHue__range"
       data-test-subj="test subject string"
       id="undefined-hue"
       max="359"
@@ -35,7 +35,7 @@ exports[`EuiHue accepts a hex value 1`] = `
 exports[`EuiHue accepts a hue value 1`] = `
 <div>
   <div
-    class="euiHue testClass1 testClass2 emotion-euiTestCss"
+    class="euiHue testClass1 testClass2 emotion-euiHue-euiTestCss"
   >
     <label
       class="emotion-euiScreenReaderOnly"
@@ -49,7 +49,7 @@ exports[`EuiHue accepts a hue value 1`] = `
     />
     <input
       aria-label="aria-label"
-      class="euiHue__range"
+      class="euiHue__range emotion-euiHue__range"
       data-test-subj="test subject string"
       id="undefined-hue"
       max="359"
@@ -65,7 +65,7 @@ exports[`EuiHue accepts a hue value 1`] = `
 exports[`EuiHue is rendered 1`] = `
 <div>
   <div
-    class="euiHue testClass1 testClass2 emotion-euiTestCss"
+    class="euiHue testClass1 testClass2 emotion-euiHue-euiTestCss"
   >
     <label
       class="emotion-euiScreenReaderOnly"
@@ -79,7 +79,7 @@ exports[`EuiHue is rendered 1`] = `
     />
     <input
       aria-label="aria-label"
-      class="euiHue__range"
+      class="euiHue__range emotion-euiHue__range"
       data-test-subj="test subject string"
       id="undefined-hue"
       max="359"

packages/eui/src/components/color_picker/__snapshots__/saturation.test.tsx.snap

@@ -3,32 +3,32 @@
 exports[`EuiHue accepts a color 1`] = `
 <div
   aria-label="aria-label"
-  class="euiSaturation testClass1 testClass2 emotion-euiTestCss"
+  class="euiSaturation testClass1 testClass2 emotion-euiSaturation-euiTestCss"
   data-test-subj="test subject string"
   style="background: hsl(180, 100%, 50%);"
   tabindex="-1"
 >
   <div
-    class="euiSaturation__lightness"
+    class="euiSaturation__lightness emotion-euiSaturation__lightness"
   >
     <div
-      class="euiSaturation__saturation"
+      class="euiSaturation__saturation emotion-euiSaturation__saturation"
     />
   </div>
   <button
-    aria-describedby="undefined-instructions"
+    aria-describedby="generated-id-instructions"
     aria-roledescription="HSV color mode saturation and value 2-axis slider"
-    class="euiSaturation__indicator"
-    id="undefined-saturationIndicator"
-    style="left: 0px; top: 0px;"
+    class="euiSaturation__indicator emotion-euiSaturation__indicator"
+    id="generated-id-saturationIndicator"
+    style="inset-inline-start: 0; inset-block-start: 0;"
   />
   <span
     aria-live="assertive"
     hidden=""
   />
   <span
     hidden=""
-    id="undefined-instructions"
+    id="generated-id-instructions"
   >
     Arrow keys to navigate the square color gradient. Coordinates will be used to calculate HSV color mode 'saturation' and 'value' numbers, in the range of 0 to 1. Left and right to change the saturation. Up and down change the value.
   </span>
@@ -38,32 +38,32 @@ exports[`EuiHue accepts a color 1`] = `
 exports[`EuiHue is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiSaturation testClass1 testClass2 emotion-euiTestCss"
+  class="euiSaturation testClass1 testClass2 emotion-euiSaturation-euiTestCss"
   data-test-subj="test subject string"
   style="background: hsl(1, 100%, 50%);"
   tabindex="-1"
 >
   <div
-    class="euiSaturation__lightness"
+    class="euiSaturation__lightness emotion-euiSaturation__lightness"
   >
     <div
-      class="euiSaturation__saturation"
+      class="euiSaturation__saturation emotion-euiSaturation__saturation"
     />
   </div>
   <button
-    aria-describedby="undefined-instructions"
+    aria-describedby="generated-id-instructions"
     aria-roledescription="HSV color mode saturation and value 2-axis slider"
-    class="euiSaturation__indicator"
-    id="undefined-saturationIndicator"
-    style="left: 0px; top: 0px;"
+    class="euiSaturation__indicator emotion-euiSaturation__indicator"
+    id="generated-id-saturationIndicator"
+    style="inset-inline-start: 0; inset-block-start: 0;"
   />
   <span
     aria-live="assertive"
     hidden=""
   />
   <span
     hidden=""
-    id="undefined-instructions"
+    id="generated-id-instructions"
   >
     Arrow keys to navigate the square color gradient. Coordinates will be used to calculate HSV color mode 'saturation' and 'value' numbers, in the range of 0 to 1. Left and right to change the saturation. Up and down change the value.
   </span>

packages/eui/src/components/color_picker/_index.scss

@@ -1,5 +1,2 @@
-@import 'variables';
-@import 'hue';
-@import 'saturation';
 @import 'color_palette_picker/index';
 @import 'color_palette_display/index';