Skip to content

[EuiSuperDatePicker] Fix incorrect button margins in quick select popover #6380

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
merged 6 commits into from
Nov 17, 2022
Merged

[EuiSuperDatePicker] Fix incorrect button margins in quick select popover #6380

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
63c25f7
[EuiDatePicker] Fix incorrect buttons margins in quick select popover
elizabetdev Nov 17, 2022
45e4b08
Adding CL
elizabetdev Nov 17, 2022
b6b7b93
Remove now-unnecessary negative margin workarounds
cee-chen Nov 17, 2022
f2722ae
Tweak changelog
cee-chen Nov 17, 2022
293ea9f
Fixed recently used `li`s missing sufficient spacing
cee-chen Nov 17, 2022
124da53
Remove last unnecessary negative margin accommodation + smooth out se…
cee-chen Nov 17, 2022
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
16 changes: 6 additions & 10 deletions src/components/date_picker/super_date_picker/_super_date_picker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
// sass-lint:disable-block function-name-format

.euiSuperDatePicker__flexWrapper {
// Need to offset 8px because of negative margins added by small size gutter
max-width: calc(100% + #{$euiSizeS});
Comment on lines -4 to -5
Copy link
Contributor

@cee-chen cee-chen Nov 17, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just for context - I spotted this issue in Kibana vs. EUI's docs - not 100% sure what the difference is in our implementation, but here's the before and after:

Before

After

Copy link
Contributor Author

@elizabetdev elizabetdev Nov 17, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think because they're not actually using our update button. They are rendering a custom one:
https://github.com/elastic/kibana/blob/75128bbc4b44571bb807344714ec217b9957e78c/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx#L461

Copy link
Contributor

@cee-chen cee-chen Nov 17, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gotcha, thanks!! This fix doesn't seem to affect our EUI docs either way so I think is fairly safe to do

max-width: 100%;
// Set a sensible min-width for when width is auto
min-width: MIN(($euiFormMaxWidth / 2) + $euiSuperDatePickerButtonWidth + $euiSizeS, 100%);
width: $euiSuperDatePickerWidth + $euiSuperDatePickerButtonWidth + $euiSizeS;

@include euiBreakpoint('xs', 's') {
width: 100%;
}

&.euiSuperDatePicker__flexWrapper--fullWidth {
// Need to offset 8px because of negative margins added by small size gutter
width: calc(100% + #{$euiSizeS});
width: 100%;
}

&.euiSuperDatePicker__flexWrapper--isQuickSelectOnly {
Expand Down Expand Up @@ -76,9 +78,3 @@
cursor: not-allowed;
}
}

@include euiBreakpoint('xs', 's') {
.euiSuperDatePicker__flexWrapper {
width: calc(100% + #{$euiSizeS});
}
}
8 changes: 5 additions & 3 deletions src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
max-height: $euiSizeM * 11;
overflow: hidden;
overflow-y: auto;
padding: $euiSizeS 0 $euiSizeXS; // Offset negative margin from flex items
margin: $euiSizeS 0 0;
}

// sass-lint:disable no-important
Expand All @@ -25,7 +25,9 @@
font-size: $euiFontSizeS;
line-height: $euiFontSizeS;

&:not(:last-of-type) {
margin-bottom: $euiSizeS;
&--recentlyUsed {
&:not(:last-of-type) {
margin-bottom: $euiSizeS;
}
}
}
2 changes: 0 additions & 2 deletions src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import { EuiButtonEmpty } from '../../../button';
import { EuiIcon } from '../../../icon';
import { EuiPopover } from '../../../popover';
import { EuiTitle } from '../../../title';
import { EuiSpacer } from '../../../spacer';
import { EuiHorizontalRule } from '../../../horizontal_rule';
import { EuiText } from '../../../text';

Expand Down Expand Up @@ -135,7 +134,6 @@ export class EuiQuickSelectPopover extends Component<
<EuiTitle size="xxxs">
<span>{title}</span>
</EuiTitle>
<EuiSpacer size="xs" />
<EuiText size="s" className="euiQuickSelectPopover__section">
{React.cloneElement(content, { applyTime: this.applyTime })}
</EuiText>
Expand Down
2 changes: 1 addition & 1 deletion src/components/date_picker/super_date_picker/quick_select_popover/recently_used.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const EuiRecentlyUsed: FunctionComponent<EuiRecentlyUsedProps> = ({
};
return (
<li
className="euiQuickSelectPopover__sectionItem"
className="euiQuickSelectPopover__sectionItem euiQuickSelectPopover__sectionItem--recentlyUsed"
key={`${start}-${end}`}
>
<EuiLink onClick={applyRecentlyUsed}>
Expand Down
3 changes: 3 additions & 0 deletions upcoming_changelogs/6380.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**Bug fixes**

- Fixed incorrect margins in `EuiSuperDatePicker` caused by `EuiFlex` CSS gap change