From c0b8a25095e9fd60a5a9911d0cb1ba1249400ebf Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Tue, 24 Nov 2020 13:46:22 -0500 Subject: [PATCH] Fix dropdown styles in Amsterdam (#4301) * Reusing EuiPopover panel classes inside EuiComboBox * EuiSuperSelect now using EuiInputPopover * Remove popover animation if attached * Fix body line height in reset * Fix date picker dropdown styles * Removed breakpoint hiding time picker --- CHANGELOG.md | 3 + .../color_picker/color_palette_display.js | 2 + .../color_palette_picker.test.tsx.snap | 624 ++++++------ .../__snapshots__/combo_box.test.tsx.snap | 2 +- src/components/combo_box/_combo_box.scss | 1 + .../_combo_box_options_list.scss | 52 +- .../combo_box_options_list.tsx | 24 +- src/components/date_picker/_date_picker.scss | 17 +- .../__snapshots__/super_select.test.tsx.snap | 933 ++++++++++-------- .../form/super_select/_super_select.scss | 27 - .../form/super_select/super_select.tsx | 52 +- src/components/popover/_popover.scss | 25 +- src/global_styling/mixins/_popover.scss | 10 - .../global_styling/reset/_reset.scss | 2 +- .../eui-amsterdam/overrides/_date_picker.scss | 18 + .../eui-amsterdam/overrides/_index.scss | 1 + .../eui-amsterdam/overrides/_popover.scss | 13 + 17 files changed, 914 insertions(+), 892 deletions(-) create mode 100644 src/themes/eui-amsterdam/overrides/_date_picker.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 60f8d338fd6..b01c4acb162 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,10 +4,13 @@ - Fixed stale state argument passed to `searchProps.onChange` in an `EuiSelectable`([#4292](https://github.com/elastic/eui/pull/4292)) - Fixed initial focus of an `EuiButtonGroup` when first item in a popover ([#4288](https://github.com/elastic/eui/pull/4288)) +- Fixed visible scrollbar in `EuiComboBox` list ([#4301](https://github.com/elastic/eui/pull/4301)) +- Removed hiding of time select on small screens for `EuiDatePicker` ([#4301](https://github.com/elastic/eui/pull/4301)) **Theme: Amsterdam** - Fixed styles for `EuiMarkdownEditor` ([#4289](https://github.com/elastic/eui/pull/4289)) +- Rounded all corners of dropdown type of inputs ([#4301](https://github.com/elastic/eui/pull/4301)) ## [`30.4.1`](https://github.com/elastic/eui/tree/v30.4.1) diff --git a/src-docs/src/views/color_picker/color_palette_display.js b/src-docs/src/views/color_picker/color_palette_display.js index 5ab59ab0b93..c0628131cb0 100644 --- a/src-docs/src/views/color_picker/color_palette_display.js +++ b/src-docs/src/views/color_picker/color_palette_display.js @@ -192,6 +192,8 @@ export default () => { checked={selectionType} onChange={() => setSelectionType(!selectionType)} compressed + showLabel={false} + label="Display as fixed" /> diff --git a/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap b/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap index 28804ea3f8a..f1d6766915d 100644 --- a/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap +++ b/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap @@ -2,47 +2,49 @@ exports[`EuiColorPalettePicker is rendered 1`] = `
- -
+
+
- - Select an option: , is selected - -
@@ -52,49 +54,51 @@ exports[`EuiColorPalettePicker is rendered 1`] = ` exports[`EuiColorPalettePicker is rendered with a selected custom text 1`] = `
- -
+
+
- - Select an option: Plain text as a custom option, is selected - -
- + +
+ + +
@@ -104,95 +108,97 @@ exports[`EuiColorPalettePicker is rendered with a selected custom text 1`] = ` exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = `
- -
+
+
- - Select an option: + Select an option: - - - - + class="euiColorPaletteDisplayFixed__bleedArea" + > + + + + + + + , is selected - , is selected - - -
- +
+ class="euiFormControlLayoutCustomIcon" + > + +
@@ -202,57 +208,59 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = ` exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`] = `
- -
+
+
- - Select an option: - - , is selected - -
+ Select an option: + +
+ + +
@@ -262,57 +270,59 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`] exports[`EuiColorPalettePicker is rendered with a selected gradient palette with stops 1`] = `
- -
+
+
- - Select an option: - - , is selected - -
+ Select an option: + +
+ + +
@@ -322,49 +332,51 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette with exports[`EuiColorPalettePicker is rendered with the prop selectionDisplay set as title 1`] = `
- -
+
+
- - Select an option: Palette 1, is selected - -
- + +
+ + +
@@ -374,94 +386,96 @@ exports[`EuiColorPalettePicker is rendered with the prop selectionDisplay set as exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
- -
+
+
- - Select an option: + Select an option: - - - - + class="euiColorPaletteDisplayFixed__bleedArea" + > + + + + + + + , is selected - , is selected - - -
- +
+ class="euiFormControlLayoutCustomIcon" + > + +
diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap index 80e0765a5a9..03d1b34b040 100644 --- a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap +++ b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap @@ -309,7 +309,7 @@ exports[`props options list is rendered 1`] = `
diff --git a/src/components/combo_box/_combo_box.scss b/src/components/combo_box/_combo_box.scss index a062c05d016..5528c6892c0 100644 --- a/src/components/combo_box/_combo_box.scss +++ b/src/components/combo_box/_combo_box.scss @@ -19,6 +19,7 @@ @include euiFormControlSize(auto, $includeAlternates: true); padding: $euiSizeXS $euiSizeS; display: flex; /* 1 */ + outline: none; // Fixes an intermittent focus ring in Firefox // sass-lint:disable-block mixins-before-declarations // to override the padding added above diff --git a/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss b/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss index 672f4347445..54ae77baabd 100644 --- a/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss +++ b/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss @@ -1,56 +1,30 @@ /** - * 1. Make width match that of the input and tweak position to match. - * 2. Put the list at the top of the screen, otherwise it will cause a scrollbar to show up when - * the portal is appended to the body. This would throw off our logic for positioning the - * list beneath the input. - * 3. The height can expand, hence auto - * 4. Using specificity to override panel shadow + * 1. Using specificity to override panel shadow + * 2. Prevent really long input from overflowing the container. */ .euiComboBoxOptionsList { - // z-index is programmatically added to the options list by JavaScript - @include euiFormControlSize(auto, $includeAlternates: true); /* 3 */ - position: absolute; /* 2 */ - top: 0; /* 2 */ + // Remove transforms from popover panel + transform: none !important; // sass-lint:disable-line no-important - .ReactVirtualized__List { - @include euiScrollBar; - } - - &.euiComboBoxOptionsList--bottom { /* 4 */ - @include euiBottomShadowMedium; + &.euiPopover__panel-isAttached.euiComboBoxOptionsList--top { /* 1 */ + @include euiBottomShadowFlat; } - - &.euiComboBoxOptionsList--top { /* 4 */ - // sass-lint:disable-block indentation - box-shadow: - 0 -2px 4px -1px transparentize($euiShadowColor, .8), - 0 0 2px 0 transparentize($euiShadowColor, .8); - } -} - -.euiComboBoxOptionsList--bottom { - // sass-lint:disable-block no-important - border-radius: 0 0 $euiBorderRadius $euiBorderRadius !important; - border-top: none !important; } -.euiComboBoxOptionsList--top { - // sass-lint:disable-block no-important - border-radius: $euiBorderRadius $euiBorderRadius 0 0 !important; -} - -/** - * 1. Prevent really long input from overflowing the container. - */ .euiComboBoxOptionsList__empty { + @include euiTextBreakWord; /* 2 */ padding: $euiSizeS; text-align: center; color: $euiColorDarkShade; - word-wrap: break-word; /* 1 */ + word-wrap: break-word; } .euiComboBoxOptionsList__rowWrap { padding: 0; - max-height: 200px; + max-height: 200px; // Also used/set in the JS file overflow: hidden; + + > div { // Targets the element for FixedSizeList that doesn't have a selector + @include euiScrollBar; + } } diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx index 76ab0fea4cf..3273ec16780 100644 --- a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx +++ b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx @@ -53,13 +53,6 @@ import { import { CommonProps } from '../../common'; import { EuiBadge } from '../../badge/'; -const positionToClassNameMap: { - [position in EuiComboBoxOptionsListPosition]: string; -} = { - top: 'euiComboBoxOptionsList--top', - bottom: 'euiComboBoxOptionsList--bottom', -}; - const OPTION_CONTENT_CLASSNAME = 'euiComboBoxOption__content'; export type EuiComboBoxOptionsListProps = CommonProps & @@ -303,7 +296,7 @@ export class EuiComboBoxOptionsList extends Component< onScroll, optionRef, options, - position, + position = 'bottom', renderOption, rootId, rowHeight, @@ -447,7 +440,7 @@ export class EuiComboBoxOptionsList extends Component< const numVisibleOptions = matchingOptions.length < 7 ? matchingOptions.length : 7; - const height = numVisibleOptions * rowHeight; + const height = numVisibleOptions * (rowHeight + 1); // Add one for the border // bounded by max-height of euiComboBoxOptionsList__rowWrap const boundedHeight = height > 200 ? 200 : height; @@ -466,12 +459,17 @@ export class EuiComboBoxOptionsList extends Component< ); + /** + * Reusing the EuiPopover__panel classes to help with consistency/maintenance. + * But this should really be converted to user the popover component. + */ const classes = classNames( 'euiComboBoxOptionsList', - position ? positionToClassNameMap[position] : '', - { - 'euiComboBoxOptionsList--fullWidth': fullWidth, - } + 'euiPopover__panel', + 'euiPopover__panel-isAttached', + 'euiPopover__panel-noArrow', + 'euiPopover__panel-isOpen', + `euiPopover__panel--${position}` ); return ( diff --git a/src/components/date_picker/_date_picker.scss b/src/components/date_picker/_date_picker.scss index 92e7a2cc684..2d97730d5e1 100644 --- a/src/components/date_picker/_date_picker.scss +++ b/src/components/date_picker/_date_picker.scss @@ -121,7 +121,7 @@ &[data-placement^="top"] { @include euiBottomShadowFlat; - border-radius: $euiBorderRadius $euiBorderRadius 0 0 !important; + border-radius: $euiBorderRadius $euiBorderRadius 0 0; // .react-datepicker__triangle { // } @@ -663,21 +663,6 @@ display: flex; } -// We drop the time picker on mobile. They can still type in the time directly. -@include euiBreakpoint('xs','s') { - - // This resizes EUI's normal form control to be the width of the calendar - .euiDatePicker--inline { - max-width: $euiDatePickerCalendarWidth; - display: block; - } - - // This hides the time entirely - .react-datepicker__time-container { - display: none; - } -} - // The below is for the portal version of react-datepicker which we do not use. // It is shown here just to know what their baseline includes. diff --git a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap index a4a44b0d990..54bbc3c47e5 100644 --- a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap +++ b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap @@ -2,47 +2,49 @@ exports[`EuiSuperSelect is rendered 1`] = `
- -
+
+
- - Select an option: , is selected - -
@@ -52,47 +54,49 @@ exports[`EuiSuperSelect is rendered 1`] = ` exports[`EuiSuperSelect props compressed is rendered 1`] = `
- -
+
+
- - Select an option: , is selected - -
@@ -102,46 +106,48 @@ exports[`EuiSuperSelect props compressed is rendered 1`] = ` exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
- -
+
+
- - Select an option: , is selected - -
@@ -162,68 +168,89 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `