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.

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
Changes from 13 commits
Commits
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
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**CSS-in-JS conversions**

- Removed `@euiFormControlLayoutClearIcon` Sass mixin
Original file line number Diff line number Diff line change
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
Original file line number Diff line number Diff line change
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
@@ -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"
Loading