From 63a6f55133d1c414b105204d6123c377ec606b77 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 12 Aug 2024 15:05:44 -0700 Subject: [PATCH 01/13] Convert base EuiFormControlLayoutIcons styles --- .../form_control_layout.test.tsx.snap | 24 ++++++------ .../_form_control_layout_icons.scss | 8 ---- .../form_control_layout_icons.styles.ts | 34 +++++++++++++++++ .../form_control_layout_icons.tsx | 38 ++++++++++++++----- 4 files changed, 74 insertions(+), 30 deletions(-) create mode 100644 packages/eui/src/components/form/form_control_layout/form_control_layout_icons.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 05a8a099983..8145b136b58 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 @@ -23,7 +23,7 @@ exports[`EuiFormControlLayout props clear onClick is rendered 1`] = ` style="--euiFormControlRightIconsCount: 1;" >
@@ -67,11 +67,11 @@ exports[`EuiFormControlLayout props compressed renders small-sized icon, clear b > diff --git a/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout_clear_button.test.tsx.snap b/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout_clear_button.test.tsx.snap index 17a291c0d0b..992c2dbb323 100644 --- a/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout_clear_button.test.tsx.snap +++ b/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout_clear_button.test.tsx.snap @@ -3,12 +3,12 @@ exports[`EuiFormControlLayoutClearButton is rendered 1`] = ` @@ -17,11 +17,11 @@ exports[`EuiFormControlLayoutClearButton is rendered 1`] = ` exports[`EuiFormControlLayoutClearButton size is rendered 1`] = ` diff --git a/packages/eui/src/components/form/form_control_layout/_form_control_layout_clear_button.scss b/packages/eui/src/components/form/form_control_layout/_form_control_layout_clear_button.scss index 8bfaf521cf5..e69de29bb2d 100644 --- a/packages/eui/src/components/form/form_control_layout/_form_control_layout_clear_button.scss +++ b/packages/eui/src/components/form/form_control_layout/_form_control_layout_clear_button.scss @@ -1,7 +0,0 @@ -.euiFormControlLayoutClearButton { - @include euiFormControlLayoutClearIcon('.euiFormControlLayoutClearButton__icon'); -} - -.euiFormControlLayoutClearButton--small { - @include euiFormControlLayoutClearIcon('.euiFormControlLayoutClearButton__icon', $size: 's'); -} diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.styles.ts b/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.styles.ts new file mode 100644 index 00000000000..00c17782eaf --- /dev/null +++ b/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.styles.ts @@ -0,0 +1,42 @@ +/* + * 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 EuiFormControlLayoutClearButtonStyles = ({ + euiTheme, + colorMode, +}: UseEuiTheme) => { + const backgroundColor = + colorMode === 'DARK' + ? euiTheme.colors.darkShade + : euiTheme.colors.mediumShade; + return { + euiFormControlLayoutClearButton: css` + pointer-events: all; + background-color: ${backgroundColor}; + border-radius: 50%; + line-height: 0; /* ensures the icon stays vertically centered */ + `, + euiFormControlLayoutClearButton__icon: css` + transform: scale(0.5); + fill: ${euiTheme.colors.emptyShade}; + stroke: ${euiTheme.colors.emptyShade}; + `, + size: { + s: css` + stroke-width: ${euiTheme.size.xs}; + `, + m: css` + stroke-width: ${euiTheme.size.xxs}; + `, + }, + }; +}; diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.tsx b/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.tsx index 9d128ffde21..072da96221d 100644 --- a/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.tsx +++ b/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.tsx @@ -7,52 +7,50 @@ */ import React, { FunctionComponent, ButtonHTMLAttributes } from 'react'; - import classNames from 'classnames'; -import { CommonProps, keysOf } from '../../common'; -import { EuiIcon } from '../../icon'; -import { EuiI18n } from '../../i18n'; -const sizeToClassNameMap = { - s: 'euiFormControlLayoutClearButton--small', - m: null, -}; +import { useEuiMemoizedStyles } from '../../../services'; +import { CommonProps } from '../../common'; +import { EuiIcon } from '../../icon'; +import { useEuiI18n } from '../../i18n'; -export const SIZES = keysOf(sizeToClassNameMap); +import { EuiFormControlLayoutClearButtonStyles } from './form_control_layout_clear_button.styles'; export type EuiFormControlLayoutClearButtonProps = CommonProps & ButtonHTMLAttributes & { - size?: (typeof SIZES)[number]; + size?: 's' | 'm'; }; export const EuiFormControlLayoutClearButton: FunctionComponent< EuiFormControlLayoutClearButtonProps > = ({ className, onClick, size = 'm', ...rest }) => { - const classes = classNames( - 'euiFormControlLayoutClearButton', - sizeToClassNameMap[size], - className + const classes = classNames('euiFormControlLayoutClearButton', className); + const styles = useEuiMemoizedStyles(EuiFormControlLayoutClearButtonStyles); + const iconStyles = [ + styles.euiFormControlLayoutClearButton__icon, + styles.size[size], + ]; + + const ariaLabel = useEuiI18n( + 'euiFormControlLayoutClearButton.label', + 'Clear input' ); return ( - - {(label: string) => ( - - )} - + + ); }; diff --git a/packages/eui/src/global_styling/mixins/_form.scss b/packages/eui/src/global_styling/mixins/_form.scss index 2b2dbda6679..76c320947dd 100644 --- a/packages/eui/src/global_styling/mixins/_form.scss +++ b/packages/eui/src/global_styling/mixins/_form.scss @@ -26,34 +26,6 @@ } } -@mixin euiFormControlLayoutClearIcon($iconClass, $size: 'm') { - $clearSize: $euiSize; - $clearIconStroke: 2px; - - @if ($size == 's') { - $clearSize: $euiSizeM; - $clearIconStroke: $euiSizeXS; - } - - @include size($clearSize); - pointer-events: all; - background-color: lightOrDarkTheme($euiColorMediumShade, $euiColorDarkShade); - border-radius: $clearSize; - line-height: 0; // ensures the icon stays vertically centered - - &:focus { - @include euiFocusRing; - } - - #{$iconClass} { - @include size($clearSize / 2); - fill: $euiColorEmptyShade; - // increase thickness of icon at such a small size - stroke: $euiColorEmptyShade; - stroke-width: $clearIconStroke; - } -} - @mixin euiPlaceholderPerBrowser { // stylelint-disable selector-no-vendor-prefix // Each prefix must be its own content block From 285a0c93f70557c9fdaf32ec7991048e51cd3a5b Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 12 Aug 2024 21:44:54 -0700 Subject: [PATCH 09/13] Delete Sass files --- .../form_control_layout/_form_control_layout_clear_button.scss | 0 .../form_control_layout/_form_control_layout_custom_icon.scss | 0 .../form/form_control_layout/_form_control_layout_icons.scss | 0 .../eui/src/components/form/form_control_layout/_index.scss | 3 --- 4 files changed, 3 deletions(-) delete mode 100644 packages/eui/src/components/form/form_control_layout/_form_control_layout_clear_button.scss delete mode 100644 packages/eui/src/components/form/form_control_layout/_form_control_layout_custom_icon.scss delete mode 100644 packages/eui/src/components/form/form_control_layout/_form_control_layout_icons.scss diff --git a/packages/eui/src/components/form/form_control_layout/_form_control_layout_clear_button.scss b/packages/eui/src/components/form/form_control_layout/_form_control_layout_clear_button.scss deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/packages/eui/src/components/form/form_control_layout/_form_control_layout_custom_icon.scss b/packages/eui/src/components/form/form_control_layout/_form_control_layout_custom_icon.scss deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/packages/eui/src/components/form/form_control_layout/_form_control_layout_icons.scss b/packages/eui/src/components/form/form_control_layout/_form_control_layout_icons.scss deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/packages/eui/src/components/form/form_control_layout/_index.scss b/packages/eui/src/components/form/form_control_layout/_index.scss index f5bad883226..63aeec7c19a 100644 --- a/packages/eui/src/components/form/form_control_layout/_index.scss +++ b/packages/eui/src/components/form/form_control_layout/_index.scss @@ -1,4 +1 @@ @import 'form_control_layout_delimited'; -@import 'form_control_layout_icons'; -@import 'form_control_layout_clear_button'; -@import 'form_control_layout_custom_icon'; From 4a8559dfe6b6f615c15138fc2fb0384c76a29889 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 12 Aug 2024 21:49:11 -0700 Subject: [PATCH 10/13] [tests] Update downstream snapshots + `shouldRenderCustomStyles` --- .../__snapshots__/color_picker.test.tsx.snap | 93 ++++++++++--------- .../color_palette_picker.test.tsx.snap | 28 +++--- .../__snapshots__/combo_box.test.tsx.snap | 8 +- .../__snapshots__/date_picker.test.tsx.snap | 4 +- .../date_picker_range.test.tsx.snap | 37 ++++---- .../super_date_picker.test.tsx.snap | 5 +- .../__snapshots__/quick_select.test.tsx.snap | 16 ++-- .../quick_select_popover.test.tsx.snap | 10 +- .../field_password.test.tsx.snap | 48 +++++----- .../form_control_layout_clear_button.test.tsx | 4 + .../form_control_layout_custom_icon.test.tsx | 4 + .../__snapshots__/dual_range.test.tsx.snap | 4 +- .../range/__snapshots__/range.test.tsx.snap | 2 +- .../__snapshots__/super_select.test.tsx.snap | 16 ++-- .../super_select_control.test.tsx.snap | 36 +++---- .../inline_edit_form.test.tsx.snap | 4 +- .../__snapshots__/search_bar.test.tsx.snap | 22 ++--- .../__snapshots__/search_box.test.tsx.snap | 8 +- .../__snapshots__/selectable.test.tsx.snap | 10 +- .../selectable_search.test.tsx.snap | 18 ++-- ...selectable_template_sitewide.test.tsx.snap | 16 ++-- 21 files changed, 201 insertions(+), 192 deletions(-) diff --git a/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap b/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap index b8b6cb24abe..8d547dff9e9 100644 --- a/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap +++ b/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap @@ -12,10 +12,10 @@ exports[`EuiColorPicker color empty string 1`] = ` style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;" >