Skip to content

Commit

Permalink
EuiSuperDatePicker design followup (#1389)
Browse files Browse the repository at this point in the history
  • Loading branch information
cchaos authored Dec 20, 2018
1 parent 5a318dd commit eb36fc9
Show file tree
Hide file tree
Showing 23 changed files with 158 additions and 169 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
- Added `onFocus` prop to `EuiComboBox` ([#1375](https://github.com/elastic/eui/pull/1375))
- Added `DisambiguateSet` and `ExclusiveUnion` utility types ([#1368](https://github.com/elastic/eui/pull/1368))
- Added `EuiSuperDatePicker` component ([#1351](https://github.com/elastic/eui/pull/1351))
- Fixed up styles for `EuiSuperDatePicker` ([#1389](https://github.com/elastic/eui/pull/1389))
- Altered a few icons and added more: `crossInACircleFilled`, `editorRedo`, `editorUndo`, `grabHorizontal`, `minusInCircleFilled`, `plusInCircleFilled`, `sortable`, `starEmptySpace`, `starFilledSpace`, `starFilled`, `starMinusEmpty`, `starMinusFilled`, `starPlusEmpty`, `pinFilled` ([#1374](https://github.com/elastic/eui/pull/1374))

**Bug fixes**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -86,42 +86,18 @@ exports[`EuiSuperDatePicker is rendered 1`] = `
isCustom={true}
startDateControl={<div />}
>
<EuiButtonEmpty
className="euiSuperDatePicker__dateText"
color="primary"
iconSide="left"
onClick={[Function]}
style={
Object {
"textAlign": "left",
}
}
textProps={
Object {
"style": Object {
"width": "100%",
},
}
}
type="button"
>
Last 15 minutes
</EuiButtonEmpty>
<EuiButtonEmpty
color="primary"
<button
className="euiSuperDatePicker__prettyFormat"
data-test-subj="superDatePickerShowDatesButton"
iconSide="left"
onClick={[Function]}
size="xs"
style={
Object {
"flexGrow": 0,
}
}
type="button"
>
Show dates
</EuiButtonEmpty>
Last 15 minutes
<span
className="euiSuperDatePicker__prettyFormatLink"
>
Show dates
</span>
</button>
</EuiDatePickerRange>
</EuiFormControlLayout>
</EuiFlexItem>
Expand Down Expand Up @@ -242,42 +218,18 @@ exports[`EuiSuperDatePicker isLoading 1`] = `
isCustom={true}
startDateControl={<div />}
>
<EuiButtonEmpty
className="euiSuperDatePicker__dateText"
color="primary"
iconSide="left"
onClick={[Function]}
style={
Object {
"textAlign": "left",
}
}
textProps={
Object {
"style": Object {
"width": "100%",
},
}
}
type="button"
>
Last 15 minutes
</EuiButtonEmpty>
<EuiButtonEmpty
color="primary"
<button
className="euiSuperDatePicker__prettyFormat"
data-test-subj="superDatePickerShowDatesButton"
iconSide="left"
onClick={[Function]}
size="xs"
style={
Object {
"flexGrow": 0,
}
}
type="button"
>
Show dates
</EuiButtonEmpty>
Last 15 minutes
<span
className="euiSuperDatePicker__prettyFormatLink"
>
Show dates
</span>
</button>
</EuiDatePickerRange>
</EuiFormControlLayout>
</EuiFlexItem>
Expand Down
4 changes: 4 additions & 0 deletions src/components/date_picker/super_date_picker/_index.scss
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
@import 'mixins';

@import 'date_popover/index';
@import 'quick_select_popover/index';
@import 'super_date_picker';
10 changes: 10 additions & 0 deletions src/components/date_picker/super_date_picker/_mixins.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
@mixin euiSuperDatePickerText {
@include euiFormControlText;
display: block;
width: 100%;
padding: 0 $euiSizeS;
line-height: $euiFormControlHeight - 2px;
height: $euiFormControlHeight - 2px;
word-break: break-all;
transition: background $euiAnimSpeedFast ease-in;
}
Original file line number Diff line number Diff line change
@@ -1,16 +1,7 @@
// sass-lint:disable no-important
.euiSuperDatePicker__quickSelectButton {
// Override prepend border since button already lives inside another prepend
border-right: none !important;

.euiSuperDatePicker__quickSelectButtonText {
// Override specificity from universal and sibiling selectors
margin-right: $euiSizeXS !important;
}
}

.euiSuperDatePicker.euiFormControlLayout {
max-width: 480px;
.euiSuperDatePicker {
// Allow it to always grow to fit the container since the default form max width is too small
max-width: 100% !important;

> .euiFormControlLayout__childrenWrapper {
flex: 1 1 100%;
Expand All @@ -19,73 +10,35 @@
> .euiDatePickerRange {
max-width: none;
width: auto;

// sass-lint:disable nesting-depth
.euiPopover__anchor {
display: block;
}
}
}
}

.euiSuperDatePicker__dateText {
@include euiFormControlText;
display: block;
width: 100%;
padding: 0 $euiSizeS;
line-height: $euiFormControlHeight - 2px;
height: $euiFormControlHeight - 2px;
word-break: break-all;
transition: background $euiAnimSpeedFast ease-in;
}

.euiSuperDatePicker__dateButton {
$backgroundColor: tintOrShade($euiColorSuccess, 90%, 70%);
$textColor: makeHighContrastColor($euiColorSuccess, $backgroundColor);
.euiSuperDatePicker__prettyFormat {
@include euiSuperDatePickerText;
display: flex;
justify-content: space-between;
text-align: left;

&-isSelected,
&-needsUpdating,
&:hover,
&:focus {
background-color: $backgroundColor;
}
text-decoration: none;

&-needsUpdating {
color: $textColor;
}

&-isInvalid {
$backgroundColor: tintOrShade($euiColorDanger, 90%, 70%);
$textColor: makeHighContrastColor($euiColorDanger, $backgroundColor);
background-color: $backgroundColor;
color: $textColor;
}

.euiFormControlLayout__prepend {
border: none;
.euiSuperDatePicker__prettyFormatLink {
text-decoration: underline;
}
}
}

.euiSuperDatePicker__dateButton--start {
text-align: right;
}

.euiSuperDatePicker__dateButton--end {
text-align: left;
.euiSuperDatePicker__prettyFormatLink {
color: $euiLinkColor;
}

.euiSuperDatePicker__updateButton {
// Just wide enough for all 3 states
min-width: $euiButtonMinWidth + ($euiSizeXS * 1.5);
}

.euiSuperDatePicker__popoverSection {
@include euiScrollBar;
max-height: $euiSizeM * 11;
overflow: hidden;
overflow-y: auto;
}

@include euiBreakpoint('xs', 's') {
.euiSuperDatePicker__updateButton {
min-width: 0;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
.euiDatePopoverButton__popover .euiDatePopoverButton__popoverAnchor {
display: block;
}

.euiDatePopoverButton {
@include euiSuperDatePickerText;

$backgroundColor: tintOrShade($euiColorSuccess, 90%, 70%);
$textColor: makeHighContrastColor($euiColorSuccess, $backgroundColor);

&-isSelected,
&-needsUpdating,
&:hover,
&:focus {
background-color: $backgroundColor;
}

&-needsUpdating {
color: $textColor;
}

&-isInvalid {
$backgroundColor: tintOrShade($euiColorDanger, 90%, 70%);
$textColor: makeHighContrastColor($euiColorDanger, $backgroundColor);
background-color: $backgroundColor;
color: $textColor;
}
}

.euiDatePopoverButton--start {
text-align: right;
}

.euiDatePopoverButton--end {
text-align: left;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.euiDatePopoverContent {
width: $euiFormMaxWidth;
max-width: 100%;
}

.euiDatePopoverContent__padded {
padding: $euiSizeS;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
@import 'date_popover_button';
@import 'date_popover_content';
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export class EuiAbsoluteTab extends Component {

render() {
return (
<div style={{ width: 390, padding: 0 }}>
<div>
<EuiDatePicker
inline
showTimeSelect
Expand All @@ -57,7 +57,7 @@ export class EuiAbsoluteTab extends Component {
onChange={this.handleChange}
/>
<EuiFormRow
style={{ padding: '0 8px 8px' }}
className="euiDatePopoverContent__padded"
isInvalid={this.state.isTextInvalid}
error={this.state.isTextInvalid ? `Expected format ${INPUT_DATE_FORMAT}` : undefined}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,13 +48,12 @@ export class EuiDatePopoverButton extends Component {
} = this.props;

const classes = classNames([
'euiSuperDatePicker__dateText',
'euiSuperDatePicker__dateButton',
`euiSuperDatePicker__dateButton--${position}`,
'euiDatePopoverButton',
`euiDatePopoverButton--${position}`,
{
'euiSuperDatePicker__dateButton-isSelected': this.state.isOpen,
'euiSuperDatePicker__dateButton-isInvalid': isInvalid,
'euiSuperDatePicker__dateButton-needsUpdating': needsUpdating
'euiDatePopoverButton-isSelected': this.state.isOpen,
'euiDatePopoverButton-isInvalid': isInvalid,
'euiDatePopoverButton-needsUpdating': needsUpdating
}
]);

Expand All @@ -79,10 +78,12 @@ export class EuiDatePopoverButton extends Component {

return (
<EuiPopover
className="euiDatePopoverButton__popover"
button={button}
isOpen={this.state.isOpen}
closePopover={this.closePopover}
anchorPosition={this.props.position === 'start' ? 'downLeft' : 'downRight'}
anchorClassName="euiDatePopoverButton__popoverAnchor"
panelPaddingSize="none"
ownFocus
{...rest}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export function EuiDatePopoverContent({ value, roundUp, onChange, dateFormat })
id: DATE_MODES.NOW,
name: 'Now',
content: (
<EuiText size="s" color="subdued" style={{ width: 390, padding: 16 }}>
<EuiText size="s" color="subdued" className="euiDatePopoverContent__padded">
<p>
Setting the time to &quot;Now&quot; means that on every refresh
this time will be set to the time of the refresh.
Expand All @@ -76,6 +76,7 @@ export function EuiDatePopoverContent({ value, roundUp, onChange, dateFormat })

return (
<EuiTabbedContent
className="euiDatePopoverContent"
tabs={renderTabs()}
initialSelectedTab={{ id: getDateMode(value) }}
onTabClick={onTabClick}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export class EuiRelativeTab extends Component {
render() {
const formatedValue = dateMath.parse(this.props.value).format(this.props.dateFormat);
return (
<EuiForm style={{ width: 390, padding: 16 }}>
<EuiForm className="euiDatePopoverContent__padded">
<EuiFlexGroup gutterSize="s" responsive={false}>
<EuiFlexItem>
<EuiFormRow>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -191,17 +191,13 @@ exports[`EuiSuperDatePicker is rendered 1`] = `
hasEmptyLabelSpace={false}
>
<EuiButton
className="euiQuickSelect__applyButton"
color="primary"
disabled={false}
fill={false}
iconSide="left"
onClick={[Function]}
size="s"
style={
Object {
"minWidth": 0,
}
}
type="button"
>
Apply
Expand Down Expand Up @@ -407,17 +403,13 @@ exports[`EuiSuperDatePicker prevQuickSelect 1`] = `
hasEmptyLabelSpace={false}
>
<EuiButton
className="euiQuickSelect__applyButton"
color="primary"
disabled={false}
fill={false}
iconSide="left"
onClick={[Function]}
size="s"
style={
Object {
"minWidth": 0,
}
}
type="button"
>
Apply
Expand Down
Loading

0 comments on commit eb36fc9

Please sign in to comment.