Skip to content

Commit

Permalink
[Emotion] Convert EuiFormLayout (#7954)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cee-chen
cee-chen authored Aug 12, 2024
1 parent 5a28bd9 commit d4dc2f6
Show file tree
Hide file tree
Showing 49 changed files with 1,237 additions and 1,153 deletions.
Binary file added .../reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...i/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions packages/eui/changelogs/upcoming/7954.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
**CSS-in-JS conversions**

- Converted `EuiFormControlLayout` to Emotion
- Removed `.euiFormControlLayout--*icons` classNames and `--eui-form-control-layout-icons-padding` CSS var. Use `--euiFormControlRightIconsCount` or `--euiFormControlLeftIconsCount` instead
72 changes: 40 additions & 32 deletions packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ exports[`EuiColorPicker color empty string 1`] = `
class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
>
<div
class="euiFormControlLayout"
class="euiFormControlLayout emotion-euiFormControlLayout"
>
<div
class="euiFormControlLayout__childrenWrapper"
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
>
<div
Expand Down Expand Up @@ -57,10 +57,10 @@ exports[`EuiColorPicker color null 1`] = `
class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
>
<div
class="euiFormControlLayout"
class="euiFormControlLayout emotion-euiFormControlLayout"
>
<div
class="euiFormControlLayout__childrenWrapper"
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
>
<div
Expand Down Expand Up @@ -109,10 +109,10 @@ exports[`EuiColorPicker color valid string 1`] = `
class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
>
<div
class="euiFormControlLayout"
class="euiFormControlLayout emotion-euiFormControlLayout"
>
<div
class="euiFormControlLayout__childrenWrapper"
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
>
<div
Expand Down Expand Up @@ -160,10 +160,10 @@ exports[`EuiColorPicker compressed 1`] = `
class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
>
<div
class="euiFormControlLayout euiFormControlLayout--compressed"
class="euiFormControlLayout emotion-euiFormControlLayout-compressed"
>
<div
class="euiFormControlLayout__childrenWrapper"
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
>
<div
Expand Down Expand Up @@ -211,10 +211,10 @@ exports[`EuiColorPicker disabled 1`] = `
class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
>
<div
class="euiFormControlLayout euiFormControlLayout-isDisabled"
class="euiFormControlLayout euiFormControlLayout-isDisabled emotion-euiFormControlLayout"
>
<div
class="euiFormControlLayout__childrenWrapper"
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
style="--euiFormControlLeftIconsCount: 1;"
>
<div
Expand Down Expand Up @@ -250,10 +250,10 @@ exports[`EuiColorPicker fullWidth 1`] = `
class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
>
<div
class="euiFormControlLayout euiFormControlLayout--fullWidth"
class="euiFormControlLayout emotion-euiFormControlLayout-fullWidth"
>
<div
class="euiFormControlLayout__childrenWrapper"
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
>
<div
Expand Down Expand Up @@ -451,10 +451,10 @@ exports[`EuiColorPicker isClearable 1`] = `
class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
>
<div
class="euiFormControlLayout"
class="euiFormControlLayout emotion-euiFormControlLayout"
>
<div
class="euiFormControlLayout__childrenWrapper"
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 2;"
>
<div
Expand Down Expand Up @@ -512,10 +512,10 @@ exports[`EuiColorPicker placeholder 1`] = `
class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
>
<div
class="euiFormControlLayout"
class="euiFormControlLayout emotion-euiFormControlLayout"
>
<div
class="euiFormControlLayout__childrenWrapper"
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
>
<div
Expand Down Expand Up @@ -564,15 +564,19 @@ exports[`EuiColorPicker prepend and append 1`] = `
class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
>
<div
class="euiFormControlLayout euiFormControlLayout--group"
class="euiFormControlLayout euiFormControlLayout--group emotion-euiFormControlLayout-group"
>
<label
class="euiFormLabel euiFormControlLayout__prepend"
<div
class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend"
>
prepend
</label>
<label
class="euiFormLabel"
>
prepend
</label>
</div>
<div
class="euiFormControlLayout__childrenWrapper"
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup"
style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
>
<div
Expand Down Expand Up @@ -611,11 +615,15 @@ exports[`EuiColorPicker prepend and append 1`] = `
</span>
</div>
</div>
<label
class="euiFormLabel euiFormControlLayout__append"
<div
class="euiFormControlLayout__append emotion-euiFormControlLayout__side-append"
>
append
</label>
<label
class="euiFormLabel"
>
append
</label>
</div>
</div>
</div>
`;
Expand All @@ -625,10 +633,10 @@ exports[`EuiColorPicker readOnly 1`] = `
class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
>
<div
class="euiFormControlLayout euiFormControlLayout--readOnly"
class="euiFormControlLayout euiFormControlLayout-readOnly emotion-euiFormControlLayout"
>
<div
class="euiFormControlLayout__childrenWrapper"
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
style="--euiFormControlLeftIconsCount: 1;"
>
<div
Expand Down Expand Up @@ -664,10 +672,10 @@ exports[`EuiColorPicker renders 1`] = `
class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
>
<div
class="euiFormControlLayout"
class="euiFormControlLayout emotion-euiFormControlLayout"
>
<div
class="euiFormControlLayout__childrenWrapper"
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
>
<div
Expand Down Expand Up @@ -715,10 +723,10 @@ exports[`EuiColorPicker showAlpha 1`] = `
class="euiPopover euiColorPicker__popoverAnchor emotion-euiPopover-block"
>
<div
class="euiFormControlLayout"
class="euiFormControlLayout emotion-euiFormControlLayout"
>
<div
class="euiFormControlLayout__childrenWrapper"
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
>
<div
Expand Down
28 changes: 14 additions & 14 deletions ...onents/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ exports[`EuiColorPalettePicker is rendered 1`] = `
value=""
/>
<div
class="euiFormControlLayout"
class="euiFormControlLayout emotion-euiFormControlLayout"
>
<div
class="euiFormControlLayout__childrenWrapper"
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
style="--euiFormControlRightIconsCount: 1;"
>
<button
Expand Down Expand Up @@ -49,10 +49,10 @@ exports[`EuiColorPalettePicker is rendered with a selected custom text 1`] = `
value="custom"
/>
<div
class="euiFormControlLayout"
class="euiFormControlLayout emotion-euiFormControlLayout"
>
<div
class="euiFormControlLayout__childrenWrapper"
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
style="--euiFormControlRightIconsCount: 1;"
>
<button
Expand Down Expand Up @@ -91,10 +91,10 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = `
value="paletteFixed"
/>
<div
class="euiFormControlLayout"
class="euiFormControlLayout emotion-euiFormControlLayout"
>
<div
class="euiFormControlLayout__childrenWrapper"
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
style="--euiFormControlRightIconsCount: 1;"
>
<button
Expand Down Expand Up @@ -161,10 +161,10 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`]
value="paletteLinear"
/>
<div
class="euiFormControlLayout"
class="euiFormControlLayout emotion-euiFormControlLayout"
>
<div
class="euiFormControlLayout__childrenWrapper"
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
style="--euiFormControlRightIconsCount: 1;"
>
<button
Expand Down Expand Up @@ -211,10 +211,10 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette with
value="paletteLinearStops"
/>
<div
class="euiFormControlLayout"
class="euiFormControlLayout emotion-euiFormControlLayout"
>
<div
class="euiFormControlLayout__childrenWrapper"
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
style="--euiFormControlRightIconsCount: 1;"
>
<button
Expand Down Expand Up @@ -261,10 +261,10 @@ exports[`EuiColorPalettePicker is rendered with the prop selectionDisplay set as
value="paletteFixed"
/>
<div
class="euiFormControlLayout"
class="euiFormControlLayout emotion-euiFormControlLayout"
>
<div
class="euiFormControlLayout__childrenWrapper"
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
style="--euiFormControlRightIconsCount: 1;"
>
<button
Expand Down Expand Up @@ -305,10 +305,10 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
value="paletteFixed"
/>
<div
class="euiFormControlLayout"
class="euiFormControlLayout emotion-euiFormControlLayout"
>
<div
class="euiFormControlLayout__childrenWrapper"
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
style="--euiFormControlRightIconsCount: 1;"
>
<button
Expand Down
8 changes: 4 additions & 4 deletions packages/eui/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ exports[`EuiComboBox renders 1`] = `
class="euiPopover euiInputPopover emotion-euiPopover-block-EuiInputPopover"
>
<div
class="euiFormControlLayout emotion-euiComboBox__formControlLayout-multiSelect"
class="euiFormControlLayout emotion-euiFormControlLayout-euiComboBox__formControlLayout-multiSelect"
>
<div
class="euiFormControlLayout__childrenWrapper"
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
style="--euiFormControlRightIconsCount: 1;"
>
<div
Expand Down Expand Up @@ -69,10 +69,10 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
class="euiPopover euiPopover-isOpen euiInputPopover emotion-euiPopover-block-EuiInputPopover"
>
<div
class="euiFormControlLayout emotion-euiComboBox__formControlLayout-multiSelect"
class="euiFormControlLayout emotion-euiFormControlLayout-euiComboBox__formControlLayout-multiSelect"
>
<div
class="euiFormControlLayout__childrenWrapper"
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
style="--euiFormControlRightIconsCount: 1;"
>
<div
Expand Down
6 changes: 3 additions & 3 deletions packages/eui/src/components/combo_box/combo_box.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -358,9 +358,9 @@ describe('EuiComboBox', () => {
);

expect(container.firstElementChild!.className).toContain('-fullWidth');
expect(container.innerHTML).toContain(
'euiFormControlLayout--fullWidth'
);
expect(
container.querySelector('.euiFormControlLayout')!.className
).toContain('-fullWidth');
});

test('autoFocus', () => {
Expand Down
18 changes: 1 addition & 17 deletions packages/eui/src/components/combo_box/combo_box_input/combo_box_input.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,24 +91,8 @@ export const euiComboBoxInputStyles = (euiThemeContext: UseEuiTheme) => {
formLayout: {
euiComboBox__formControlLayout: css``,
// Allow the form control to expand to any height to accommodate multiple rows of pills
// TODO: Remove && specificity override once EuiFormControlLayout is on Emotion
multiSelect: css`
&& {
${logicalCSS('height', 'auto')}
}
`,
// Fix overflowing input wrapper background
prependOnly: css`
.euiFormControlLayout__childrenWrapper {
${logicalCSS('border-top-right-radius', 'inherit')}
${logicalCSS('border-bottom-right-radius', 'inherit')}
}
`,
appendOnly: css`
.euiFormControlLayout__childrenWrapper {
${logicalCSS('border-top-left-radius', 'inherit')}
${logicalCSS('border-bottom-left-radius', 'inherit')}
}
${logicalCSS('height', 'auto')}
`,
},
};
Expand Down
2 changes: 0 additions & 2 deletions packages/eui/src/components/combo_box/combo_box_input/combo_box_input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -342,8 +342,6 @@ export class EuiComboBoxInput<T> extends Component<
const formLayoutStyles = [
styles.formLayout.euiComboBox__formControlLayout,
!singleSelection && styles.formLayout.multiSelect,
isInGroup && !append && styles.formLayout.prependOnly,
isInGroup && !prepend && styles.formLayout.appendOnly,
];

return (
Expand Down
12 changes: 6 additions & 6 deletions packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,10 +62,10 @@ exports[`useDataGridColumnSelector columnSelector [React 16] renders a toolbar b
class="euiPopoverTitle emotion-euiPopoverTitle-s-s"
>
<div
class="euiFormControlLayout euiFormControlLayout--compressed"
class="euiFormControlLayout emotion-euiFormControlLayout-compressed"
>
<div
class="euiFormControlLayout__childrenWrapper"
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
>
<input
aria-label="Search columns"
Expand Down Expand Up @@ -354,10 +354,10 @@ exports[`useDataGridColumnSelector columnSelector [React 17] renders a toolbar b
class="euiPopoverTitle emotion-euiPopoverTitle-s-s"
>
<div
class="euiFormControlLayout euiFormControlLayout--compressed"
class="euiFormControlLayout emotion-euiFormControlLayout-compressed"
>
<div
class="euiFormControlLayout__childrenWrapper"
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
>
<input
aria-label="Search columns"
Expand Down Expand Up @@ -646,10 +646,10 @@ exports[`useDataGridColumnSelector columnSelector [React 18] renders a toolbar b
class="euiPopoverTitle emotion-euiPopoverTitle-s-s"
>
<div
class="euiFormControlLayout euiFormControlLayout--compressed"
class="euiFormControlLayout emotion-euiFormControlLayout-compressed"
>
<div
class="euiFormControlLayout__childrenWrapper"
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
>
<input
aria-label="Search columns"
Expand Down
Loading

0 comments on commit d4dc2f6

Please sign in to comment.