Skip to content
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.

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

Update global date picker #1219

Merged
merged 14 commits into from
Nov 20, 2018
3 changes: 3 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
## [`master`](https://github.com/elastic/eui/tree/master)

- Added support for nodes as "Action" column headers in `EuiBasicTable`, which was overlooked in the original change in `4.5.0` ([#1312](https://github.com/elastic/eui/pull/1312))
- Updated `GlobalDatePicker` example to include all Kibana features ([#1219](https://github.com/elastic/eui/pull/1219))
- Adjusted `EuiDatePickerRange` to allow for deeper customization ([#1219](https://github.com/elastic/eui/pull/1219))
- Added `contentProps` and `textProps` to `EuiButton` and `EuiButtonEmpty` ([#1219](https://github.com/elastic/eui/pull/1219))

**Bug fixes**

Expand Down
1 change: 1 addition & 0 deletions src-docs/src/theme_dark.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import '../../src/theme_dark';
@import './components/guide_components';
@import './views/header/global_filter_group';
@import './views/date_picker/global_date_picker';
1 change: 1 addition & 0 deletions src-docs/src/theme_k6_dark.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import '../../src/theme_k6_dark';
@import './components/guide_components';
@import './views/header/global_filter_group';
@import './views/date_picker/global_date_picker';
1 change: 1 addition & 0 deletions src-docs/src/theme_k6_light.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import '../../src/theme_k6_light';
@import './components/guide_components';
@import './views/header/global_filter_group';
@import './views/date_picker/global_date_picker';
2 changes: 1 addition & 1 deletion src-docs/src/theme_light.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import '../../src/theme_light';
@import './components/guide_components';
@import './views/header/global_filter_group';

@import './views/date_picker/global_date_picker';
97 changes: 97 additions & 0 deletions src-docs/src/views/date_picker/_global_date_picker.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
//// GLOBAL Date picker

// sass-lint:disable no-important
.euiGlobalDatePicker__quickSelectButton {
// Override prepend border since button already lives inside another prepend
border-right: none !important;

.euiGlobalDatePicker__quickSelectButtonText {
// Override specificity from universal and sibiling selectors
margin-right: $euiSizeXS !important;
cchaos marked this conversation as resolved.
Show resolved Hide resolved
}
}

.euiGlobalDatePicker.euiFormControlLayout {
max-width: 480px;

> .euiFormControlLayout__childrenWrapper {
flex: 1 1 100%;
overflow: hidden;

> .euiDatePickerRange {
max-width: none;
width: auto;

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

.euiGlobalDatePicker__dateButton {
@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;

$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;
}

.euiFormControlLayout__prepend {
border: none;
}
}

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

.euiGlobalDatePicker__dateButton--end {
text-align: left;
}

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

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

@include euiBreakpoint('xs', 's') {
.euiGlobalDatePicker__updateButton {
min-width: 0;

.euiGlobalDatePicker__updateButtonText {
display: none;
}
}
}
4 changes: 1 addition & 3 deletions src-docs/src/views/date_picker/date_picker_example.js
Original file line number Diff line number Diff line change
Expand Up @@ -279,9 +279,7 @@ export const DatePickerExample = {
<EuiCallOut color="warning" title="Demo of visual pattern only">
<p>
This documents a <strong>visual</strong> pattern for the eventual replacement of Kibana&apos;s
global date/time picker. It uses all EUI components without any custom styles. However, it
currently depends strongly on <EuiLink href="https://reactdatepicker.com/#example-45">react-datepicker&apos;s <code>calendarContainer</code></EuiLink> option
which has it&apos;s own problems and limitations (like auto-focus on input stealing focus from inputs inside of popover).
global date/time picker. It uses all EUI components with some custom styles.
</p>
</EuiCallOut>
</div>
Expand Down
Loading