Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Emotion] Convert EuiSaturation and EuiHue #7857

Closed
wants to merge 10 commits into from
Closed

[Emotion] Convert EuiSaturation and EuiHue #7857

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7e15558
[EuiSaturation] Set up Emotion file
cee-chen Jun 21, 2024
dbcf00c
[EuiSaturation] Convert lightness and saturation gradients
cee-chen Jun 21, 2024
526a1d4
[EuiSaturation] Convert indicator styles
cee-chen Jun 21, 2024
64f72f6
[EuiSaturation] Convert focus styles
cee-chen Jun 21, 2024
f0d98b6
[EuiSaturation] Misc cleanup
cee-chen Jun 21, 2024
026e830
[EuiHue] Set up Emotion file
cee-chen Jun 21, 2024
d781700
[EuiHue] Convert range indicator to Emotion
cee-chen Jun 21, 2024
4d18993
Delete Sass files
cee-chen Jun 26, 2024
fc1d2d9
Tests + VRT updates
cee-chen Jun 26, 2024
cbb65f3
stylelint shenanigans
cee-chen Jun 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified ...chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Inline_With_All_Elements.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 10 additions & 10 deletions packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand Down
12 changes: 6 additions & 6 deletions packages/eui/src/components/color_picker/__snapshots__/hue.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand Down
32 changes: 16 additions & 16 deletions packages/eui/src/components/color_picker/__snapshots__/saturation.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
87 changes: 0 additions & 87 deletions packages/eui/src/components/color_picker/_hue.scss
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions packages/eui/src/components/color_picker/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,2 @@
@import 'variables';
@import 'hue';
@import 'saturation';
@import 'color_palette_picker/index';
@import 'color_palette_display/index';
57 changes: 0 additions & 57 deletions packages/eui/src/components/color_picker/_saturation.scss
View file
Open in desktop

This file was deleted.

5 changes: 0 additions & 5 deletions packages/eui/src/components/color_picker/_variables.scss
View file
Open in desktop

This file was deleted.

Loading
Loading