From 608f7b341ff5cd287a71431986c9c2d2a51322f5 Mon Sep 17 00:00:00 2001 From: Cee Chen <549407+cee-chen@users.noreply.github.com> Date: Thu, 27 Jun 2024 08:51:04 -0700 Subject: [PATCH] [Emotion] Convert EuiColorPalettePicker and EuiColorPaletteDisplay (#7854) --- ...icker_EuiColorPalettePicker_Playground.png | Bin 1255 -> 1248 bytes ...icker_EuiColorPalettePicker_Playground.png | Bin 2665 -> 2683 bytes packages/eui/changelogs/upcoming/7854.md | 5 + .../src/components/color_picker/_index.scss | 2 - .../color_palette_display.test.tsx.snap | 32 +- .../_color_palette_display.scss | 18 - .../_color_palette_display_fixed.scss | 12 - .../color_palette_display/_index.scss | 4 - .../color_palette_display/_mixins.scss | 22 -- .../color_palette_display/_variables.scss | 6 - .../color_palette_display.styles.ts | 54 +++ .../color_palette_display.test.tsx | 5 +- .../color_palette_display.tsx | 27 +- .../color_palette_display_fixed.styles.ts | 20 ++ .../color_palette_display_fixed.tsx | 2 + .../color_palette_picker.test.tsx.snap | 338 +++++++++++++++--- .../_color_palette_picker.scss | 9 - .../color_palette_picker/_index.scss | 1 - .../color_palette_picker.test.tsx | 15 +- .../color_palette_picker.tsx | 102 +++--- 20 files changed, 462 insertions(+), 212 deletions(-) create mode 100644 packages/eui/changelogs/upcoming/7854.md delete mode 100644 packages/eui/src/components/color_picker/color_palette_display/_color_palette_display.scss delete mode 100644 packages/eui/src/components/color_picker/color_palette_display/_color_palette_display_fixed.scss delete mode 100644 packages/eui/src/components/color_picker/color_palette_display/_index.scss delete mode 100644 packages/eui/src/components/color_picker/color_palette_display/_mixins.scss delete mode 100644 packages/eui/src/components/color_picker/color_palette_display/_variables.scss create mode 100644 packages/eui/src/components/color_picker/color_palette_display/color_palette_display.styles.ts create mode 100644 packages/eui/src/components/color_picker/color_palette_display/color_palette_display_fixed.styles.ts delete mode 100644 packages/eui/src/components/color_picker/color_palette_picker/_color_palette_picker.scss delete mode 100644 packages/eui/src/components/color_picker/color_palette_picker/_index.scss diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Playground.png index 414de016f8575d96c02e18bb7690bd0dadd978f0..4094099f9762b6f4d7099571f3dc73c360ee23c2 100644 GIT binary patch delta 1152 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 P?g)b0I9OL(dj0YrF3jM5 diff --git a/packages/eui/changelogs/upcoming/7854.md b/packages/eui/changelogs/upcoming/7854.md new file mode 100644 index 00000000000..9bf99deb9ff --- /dev/null +++ b/packages/eui/changelogs/upcoming/7854.md @@ -0,0 +1,5 @@ +**CSS-in-JS conversions** + +- Converted `EuiColorPalettePicker` and `EuiColorPaletteDisplay` to Emotion + - Removed `$euiColorPaletteDisplaySizes` + - Removed `@mixin euiColorPaletteInnerBorder` diff --git a/packages/eui/src/components/color_picker/_index.scss b/packages/eui/src/components/color_picker/_index.scss index 017797d0b52..debe011a3c7 100644 --- a/packages/eui/src/components/color_picker/_index.scss +++ b/packages/eui/src/components/color_picker/_index.scss @@ -1,5 +1,3 @@ @import 'variables'; @import 'hue'; @import 'saturation'; -@import 'color_palette_picker/index'; -@import 'color_palette_display/index'; diff --git a/packages/eui/src/components/color_picker/color_palette_display/__snapshots__/color_palette_display.test.tsx.snap b/packages/eui/src/components/color_picker/color_palette_display/__snapshots__/color_palette_display.test.tsx.snap index cc478348f6f..02b8d337d96 100644 --- a/packages/eui/src/components/color_picker/color_palette_display/__snapshots__/color_palette_display.test.tsx.snap +++ b/packages/eui/src/components/color_picker/color_palette_display/__snapshots__/color_palette_display.test.tsx.snap @@ -3,12 +3,12 @@ exports[`EuiColorPaletteDisplay is rendered 1`] = `