Skip to content

Commit

Permalink
[EuiSuperDatePicker] Fix quick select button icon spacing (#7217)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cee-chen
cee-chen authored Sep 22, 2023
1 parent badc843 commit 1aab41d
Show file tree
Hide file tree
Showing 5 changed files with 28 additions and 27 deletions.
40 changes: 20 additions & 20 deletions src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormCo
type="button"
>
<span
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate euiButtonEmpty__text euiQuickSelectPopover__buttonText"
class="eui-textTruncate euiButtonEmpty__text"
>
<span
data-euiicon-type="calendar"
Expand Down Expand Up @@ -94,10 +94,10 @@ exports[`EuiSuperDatePicker props compressed is rendered 1`] = `
type="button"
>
<span
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate euiButtonEmpty__text euiQuickSelectPopover__buttonText"
class="eui-textTruncate euiButtonEmpty__text"
>
<span
data-euiicon-type="calendar"
Expand Down Expand Up @@ -293,10 +293,10 @@ exports[`EuiSuperDatePicker props isDisabled true 1`] = `
type="button"
>
<span
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate euiButtonEmpty__text euiQuickSelectPopover__buttonText"
class="eui-textTruncate euiButtonEmpty__text"
>
<span
data-euiicon-type="calendar"
Expand Down Expand Up @@ -367,10 +367,10 @@ exports[`EuiSuperDatePicker props isQuickSelectOnly is rendered 1`] = `
type="button"
>
<span
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate euiButtonEmpty__text euiQuickSelectPopover__buttonText"
class="eui-textTruncate euiButtonEmpty__text"
>
<span
data-euiicon-type="calendar"
Expand Down Expand Up @@ -432,10 +432,10 @@ exports[`EuiSuperDatePicker props showUpdateButton can be false 1`] = `
type="button"
>
<span
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate euiButtonEmpty__text euiQuickSelectPopover__buttonText"
class="eui-textTruncate euiButtonEmpty__text"
>
<span
data-euiicon-type="calendar"
Expand Down Expand Up @@ -484,10 +484,10 @@ exports[`EuiSuperDatePicker props showUpdateButton can be iconOnly 1`] = `
type="button"
>
<span
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate euiButtonEmpty__text euiQuickSelectPopover__buttonText"
class="eui-textTruncate euiButtonEmpty__text"
>
<span
data-euiicon-type="calendar"
Expand Down Expand Up @@ -559,10 +559,10 @@ exports[`EuiSuperDatePicker props width can be auto 1`] = `
type="button"
>
<span
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate euiButtonEmpty__text euiQuickSelectPopover__buttonText"
class="eui-textTruncate euiButtonEmpty__text"
>
<span
data-euiicon-type="calendar"
Expand Down Expand Up @@ -631,10 +631,10 @@ exports[`EuiSuperDatePicker props width can be full 1`] = `
type="button"
>
<span
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate euiButtonEmpty__text euiQuickSelectPopover__buttonText"
class="eui-textTruncate euiButtonEmpty__text"
>
<span
data-euiicon-type="calendar"
Expand Down Expand Up @@ -704,10 +704,10 @@ exports[`EuiSuperDatePicker renders 1`] = `
type="button"
>
<span
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate euiButtonEmpty__text euiQuickSelectPopover__buttonText"
class="eui-textTruncate euiButtonEmpty__text"
>
<span
data-euiicon-type="calendar"
Expand Down Expand Up @@ -780,10 +780,10 @@ exports[`EuiSuperDatePicker renders an EuiDatePickerRange 1`] = `
type="button"
>
<span
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate euiButtonEmpty__text euiQuickSelectPopover__buttonText"
class="eui-textTruncate euiButtonEmpty__text"
>
<span
data-euiicon-type="calendar"
Expand Down
4 changes: 2 additions & 2 deletions ...r/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -439,10 +439,10 @@ exports[`EuiQuickSelectPopover is rendered 1`] = `
type="button"
>
<span
class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate euiButtonEmpty__text euiQuickSelectPopover__buttonText"
class="eui-textTruncate euiButtonEmpty__text"
>
<span
data-euiicon-type="calendar"
Expand Down
6 changes: 2 additions & 4 deletions src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,8 @@
clear: both;
}

.euiQuickSelectPopover__buttonText {
// Override specificity from universal and sibling selectors
// stylelint-disable-next-line declaration-no-important
margin-right: $euiSizeXS !important;
.euiQuickSelectPopover__buttonContent {
gap: $euiSizeXS;
}

.euiQuickSelectPopover__anchor {
Expand Down
2 changes: 1 addition & 1 deletion src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ export const EuiQuickSelectPopover: FunctionComponent<
const quickSelectButton = (
<EuiButtonEmpty
className="euiFormControlLayout__prepend"
textProps={{ className: 'euiQuickSelectPopover__buttonText' }}
contentProps={{ className: 'euiQuickSelectPopover__buttonContent' }}
onClick={togglePopover}
aria-label={buttonlabel}
title={buttonlabel}
Expand Down
3 changes: 3 additions & 0 deletions upcoming_changelogs/7217.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**Bug fixes**

- Fixed `EuiSuperDatePicker` icon spacing on the quick select button

0 comments on commit 1aab41d

Please sign in to comment.