Skip to content

[Emotion] Convert EuiFieldText #7770

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

Merged
cee-chen merged 19 commits into from
May 20, 2024
Merged

[Emotion] Convert EuiFieldText #7770

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
f7b6719
Fix disabled background color
cee-chen May 16, 2024
12d52c2
Fix form border color and remove unnecessary `borderDisabledColor`
cee-chen May 16, 2024
1d0fdd6
[cleanup] Pull out DRY `form.textColor` variable
cee-chen May 16, 2024
bc652c8
Convert various Sass modifier mixins to Emotion
cee-chen May 16, 2024
42fe6cd
🔥 Remove old `euiFormControlSize` util
cee-chen May 16, 2024
5501d49
[EuiFieldText] Convert to new Emotion styles
cee-chen May 16, 2024
4ddc0ef
Refactor icons padding affordance with CSS variables and `calc()`
cee-chen May 16, 2024
eba29be
Convert remaining `inGroup` modifier class
cee-chen May 16, 2024
4a1d1d3
Remove EuiFieldText CSS files
cee-chen May 16, 2024
03dc300
[EuiColorPicker] Fix/update EuiFieldText usage
cee-chen May 17, 2024
e13aa41
[EuiDatePicker] Update to dogfood `EuiFieldText` directly instead of …
cee-chen May 17, 2024
e96fec1
[EuiDatePickerRange] Fix broken invalid/focus linear gradient for com…
cee-chen May 17, 2024
2ceb2d8
Update remaining downstream EuiFieldText snapshots
cee-chen May 17, 2024
0c12b03
[EuiFieldText] Simplify controlOnly inGroup CSS
cee-chen May 17, 2024
090100e
[misc] Rename `--euiFormStateColor` to `--euiFormControlStateColor`
cee-chen May 17, 2024
bb75c1d
changelog
cee-chen May 17, 2024
dada663
[docs] Fix inline `euiFieldText` className usage
cee-chen May 20, 2024
39c180e
[PR feedback] Fix :focus:invalid styles
cee-chen May 20, 2024
5f59c90
Fix EuiMarkdownEditor missing border
cee-chen May 20, 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
7 changes: 7 additions & 0 deletions packages/eui/changelogs/upcoming/7770.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
**Bug fixes**

- Fixed broken focus/invalid styling on compressed `EuiDatePickerRange`s

**CSS-in-JS conversions**

- Converted `EuiFieldText` to Emotion
17 changes: 2 additions & 15 deletions packages/eui/src-docs/src/views/form_controls/form_control_layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,12 +100,7 @@ export default () => {
<EuiFormControlLayout
prepend={<EuiFormLabel htmlFor={labelInputId}>Label</EuiFormLabel>}
>
<EuiFieldText
type="text"
className="euiFieldText--inGroup"
controlOnly
id={labelInputId}
/>
<EuiFieldText type="text" controlOnly id={labelInputId} />
</EuiFormControlLayout>

<EuiFormControlLayout
Expand All @@ -115,13 +110,7 @@ export default () => {
}
append={<EuiButtonEmpty size="xs">Button</EuiButtonEmpty>}
>
<EuiFieldText
type="text"
className="euiFieldText--inGroup"
id={readOnlyInputId}
controlOnly
readOnly
/>
<EuiFieldText type="text" id={readOnlyInputId} controlOnly readOnly />
</EuiFormControlLayout>

<EuiFormControlLayout
Expand All @@ -133,7 +122,6 @@ export default () => {
>
<EuiFieldText
type="number"
className="euiFieldNumber--inGroup"
controlOnly
aria-label="Use aria labels when no actual label is in use"
/>
Expand All @@ -150,7 +138,6 @@ export default () => {
>
<EuiFieldText
type="text"
className="euiFieldText--inGroup"
controlOnly
aria-label="Use aria labels when no actual label is in use"
/>
Expand Down
11 changes: 5 additions & 6 deletions packages/eui/src-docs/src/views/super_date_picker/super_date_picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
EuiSpacer,
EuiFormControlLayoutDelimited,
EuiFormLabel,
EuiFieldText,
EuiPanel,
EuiText,
OnRefreshProps,
Expand Down Expand Up @@ -58,21 +59,19 @@ export default () => {
<EuiFormControlLayoutDelimited
prepend={<EuiFormLabel>Dates</EuiFormLabel>}
startControl={
<input
<EuiFieldText
controlOnly
onChange={onStartInputChange}
type="text"
value={start}
placeholder="start"
className="euiFieldText"
/>
}
endControl={
<input
<EuiFieldText
controlOnly
onChange={onEndInputChange}
type="text"
placeholder="end"
value={end}
className="euiFieldText"
/>
}
/>
Expand Down
24 changes: 12 additions & 12 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 @@ -27,7 +27,7 @@ exports[`renders EuiColorPicker 1`] = `
<input
aria-label="Press the down key to open a popover containing color options"
autocomplete="off"
class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFormControlLayout--1icons"
class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
data-test-subj="euiColorPickerAnchor test subject string"
type="text"
value="#FFEEDD"
Expand Down Expand Up @@ -77,7 +77,7 @@ exports[`renders EuiColorPicker with a clearable input 1`] = `
<input
aria-label="Press the down key to open a popover containing color options"
autocomplete="off"
class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFormControlLayout--2icons"
class="euiFieldText euiColorPicker__input euiFormControlLayout--2icons emotion-euiFieldText-controlOnly"
data-test-subj="euiColorPickerAnchor test subject string"
type="text"
value="#FFEEDD"
Expand Down Expand Up @@ -137,7 +137,7 @@ exports[`renders EuiColorPicker with a color swatch when color is defined 1`] =
<input
aria-label="Press the down key to open a popover containing color options"
autocomplete="off"
class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFormControlLayout--1icons"
class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
data-test-subj="euiColorPickerAnchor test subject string"
type="text"
value="#FFFFFF"
Expand Down Expand Up @@ -187,7 +187,7 @@ exports[`renders EuiColorPicker with a custom placeholder 1`] = `
<input
aria-label="Press the down key to open a popover containing color options"
autocomplete="off"
class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFormControlLayout--1icons"
class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
data-test-subj="euiColorPickerAnchor test subject string"
placeholder="Auto"
type="text"
Expand Down Expand Up @@ -238,7 +238,7 @@ exports[`renders EuiColorPicker with an empty swatch when color is "" 1`] = `
<input
aria-label="Press the down key to open a popover containing color options"
autocomplete="off"
class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFormControlLayout--1icons"
class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
data-test-subj="euiColorPickerAnchor test subject string"
placeholder="Transparent"
type="text"
Expand Down Expand Up @@ -289,7 +289,7 @@ exports[`renders EuiColorPicker with an empty swatch when color is null 1`] = `
<input
aria-label="Press the down key to open a popover containing color options"
autocomplete="off"
class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFormControlLayout--1icons"
class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
data-test-subj="euiColorPickerAnchor test subject string"
placeholder="Transparent"
type="text"
Expand Down Expand Up @@ -345,7 +345,7 @@ exports[`renders a EuiColorPicker with a prepend and append 1`] = `
<input
aria-label="Press the down key to open a popover containing color options"
autocomplete="off"
class="euiFieldText euiColorPicker__input euiColorPicker__input--inGroup euiFieldText--withIcon euiFormControlLayout--1icons"
class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
data-test-subj="euiColorPickerAnchor test subject string"
type="text"
value="#FFEEDD"
Expand Down Expand Up @@ -400,7 +400,7 @@ exports[`renders a EuiColorPicker with an alpha range selector 1`] = `
<input
aria-label="Press the down key to open a popover containing color options"
autocomplete="off"
class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFormControlLayout--1icons"
class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
data-test-subj="euiColorPickerAnchor test subject string"
type="text"
value="#FFEEDD"
Expand Down Expand Up @@ -450,7 +450,7 @@ exports[`renders compressed EuiColorPicker 1`] = `
<input
aria-label="Press the down key to open a popover containing color options"
autocomplete="off"
class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFormControlLayout--1icons euiFieldText--compressed"
class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-compressed-controlOnly"
data-test-subj="euiColorPickerAnchor test subject string"
type="text"
value="#FFEEDD"
Expand Down Expand Up @@ -500,7 +500,7 @@ exports[`renders disabled EuiColorPicker 1`] = `
<input
aria-label="Press the down key to open a popover containing color options"
autocomplete="off"
class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFormControlLayout--1icons"
class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
data-test-subj="euiColorPickerAnchor test subject string"
disabled=""
type="text"
Expand Down Expand Up @@ -538,7 +538,7 @@ exports[`renders fullWidth EuiColorPicker 1`] = `
<input
aria-label="Press the down key to open a popover containing color options"
autocomplete="off"
class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFormControlLayout--1icons euiFieldText--fullWidth"
class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-fullWidth-controlOnly"
data-test-subj="euiColorPickerAnchor test subject string"
type="text"
value="#FFEEDD"
Expand Down Expand Up @@ -760,7 +760,7 @@ exports[`renders readOnly EuiColorPicker 1`] = `
<input
aria-label="Press the down key to open a popover containing color options"
autocomplete="off"
class="euiFieldText euiColorPicker__input euiFieldText--withIcon euiFormControlLayout--1icons"
class="euiFieldText euiColorPicker__input euiFormControlLayout--1icons emotion-euiFieldText-controlOnly"
data-test-subj="euiColorPickerAnchor test subject string"
readonly=""
type="text"
Expand Down
14 changes: 3 additions & 11 deletions packages/eui/src/components/color_picker/_color_picker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,18 +25,10 @@
padding-bottom: 0 !important;
}

// stylelint-disable declaration-no-important
.euiColorPicker__input--inGroup {
height: $euiFormControlLayoutGroupInputHeight !important;
box-shadow: none !important;
border-radius: 0;

&.euiFieldText--compressed {
height: $euiFormControlLayoutGroupInputCompressedHeight !important;
border-radius: 0;
}
.euiColorPicker__input {
// Manually account for custom left icon / color swatch preview
--euiFormControlLeftIconsCount: 1;
}
// stylelint-enable declaration-no-important

.euiColorPicker__alphaRange {
.euiRangeInput {
Expand Down
8 changes: 1 addition & 7 deletions packages/eui/src/components/color_picker/color_picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,13 +293,7 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
clear: isClearable,
isInvalid,
});
const inputClasses = classNames(
'euiColorPicker__input',
{ 'euiColorPicker__input--inGroup': prepend || append },
// Manually account for input padding, since `controlOnly` disables that logic
'euiFieldText--withIcon',
numIconsClass
);
const inputClasses = classNames('euiColorPicker__input', numIconsClass);

const handleOnChange = (text: string) => {
const output = getOutput(text, showAlpha);
Expand Down
6 changes: 3 additions & 3 deletions packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ exports[`useDataGridColumnSelector columnSelector [React 16] renders a toolbar b
>
<input
aria-label="Search columns"
class="euiFieldText euiFieldText--compressed"
class="euiFieldText emotion-euiFieldText-compressed"
data-test-subj="dataGridColumnSelectorSearch"
placeholder="Search"
type="text"
Expand Down Expand Up @@ -361,7 +361,7 @@ exports[`useDataGridColumnSelector columnSelector [React 17] renders a toolbar b
>
<input
aria-label="Search columns"
class="euiFieldText euiFieldText--compressed"
class="euiFieldText emotion-euiFieldText-compressed"
data-test-subj="dataGridColumnSelectorSearch"
placeholder="Search"
type="text"
Expand Down Expand Up @@ -653,7 +653,7 @@ exports[`useDataGridColumnSelector columnSelector [React 18] renders a toolbar b
>
<input
aria-label="Search columns"
class="euiFieldText euiFieldText--compressed"
class="euiFieldText emotion-euiFieldText-compressed"
data-test-subj="dataGridColumnSelectorSearch"
placeholder="Search"
type="text"
Expand Down
2 changes: 1 addition & 1 deletion packages/eui/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -837,7 +837,7 @@ exports[`EuiDatePicker renders 1`] = `
>
<input
aria-label="Press the down key to open a popover containing a calendar."
class="euiDatePicker euiFieldText euiFieldText--withIcon testClass1 testClass2 emotion-euiTestCss"
class="euiFieldText euiDatePicker testClass1 testClass2 emotion-euiFieldText-controlOnly-euiTestCss"
type="text"
value=""
/>
Expand Down
Loading