From 7101ad28f1060141fb0f223b1fdbb2bc6714a950 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 8 Aug 2024 12:46:35 -0700 Subject: [PATCH 01/18] Delete now-unused icon number classes/utils - entirely replaced by new `getIconAffordanceStyles` util, and CSS variables --- .../_form_control_layout.scss | 26 ----------- .../form_control_layout/_num_icons.test.ts | 46 +------------------ .../form/form_control_layout/_num_icons.ts | 35 -------------- 3 files changed, 1 insertion(+), 106 deletions(-) diff --git a/packages/eui/src/components/form/form_control_layout/_form_control_layout.scss b/packages/eui/src/components/form/form_control_layout/_form_control_layout.scss index d94c5af5e36..19dbba69653 100644 --- a/packages/eui/src/components/form/form_control_layout/_form_control_layout.scss +++ b/packages/eui/src/components/form/form_control_layout/_form_control_layout.scss @@ -4,32 +4,6 @@ .euiFormControlLayout { // Let the height expand as needed @include euiFormControlSize($includeAlternates: true); - - // TODO: Remove this once all form controls are on Emotion/setting padding via CSS variables - $iconSize: map-get($euiFormControlIconSizes, 'medium'); - $iconPadding: $euiFormControlPadding; - $marginBetweenIcons: $euiFormControlPadding / 2; - - // The `.euiFormControlLayout-{num}icons` selector string is also declared in `src/components/form/form_control_layout/_num_icons.test.ts`. - // It is the same for all form controls so as to lessen the total classes exported, - // we use a form control layout class on all form controls. - @for $i from 1 through 5 { - &--#{$i}icons { - $paddingOffset: $iconPadding + ($iconSize + $marginBetweenIcons) * $i; - - --eui-form-control-layout-icons-padding: #{$paddingOffset}; // Set this for flexible usage, e.g. components that need extra specificity - padding-right: $paddingOffset; - - &[class*='compressed'] { - $iconSizeCompressed: map-get($euiFormControlIconSizes, 'small'); - $iconPaddingCompressed: $euiFormControlCompressedPadding; - $paddingOffset: $iconPaddingCompressed + ($iconSizeCompressed + $marginBetweenIcons) * $i; - - --eui-form-control-layout-icons-padding: #{$paddingOffset}; - padding-right: $paddingOffset; - } - } - } } .euiFormControlLayout__childrenWrapper { diff --git a/packages/eui/src/components/form/form_control_layout/_num_icons.test.ts b/packages/eui/src/components/form/form_control_layout/_num_icons.test.ts index 94ead8a1dd7..491dd665eec 100644 --- a/packages/eui/src/components/form/form_control_layout/_num_icons.test.ts +++ b/packages/eui/src/components/form/form_control_layout/_num_icons.test.ts @@ -6,11 +6,7 @@ * Side Public License, v 1. */ -import { - getFormControlClassNameForIconCount, - isRightSideIcon, - getIconAffordanceStyles, -} from './_num_icons'; +import { isRightSideIcon, getIconAffordanceStyles } from './_num_icons'; describe('getIconAffordanceStyles', () => { const noIcons = { @@ -71,46 +67,6 @@ describe('getIconAffordanceStyles', () => { }); }); -describe('getFormControlClassNameForIconCount', () => { - it('should return undefined if object is empty', () => { - const numberClass = getFormControlClassNameForIconCount({}); - expect(numberClass).toEqual(undefined); - }); - - it('should return undefined if all are false', () => { - const numberClass = getFormControlClassNameForIconCount({ - icon: false, - clear: false, - isLoading: false, - isInvalid: false, - isDropdown: false, - }); - expect(numberClass).toEqual(undefined); - }); - - it('should return 2 if 2 are true', () => { - const numberClass = getFormControlClassNameForIconCount({ - icon: false, - clear: true, - isLoading: true, - isInvalid: false, - isDropdown: false, - }); - expect(numberClass).toEqual('euiFormControlLayout--2icons'); - }); - - it('should return 5 if all are true', () => { - const numberClass = getFormControlClassNameForIconCount({ - icon: true, - clear: true, - isLoading: true, - isInvalid: true, - isDropdown: true, - }); - expect(numberClass).toEqual('euiFormControlLayout--5icons'); - }); -}); - describe('isRightSideIcon', () => { it('returns true if side has been set to right', () => { expect(isRightSideIcon({ side: 'right', type: 'warning' })).toEqual(true); diff --git a/packages/eui/src/components/form/form_control_layout/_num_icons.ts b/packages/eui/src/components/form/form_control_layout/_num_icons.ts index 1dad9f03c73..d51c8dc2f4f 100644 --- a/packages/eui/src/components/form/form_control_layout/_num_icons.ts +++ b/packages/eui/src/components/form/form_control_layout/_num_icons.ts @@ -11,41 +11,6 @@ import { type EuiFormControlLayoutIconsProps, } from './form_control_layout_icons'; -/** - * The `getFormControlClassNameForIconCount` function helps setup the className appendum - * depending on the form control's current settings/state. - * - * @param icon {boolean} Does it contain a static icon like arrowDown - * @param clear {boolean} Is it currently clearable - * @param isLoading {boolean} Is is currently loading - * @param isInvalid {boolean} It is currently invalid - * @param isDropdown {boolean} It is as dropdown - * @returns {string | undefined} Returns the string to append to the base className of the form control; or `undefined` if all evaluate to false - */ - -export type _EuiFormControlLayoutNumIcons = { - icon?: boolean; - clear?: boolean; - isLoading?: boolean; - isInvalid?: boolean; - isDropdown?: boolean; -}; - -export const getFormControlClassNameForIconCount = ({ - icon, - clear, - isLoading, - isInvalid, - isDropdown, -}: _EuiFormControlLayoutNumIcons): string | undefined => { - const numIcons = [icon, clear, isInvalid, isLoading, isDropdown].filter( - (item) => item === true - ).length; - - // This className is also specifically used in `src/global_styling/mixins/_form.scss` - return numIcons > 0 ? `euiFormControlLayout--${numIcons}icons` : undefined; -}; - export const isRightSideIcon = ( icon?: EuiFormControlLayoutIconsProps['icon'] ): boolean => { From bc8380f463cf7514676e7b10d493994ff38e2ae3 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 8 Aug 2024 12:59:27 -0700 Subject: [PATCH 02/18] Convert `.euiFormControlLayout__childrenWrapper` to Emotion + remove unused euiButtonEmpty styles?? literally not sure what this is doing, button empty does not have borders. probably left over from old theme + reorder imports --- .../form_control_layout.test.tsx.snap | 40 +++++++++---------- .../_form_control_layout.scss | 18 --------- .../form_control_layout.styles.ts | 25 ++++++++++++ .../form_control_layout.tsx | 17 ++++++-- 4 files changed, 59 insertions(+), 41 deletions(-) create mode 100644 packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts diff --git a/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap b/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap index 51aafb75204..a8664b03579 100644 --- a/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap +++ b/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap @@ -7,7 +7,7 @@ exports[`EuiFormControlLayout is rendered 1`] = ` data-test-subj="test subject string" >
@@ -19,7 +19,7 @@ exports[`EuiFormControlLayout props clear onClick is rendered 1`] = ` class="euiFormControlLayout" >
`; @@ -100,7 +100,7 @@ exports[`EuiFormControlLayout props icon is rendered as a string 1`] = ` class="euiFormControlLayout" >
`; @@ -346,7 +346,7 @@ exports[`EuiFormControlLayout props one append node is rendered 1`] = ` class="euiFormControlLayout euiFormControlLayout--group" >
`; @@ -421,7 +421,7 @@ exports[`EuiFormControlLayout props readOnly is rendered 1`] = ` class="euiFormControlLayout euiFormControlLayout--readOnly" >
`; diff --git a/packages/eui/src/components/form/form_control_layout/_form_control_layout.scss b/packages/eui/src/components/form/form_control_layout/_form_control_layout.scss index 19dbba69653..b0e85145626 100644 --- a/packages/eui/src/components/form/form_control_layout/_form_control_layout.scss +++ b/packages/eui/src/components/form/form_control_layout/_form_control_layout.scss @@ -6,13 +6,8 @@ @include euiFormControlSize($includeAlternates: true); } -.euiFormControlLayout__childrenWrapper { - position: relative; -} - /** * 1. Account for inner box-shadow style border - * 2. Ensure truncation works in children elements */ .euiFormControlLayout--group { @@ -31,11 +26,6 @@ height: 100%; } - .euiFormControlLayout__childrenWrapper { - flex-grow: 1; - overflow: hidden; /* 2 */ - } - .euiFormControlLayout__prepend, .euiFormControlLayout__append { @include euiTextTruncate; @@ -128,14 +118,6 @@ border-right: $euiFormInputGroupBorder; } - // Any buttons after the children wrapper or inside any elements after the children wrapper - // Need to swap border sides - .euiFormControlLayout__childrenWrapper ~ .euiButtonEmpty, - .euiFormControlLayout__childrenWrapper ~ * .euiButtonEmpty { - border-right: none; - border-left: $euiFormInputGroupBorder; - } - // Compressed alterations &.euiFormControlLayout--compressed { diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts b/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts new file mode 100644 index 00000000000..c71f2f04263 --- /dev/null +++ b/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts @@ -0,0 +1,25 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; + +import { UseEuiTheme } from '../../../services'; + +export const euiFormControlLayoutStyles = (euiThemeContext: UseEuiTheme) => { + return { + children: { + euiFormControlLayout__childrenWrapper: css` + position: relative; + `, + inGroup: css` + flex-grow: 1; + overflow: hidden; /* Ensure truncation works in children elements */ + `, + }, + }; +}; diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout.tsx b/packages/eui/src/components/form/form_control_layout/form_control_layout.tsx index 00b20ab9cca..9e1a62da69a 100644 --- a/packages/eui/src/components/form/form_control_layout/form_control_layout.tsx +++ b/packages/eui/src/components/form/form_control_layout/form_control_layout.tsx @@ -17,14 +17,17 @@ import React, { } from 'react'; import classNames from 'classnames'; +import { useEuiMemoizedStyles } from '../../../services'; +import { CommonProps } from '../../common'; + +import { EuiFormLabel } from '../form_label'; +import { useFormContext } from '../eui_form_context'; import { getIconAffordanceStyles, isRightSideIcon } from './_num_icons'; import { EuiFormControlLayoutIcons, EuiFormControlLayoutIconsProps, } from './form_control_layout_icons'; -import { CommonProps } from '../../common'; -import { EuiFormLabel } from '../form_label'; -import { useFormContext } from '../eui_form_context'; +import { euiFormControlLayoutStyles } from './form_control_layout.styles'; type StringOrReactElement = string | ReactElement; type PrependAppendType = StringOrReactElement | StringOrReactElement[]; @@ -107,6 +110,13 @@ export const EuiFormControlLayout: FunctionComponent< className ); + const styles = useEuiMemoizedStyles(euiFormControlLayoutStyles); + + const childrenWrapperStyles = [ + styles.children.euiFormControlLayout__childrenWrapper, + (prepend || append) && styles.children.inGroup, + ]; + const hasDropdownIcon = !readOnly && !isDisabled && isDropdown; const hasRightIcon = isRightSideIcon(icon); const hasLeftIcon = icon && !hasRightIcon; @@ -134,6 +144,7 @@ export const EuiFormControlLayout: FunctionComponent< />
{hasLeftIcon && ( From 6d89ad9bb0baf45db0b5a64080425a6c431e3bae Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Fri, 24 May 2024 09:57:26 -0700 Subject: [PATCH 03/18] Convert compressed & width modifier styles - prefer using variables over mixins which contain unnecessary CSS --- .../form_control_layout.test.tsx.snap | 40 +++++++++---------- .../_form_control_layout.scss | 5 --- .../form_control_layout.styles.ts | 23 +++++++++++ .../form_control_layout.test.tsx | 2 +- .../form_control_layout.tsx | 10 +++-- 5 files changed, 51 insertions(+), 29 deletions(-) diff --git a/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap b/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap index a8664b03579..f1dfc7ecfdc 100644 --- a/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap +++ b/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap @@ -3,7 +3,7 @@ exports[`EuiFormControlLayout is rendered 1`] = `