[Emotion ] Convert EuiColorStops (#6489)

* Convert to Emotion and improve empty range * Added CL * Added CL * Removing amsterdam styles * Enhanced colors. Added `brighten` color service. * Converted example to TS * Fixed popover position * Fix missing range color - border-color seems to be unused, removing that instead * [PR feedback] remove need to pass `isDisabled` as an arg * Replace :not selectors with JS logic - they aren't working in any case because classes have been rmeoved * [PR feedback] More styles cleanup - remove need for passing `isDisabled` - remove unnecessary not/focus-visible and Safari workarounds - focus-visible is now supported enough that this isn't an issue - fix non-working focus styles - `hexToRgb` returns an array and needs to be correctly interpolated to a comma separated string - order styles by state and element * Improve popover/drag behavior of color thumbs - remove unnecessary box-shadow - it's not working and when fixed to work, it doesn't match production - remove unnecessary border - already inheriting that from EuiRangeThumb - don't show the popover while dragging - Show the focus ring when the popover is open (to match focus ring when being clicked/dragged) - honestly not totally sure why I'm bothering, this component feels so buggy and laggy 🙈 * changelog * [docs] fix ts-ignore Co-authored-by: Constance Chen <[email protected]>
elastic · Dec 21, 2022 · 737ac3d · 737ac3d
1 parent d4d5af1
commit 737ac3d
Show file tree

Hide file tree

Showing 21 changed files with 521 additions and 399 deletions.
diff --git a/...ocs/src/views/color_picker/color_stops.js → ...cs/src/views/color_picker/color_stops.tsx b/...ocs/src/views/color_picker/color_stops.js → ...cs/src/views/color_picker/color_stops.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 
 import {
   EuiColorStops,
+  EuiColorStopsProps,
   EuiFormRow,
   EuiRange,
   EuiFlexGroup,
@@ -24,7 +25,9 @@ export default () => {
   const [value, setValue] = useState(10);
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
-  const [extendedColorStops, setExtendedColorStops] = useState([
+  const [extendedColorStops, setExtendedColorStops] = useState<
+    EuiColorStopsProps['colorStops']
+  >([
     {
       stop: 100,
       color: '#54B399',
@@ -39,14 +42,18 @@ export default () => {
     },
   ]);
 
-  const handleExtendedChange = (colorStops) => {
+  const handleExtendedChange = (
+    colorStops: EuiColorStopsProps['colorStops']
+  ) => {
     setExtendedColorStops(colorStops);
   };
 
-  const [emptyColorStops, setEmptyColorStops] = useState([]);
+  const [emptyColorStops, setEmptyColorStops] = useState<
+    EuiColorStopsProps['colorStops']
+  >([]);
 
-  const handleEmptyChange = (colorStops) => {
-    setEmptyColorStops(colorStops);
+  const handleEmptyChange: EuiColorStopsProps['onChange'] = (colorStops) => {
+    setEmptyColorStops(colorStops as EuiColorStopsProps['colorStops']);
   };
 
   const onButtonClick = () =>
@@ -79,26 +86,26 @@ export default () => {
       <EuiFormRow label="Standard">
         <EuiColorStops
           label="Standard"
-          onChange={setStandardColorStops}
-          colorStops={standardColorStops}
+          onChange={setStandardColorStops as EuiColorStopsProps['onChange']}
+          colorStops={standardColorStops as EuiColorStopsProps['colorStops']}
           min={0}
           max={100}
         />
       </EuiFormRow>
       <EuiFormRow label="Random new color">
         <EuiColorStops
           label="Random new color"
-          onChange={setRandomColorStops}
-          colorStops={randomColorStops}
+          onChange={setRandomColorStops as EuiColorStopsProps['onChange']}
+          colorStops={randomColorStops as EuiColorStopsProps['colorStops']}
           min={0}
           max={100}
-          addColor={addRandomColor}
+          addColor={addRandomColor as EuiColorStopsProps['addColor']}
         />
       </EuiFormRow>
       <EuiFormRow label="Extended range">
         <EuiColorStops
           label="Extended range"
-          onChange={handleExtendedChange}
+          onChange={() => handleExtendedChange}
           colorStops={extendedColorStops}
           min={100}
           max={400}
@@ -107,8 +114,8 @@ export default () => {
       <EuiFormRow label="Fixed color segments">
         <EuiColorStops
           label="Fixed color segments"
-          onChange={setFixedColorStops}
-          colorStops={fixedColorStops}
+          onChange={setFixedColorStops as EuiColorStopsProps['onChange']}
+          colorStops={fixedColorStops as EuiColorStopsProps['colorStops']}
           min={0}
           max={100}
           stopType="fixed"
@@ -120,8 +127,8 @@ export default () => {
           <EuiFlexItem>
             <EuiColorStops
               label="Stepped color segments"
-              onChange={setSteppedColorStops}
-              colorStops={steppedColorStops}
+              onChange={setSteppedColorStops as EuiColorStopsProps['onChange']}
+              colorStops={steppedColorStops as EuiColorStopsProps['colorStops']}
               stepNumber={value}
               min={0}
               max={100}
@@ -139,7 +146,7 @@ export default () => {
               <EuiFormRow label="Number of steps" display="columnCompressed">
                 <EuiRange
                   value={value}
-                  onChange={(e) => setValue(parseInt(e.target.value))}
+                  onChange={(e) => setValue(Number(e.currentTarget.value))}
                   showInput
                   aria-label="Change the number of steps"
                   min={2}

diff --git a/src/components/color_picker/_index.scss b/src/components/color_picker/_index.scss
@@ -3,6 +3,5 @@
 @import 'color_picker_swatch';
 @import 'hue';
 @import 'saturation';
-@import 'color_stops/index';
 @import 'color_palette_picker/index';
 @import 'color_palette_display/index';
diff --git a/src/components/color_picker/color_picker.styles.ts b/src/components/color_picker/color_picker.styles.ts
@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { UseEuiTheme } from '../../services';
+import { mathWithUnits } from '../../global_styling';
+
+export const euiColorPickerVariables = (euiThemeContext: UseEuiTheme) => {
+  const euiTheme = euiThemeContext.euiTheme;
+
+  return {
+    width: mathWithUnits(
+      [euiTheme.size.l, euiTheme.size.s],
+      (x, y) => x * 5 + y * 4
+    ),
+  };
+};
diff --git a/src/components/color_picker/color_stops/__snapshots__/color_stop_thumb.test.tsx.snap b/src/components/color_picker/color_stops/__snapshots__/color_stop_thumb.test.tsx.snap
@@ -2,20 +2,20 @@
 
 exports[`renders EuiColorStopThumb 1`] = `
 <div
-  class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover"
+  class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover-euiColorStopThumbPopover"
   data-test-subj="test subject string"
   style="left:0%"
 >
   <div
-    class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+    class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
   >
     <button
       aria-disabled="false"
       aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
       aria-valuemax="24"
       aria-valuemin="0"
       aria-valuenow="0"
-      class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+      class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
       data-test-subj="euiColorStopThumb"
       role="slider"
       style="background:rgb(255,0,0)"
@@ -29,20 +29,20 @@ exports[`renders EuiColorStopThumb 1`] = `
 
 exports[`renders disabled EuiColorStopThumb 1`] = `
 <div
-  class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover"
+  class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover-euiColorStopThumbPopover"
   data-test-subj="test subject string"
   style="left:0%"
 >
   <div
-    class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+    class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
   >
     <button
       aria-disabled="true"
       aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
       aria-valuemax="24"
       aria-valuemin="0"
       aria-valuenow="0"
-      class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+      class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
       data-test-subj="euiColorStopThumb"
       disabled=""
       role="slider"
@@ -57,20 +57,20 @@ exports[`renders disabled EuiColorStopThumb 1`] = `
 
 exports[`renders picker-only EuiColorStopThumb 1`] = `
 <div
-  class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover"
+  class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover-euiColorStopThumbPopover"
   data-test-subj="test subject string"
   style="left:0%"
 >
   <div
-    class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+    class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
   >
     <button
       aria-disabled="false"
       aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
       aria-valuemax="24"
       aria-valuemin="0"
       aria-valuenow="0"
-      class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+      class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
       data-test-subj="euiColorStopThumb"
       role="slider"
       style="background:rgb(255,0,0)"
@@ -84,20 +84,20 @@ exports[`renders picker-only EuiColorStopThumb 1`] = `
 
 exports[`renders readOnly EuiColorStopThumb 1`] = `
 <div
-  class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover"
+  class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover-euiColorStopThumbPopover"
   data-test-subj="test subject string"
   style="left:0%"
 >
   <div
-    class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+    class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
   >
     <button
       aria-disabled="false"
       aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
       aria-valuemax="24"
       aria-valuemin="0"
       aria-valuenow="0"
-      class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+      class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
       data-test-subj="euiColorStopThumb"
       role="slider"
       style="background:rgb(255,0,0)"
@@ -111,20 +111,20 @@ exports[`renders readOnly EuiColorStopThumb 1`] = `
 
 exports[`renders swatch-only EuiColorStopThumb 1`] = `
 <div
-  class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover"
+  class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover-euiColorStopThumbPopover"
   data-test-subj="test subject string"
   style="left:0%"
 >
   <div
-    class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
+    class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
   >
     <button
       aria-disabled="false"
       aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
       aria-valuemax="24"
       aria-valuemin="0"
       aria-valuenow="0"
-      class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
+      class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
       data-test-subj="euiColorStopThumb"
       role="slider"
       style="background:rgb(255,0,0)"