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 EuiFormLayoutControl icons (3/3) #7959

Merged
merged 14 commits into from
Aug 14, 2024
Merged

[Emotion] Convert EuiFormLayoutControl icons (3/3) #7959

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
63a6f55
Convert base EuiFormControlLayoutIcons styles
cee-chen Aug 12, 2024
3ba20b0
Convert icons position styles
cee-chen Aug 12, 2024
6b7cd85
Convert disabled CSS selector to prop
cee-chen Aug 12, 2024
868574c
Fix various form controls not correctly passing `isDisabled` to `EuiF…
cee-chen Aug 12, 2024
4b4aa2a
[EuiFormControlLayoutCustomIcon] Remove unused CSS
cee-chen Aug 13, 2024
b1d766a
[EuiFormControlLayoutCustomIcon] Fix clickable icons not being disabl…
cee-chen Aug 13, 2024
9ad73db
[EuiFormControlLayoutCustomIcon] Convert remaining styles
cee-chen Aug 13, 2024
a343047
[EuiFormControlLayoutClearButton] Convert styles + cleanup
cee-chen Aug 13, 2024
285a0c9
Delete Sass files
cee-chen Aug 13, 2024
4a8559d
[tests] Update downstream snapshots + `shouldRenderCustomStyles`
cee-chen Aug 13, 2024
d7c5172
changelog
cee-chen Aug 13, 2024
7a1e89e
Fix more disabled icons styling/testing
cee-chen Aug 13, 2024
b95def4
Fix Cypress assertion
cee-chen Aug 13, 2024
ed88622
Merge branch 'main' into emotion/form-layout-3
cee-chen Aug 14, 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
3 changes: 3 additions & 0 deletions packages/eui/changelogs/upcoming/7959.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**CSS-in-JS conversions**

- Removed `@euiFormControlLayoutClearIcon` Sass mixin
92 changes: 46 additions & 46 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 @@ -12,10 +12,10 @@ exports[`EuiColorPicker color empty string 1`] = `
style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
>
<span
class="euiFormControlLayoutCustomIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
>
<span
aria-hidden="true"
Expand All @@ -35,10 +35,10 @@ exports[`EuiColorPicker color empty string 1`] = `
value=""
/>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
>
<span
class="euiFormControlLayoutCustomIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
>
<span
aria-hidden="true"
Expand All @@ -64,10 +64,10 @@ exports[`EuiColorPicker color null 1`] = `
style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
>
<span
class="euiFormControlLayoutCustomIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
>
<span
aria-hidden="true"
Expand All @@ -87,10 +87,10 @@ exports[`EuiColorPicker color null 1`] = `
value=""
/>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
>
<span
class="euiFormControlLayoutCustomIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
>
<span
aria-hidden="true"
Expand All @@ -116,10 +116,10 @@ exports[`EuiColorPicker color valid string 1`] = `
style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
>
<span
class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon-euiColorPicker__swatchInputIcon"
>
<span
aria-hidden="true"
Expand All @@ -138,10 +138,10 @@ exports[`EuiColorPicker color valid string 1`] = `
value="#FFFFFF"
/>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
>
<span
class="euiFormControlLayoutCustomIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
>
<span
aria-hidden="true"
Expand All @@ -167,10 +167,10 @@ exports[`EuiColorPicker compressed 1`] = `
style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-compressed-absolute-left"
>
<span
class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon-euiColorPicker__swatchInputIcon"
>
<span
aria-hidden="true"
Expand All @@ -189,10 +189,10 @@ exports[`EuiColorPicker compressed 1`] = `
value="#FFEEDD"
/>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-compressed-absolute-right"
>
<span
class="euiFormControlLayoutCustomIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
>
<span
aria-hidden="true"
Expand All @@ -218,10 +218,10 @@ exports[`EuiColorPicker disabled 1`] = `
style="--euiFormControlLeftIconsCount: 1;"
>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left-disabled"
>
<span
class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon-euiColorPicker__swatchInputIcon"
>
<span
aria-hidden="true"
Expand Down Expand Up @@ -257,10 +257,10 @@ exports[`EuiColorPicker fullWidth 1`] = `
style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
>
<span
class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon-euiColorPicker__swatchInputIcon"
>
<span
aria-hidden="true"
Expand All @@ -279,10 +279,10 @@ exports[`EuiColorPicker fullWidth 1`] = `
value="#FFEEDD"
/>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
>
<span
class="euiFormControlLayoutCustomIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
>
<span
aria-hidden="true"
Expand Down Expand Up @@ -458,10 +458,10 @@ exports[`EuiColorPicker isClearable 1`] = `
style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 2;"
>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
>
<span
class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon-euiColorPicker__swatchInputIcon"
>
<span
aria-hidden="true"
Expand All @@ -480,20 +480,20 @@ exports[`EuiColorPicker isClearable 1`] = `
value="#FFEEDD"
/>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
>
<button
aria-label="Clear input"
class="euiFormControlLayoutClearButton"
class="euiFormControlLayoutClearButton emotion-euiFormControlLayoutClearButton"
type="button"
>
<span
class="euiFormControlLayoutClearButton__icon"
class="euiFormControlLayoutClearButton__icon emotion-euiFormControlLayoutClearButton__icon-m"
data-euiicon-type="cross"
/>
</button>
<span
class="euiFormControlLayoutCustomIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
>
<span
aria-hidden="true"
Expand All @@ -519,10 +519,10 @@ exports[`EuiColorPicker placeholder 1`] = `
style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
>
<span
class="euiFormControlLayoutCustomIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
>
<span
aria-hidden="true"
Expand All @@ -542,10 +542,10 @@ exports[`EuiColorPicker placeholder 1`] = `
value=""
/>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
>
<span
class="euiFormControlLayoutCustomIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
>
<span
aria-hidden="true"
Expand Down Expand Up @@ -580,10 +580,10 @@ exports[`EuiColorPicker prepend and append 1`] = `
style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
>
<span
class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon-euiColorPicker__swatchInputIcon"
>
<span
aria-hidden="true"
Expand All @@ -602,10 +602,10 @@ exports[`EuiColorPicker prepend and append 1`] = `
value="#FFEEDD"
/>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
>
<span
class="euiFormControlLayoutCustomIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
>
<span
aria-hidden="true"
Expand Down Expand Up @@ -640,10 +640,10 @@ exports[`EuiColorPicker readOnly 1`] = `
style="--euiFormControlLeftIconsCount: 1;"
>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
>
<span
class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon-euiColorPicker__swatchInputIcon"
>
<span
aria-hidden="true"
Expand Down Expand Up @@ -679,10 +679,10 @@ exports[`EuiColorPicker renders 1`] = `
style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
>
<span
class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon-euiColorPicker__swatchInputIcon"
>
<span
aria-hidden="true"
Expand All @@ -701,10 +701,10 @@ exports[`EuiColorPicker renders 1`] = `
value="#FFEEDD"
/>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
>
<span
class="euiFormControlLayoutCustomIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
>
<span
aria-hidden="true"
Expand All @@ -730,10 +730,10 @@ exports[`EuiColorPicker showAlpha 1`] = `
style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
>
<span
class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon-euiColorPicker__swatchInputIcon"
>
<span
aria-hidden="true"
Expand All @@ -752,10 +752,10 @@ exports[`EuiColorPicker showAlpha 1`] = `
value="#FFEEDD"
/>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
>
<span
class="euiFormControlLayoutCustomIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
>
<span
aria-hidden="true"
Expand Down
28 changes: 14 additions & 14 deletions ...onents/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,10 @@ exports[`EuiColorPalettePicker is rendered 1`] = `
type="button"
/>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
>
<span
class="euiFormControlLayoutCustomIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
>
<span
aria-hidden="true"
Expand Down Expand Up @@ -65,10 +65,10 @@ exports[`EuiColorPalettePicker is rendered with a selected custom text 1`] = `
Plain text as a custom option
</button>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
>
<span
class="euiFormControlLayoutCustomIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
>
<span
aria-hidden="true"
Expand Down Expand Up @@ -135,10 +135,10 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = `
</span>
</button>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
>
<span
class="euiFormControlLayoutCustomIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
>
<span
aria-hidden="true"
Expand Down Expand Up @@ -185,10 +185,10 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`]
/>
</button>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
>
<span
class="euiFormControlLayoutCustomIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
>
<span
aria-hidden="true"
Expand Down Expand Up @@ -235,10 +235,10 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette with
/>
</button>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
>
<span
class="euiFormControlLayoutCustomIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
>
<span
aria-hidden="true"
Expand Down Expand Up @@ -277,10 +277,10 @@ exports[`EuiColorPalettePicker is rendered with the prop selectionDisplay set as
Palette 1
</button>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
>
<span
class="euiFormControlLayoutCustomIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
>
<span
aria-hidden="true"
Expand Down Expand Up @@ -348,10 +348,10 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
</span>
</button>
<div
class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
>
<span
class="euiFormControlLayoutCustomIcon"
class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
>
<span
aria-hidden="true"
Expand Down
Loading
Loading