From 7e1555866451185d99e93786110b40049be4e0b1 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Fri, 21 Jun 2024 15:07:59 -0700 Subject: [PATCH 01/10] [EuiSaturation] Set up Emotion file --- .../__snapshots__/color_picker.test.tsx.snap | 2 +- .../__snapshots__/saturation.test.tsx.snap | 4 +-- .../components/color_picker/_saturation.scss | 7 ----- .../color_picker/saturation.styles.ts | 30 +++++++++++++++++++ .../components/color_picker/saturation.tsx | 9 ++++-- 5 files changed, 40 insertions(+), 12 deletions(-) create mode 100644 packages/eui/src/components/color_picker/saturation.styles.ts diff --git a/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap b/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap index cb97aede825..65862255f4c 100644 --- a/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap +++ b/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap @@ -295,7 +295,7 @@ exports[`EuiColorPicker inline 1`] = ` class="euiColorPicker testClass1 testClass2 emotion-euiColorPicker-euiTestCss" >
{ + const { euiTheme } = euiThemeContext; + + return { + euiSaturation: css` + z-index: 3; /* Required to be above the hue slider, which can overlap */ + position: relative; + ${logicalCSS('width', '100%')} + ${logicalCSS('padding-bottom', '100%')} + border-radius: ${mathWithUnits( + euiTheme.border.radius.medium, + (x) => x / 2 + )}; + touch-action: none; /* prevent TouchMove events from scrolling page */ + `, + }; +}; diff --git a/packages/eui/src/components/color_picker/saturation.tsx b/packages/eui/src/components/color_picker/saturation.tsx index 74acecaa070..74557d7823a 100644 --- a/packages/eui/src/components/color_picker/saturation.tsx +++ b/packages/eui/src/components/color_picker/saturation.tsx @@ -17,12 +17,13 @@ import React, { import classNames from 'classnames'; import { ColorSpaces } from 'chroma-js'; -import { CommonProps } from '../common'; -import { keys, useMouseMove } from '../../services'; +import { keys, useMouseMove, useEuiMemoizedStyles } from '../../services'; import { isNil } from '../../services/predicate'; +import { CommonProps } from '../common'; import { useEuiI18n } from '../i18n'; import { getEventPosition } from './utils'; +import { euiSaturationStyles } from './saturation.styles'; export type SaturationClientRect = Pick< ClientRect, @@ -154,7 +155,10 @@ export const EuiSaturation = forwardRef( }; const classes = classNames('euiSaturation', className); + const styles = useEuiMemoizedStyles(euiSaturationStyles); + const instructionsId = `${id}-instructions`; + return (
( onTouchMove={handleInteraction} onKeyDown={handleKeyDown} ref={ref} + css={styles.euiSaturation} className={classes} data-test-subj={dataTestSubj} style={{ From dbcf00ccb42f0f509e4b375bcb7dea5a203c9abc Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Fri, 21 Jun 2024 15:14:37 -0700 Subject: [PATCH 02/10] [EuiSaturation] Convert lightness and saturation gradients - remove Sass variables - I don't see a reason to keep them as they're not being reused anywhere and don't need to be overridden --- .../components/color_picker/_saturation.scss | 18 ----------- .../components/color_picker/_variables.scss | 4 --- .../color_picker/saturation.styles.ts | 31 ++++++++++++++++--- .../components/color_picker/saturation.tsx | 11 +++++-- 4 files changed, 36 insertions(+), 28 deletions(-) diff --git a/packages/eui/src/components/color_picker/_saturation.scss b/packages/eui/src/components/color_picker/_saturation.scss index 374c5f52aab..4d5204e0378 100644 --- a/packages/eui/src/components/color_picker/_saturation.scss +++ b/packages/eui/src/components/color_picker/_saturation.scss @@ -1,23 +1,5 @@ .euiSaturation { - .euiSaturation__lightness, - .euiSaturation__saturation { - position: absolute; - top: -1px; // hides a slight color inconsistency - bottom: 0; - left: 0; - right: 0; - border-radius: $euiBorderRadius / 2; - } - - .euiSaturation__lightness { - background: linear-gradient(to right, $euiColorPickerValueRange0, $euiColorPickerValueRange1); - } - - .euiSaturation__saturation { - background: linear-gradient(to top, $euiColorPickerSaturationRange0, $euiColorPickerSaturationRange1); - } - .euiSaturation__indicator { position: absolute; height: $euiColorPickerIndicatorSize; diff --git a/packages/eui/src/components/color_picker/_variables.scss b/packages/eui/src/components/color_picker/_variables.scss index 08cd1445f7b..fe67d02cd9e 100644 --- a/packages/eui/src/components/color_picker/_variables.scss +++ b/packages/eui/src/components/color_picker/_variables.scss @@ -1,5 +1 @@ -$euiColorPickerValueRange0: rgba(255, 255, 255, 1); -$euiColorPickerValueRange1: rgba(255, 255, 255, 0); -$euiColorPickerSaturationRange0: rgba(0, 0, 0, 1); -$euiColorPickerSaturationRange1: rgba(0, 0, 0, 0); $euiColorPickerIndicatorSize: $euiSizeM; diff --git a/packages/eui/src/components/color_picker/saturation.styles.ts b/packages/eui/src/components/color_picker/saturation.styles.ts index 3a812ef7453..284ed2b79bf 100644 --- a/packages/eui/src/components/color_picker/saturation.styles.ts +++ b/packages/eui/src/components/color_picker/saturation.styles.ts @@ -14,17 +14,40 @@ import { logicalCSS, mathWithUnits } from '../../global_styling'; export const euiSaturationStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme } = euiThemeContext; + const borderRadius = mathWithUnits( + euiTheme.border.radius.medium, + (x) => x / 2 + ); + return { euiSaturation: css` z-index: 3; /* Required to be above the hue slider, which can overlap */ position: relative; ${logicalCSS('width', '100%')} ${logicalCSS('padding-bottom', '100%')} - border-radius: ${mathWithUnits( - euiTheme.border.radius.medium, - (x) => x / 2 - )}; + border-radius: ${borderRadius}; touch-action: none; /* prevent TouchMove events from scrolling page */ `, + + euiSaturation__lightness: css` + position: absolute; + inset: 0; + ${logicalCSS('top', '-1px')} /* Hides a slight color inconsistency */ + + border-radius: ${borderRadius}; + background: linear-gradient( + to right, + rgba(255, 255, 255, 1), + rgba(255, 255, 255, 0) + ); + `, + euiSaturation__saturation: css` + position: absolute; + inset: 0; + ${logicalCSS('top', '-1px')} /* Hides a slight color inconsistency */ + + border-radius: ${borderRadius}; + background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); + `, }; }; diff --git a/packages/eui/src/components/color_picker/saturation.tsx b/packages/eui/src/components/color_picker/saturation.tsx index 74557d7823a..8f9292262d8 100644 --- a/packages/eui/src/components/color_picker/saturation.tsx +++ b/packages/eui/src/components/color_picker/saturation.tsx @@ -175,8 +175,15 @@ export const EuiSaturation = forwardRef( tabIndex={-1} {...rest} > -
-
+
+