From 2ef0d9e9795dc105d90923971732f76d43a8bbab Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 28 Jul 2021 17:01:36 -0400 Subject: [PATCH 01/14] Styling the date numbers --- src/components/date_picker/_date_picker.scss | 116 ---------------- .../date_picker/_date_picker_days.scss | 127 ++++++++++++++++++ src/components/date_picker/_index.scss | 5 + .../global_styling/mixins/_button.scss | 14 +- 4 files changed, 140 insertions(+), 122 deletions(-) create mode 100644 src/components/date_picker/_date_picker_days.scss diff --git a/src/components/date_picker/_date_picker.scss b/src/components/date_picker/_date_picker.scss index adc8ed3290d..0c9eda431a8 100644 --- a/src/components/date_picker/_date_picker.scss +++ b/src/components/date_picker/_date_picker.scss @@ -380,114 +380,6 @@ } } -.react-datepicker__day-names, -.react-datepicker__week { - white-space: nowrap; -} - -.react-datepicker__day-name, -.react-datepicker__day, -.react-datepicker__time-name { - color: $euiColorFullShade; - display: inline-block; - width: $euiSizeXL; - line-height: $euiSizeXL - $euiSizeXS; - text-align: center; - margin: 0 $euiSizeXS / 2; -} - -.react-datepicker__day-name { - color: $euiColorDarkShade; - text-transform: uppercase; -} - -.react-datepicker__day { - cursor: pointer; - border: solid 2px transparent; - transition: transform $euiAnimSpeedExtraFast ease-in-out; - - &:hover:not(&--disabled) { - text-decoration: underline; - font-weight: $euiFontWeightBold; - transform: scale(1.2); - } - - &--today { - font-weight: bold; - color: $euiColorPrimary; - } - &--outside-month { - color: $euiColorDarkShade; - } - - &--highlighted { - border-radius: $euiBorderRadius; - background-color: $euiColorSecondary; - color: $euiColorGhost; - - &:hover { - background-color: darken($euiColorSecondary, 5%); - } - } - - &--in-range { - background-color: transparentize($euiColorPrimary, .9); - color: $euiColorFullShade; - border-radius: 0; - border-top: solid 6px $euiColorEmptyShade; - border-bottom: solid 6px $euiColorEmptyShade; - border-right: none; - border-left: none; - line-height: $euiSizeL - $euiSizeXS; - } - - &--selected, - &--in-selecting-range { - height: $euiSizeXL; - margin: 0 $euiSizeXS / 2; - border-radius: $euiBorderRadius; - background-color: $euiColorPrimary; - line-height: $euiSizeL + $euiSizeXS; - border: solid $euiSizeXS / 2 $euiColorPrimary; - color: $euiColorGhost; - - &:hover { - background-color: darken($euiColorPrimary, 5%); - } - } - - &--keyboard-selected { - border-radius: $euiBorderRadius; - border: solid $euiSizeXS / 2 $euiColorPrimary; - font-weight: $euiFontWeightBold; - - &:hover { - background-color: darken($euiColorPrimary, 5%); - color: $euiColorGhost; - } - } - - &--in-selecting-range:not(&--in-range) { - background-color: rgba($euiColorPrimary, 0.5); - } - - &--in-range:not(&--in-selecting-range) { - .react-datepicker__month--selecting-range & { - background-color: $euiColorEmptyShade; - color: $euiColorFullShade; - } - } - - &--disabled { - cursor: not-allowed; - color: $euiColorLightShade; - - &:hover { - background-color: transparent; - } - } -} - .react-datepicker__input-container { position: relative; } @@ -640,14 +532,6 @@ text-decoration: underline; } -.react-datepicker__month--accessible:focus { - background: $euiFocusBackgroundColor; - - .react-datepicker__day--in-range:not(.react-datepicker__day--selected) { - border-top-color: $euiFocusBackgroundColor; - border-bottom-color: $euiFocusBackgroundColor; - } -} .react-datepicker__navigation:focus { background-color: $euiFocusBackgroundColor; } diff --git a/src/components/date_picker/_date_picker_days.scss b/src/components/date_picker/_date_picker_days.scss new file mode 100644 index 00000000000..a6cc7b2acd0 --- /dev/null +++ b/src/components/date_picker/_date_picker_days.scss @@ -0,0 +1,127 @@ +/** + * LEGEND + * __day-name : Week headers like Su, Mo, etc + * __day : Number on the calendar + * --highlighted + * --disabled : _this.isDisabled(), + * --selected : _this.isSameDay(_this.props.selected), + * --range-start : _this.isRangeStart(), + * --range-end : _this.isRangeEnd(), + * --keyboard-selected : _this.isKeyboardSelected(), + * --in-range : _this.isInRange(), + * --in-selecting-range : _this.isInSelectingRange(), + * --selecting-range-start : _this.isSelectingRangeStart(), + * --selecting-range-end : _this.isSelectingRangeEnd(), + * --today : _this.isSameDay(now(_this.props.utcOffset)), + * --weekend : _this.isWeekend(), + * --outside-month : _this.isOutsideMonth() + + + + * __time-list-item : + * --preselected : closest current time but not selected + * --selected + * --disabled + */ + + + @mixin reactDatePickerDisabled($transparency: .9) { + $percentConversion: $transparency * 100%; + $backgroundColorSimulated: mix($euiPageBackgroundColor, $euiButtonColorDisabled, 90%); + background-color: transparentize($euiButtonColorDisabled, .9); + color: makeDisabledContrastColor($euiButtonColorDisabled, $backgroundColorSimulated); + } + + .react-datepicker__day-names, + .react-datepicker__week { + white-space: nowrap; + } + +.react-datepicker__day-name, +.react-datepicker__day { + font-weight: $euiFontWeightMedium; + text-align: center; + color: $euiTitleColor; + display: inline-block; + width: $euiSizeXL; + line-height: $euiSizeXL; + border-radius: $euiBorderRadiusSmall; + margin: ($euiSizeXS / 2); +} + +.react-datepicker__day-name { + color: $euiTextSubduedColor; +} + +.react-datepicker__day { + cursor: pointer; + transition: transform $euiAnimSpeedExtraFast ease-in-out; + + &:hover { + @include euiButtonDefaultStyle($euiColorPrimary, false); + text-decoration: underline; + + @include euiCanAnimate { + // Setting the transform under can animate because its jarring + transform: scale(1.1); + } + } + + &--today { + color: $euiColorPrimary; + font-weight: $euiFontWeightBold; + } + + &--outside-month { + color: $euiTextSubduedColor; + } + + &--highlighted, + &--highlighted:hover { + @include euiButtonDefaultStyle($euiColorSuccess, false); + } + + &--in-range, + &--in-range:hover { + @include euiButtonDefaultStyle($euiColorPrimary, false); + } + + &--selected, + &--in-selecting-range, + &--selected:hover, + &--in-selecting-range:hover { + @include euiButtonDefaultStyle($euiColorPrimary, false, 0); + } + + // THis doesn't seem to mean keyboard focus + // &--keyboard-selected, + // &--keyboard-selected:hover { + // @include euiButtonDefaultStyle($euiColorPrimary); + // font-weight: $euiFontWeightBold; + // outline: $euiFocusRingSize solid currentColor; + // } + + &--in-selecting-range:not(&--in-range) { + background-color: rgba($euiColorDanger, 0.5); //todo + } + + &--in-range:not(&--in-selecting-range) { + .react-datepicker__month--selecting-range & { + background-color: $euiColorEmptyShade; + color: $euiColorFullShade; + } + } + + &--disabled, + &--disabled:hover { + @include euiButtonDefaultStyle($euiButtonColorDisabled); + cursor: not-allowed; + text-decoration: none; + transform: none; + } + + &--disabled.react-datepicker__day--selected, + &--disabled.react-datepicker__day--selected:hover { + color: $euiTextColor; + } +} diff --git a/src/components/date_picker/_index.scss b/src/components/date_picker/_index.scss index 36875c07a21..78e7a6e7763 100644 --- a/src/components/date_picker/_index.scss +++ b/src/components/date_picker/_index.scss @@ -1,5 +1,10 @@ // Uses some form mixins @import 'variables'; + + +@import 'date_picker_days'; @import 'date_picker'; + + @import 'date_picker_range'; @import 'super_date_picker/index'; diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_button.scss b/src/themes/eui-amsterdam/global_styling/mixins/_button.scss index 82662791e83..753dc41faf3 100644 --- a/src/themes/eui-amsterdam/global_styling/mixins/_button.scss +++ b/src/themes/eui-amsterdam/global_styling/mixins/_button.scss @@ -16,7 +16,7 @@ } // Creates the Amsterdam style of button with a transparent background -@mixin euiButtonDefaultStyle($color, $transparency: $euiButtonDefaultTransparency) { +@mixin euiButtonDefaultStyle($color, $includeStates: true, $transparency: $euiButtonDefaultTransparency) { $percentConversion: $transparency * 100%; // This variable simulates the possibly darkest background the button could be on // Simulates the 20% opaque color on top of the page background color @@ -26,11 +26,13 @@ // But still use transparency background-color: transparentize($color, $transparency); - &:not([class*='isDisabled']) { - &:hover, - &:focus { - // Duplicated from inert state simply to override default theme - background-color: transparentize($color, $transparency); + @if ($includeStates) { + &:not([class*='isDisabled']) { + &:hover, + &:focus { + // Duplicated from inert state simply to override default theme + background-color: transparentize($color, $transparency); + } } } } From 27b92a9ffa755ae605cad7f804a7df4fcf66ae7b Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 28 Jul 2021 18:31:56 -0400 Subject: [PATCH 02/14] Times --- src/components/date_picker/_date_picker.scss | 119 +----------------- .../date_picker/_date_picker_times.scss | 97 ++++++++++++++ src/components/date_picker/_index.scss | 1 + 3 files changed, 99 insertions(+), 118 deletions(-) create mode 100644 src/components/date_picker/_date_picker_times.scss diff --git a/src/components/date_picker/_date_picker.scss b/src/components/date_picker/_date_picker.scss index 0c9eda431a8..671e7368380 100644 --- a/src/components/date_picker/_date_picker.scss +++ b/src/components/date_picker/_date_picker.scss @@ -61,57 +61,12 @@ .react-datepicker { @include euiFont; font-size: $euiFontSizeXS; - color: $euiColorFullShade; + color: $euiTextColor; display: flex; position: relative; border-radius: $euiBorderRadius; } -// When in time only mode we make the dropdown look more like the combo box styling. -.react-datepicker--time-only { - - .react-datepicker__time-container { - - .react-datepicker__time { - - .react-datepicker__time-box { - width: 100%; - - .react-datepicker__time-list li.react-datepicker__time-list-item { - font-size: $euiFontSizeS; - text-align: left; - padding-left: $euiSizeXL + $euiSizeXS; - padding-right: $euiSizeXL + $euiSizeXS; - color: $euiTextColor; - - &.react-datepicker__time-list-item--selected { - color: $euiColorGhost; - } - - &.react-datepicker__time-list-item--disabled{ - color: $euiColorDisabledText - } - } - } - } - } - - - .react-datepicker__time-container { - border-left: 0; - } - - // .react-datepicker__triangle { - // } - // .react-datepicker__time { - // } - // .react-datepicker__time-box { - // } -} - -// .react-datepicker__triangle { -// } - .euiDatePicker.euiDatePicker--shadow .react-datepicker-popper { z-index: $euiZContentMenu; animation: euiAnimFadeIn $euiAnimSpeedFast ease-in; @@ -294,75 +249,7 @@ border-radius: $euiBorderRadius; } -.react-datepicker__time-container { - border-left: $euiBorderColor; - width: auto; - display: flex; - padding: $euiSize 0; - border-radius: 0 $euiBorderRadius $euiBorderRadius 0; - flex-grow: 1; - // &--with-today-button { - // } - - .react-datepicker__time { - position: relative; - flex-grow: 1; - display: flex; - padding-left: $euiSizeXS; - flex-direction: column; - - .react-datepicker__time-box { - width: auto; - display: flex; - flex-direction: column; - flex-grow: 1; - - ul.react-datepicker__time-list { - @include euiScrollBar; - height: 204px !important; - display: flex; - flex-direction: column; - flex-grow: 1; - overflow-y: auto; - align-items: center; - - li.react-datepicker__time-list-item { - padding: $euiSizeXS $euiSizeS; - margin-bottom: $euiSizeXS; - text-align: right; - color: $euiColorDarkShade; - white-space: nowrap; - // IE needs this to fix collapsing flex - line-height: $euiSizeM; - - &:hover, - &:focus { - cursor: pointer; - text-decoration: underline; - } - &--selected { - background-color: $euiColorPrimary; - color: white; - border-radius: $euiBorderRadius / 2; - &:hover { - background-color: $euiColorPrimary; - } - } - &--disabled { - color: $euiColorLightShade; - - &:hover { - cursor: not-allowed; - text-decoration: none; - background-color: transparent; - } - } - } - } - } - } -} .react-datepicker__week-number { color: $euiColorLightestShade; @@ -517,15 +404,11 @@ background: $euiColorPrimary; } -.react-datepicker__time-list-item--preselected, .react-datepicker__year-option--preselected, .react-datepicker__month-option--preselected { background: darken($euiFocusBackgroundColor, 5%); } -.react-datepicker__time-container--focus { - background: $euiFocusBackgroundColor; -} .react-datepicker__month-read-view:focus, .react-datepicker__year-read-view:focus { diff --git a/src/components/date_picker/_date_picker_times.scss b/src/components/date_picker/_date_picker_times.scss new file mode 100644 index 00000000000..fff1e361bb9 --- /dev/null +++ b/src/components/date_picker/_date_picker_times.scss @@ -0,0 +1,97 @@ +/** + * LEGEND + * __time-list-item : + * --preselected : closest current time but not selected + * --selected + * --disabled + * --injected + */ + +.react-datepicker__time-container { + display: flex; + padding: $euiSizeS; + flex-grow: 1; +} + +.react-datepicker__time { + flex-grow: 1; + display: flex; + flex-direction: column; +} + +.react-datepicker__time-box { + background-color: $euiPageBackgroundColor; + padding: $euiSizeXS; + border-radius: $euiBorderRadius; + display: flex; + flex-direction: column; + flex-grow: 1; +} + +.react-datepicker__time-list { + @include euiScrollBar; + // Set the min-height with the following, but it should stretch to fit if the container is larger + height: 265px !important; // Overrides inline height + display: flex; + gap: $euiSizeXS; + flex-direction: column; + flex-grow: 1; + overflow-y: auto; + align-items: center; +} + +// Mainly a copy/paste of .euiEmptyButton +.react-datepicker__time-list-item { + @include euiButton; + // sass-lint:disable-block no-important + transform: none !important; /* 1 */ + animation: none !important; /* 1 */ + transition-timing-function: ease-in; /* 2 */ + transition-duration: $euiAnimSpeedFast; /* 2 */ + + padding: 0 $euiSizeS; + height: $euiButtonHeightXSmall; + line-height: $euiButtonHeightXSmall; + border-radius: $euiBorderRadiusSmall; + font-size: $euiFontSizeXS; + + &--disabled, + &--disabled:hover { + text-decoration: none; + cursor: not-allowed; + color: $euiButtonColorDisabledText; + background-color: transparent; + } + + &--selected, + &--selected:hover { + @include euiButtonDefaultStyle($euiColorPrimary, false, 0); + } + + &--injected, + &--injected:hover { + @include euiButtonDefaultStyle($euiColorSuccess, false); + } + + &--preselected { + background: $euiFocusBackgroundColor; + } +} + + +// When in time only mode we make the dropdown look more like the combo box styling. +.react-datepicker--time-only { + .react-datepicker__time-container { + padding: 0; + } + + .react-datepicker__time-box { + background-color: transparent; + } + + .react-datepicker__time-list-item { + font-size: $euiFontSizeS; + min-width: $euiButtonMinWidth; + text-align: left; + } +} diff --git a/src/components/date_picker/_index.scss b/src/components/date_picker/_index.scss index 78e7a6e7763..04c6d382646 100644 --- a/src/components/date_picker/_index.scss +++ b/src/components/date_picker/_index.scss @@ -3,6 +3,7 @@ @import 'date_picker_days'; +@import 'date_picker_times'; @import 'date_picker'; From f4de0113c8ab077321732529fbaa76ce67750fe4 Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 30 Jul 2021 09:38:45 -0400 Subject: [PATCH 03/14] Better header controls --- src/components/date_picker/_date_picker.scss | 524 +++++------------- .../date_picker/_date_picker_month_year.scss | 156 ++++++ .../date_picker/_date_picker_times.scss | 11 +- src/components/date_picker/_index.scss | 2 + src/components/date_picker/_mixins.scss | 19 + src/components/date_picker/_variables.scss | 10 +- 6 files changed, 331 insertions(+), 391 deletions(-) create mode 100644 src/components/date_picker/_date_picker_month_year.scss create mode 100644 src/components/date_picker/_mixins.scss diff --git a/src/components/date_picker/_date_picker.scss b/src/components/date_picker/_date_picker.scss index 671e7368380..6b98a5744a1 100644 --- a/src/components/date_picker/_date_picker.scss +++ b/src/components/date_picker/_date_picker.scss @@ -13,17 +13,6 @@ */ -// Because we don't have control over react-datepicker's dom we use SVG URIs for the navigation arrows. -// There is one for light and dark. -@mixin datePicker__arrow { - background-position: center; - @if (lightness($euiColorEmptyShade) > 50) { - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+ICA8ZGVmcz4gICAgPHBhdGggaWQ9ImFycm93X2Rvd24tYSIgZD0iTTEzLjA2ODg1MDgsNS4xNTcyNTAzOCBMOC4zODQyMzk3NSw5Ljc2ODI3NDI4IEM4LjE3MDU0NDE1LDkuOTc4NjEzMDggNy44Mjk5OTIxNCw5Ljk3OTE0MDk1IDcuNjE1NzYwMjUsOS43NjgyNzQyOCBMMi45MzExNDkxNSw1LjE1NzI1MDM4IEMyLjcxODEzNTksNC45NDc1ODMyMSAyLjM3Mjc3MzE5LDQuOTQ3NTgzMjEgMi4xNTk3NTk5NCw1LjE1NzI1MDM4IEMxLjk0Njc0NjY5LDUuMzY2OTE3NTYgMS45NDY3NDY2OSw1LjcwNjg1NTIyIDIuMTU5NzU5OTQsNS45MTY1MjI0IEw2Ljg0NDM3MTA0LDEwLjUyNzU0NjMgQzcuNDg1MTc0MjQsMTEuMTU4MjgzNiA4LjUxNjQ0OTc5LDExLjE1NjY4NTEgOS4xNTU2Mjg5NiwxMC41Mjc1NDYzIEwxMy44NDAyNDAxLDUuOTE2NTIyNCBDMTQuMDUzMjUzMyw1LjcwNjg1NTIyIDE0LjA1MzI1MzMsNS4zNjY5MTc1NiAxMy44NDAyNDAxLDUuMTU3MjUwMzggQzEzLjYyNzIyNjgsNC45NDc1ODMyMSAxMy4yODE4NjQxLDQuOTQ3NTgzMjEgMTMuMDY4ODUwOCw1LjE1NzI1MDM4IFoiLz4gIDwvZGVmcz4gIDxnIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgIDx1c2UgZmlsbC1ydWxlPSJub256ZXJvIiB4bGluazpocmVmPSIjYXJyb3dfZG93bi1hIi8+ICA8L2c+PC9zdmc+); - } @else { - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+ICA8ZGVmcz4gICAgPHBhdGggaWQ9ImRvd25hcnJvd3doaXRlLWEiIGQ9Ik0xMy4wNjg4NTA4LDUuMTU3MjUwMzggTDguMzg0MjM5NzUsOS43NjgyNzQyOCBDOC4xNzA1NDQxNSw5Ljk3ODYxMzA4IDcuODI5OTkyMTQsOS45NzkxNDA5NSA3LjYxNTc2MDI1LDkuNzY4Mjc0MjggTDIuOTMxMTQ5MTUsNS4xNTcyNTAzOCBDMi43MTgxMzU5LDQuOTQ3NTgzMjEgMi4zNzI3NzMxOSw0Ljk0NzU4MzIxIDIuMTU5NzU5OTQsNS4xNTcyNTAzOCBDMS45NDY3NDY2OSw1LjM2NjkxNzU2IDEuOTQ2NzQ2NjksNS43MDY4NTUyMiAyLjE1OTc1OTk0LDUuOTE2NTIyNCBMNi44NDQzNzEwNCwxMC41Mjc1NDYzIEM3LjQ4NTE3NDI0LDExLjE1ODI4MzYgOC41MTY0NDk3OSwxMS4xNTY2ODUxIDkuMTU1NjI4OTYsMTAuNTI3NTQ2MyBMMTMuODQwMjQwMSw1LjkxNjUyMjQgQzE0LjA1MzI1MzMsNS43MDY4NTUyMiAxNC4wNTMyNTMzLDUuMzY2OTE3NTYgMTMuODQwMjQwMSw1LjE1NzI1MDM4IEMxMy42MjcyMjY4LDQuOTQ3NTgzMjEgMTMuMjgxODY0MSw0Ljk0NzU4MzIxIDEzLjA2ODg1MDgsNS4xNTcyNTAzOCBaIi8+ICA8L2RlZnM+ICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICA8dXNlIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgeGxpbms6aHJlZj0iI2Rvd25hcnJvd3doaXRlLWEiLz4gIDwvZz48L3N2Zz4=); - } -} - // The only "new" css in this component is a wrapper class for dealing with shadows. // This is mostly here so that we can provide an inline version that doesn't have the // shadows and depth. @@ -55,81 +44,55 @@ } } -// .react-datepicker-wrapper { -// } - .react-datepicker { - @include euiFont; font-size: $euiFontSizeXS; color: $euiTextColor; display: flex; - position: relative; border-radius: $euiBorderRadius; + padding: $euiDatePickerPadding; } .euiDatePicker.euiDatePicker--shadow .react-datepicker-popper { z-index: $euiZContentMenu; animation: euiAnimFadeIn $euiAnimSpeedFast ease-in; - &[data-placement^="bottom"] { - - // .react-datepicker__triangle { - // } - } - &[data-placement^="top"] { @include euiBottomShadowFlat; - border-radius: $euiBorderRadius $euiBorderRadius 0 0; - - // .react-datepicker__triangle { - // } } &[data-placement^="right"] { margin-left: 0; - - // .react-datepicker__triangle { - // } } &[data-placement^="left"] { margin-right: 0; - - // .react-datepicker__triangle { - // } } } -.react-datepicker__header { - text-align: center; - border-top-left-radius: $euiBorderRadius; - border-top-right-radius: $euiBorderRadius; - - &--time { - display: none; - } +// Hidden things that we don't want to show/use, ever +.react-datepicker__current-month, +.react-datepicker-time__header { + display: none; } -.react-datepicker__header__dropdown { - padding: $euiSize 0 $euiSizeS 0; +.react-datepicker__screenReaderOnly { + @include euiScreenReaderOnly; } -.react-datepicker__year-dropdown-container--select, -.react-datepicker__month-dropdown-container--select, -.react-datepicker__month-year-dropdown-container--select, -.react-datepicker__year-dropdown-container--scroll, -.react-datepicker__month-dropdown-container--scroll, -.react-datepicker__month-year-dropdown-container--scroll { - display: inline-block; - margin: 0 $euiSizeXS; +.react-datepicker__focusTrap { + display: flex; } -.react-datepicker__current-month, -.react-datepicker-time__header { - display: none; + + +.react-datepicker__header { + display: flex; + flex-direction: column; + margin-top: 44px; } + .react-datepicker-time__header { text-overflow: ellipsis; white-space: nowrap; @@ -137,114 +100,115 @@ } .react-datepicker__navigation { - cursor: pointer; - position: absolute; - // Pixel pushing because these are icons against text - top: $euiSize + ($euiSizeXS / 2); - width: 0; - padding: 0; - z-index: 1; - text-indent: -999em; - overflow: hidden; - + &--next, &--previous { - @include datePicker__arrow; - left: $euiSize + $euiSizeXS; - height: $euiSize; - width: $euiSize; - transform: rotate(90deg); - transition: transform $euiAnimSpeedExtraFast ease-in-out; - - &:hover, &:focus { - border-radius: $euiBorderRadius; - transform: scale(1.2) rotate(90deg); - } + cursor: pointer; + position: absolute; + // Pixel pushing because these are icons against text + top: $euiSize + ($euiSizeXS / 2); + height: $euiSizeXL; + width: $euiSizeXL; + padding: 0; + z-index: 1; + text-indent: -999em; + overflow: hidden; + background-repeat: no-repeat; &:hover { background-color: $euiColorLightestShade; - box-shadow: 0 0 0 ($euiSizeXS / 2) $euiColorLightestShade; - } - - &:focus { - background-color: $euiFocusBackgroundColor; - box-shadow: 0 0 0 ($euiSizeXS / 2) $euiFocusBackgroundColor; - } - - &--disabled, - &--disabled:hover { - cursor: not-allowed ; - opacity: .2; } } - &--next { + &--previous { @include datePicker__arrow; - // Pixel value because of some padding on the icon - right: 20px; - height: $euiSize; - width: $euiSize; - transform: rotate(-90deg); - - &--with-time:not(&--with-today-button) { - // This a pixel value against the width of the cal. It needs - // to be left because the timepicker adds more width - left: 248px; - } + right: $euiSizeXL; + transform: rotate(180deg); + // transition: transform $euiAnimSpeedExtraFast ease-in-out; - &:hover, &:focus { - border-radius: $euiBorderRadius; - transform: scale(1.2) rotate(-90deg); - } + // &:hover, &:focus { + // border-radius: $euiBorderRadius; + // } - &:hover { - background-color: $euiColorLightestShade; - box-shadow: 0 0 0 ($euiSizeXS / 2) $euiColorLightestShade; - } + // &:hover { + // background-color: $euiColorLightestShade; + // box-shadow: 0 0 0 ($euiSizeXS / 2) $euiColorLightestShade; + // } - &:focus { - background-color: $euiFocusBackgroundColor; - box-shadow: 0 0 0 ($euiSizeXS / 2) $euiFocusBackgroundColor; - } + // &:focus { + // background-color: $euiFocusBackgroundColor; + // box-shadow: 0 0 0 ($euiSizeXS / 2) $euiFocusBackgroundColor; + // } - &--disabled, - &--disabled:hover { - cursor: not-allowed ; - opacity: .2; - } + // &--disabled, + // &--disabled:hover { + // cursor: not-allowed ; + // opacity: .2; + // } } - &--years { - position: relative; - top: 0; - display: block; - margin-left: auto; - margin-right: auto; + &--next { + @include datePicker__arrow; + right: 0; + + // &--with-time:not(&--with-today-button) { + // // This a pixel value against the width of the cal. It needs + // // to be left because the timepicker adds more width + // left: 248px; + // } - &-previous { - top: $euiSizeXS; - border-top-color: $euiColorLightestShade; + // &:hover, &:focus { + // border-radius: $euiBorderRadius; + // } - &:hover { - border-top-color: darken($euiColorLightestShade, 10%); - } - } + // &:hover { + // background-color: $euiColorLightestShade; + // box-shadow: 0 0 0 ($euiSizeXS / 2) $euiColorLightestShade; + // } - &-upcoming { - top: -$euiSizeXS; - border-bottom-color: $euiColorLightestShade; + // &:focus { + // background-color: $euiFocusBackgroundColor; + // box-shadow: 0 0 0 ($euiSizeXS / 2) $euiFocusBackgroundColor; + // } - &:hover { - border-bottom-color: darken($euiColorLightestShade, 10%); - } - } + // &--disabled, + // &--disabled:hover { + // cursor: not-allowed ; + // opacity: .2; + // } } + + // &--years { + // position: relative; + // top: 0; + // display: block; + // margin-left: auto; + // margin-right: auto; + + // &-previous { + // top: $euiSizeXS; + // border-top-color: $euiColorLightestShade; + + // &:hover { + // border-top-color: darken($euiColorLightestShade, 10%); + // } + // } + + // &-upcoming { + // top: -$euiSizeXS; + // border-bottom-color: $euiColorLightestShade; + + // &:hover { + // border-bottom-color: darken($euiColorLightestShade, 10%); + // } + // } + // } } // .react-datepicker__month-container { // } .react-datepicker__month { - margin: 0 $euiSize $euiSize $euiSize; + // margin: 0 $euiSize $euiSize $euiSize; text-align: center; border-radius: $euiBorderRadius; } @@ -271,276 +235,64 @@ position: relative; } -.react-datepicker__year-read-view { - font-weight: $euiFontWeightLight; - color: $euiColorDarkShade; -} -.react-datepicker__month-read-view { - font-weight: $euiFontWeightMedium; -} -.react-datepicker__year-read-view, -.react-datepicker__month-read-view, -.react-datepicker__month-year-read-view { - font-size: $euiFontSizeL; - &:hover { - cursor: pointer; - color: $euiColorPrimary; - .react-datepicker__year-read-view--down-arrow, - .react-datepicker__month-read-view--down-arrow { - border-top-color: darken($euiColorLightestShade, 10%); - } - } - &--down-arrow { - display: none; - } -} -.react-datepicker__year-dropdown, -.react-datepicker__month-dropdown, -.react-datepicker__month-year-dropdown { - background-color: $euiColorEmptyShade; - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - bottom: 0; - right: 0; - z-index: 1; - text-align: center; - border-radius: $euiBorderRadius; - display: flex; - flex-wrap: wrap; - animation: euiAnimFadeIn $euiAnimSpeedFast ease-in; - align-content: space-around; - align-items: center; - padding: $euiSizeS; - &:hover { - cursor: pointer; - } - // &--scrollable { - // height: 150px; - // overflow-y: scroll; - // } -} - -// Strike that, reverse it Willy Wonka style -.react-datepicker__year-dropdown { - flex-wrap: wrap-reverse; - flex-direction: row-reverse; - justify-content: flex-end; -} -.react-datepicker__year-option { - &:first-of-type, - &:last-of-type { - display: none; - } -} -.react-datepicker__year-option, -.react-datepicker__month-option, -.react-datepicker__month-year-option { - font-size: $euiFontSizeXS; - padding: $euiSizeS; - color: $euiColorDarkestShade; - flex-basis: 33.3%; +///@include - &:first-of-type { - border-top-left-radius: $euiBorderRadius; - border-top-right-radius: $euiBorderRadius; - } - - &:last-of-type { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border-bottom-left-radius: $euiBorderRadius; - border-bottom-right-radius: $euiBorderRadius; - } - - &:hover { - background-color: $euiColorLightestShade; - - .react-datepicker__navigation--years-upcoming { - border-bottom-color: darken($euiColorLightestShade, 10%); - } - - .react-datepicker__navigation--years-previous { - border-top-color: darken($euiColorLightestShade, 10%); - } - } +.react-datepicker { + font-size: 12px; + color: #343741; + display: -webkit-flex; + display: flex; + border-radius: 6px; + padding: 4px; + justify-content: center; +} - &--selected { - display: none; - } +.react-datepicker__navigation--previous { + background-position: center; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iIzM0Mzc0MSIgZD0iTTExLjY5MiA3SDMuNTU2QzMuMjQ5IDcgMyA3LjIyNCAzIDcuNXMuMjQ5LjUuNTU2LjVoOC4xMzZsLTQuMDk2IDQuMDk2YS41LjUgMCAwMC43MDcuNzA3bDQuMjQzLTQuMjQyYy4yNTgtLjI1OS40MDMtLjU4Ny40MzMtLjkyNWEuNDU0LjQ1NCAwIDAwMC0uMjcyIDEuNDk0IDEuNDk0IDAgMDAtLjQzMy0uOTI1TDguMzAzIDIuMTk3YS41LjUgMCAxMC0uNzA3LjcwN0wxMS42OTIgN3oiLz48L3N2Zz4=); + left: 8px; + -webkit-transform: rotate( +180deg +); + transform: rotate( +180deg +); } -.react-datepicker__screenReaderOnly { +.react-datepicker__navigation--next, .react-datepicker__navigation--previous { + cursor: pointer; position: absolute; - left: -10000px; - top: auto; - width: 1px; - height: 1px; + top: 8px; + height: 32px; + width: 32px; + padding: 0; + z-index: 1; + text-indent: -999em; overflow: hidden; + background-repeat: no-repeat; + border-radius: 4px; } -.react-datepicker__year-option--preselected, -.react-datepicker__month-option--preselected { - background: $euiFocusBackgroundColor; -} - -.react-datepicker__year-option--selected_year.react-datepicker__year-option--preselected, -.react-datepicker__month-option--selected_month.react-datepicker__month-option--preselected{ - background: $euiColorPrimary; -} - -.react-datepicker__year-option--preselected, -.react-datepicker__month-option--preselected { - background: darken($euiFocusBackgroundColor, 5%); -} - - -.react-datepicker__month-read-view:focus, -.react-datepicker__year-read-view:focus { - text-decoration: underline; -} - -.react-datepicker__navigation:focus { - background-color: $euiFocusBackgroundColor; +.react-datepicker__navigation--next { + background-position: center; + right: 8px; } -// These selectors are not a typo. react-datepicker has a bug where these selectors -// output as "--selected_year". Sass has trouble compiling .--selected_year, so instead -// we use this generic selector get around it. -.react-datepicker__year-option--selected_year, -.react-datepicker__month-option--selected_month { - background: $euiColorPrimary; - color: $euiColorEmptyShade; - font-weight: $euiFontWeightBold; - border-radius: $euiBorderRadius; +.react-datepicker__navigation--next:hover { + background-color: #F5F7FA; + /* box-shadow: 0 0 0 2px #f5f7fa; */ } - -.react-datepicker__focusTrap { - display: flex; +.react-datepicker__navigation--next:hover, .react-datepicker__navigation--next:focus { + border-radius: 4px; } - -// 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. - -// .react-datepicker__close-icon { -// background-color: transparent; -// border: 0; -// cursor: pointer; -// display: inline-block; -// height: 0; -// outline: 0; -// padding: 0; -// vertical-align: middle; -// -// &::after { -// background-color: $euiColorPrimary; -// border-radius: 50%; -// bottom: 0; -// box-sizing: border-box; -// color: #fff; -// content: "\00d7"; -// cursor: pointer; -// font-size: 12px; -// height: 16px; -// width: 16px; -// line-height: 1; -// margin: -8px auto 0; -// padding: 2px; -// position: absolute; -// right: 7px; -// text-align: center; -// top: 50%; -// } -// } -// -// .react-datepicker__today-button { -// background: $euiColorEmptyShade; -// border-top: 1px solid $euiBorderColor; -// cursor: pointer; -// text-align: center; -// font-weight: bold; -// padding: 5px 0; -// clear: left; -// } -// -// .react-datepicker__portal { -// position: fixed; -// width: 100vw; -// height: 100vh; -// background-color: rgba(0, 0, 0, 0.8); -// left: 0; -// top: 0; -// justify-content: center; -// align-items: center; -// display: flex; -// z-index: 2147483647; -// -// .react-datepicker__day-name, -// .react-datepicker__day, -// .react-datepicker__time-name { -// width: 3rem; -// line-height: 3rem; -// } -// -// // Resize for small screens -// @media (max-width: 400px), (max-height: 550px) { -// .react-datepicker__day-name, -// .react-datepicker__day, -// .react-datepicker__time-name { -// width: 2rem; -// line-height: 2rem; -// } -// } -// -// .react-datepicker__current-month, -// .react-datepicker-time__header { -// font-size: $euiFontSizeXS * 1.8; -// } -// -// .react-datepicker__navigation { -// border: 1.8 * $euiSize solid transparent; -// } -// -// .react-datepicker__navigation--previous { -// border-right-color: $euiColorLightestShade; -// -// &:hover { -// border-right-color: darken($euiColorLightestShade, 10%); -// } -// -// &--disabled, -// &--disabled:hover { -// border-right-color: $datepicker__navigation-disabled-color; -// cursor: default; -// } -// } -// -// .react-datepicker__navigation--next { -// border-left-color: $euiColorLightestShade; -// -// &:hover { -// border-left-color: darken($euiColorLightestShade, 10%); -// } -// -// &--disabled, -// &--disabled:hover { -// border-left-color: $datepicker__navigation-disabled-color; -// cursor: default; -// } -// } -// } diff --git a/src/components/date_picker/_date_picker_month_year.scss b/src/components/date_picker/_date_picker_month_year.scss new file mode 100644 index 00000000000..ba41e59fd25 --- /dev/null +++ b/src/components/date_picker/_date_picker_month_year.scss @@ -0,0 +1,156 @@ +/** + * LEGEND + * __header__dropdown : Contains the month and year, but affords for the navigational arrows + + * __month-dropdown-container: Contains both static/selected control and the dropdown + * __month-read-view: The static control + * __month-dropdown: The absolutely positioned list + * __month-option: Each option in the list + * --selected_month + * --selected + * --preselected + + * __year-dropdown-container: Contains both static/selected control and the dropdown + * __year-read-view: The static control + * __year-dropdown: The absolutely positioned list + * __year-option: Each option in the list + * --selected_year + * --selected + * --preselected + */ + +// Absolutely positioned across the *whole* top of the calendar +.react-datepicker__header__dropdown { + padding: $euiSizeS; + display: flex; + gap: $euiDatePickerGap; + position: absolute; + top: 0; + left: $euiDatePickerButtonSize + $euiDatePickerGap; + right: $euiDatePickerButtonSize + $euiDatePickerGap; + justify-content: center; +} + +/** + * Make the top selectors look like select inputs + */ + .react-datepicker__year-read-view, + .react-datepicker__month-read-view, + .react-datepicker__month-year-read-view { + @include euiFormControlStyle($borderOnly: false, $includeStates: false, $includeSizes: false); + @include euiFormControlStyleCompressed($borderOnly: true, $includeStates: false); + height: $euiFormControlCompressedHeight; + font-weight: $euiFontWeightMedium; + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + align-items: center; + + &:hover { + cursor: pointer; + text-decoration: underline; + } + + &--down-arrow { + @include datePicker__caret; + right: $euiSizeS; + height: $euiSizeM; + width: $euiSizeM; + display: inline-block; + background-size: cover; + } + + &--selected-month, + &--selected-year { + @include euiTextTruncate; + } + } + +.react-datepicker__year-dropdown-container, +.react-datepicker__month-dropdown-container { + display: inline-block; + flex-grow: 1; + max-width: $euiDatePickerMinControlWidth; +} + +// Using the unnamed div for the years dropdown because we want to be able to control the +// flex direction of the years but you can't put overflow on a flex group +.react-datepicker__year-dropdown-container > div:not([class*="read-view"]), +.react-datepicker__month-dropdown { + @include euiYScroll; + @include euiBottomShadowSmall; + height: 250px; // Set an explicit height, something at least smaller than the overall height + background-color: $euiColorEmptyShade; + position: absolute; + z-index: 1; + border-radius: $euiBorderRadius; + min-width: $euiDatePickerMinControlWidth; +} + +.react-datepicker__year-dropdown-container > div:not([class*="read-view"]) { + // Reverse the direction of the years so that earlier is first + .react-datepicker__year-dropdown { + padding: $euiSizeXS; + display: flex; + gap: $euiDatePickerGap; + flex-direction: column-reverse; + justify-content: flex-end; + } +} + +.react-datepicker__month-dropdown-container { + flex-grow: 2; + max-width: $euiDatePickerMaxControlWidth; + + .react-datepicker__month-dropdown { + padding: $euiSizeXS; + margin: ($euiDatePickerGap / 2) 0; + min-width: $euiDatePickerMaxControlWidth; + } +} + +// Hide the first and last options which trigger adding one more year to the list +// But container no text or any content so its inaccessible +.react-datepicker__year-option { + &:first-of-type, + &:last-of-type { + display: none; + } +} + +.react-datepicker__year-option, +.react-datepicker__month-option, +.react-datepicker__month-year-option { + padding: 0 $euiSizeS; + height: $euiButtonHeightXSmall; + line-height: $euiButtonHeightXSmall; + border-radius: $euiBorderRadiusSmall; + font-size: $euiFontSizeS; + cursor: pointer; + + &:hover, + &:focus { + text-decoration: underline; + } + + &--selected { + display: none; + } +} + + +.react-datepicker__year-option--preselected, +.react-datepicker__month-option--preselected { + &, + &:hover { + background: $euiFocusBackgroundColor; + } +} + +.react-datepicker__year-option--selected_year, +.react-datepicker__month-option--selected_month{ + &, + &:hover { + @include euiButtonDefaultStyle($euiColorPrimary, false, 0); + } +} diff --git a/src/components/date_picker/_date_picker_times.scss b/src/components/date_picker/_date_picker_times.scss index fff1e361bb9..f2a35f1f05c 100644 --- a/src/components/date_picker/_date_picker_times.scss +++ b/src/components/date_picker/_date_picker_times.scss @@ -9,7 +9,7 @@ .react-datepicker__time-container { display: flex; - padding: $euiSizeS; + padding: 8px 0 0 8px; flex-grow: 1; } @@ -26,12 +26,13 @@ display: flex; flex-direction: column; flex-grow: 1; + margin-top: $euiSizeXXL; } .react-datepicker__time-list { @include euiScrollBar; // Set the min-height with the following, but it should stretch to fit if the container is larger - height: 265px !important; // Overrides inline height + height: 200px !important; // Overrides inline height display: flex; gap: $euiSizeXS; flex-direction: column; @@ -57,7 +58,7 @@ &--disabled, &--disabled:hover { - text-decoration: none; + text-decoration: none !important; cursor: not-allowed; color: $euiButtonColorDisabledText; background-color: transparent; @@ -73,7 +74,8 @@ @include euiButtonDefaultStyle($euiColorSuccess, false); } - &--preselected { + &--preselected, + &--preselected:hover { background: $euiFocusBackgroundColor; } } @@ -87,6 +89,7 @@ .react-datepicker__time-box { background-color: transparent; + margin-top: 0; } .react-datepicker__time-list-item { diff --git a/src/components/date_picker/_index.scss b/src/components/date_picker/_index.scss index 04c6d382646..2213564168b 100644 --- a/src/components/date_picker/_index.scss +++ b/src/components/date_picker/_index.scss @@ -1,9 +1,11 @@ // Uses some form mixins @import 'variables'; +@import 'mixins'; @import 'date_picker_days'; @import 'date_picker_times'; +@import 'date_picker_month_year'; @import 'date_picker'; diff --git a/src/components/date_picker/_mixins.scss b/src/components/date_picker/_mixins.scss new file mode 100644 index 00000000000..e707eb31bff --- /dev/null +++ b/src/components/date_picker/_mixins.scss @@ -0,0 +1,19 @@ +// Because we don't have control over react-datepicker's dom we use SVG URIs for the navigation arrows. +// There is one for light and dark. +@mixin datePicker__caret { + background-position: center; + @if (lightness($euiColorEmptyShade) > 50) { + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+ICA8ZGVmcz4gICAgPHBhdGggaWQ9ImFycm93X2Rvd24tYSIgZD0iTTEzLjA2ODg1MDgsNS4xNTcyNTAzOCBMOC4zODQyMzk3NSw5Ljc2ODI3NDI4IEM4LjE3MDU0NDE1LDkuOTc4NjEzMDggNy44Mjk5OTIxNCw5Ljk3OTE0MDk1IDcuNjE1NzYwMjUsOS43NjgyNzQyOCBMMi45MzExNDkxNSw1LjE1NzI1MDM4IEMyLjcxODEzNTksNC45NDc1ODMyMSAyLjM3Mjc3MzE5LDQuOTQ3NTgzMjEgMi4xNTk3NTk5NCw1LjE1NzI1MDM4IEMxLjk0Njc0NjY5LDUuMzY2OTE3NTYgMS45NDY3NDY2OSw1LjcwNjg1NTIyIDIuMTU5NzU5OTQsNS45MTY1MjI0IEw2Ljg0NDM3MTA0LDEwLjUyNzU0NjMgQzcuNDg1MTc0MjQsMTEuMTU4MjgzNiA4LjUxNjQ0OTc5LDExLjE1NjY4NTEgOS4xNTU2Mjg5NiwxMC41Mjc1NDYzIEwxMy44NDAyNDAxLDUuOTE2NTIyNCBDMTQuMDUzMjUzMyw1LjcwNjg1NTIyIDE0LjA1MzI1MzMsNS4zNjY5MTc1NiAxMy44NDAyNDAxLDUuMTU3MjUwMzggQzEzLjYyNzIyNjgsNC45NDc1ODMyMSAxMy4yODE4NjQxLDQuOTQ3NTgzMjEgMTMuMDY4ODUwOCw1LjE1NzI1MDM4IFoiLz4gIDwvZGVmcz4gIDxnIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgIDx1c2UgZmlsbC1ydWxlPSJub256ZXJvIiB4bGluazpocmVmPSIjYXJyb3dfZG93bi1hIi8+ICA8L2c+PC9zdmc+); + } @else { + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+ICA8ZGVmcz4gICAgPHBhdGggaWQ9ImRvd25hcnJvd3doaXRlLWEiIGQ9Ik0xMy4wNjg4NTA4LDUuMTU3MjUwMzggTDguMzg0MjM5NzUsOS43NjgyNzQyOCBDOC4xNzA1NDQxNSw5Ljk3ODYxMzA4IDcuODI5OTkyMTQsOS45NzkxNDA5NSA3LjYxNTc2MDI1LDkuNzY4Mjc0MjggTDIuOTMxMTQ5MTUsNS4xNTcyNTAzOCBDMi43MTgxMzU5LDQuOTQ3NTgzMjEgMi4zNzI3NzMxOSw0Ljk0NzU4MzIxIDIuMTU5NzU5OTQsNS4xNTcyNTAzOCBDMS45NDY3NDY2OSw1LjM2NjkxNzU2IDEuOTQ2NzQ2NjksNS43MDY4NTUyMiAyLjE1OTc1OTk0LDUuOTE2NTIyNCBMNi44NDQzNzEwNCwxMC41Mjc1NDYzIEM3LjQ4NTE3NDI0LDExLjE1ODI4MzYgOC41MTY0NDk3OSwxMS4xNTY2ODUxIDkuMTU1NjI4OTYsMTAuNTI3NTQ2MyBMMTMuODQwMjQwMSw1LjkxNjUyMjQgQzE0LjA1MzI1MzMsNS43MDY4NTUyMiAxNC4wNTMyNTMzLDUuMzY2OTE3NTYgMTMuODQwMjQwMSw1LjE1NzI1MDM4IEMxMy42MjcyMjY4LDQuOTQ3NTgzMjEgMTMuMjgxODY0MSw0Ljk0NzU4MzIxIDEzLjA2ODg1MDgsNS4xNTcyNTAzOCBaIi8+ICA8L2RlZnM+ICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICA8dXNlIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgeGxpbms6aHJlZj0iI2Rvd25hcnJvd3doaXRlLWEiLz4gIDwvZz48L3N2Zz4=); + } +} + +@mixin datePicker__arrow { + background-position: center; + @if (lightness($euiColorEmptyShade) > 50) { + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iIzM0Mzc0MSIgZD0iTTExLjY5MiA3SDMuNTU2QzMuMjQ5IDcgMyA3LjIyNCAzIDcuNXMuMjQ5LjUuNTU2LjVoOC4xMzZsLTQuMDk2IDQuMDk2YS41LjUgMCAwMC43MDcuNzA3bDQuMjQzLTQuMjQyYy4yNTgtLjI1OS40MDMtLjU4Ny40MzMtLjkyNWEuNDU0LjQ1NCAwIDAwMC0uMjcyIDEuNDk0IDEuNDk0IDAgMDAtLjQzMy0uOTI1TDguMzAzIDIuMTk3YS41LjUgMCAxMC0uNzA3LjcwN0wxMS42OTIgN3oiLz48L3N2Zz4=); + } @else { + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTExLjY5MiA3SDMuNTU2QzMuMjQ5IDcgMyA3LjIyNCAzIDcuNXMuMjQ5LjUuNTU2LjVoOC4xMzZsLTQuMDk2IDQuMDk2YS41LjUgMCAwMC43MDcuNzA3bDQuMjQzLTQuMjQyYy4yNTgtLjI1OS40MDMtLjU4Ny40MzMtLjkyNWEuNDU0LjQ1NCAwIDAwMC0uMjcyIDEuNDk0IDEuNDk0IDAgMDAtLjQzMy0uOTI1TDguMzAzIDIuMTk3YS41LjUgMCAxMC0uNzA3LjcwN0wxMS42OTIgN3oiLz48L3N2Zz4=); + } +} diff --git a/src/components/date_picker/_variables.scss b/src/components/date_picker/_variables.scss index 6a5abd4e528..23a6e20ec36 100644 --- a/src/components/date_picker/_variables.scss +++ b/src/components/date_picker/_variables.scss @@ -1 +1,9 @@ -$euiDatePickerCalendarWidth: 284px; \ No newline at end of file +$euiDatePickerCalendarWidth: 284px; + +$euiDatePickerPadding: $euiSizeXS; +$euiDatePickerGap: $euiSizeXS; +$euiDatePickerCalendarColumns: 7; // Just to make calculations obvious +$euiDatePickerButtonSize: $euiSizeXL; + +$euiDatePickerMinControlWidth: 100px; +$euiDatePickerMaxControlWidth: 140px; From cc95eae0ee152e49a1467b7c8946f2430c0ac6c7 Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 30 Jul 2021 12:39:22 -0400 Subject: [PATCH 04/14] Mostly all fixed up now --- src/components/date_picker/_date_picker.scss | 217 ++---------------- .../date_picker/_date_picker_month_year.scss | 6 +- .../date_picker/_date_picker_navigation.scss | 30 +++ .../date_picker/_date_picker_times.scss | 10 +- src/components/date_picker/_index.scss | 1 + src/components/date_picker/_variables.scss | 2 +- 6 files changed, 59 insertions(+), 207 deletions(-) create mode 100644 src/components/date_picker/_date_picker_navigation.scss diff --git a/src/components/date_picker/_date_picker.scss b/src/components/date_picker/_date_picker.scss index 6b98a5744a1..d1f7ace7eea 100644 --- a/src/components/date_picker/_date_picker.scss +++ b/src/components/date_picker/_date_picker.scss @@ -24,7 +24,6 @@ &.euiDatePicker--shadow { .react-datepicker-popper { @include euiBottomShadowMedium; - border: $euiBorderThin; background-color: $euiColorEmptyShade; border-radius: 0 0 $euiBorderRadius $euiBorderRadius; @@ -35,11 +34,15 @@ &.euiDatePicker--inline { .react-datepicker { @include euiBottomShadowMedium; - border: $euiBorderThin; background-color: $euiColorEmptyShade; border-radius: $euiBorderRadius; } + + .euiFormControlLayout { + display: inline-block; + width: auto; + } } } } @@ -50,6 +53,7 @@ display: flex; border-radius: $euiBorderRadius; padding: $euiDatePickerPadding; + justify-content: center; } .euiDatePicker.euiDatePicker--shadow .react-datepicker-popper { @@ -82,217 +86,36 @@ .react-datepicker__focusTrap { display: flex; + justify-content: center; } - - .react-datepicker__header { - display: flex; - flex-direction: column; - margin-top: 44px; + display: flex; + flex-direction: column; + margin-top: $euiSizeXL + $euiDatePickerGap; } - .react-datepicker-time__header { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; + @include euiTextTruncate; } -.react-datepicker__navigation { - &--next, - &--previous { - cursor: pointer; - position: absolute; - // Pixel pushing because these are icons against text - top: $euiSize + ($euiSizeXS / 2); - height: $euiSizeXL; - width: $euiSizeXL; - padding: 0; - z-index: 1; - text-indent: -999em; - overflow: hidden; - background-repeat: no-repeat; - - &:hover { - background-color: $euiColorLightestShade; - } - } - - &--previous { - @include datePicker__arrow; - right: $euiSizeXL; - transform: rotate(180deg); - // transition: transform $euiAnimSpeedExtraFast ease-in-out; - - // &:hover, &:focus { - // border-radius: $euiBorderRadius; - // } - - // &:hover { - // background-color: $euiColorLightestShade; - // box-shadow: 0 0 0 ($euiSizeXS / 2) $euiColorLightestShade; - // } - - // &:focus { - // background-color: $euiFocusBackgroundColor; - // box-shadow: 0 0 0 ($euiSizeXS / 2) $euiFocusBackgroundColor; - // } - - // &--disabled, - // &--disabled:hover { - // cursor: not-allowed ; - // opacity: .2; - // } - } - - &--next { - @include datePicker__arrow; - right: 0; - - // &--with-time:not(&--with-today-button) { - // // This a pixel value against the width of the cal. It needs - // // to be left because the timepicker adds more width - // left: 248px; - // } - - // &:hover, &:focus { - // border-radius: $euiBorderRadius; - // } - - // &:hover { - // background-color: $euiColorLightestShade; - // box-shadow: 0 0 0 ($euiSizeXS / 2) $euiColorLightestShade; - // } - - // &:focus { - // background-color: $euiFocusBackgroundColor; - // box-shadow: 0 0 0 ($euiSizeXS / 2) $euiFocusBackgroundColor; - // } - - // &--disabled, - // &--disabled:hover { - // cursor: not-allowed ; - // opacity: .2; - // } - } - - // &--years { - // position: relative; - // top: 0; - // display: block; - // margin-left: auto; - // margin-right: auto; - - // &-previous { - // top: $euiSizeXS; - // border-top-color: $euiColorLightestShade; - - // &:hover { - // border-top-color: darken($euiColorLightestShade, 10%); - // } - // } - - // &-upcoming { - // top: -$euiSizeXS; - // border-bottom-color: $euiColorLightestShade; - - // &:hover { - // border-bottom-color: darken($euiColorLightestShade, 10%); - // } - // } - // } -} - -// .react-datepicker__month-container { -// } - .react-datepicker__month { - // margin: 0 $euiSize $euiSize $euiSize; text-align: center; border-radius: $euiBorderRadius; } - - -.react-datepicker__week-number { - color: $euiColorLightestShade; - display: inline-block; - width: $euiSizeXL; - line-height: $euiSizeXL - $euiSizeXS; - text-align: center; - margin: 0 $euiSizeXS; - &.react-datepicker__week-number--clickable { - cursor: pointer; - &:hover { - border-radius: $euiBorderRadius; - background-color: $euiColorEmptyShade; - } - } -} - .react-datepicker__input-container { position: relative; } +// On small screens put the times at the bottom +@include euiBreakpoint('xs') { + .react-datepicker__focusTrap, + .react-datepicker { + flex-direction: column; + } - - - - - - - - - - -///@include - -.react-datepicker { - font-size: 12px; - color: #343741; - display: -webkit-flex; - display: flex; - border-radius: 6px; - padding: 4px; - justify-content: center; -} - -.react-datepicker__navigation--previous { - background-position: center; - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iIzM0Mzc0MSIgZD0iTTExLjY5MiA3SDMuNTU2QzMuMjQ5IDcgMyA3LjIyNCAzIDcuNXMuMjQ5LjUuNTU2LjVoOC4xMzZsLTQuMDk2IDQuMDk2YS41LjUgMCAwMC43MDcuNzA3bDQuMjQzLTQuMjQyYy4yNTgtLjI1OS40MDMtLjU4Ny40MzMtLjkyNWEuNDU0LjQ1NCAwIDAwMC0uMjcyIDEuNDk0IDEuNDk0IDAgMDAtLjQzMy0uOTI1TDguMzAzIDIuMTk3YS41LjUgMCAxMC0uNzA3LjcwN0wxMS42OTIgN3oiLz48L3N2Zz4=); - left: 8px; - -webkit-transform: rotate( -180deg -); - transform: rotate( -180deg -); -} - -.react-datepicker__navigation--next, .react-datepicker__navigation--previous { - cursor: pointer; - position: absolute; - top: 8px; - height: 32px; - width: 32px; - padding: 0; - z-index: 1; - text-indent: -999em; - overflow: hidden; - background-repeat: no-repeat; - border-radius: 4px; -} - -.react-datepicker__navigation--next { - background-position: center; - right: 8px; -} - -.react-datepicker__navigation--next:hover { - background-color: #F5F7FA; - /* box-shadow: 0 0 0 2px #f5f7fa; */ -} -.react-datepicker__navigation--next:hover, .react-datepicker__navigation--next:focus { - border-radius: 4px; + .react-datepicker__time-box { + margin-top: 0; + } } diff --git a/src/components/date_picker/_date_picker_month_year.scss b/src/components/date_picker/_date_picker_month_year.scss index ba41e59fd25..9c9ecbd6c50 100644 --- a/src/components/date_picker/_date_picker_month_year.scss +++ b/src/components/date_picker/_date_picker_month_year.scss @@ -21,7 +21,7 @@ // Absolutely positioned across the *whole* top of the calendar .react-datepicker__header__dropdown { - padding: $euiSizeS; + padding: $euiDatePickerGap * 2; display: flex; gap: $euiDatePickerGap; position: absolute; @@ -92,7 +92,6 @@ .react-datepicker__year-dropdown { padding: $euiSizeXS; display: flex; - gap: $euiDatePickerGap; flex-direction: column-reverse; justify-content: flex-end; } @@ -104,7 +103,6 @@ .react-datepicker__month-dropdown { padding: $euiSizeXS; - margin: ($euiDatePickerGap / 2) 0; min-width: $euiDatePickerMaxControlWidth; } } @@ -126,6 +124,7 @@ line-height: $euiButtonHeightXSmall; border-radius: $euiBorderRadiusSmall; font-size: $euiFontSizeS; + margin: $euiDatePickerGap 0; cursor: pointer; &:hover, @@ -138,7 +137,6 @@ } } - .react-datepicker__year-option--preselected, .react-datepicker__month-option--preselected { &, diff --git a/src/components/date_picker/_date_picker_navigation.scss b/src/components/date_picker/_date_picker_navigation.scss new file mode 100644 index 00000000000..989b1bd3631 --- /dev/null +++ b/src/components/date_picker/_date_picker_navigation.scss @@ -0,0 +1,30 @@ +.react-datepicker__navigation--next, +.react-datepicker__navigation--previous { + @include datePicker__arrow; + cursor: pointer; + position: absolute; + top: $euiDatePickerGap * 2; + height: $euiDatePickerButtonSize; + width: $euiDatePickerButtonSize; + z-index: 1; + text-indent: -999em; + overflow: hidden; + background-repeat: no-repeat; + border-radius: $euiBorderRadiusSmall; + background-position: center; + + &:hover, + &:focus { + background-color: $euiFocusBackgroundColor; + } +} + +.react-datepicker__navigation--previous { + left: $euiDatePickerGap * 2; + transform: rotate(180deg); + transform-origin: center; +} + +.react-datepicker__navigation--next { + right: $euiDatePickerGap * 2; +} diff --git a/src/components/date_picker/_date_picker_times.scss b/src/components/date_picker/_date_picker_times.scss index f2a35f1f05c..c647b069e5b 100644 --- a/src/components/date_picker/_date_picker_times.scss +++ b/src/components/date_picker/_date_picker_times.scss @@ -64,11 +64,6 @@ background-color: transparent; } - &--selected, - &--selected:hover { - @include euiButtonDefaultStyle($euiColorPrimary, false, 0); - } - &--injected, &--injected:hover { @include euiButtonDefaultStyle($euiColorSuccess, false); @@ -78,6 +73,11 @@ &--preselected:hover { background: $euiFocusBackgroundColor; } + + &--selected, + &--selected:hover { + @include euiButtonDefaultStyle($euiColorPrimary, false, 0); + } } diff --git a/src/components/date_picker/_index.scss b/src/components/date_picker/_index.scss index 2213564168b..69f26f4592f 100644 --- a/src/components/date_picker/_index.scss +++ b/src/components/date_picker/_index.scss @@ -6,6 +6,7 @@ @import 'date_picker_days'; @import 'date_picker_times'; @import 'date_picker_month_year'; +@import 'date_picker_navigation'; @import 'date_picker'; diff --git a/src/components/date_picker/_variables.scss b/src/components/date_picker/_variables.scss index 23a6e20ec36..b6fc93b9f96 100644 --- a/src/components/date_picker/_variables.scss +++ b/src/components/date_picker/_variables.scss @@ -1,6 +1,6 @@ $euiDatePickerCalendarWidth: 284px; -$euiDatePickerPadding: $euiSizeXS; +$euiDatePickerPadding: $euiSizeS; $euiDatePickerGap: $euiSizeXS; $euiDatePickerCalendarColumns: 7; // Just to make calculations obvious $euiDatePickerButtonSize: $euiSizeXL; From 28d6c32070fda7a577f25692f611969a0d6aee1f Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 30 Jul 2021 15:01:51 -0400 Subject: [PATCH 05/14] Fixing border-radius of range inputs --- .../__snapshots__/date_picker_range.test.tsx.snap | 4 ++-- src/components/date_picker/_date_picker_range.scss | 9 +++++++++ src/components/date_picker/date_picker_range.tsx | 12 ++++++++++-- 3 files changed, 21 insertions(+), 4 deletions(-) diff --git a/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap b/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap index 3fc722b7092..f1e5a1906e3 100644 --- a/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap +++ b/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap @@ -24,7 +24,7 @@ exports[`EuiDatePickerRange is rendered 1`] = ` > @@ -74,7 +74,7 @@ exports[`EuiDatePickerRange is rendered 1`] = ` > diff --git a/src/components/date_picker/_date_picker_range.scss b/src/components/date_picker/_date_picker_range.scss index a48c3373f5a..4068cbd87c8 100644 --- a/src/components/date_picker/_date_picker_range.scss +++ b/src/components/date_picker/_date_picker_range.scss @@ -18,7 +18,16 @@ .euiFieldText.euiDatePicker { box-shadow: none !important; // including all states text-align: center; + } + + .euiDatePickerRange__start { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + .euiDatePickerRange__end { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } .react-datepicker-popper .euiFieldText.euiDatePicker { diff --git a/src/components/date_picker/date_picker_range.tsx b/src/components/date_picker/date_picker_range.tsx index 8402239ed18..83652cbfbcb 100644 --- a/src/components/date_picker/date_picker_range.tsx +++ b/src/components/date_picker/date_picker_range.tsx @@ -29,7 +29,7 @@ export type EuiDatePickerRangeProps = CommonProps & { /** * The end date `EuiDatePicker` element */ - endDateControl: ReactNode; + endDateControl: ReactElement; fullWidth?: boolean; /** @@ -46,7 +46,7 @@ export type EuiDatePickerRangeProps = CommonProps & { /** * The start date `EuiDatePicker` element */ - startDateControl: ReactNode; + startDateControl: ReactElement; }; export const EuiDatePickerRange: FunctionComponent = ({ @@ -80,6 +80,10 @@ export const EuiDatePickerRange: FunctionComponent = ({ readOnly: readOnly, iconType: typeof iconType === 'boolean' ? undefined : iconType, showIcon: !!iconType, + className: classNames( + 'euiDatePickerRange__start', + startDateControl.props.className + ), } ); @@ -90,6 +94,10 @@ export const EuiDatePickerRange: FunctionComponent = ({ fullWidth: fullWidth, readOnly: readOnly, popoverPlacement: 'bottom-end', + className: classNames( + 'euiDatePickerRange__end', + startDateControl.props + ), } ); } From 82a4c8e12684d1a1c677e4f4c8b8ff1ac498482c Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 30 Jul 2021 15:03:01 -0400 Subject: [PATCH 06/14] Better range styling --- .../date_picker/_date_picker_days.scss | 27 +++++++++---------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/src/components/date_picker/_date_picker_days.scss b/src/components/date_picker/_date_picker_days.scss index a6cc7b2acd0..f43f73a7fa9 100644 --- a/src/components/date_picker/_date_picker_days.scss +++ b/src/components/date_picker/_date_picker_days.scss @@ -15,13 +15,6 @@ * --today : _this.isSameDay(now(_this.props.utcOffset)), * --weekend : _this.isWeekend(), * --outside-month : _this.isOutsideMonth() - - - - * __time-list-item : - * --preselected : closest current time but not selected - * --selected - * --disabled */ @@ -86,6 +79,19 @@ @include euiButtonDefaultStyle($euiColorPrimary, false); } + &--in-range:not(&--range-start):not(&--range-end):not(:hover) { + box-shadow: -2px 0 transparentize($euiColorPrimary, $euiButtonDefaultTransparency), + 2px 0 transparentize($euiColorPrimary, $euiButtonDefaultTransparency); + border-radius: 0; + + &:first-of-type { + box-shadow: 2px 0 transparentize($euiColorPrimary, $euiButtonDefaultTransparency); + } + &:last-of-type { + box-shadow: -2px 0 transparentize($euiColorPrimary, $euiButtonDefaultTransparency); + } + } + &--selected, &--in-selecting-range, &--selected:hover, @@ -105,13 +111,6 @@ background-color: rgba($euiColorDanger, 0.5); //todo } - &--in-range:not(&--in-selecting-range) { - .react-datepicker__month--selecting-range & { - background-color: $euiColorEmptyShade; - color: $euiColorFullShade; - } - } - &--disabled, &--disabled:hover { @include euiButtonDefaultStyle($euiButtonColorDisabled); From a5c208b3fc6153cf12c6da66ac119d3058286956 Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 30 Jul 2021 15:23:43 -0400 Subject: [PATCH 07/14] Better disabled days --- src/components/date_picker/_date_picker_days.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/date_picker/_date_picker_days.scss b/src/components/date_picker/_date_picker_days.scss index f43f73a7fa9..87edfe782e7 100644 --- a/src/components/date_picker/_date_picker_days.scss +++ b/src/components/date_picker/_date_picker_days.scss @@ -113,7 +113,9 @@ &--disabled, &--disabled:hover { - @include euiButtonDefaultStyle($euiButtonColorDisabled); + $backgroundColorSimulated: mix($euiPageBackgroundColor, $euiButtonColorDisabled, 90%); + background-color: transparentize($euiButtonColorDisabled, .9); + color: makeDisabledContrastColor($euiButtonColorDisabled, $backgroundColorSimulated); cursor: not-allowed; text-decoration: none; transform: none; From 4acdb7d5f770230f7692c45da25d65b615142d45 Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 30 Jul 2021 15:45:53 -0400 Subject: [PATCH 08/14] Separating imports for date picker based on theme --- .sass-lint.yml | 2 +- .../date_picker/_date_picker_range.scss | 10 +- src/components/date_picker/_index.scss | 11 - src/global_styling/index.scss | 3 + .../react_date_picker/_date_picker.scss | 779 ++++++++++++++++++ .../react_date_picker/_index.scss | 2 + .../react_date_picker/_variables.scss | 1 + .../eui-amsterdam/global_styling/index.scss | 3 + .../react_date_picker}/_date_picker.scss | 8 +- .../react_date_picker}/_date_picker_days.scss | 19 +- .../_date_picker_month_year.scss | 69 +- .../_date_picker_navigation.scss | 2 +- .../_date_picker_times.scss | 4 +- .../react_date_picker/_index.scss | 8 + .../react_date_picker}/_mixins.scss | 5 +- .../react_date_picker}/_variables.scss | 0 16 files changed, 855 insertions(+), 71 deletions(-) create mode 100644 src/global_styling/react_date_picker/_date_picker.scss create mode 100644 src/global_styling/react_date_picker/_index.scss create mode 100644 src/global_styling/react_date_picker/_variables.scss rename src/{components/date_picker => themes/eui-amsterdam/global_styling/react_date_picker}/_date_picker.scss (96%) rename src/{components/date_picker => themes/eui-amsterdam/global_styling/react_date_picker}/_date_picker_days.scss (87%) rename src/{components/date_picker => themes/eui-amsterdam/global_styling/react_date_picker}/_date_picker_month_year.scss (75%) rename src/{components/date_picker => themes/eui-amsterdam/global_styling/react_date_picker}/_date_picker_navigation.scss (95%) rename src/{components/date_picker => themes/eui-amsterdam/global_styling/react_date_picker}/_date_picker_times.scss (94%) create mode 100644 src/themes/eui-amsterdam/global_styling/react_date_picker/_index.scss rename src/{components/date_picker => themes/eui-amsterdam/global_styling/react_date_picker}/_mixins.scss (97%) rename src/{components/date_picker => themes/eui-amsterdam/global_styling/react_date_picker}/_variables.scss (100%) diff --git a/.sass-lint.yml b/.sass-lint.yml index 583a70c8176..d952df73334 100644 --- a/.sass-lint.yml +++ b/.sass-lint.yml @@ -5,7 +5,7 @@ files: ignore: # These are themes of outside libraries we import - 'src/components/series_chart/**/*.s+(a|c)ss' - - 'src/components/date_picker/**/*.s+(a|c)ss' + - 'src/global_styling/react_date_picker/**/*.s+(a|c)ss' rules: quotes: - 2 diff --git a/src/components/date_picker/_date_picker_range.scss b/src/components/date_picker/_date_picker_range.scss index 4068cbd87c8..342436bec26 100644 --- a/src/components/date_picker/_date_picker_range.scss +++ b/src/components/date_picker/_date_picker_range.scss @@ -5,7 +5,7 @@ .euiDatePickerRange { @include euiFormControlSize(auto, $includeAlternates: true); // Match just the regular drop shadow of inputs - @include euiFormControlDefaultShadow(); + @include euiFormControlDefaultShadow; display: flex; align-items: center; padding: 1px; /* 1 */ @@ -16,7 +16,8 @@ } .euiFieldText.euiDatePicker { - box-shadow: none !important; // including all states + // including all states + box-shadow: none !important; // sass-lint:disable-line no-important text-align: center; } @@ -47,8 +48,9 @@ // Direct descendent selectors to override `> span` > .euiDatePickerRange__delimeter { - background-color: transparent !important; // override .euiFormControlLayout--group .euiText - line-height: 1 !important; + // override .euiFormControlLayout--group .euiText + background-color: transparent !important; // sass-lint:disable-line no-important + line-height: 1 !important; // sass-lint:disable-line no-important flex: 0 0 auto; padding-left: $euiFormControlPadding / 2; padding-right: $euiFormControlPadding / 2; diff --git a/src/components/date_picker/_index.scss b/src/components/date_picker/_index.scss index 69f26f4592f..343fed98937 100644 --- a/src/components/date_picker/_index.scss +++ b/src/components/date_picker/_index.scss @@ -1,14 +1,3 @@ // Uses some form mixins -@import 'variables'; -@import 'mixins'; - - -@import 'date_picker_days'; -@import 'date_picker_times'; -@import 'date_picker_month_year'; -@import 'date_picker_navigation'; -@import 'date_picker'; - - @import 'date_picker_range'; @import 'super_date_picker/index'; diff --git a/src/global_styling/index.scss b/src/global_styling/index.scss index 573503099da..e480e5adb92 100644 --- a/src/global_styling/index.scss +++ b/src/global_styling/index.scss @@ -14,3 +14,6 @@ // The reset file makes use of variables and mixins @import 'reset/index'; + +// Customization of the React Date Picker +@import 'react_date_picker/index'; diff --git a/src/global_styling/react_date_picker/_date_picker.scss b/src/global_styling/react_date_picker/_date_picker.scss new file mode 100644 index 00000000000..8ee36693b24 --- /dev/null +++ b/src/global_styling/react_date_picker/_date_picker.scss @@ -0,0 +1,779 @@ +/* This file is a heavy retheme of react-datepicker's Sass as of v1.4.0 +** https://github.com/Hacker0x01/react-datepicker +** +** In places where features were disabled, I've commented out the original Sass +** selectors rather than removing it so we can better understand what's changed. +** Commented out selectors that don't have properties indicate that we are not +** using those dom elements for styling of any kind. For example, react-datepicker +** has lots of pointer arrows attached to its popovers, but we choose not to render +** then in any way. +** +** Similarly, you will also find several times where we use display: none to +** completely remove extraneous UI (they had some overly obvious legends for example). +*/ + + +// Because we don't have control over react-datepicker's dom we use SVG URIs for the navigation arrows. +// There is one for light and dark. +@mixin datePickerArrow { + background-position: center; + @if (lightness($euiColorEmptyShade) > 50) { + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+ICA8ZGVmcz4gICAgPHBhdGggaWQ9ImFycm93X2Rvd24tYSIgZD0iTTEzLjA2ODg1MDgsNS4xNTcyNTAzOCBMOC4zODQyMzk3NSw5Ljc2ODI3NDI4IEM4LjE3MDU0NDE1LDkuOTc4NjEzMDggNy44Mjk5OTIxNCw5Ljk3OTE0MDk1IDcuNjE1NzYwMjUsOS43NjgyNzQyOCBMMi45MzExNDkxNSw1LjE1NzI1MDM4IEMyLjcxODEzNTksNC45NDc1ODMyMSAyLjM3Mjc3MzE5LDQuOTQ3NTgzMjEgMi4xNTk3NTk5NCw1LjE1NzI1MDM4IEMxLjk0Njc0NjY5LDUuMzY2OTE3NTYgMS45NDY3NDY2OSw1LjcwNjg1NTIyIDIuMTU5NzU5OTQsNS45MTY1MjI0IEw2Ljg0NDM3MTA0LDEwLjUyNzU0NjMgQzcuNDg1MTc0MjQsMTEuMTU4MjgzNiA4LjUxNjQ0OTc5LDExLjE1NjY4NTEgOS4xNTU2Mjg5NiwxMC41Mjc1NDYzIEwxMy44NDAyNDAxLDUuOTE2NTIyNCBDMTQuMDUzMjUzMyw1LjcwNjg1NTIyIDE0LjA1MzI1MzMsNS4zNjY5MTc1NiAxMy44NDAyNDAxLDUuMTU3MjUwMzggQzEzLjYyNzIyNjgsNC45NDc1ODMyMSAxMy4yODE4NjQxLDQuOTQ3NTgzMjEgMTMuMDY4ODUwOCw1LjE1NzI1MDM4IFoiLz4gIDwvZGVmcz4gIDxnIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgIDx1c2UgZmlsbC1ydWxlPSJub256ZXJvIiB4bGluazpocmVmPSIjYXJyb3dfZG93bi1hIi8+ICA8L2c+PC9zdmc+); + } @else { + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+ICA8ZGVmcz4gICAgPHBhdGggaWQ9ImRvd25hcnJvd3doaXRlLWEiIGQ9Ik0xMy4wNjg4NTA4LDUuMTU3MjUwMzggTDguMzg0MjM5NzUsOS43NjgyNzQyOCBDOC4xNzA1NDQxNSw5Ljk3ODYxMzA4IDcuODI5OTkyMTQsOS45NzkxNDA5NSA3LjYxNTc2MDI1LDkuNzY4Mjc0MjggTDIuOTMxMTQ5MTUsNS4xNTcyNTAzOCBDMi43MTgxMzU5LDQuOTQ3NTgzMjEgMi4zNzI3NzMxOSw0Ljk0NzU4MzIxIDIuMTU5NzU5OTQsNS4xNTcyNTAzOCBDMS45NDY3NDY2OSw1LjM2NjkxNzU2IDEuOTQ2NzQ2NjksNS43MDY4NTUyMiAyLjE1OTc1OTk0LDUuOTE2NTIyNCBMNi44NDQzNzEwNCwxMC41Mjc1NDYzIEM3LjQ4NTE3NDI0LDExLjE1ODI4MzYgOC41MTY0NDk3OSwxMS4xNTY2ODUxIDkuMTU1NjI4OTYsMTAuNTI3NTQ2MyBMMTMuODQwMjQwMSw1LjkxNjUyMjQgQzE0LjA1MzI1MzMsNS43MDY4NTUyMiAxNC4wNTMyNTMzLDUuMzY2OTE3NTYgMTMuODQwMjQwMSw1LjE1NzI1MDM4IEMxMy42MjcyMjY4LDQuOTQ3NTgzMjEgMTMuMjgxODY0MSw0Ljk0NzU4MzIxIDEzLjA2ODg1MDgsNS4xNTcyNTAzOCBaIi8+ICA8L2RlZnM+ICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICA8dXNlIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgeGxpbms6aHJlZj0iI2Rvd25hcnJvd3doaXRlLWEiLz4gIDwvZz48L3N2Zz4=); + } +} + +// The only "new" css in this component is a wrapper class for dealing with shadows. +// This is mostly here so that we can provide an inline version that doesn't have the +// shadows and depth. +.euiDatePicker { + .euiFormControlLayout { + height: auto; + } + + &.euiDatePicker--shadow { + .react-datepicker-popper { + @include euiBottomShadowMedium; + + border: $euiBorderThin; + background-color: $euiColorEmptyShade; + border-radius: 0 0 $euiBorderRadius $euiBorderRadius; + } + + // If the shadow is on, and it is inline, we need to put the shadow on the datepicker + // itself rather than the popper. + &.euiDatePicker--inline { + .react-datepicker { + @include euiBottomShadowMedium; + + border: $euiBorderThin; + background-color: $euiColorEmptyShade; + border-radius: $euiBorderRadius; + } + } + } +} + +// .react-datepicker-wrapper { +// } + +.react-datepicker { + @include euiFont; + font-size: $euiFontSizeXS; + color: $euiColorFullShade; + display: flex; + position: relative; + border-radius: $euiBorderRadius; +} + +// When in time only mode we make the dropdown look more like the combo box styling. +.react-datepicker--time-only { + + .react-datepicker__time-container { + + .react-datepicker__time { + + .react-datepicker__time-box { + width: 100%; + + .react-datepicker__time-list li.react-datepicker__time-list-item { + font-size: $euiFontSizeS; + text-align: left; + padding-left: $euiSizeXL + $euiSizeXS; + padding-right: $euiSizeXL + $euiSizeXS; + color: $euiTextColor; + + &.react-datepicker__time-list-item--selected { + color: $euiColorGhost; + } + + &.react-datepicker__time-list-item--disabled{ + color: $euiColorDisabledText + } + } + } + } + } + + + .react-datepicker__time-container { + border-left: 0; + } + + // .react-datepicker__triangle { + // } + // .react-datepicker__time { + // } + // .react-datepicker__time-box { + // } +} + +// .react-datepicker__triangle { +// } + +.euiDatePicker.euiDatePicker--shadow .react-datepicker-popper { + z-index: $euiZContentMenu; + animation: euiAnimFadeIn $euiAnimSpeedFast ease-in; + + &[data-placement^="bottom"] { + + // .react-datepicker__triangle { + // } + } + + &[data-placement^="top"] { + @include euiBottomShadowFlat; + + border-radius: $euiBorderRadius $euiBorderRadius 0 0; + + // .react-datepicker__triangle { + // } + } + + &[data-placement^="right"] { + margin-left: 0; + + // .react-datepicker__triangle { + // } + } + + &[data-placement^="left"] { + margin-right: 0; + + // .react-datepicker__triangle { + // } + } +} + +.react-datepicker__header { + text-align: center; + border-top-left-radius: $euiBorderRadius; + border-top-right-radius: $euiBorderRadius; + + &--time { + display: none; + } +} + +.react-datepicker__header__dropdown { + padding: $euiSize 0 $euiSizeS 0; +} + +.react-datepicker__year-dropdown-container--select, +.react-datepicker__month-dropdown-container--select, +.react-datepicker__month-year-dropdown-container--select, +.react-datepicker__year-dropdown-container--scroll, +.react-datepicker__month-dropdown-container--scroll, +.react-datepicker__month-year-dropdown-container--scroll { + display: inline-block; + margin: 0 $euiSizeXS; +} + +.react-datepicker__current-month, +.react-datepicker-time__header { + display: none; +} + +.react-datepicker-time__header { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.react-datepicker__navigation { + cursor: pointer; + position: absolute; + // Pixel pushing because these are icons against text + top: $euiSize + ($euiSizeXS / 2); + width: 0; + padding: 0; + z-index: 1; + text-indent: -999em; + overflow: hidden; + + &--previous { + @include datePickerArrow; + left: $euiSize + $euiSizeXS; + height: $euiSize; + width: $euiSize; + transform: rotate(90deg); + transition: transform $euiAnimSpeedExtraFast ease-in-out; + + &:hover, &:focus { + border-radius: $euiBorderRadius; + transform: scale(1.2) rotate(90deg); + } + + &:hover { + background-color: $euiColorLightestShade; + box-shadow: 0 0 0 ($euiSizeXS / 2) $euiColorLightestShade; + } + + &:focus { + background-color: $euiFocusBackgroundColor; + box-shadow: 0 0 0 ($euiSizeXS / 2) $euiFocusBackgroundColor; + } + + &--disabled, + &--disabled:hover { + cursor: not-allowed ; + opacity: .2; + } + } + + &--next { + @include datePickerArrow; + // Pixel value because of some padding on the icon + right: 20px; + height: $euiSize; + width: $euiSize; + transform: rotate(-90deg); + + &--with-time:not(&--with-today-button) { + // This a pixel value against the width of the cal. It needs + // to be left because the timepicker adds more width + left: 248px; + } + + &:hover, &:focus { + border-radius: $euiBorderRadius; + transform: scale(1.2) rotate(-90deg); + } + + &:hover { + background-color: $euiColorLightestShade; + box-shadow: 0 0 0 ($euiSizeXS / 2) $euiColorLightestShade; + } + + &:focus { + background-color: $euiFocusBackgroundColor; + box-shadow: 0 0 0 ($euiSizeXS / 2) $euiFocusBackgroundColor; + } + + &--disabled, + &--disabled:hover { + cursor: not-allowed ; + opacity: .2; + } + } + + &--years { + position: relative; + top: 0; + display: block; + margin-left: auto; + margin-right: auto; + + &-previous { + top: $euiSizeXS; + border-top-color: $euiColorLightestShade; + + &:hover { + border-top-color: darken($euiColorLightestShade, 10%); + } + } + + &-upcoming { + top: -$euiSizeXS; + border-bottom-color: $euiColorLightestShade; + + &:hover { + border-bottom-color: darken($euiColorLightestShade, 10%); + } + } + } +} + +// .react-datepicker__month-container { +// } + +.react-datepicker__month { + margin: 0 $euiSize $euiSize $euiSize; + text-align: center; + border-radius: $euiBorderRadius; +} + +.react-datepicker__time-container { + border-left: $euiBorderColor; + width: auto; + display: flex; + padding: $euiSize 0; + border-radius: 0 $euiBorderRadius $euiBorderRadius 0; + flex-grow: 1; + + // &--with-today-button { + // } + + .react-datepicker__time { + position: relative; + flex-grow: 1; + display: flex; + padding-left: $euiSizeXS; + flex-direction: column; + + .react-datepicker__time-box { + width: auto; + display: flex; + flex-direction: column; + flex-grow: 1; + + ul.react-datepicker__time-list { + @include euiScrollBar; + height: 204px !important; + display: flex; + flex-direction: column; + flex-grow: 1; + overflow-y: auto; + align-items: center; + + li.react-datepicker__time-list-item { + padding: $euiSizeXS $euiSizeS; + margin-bottom: $euiSizeXS; + text-align: right; + color: $euiColorDarkShade; + white-space: nowrap; + // IE needs this to fix collapsing flex + line-height: $euiSizeM; + + &:hover, + &:focus { + cursor: pointer; + text-decoration: underline; + } + &--selected { + background-color: $euiColorPrimary; + color: white; + border-radius: $euiBorderRadius / 2; + &:hover { + background-color: $euiColorPrimary; + } + } + &--disabled { + color: $euiColorLightShade; + + &:hover { + cursor: not-allowed; + text-decoration: none; + background-color: transparent; + } + } + } + } + } + } +} + +.react-datepicker__week-number { + color: $euiColorLightestShade; + display: inline-block; + width: $euiSizeXL; + line-height: $euiSizeXL - $euiSizeXS; + text-align: center; + margin: 0 $euiSizeXS; + &.react-datepicker__week-number--clickable { + cursor: pointer; + &:hover { + border-radius: $euiBorderRadius; + background-color: $euiColorEmptyShade; + } + } +} + +.react-datepicker__day-names, +.react-datepicker__week { + white-space: nowrap; +} + +.react-datepicker__day-name, +.react-datepicker__day, +.react-datepicker__time-name { + color: $euiColorFullShade; + display: inline-block; + width: $euiSizeXL; + line-height: $euiSizeXL - $euiSizeXS; + text-align: center; + margin: 0 $euiSizeXS / 2; +} + +.react-datepicker__day-name { + color: $euiColorDarkShade; + text-transform: uppercase; +} + +.react-datepicker__day { + cursor: pointer; + border: solid 2px transparent; + transition: transform $euiAnimSpeedExtraFast ease-in-out; + + &:hover:not(&--disabled) { + text-decoration: underline; + font-weight: $euiFontWeightBold; + transform: scale(1.2); + } + + &--today { + font-weight: bold; + color: $euiColorPrimary; + } + &--outside-month { + color: $euiColorDarkShade; + } + + &--highlighted { + border-radius: $euiBorderRadius; + background-color: $euiColorSecondary; + color: $euiColorGhost; + + &:hover { + background-color: darken($euiColorSecondary, 5%); + } + } + + &--in-range { + background-color: transparentize($euiColorPrimary, .9); + color: $euiColorFullShade; + border-radius: 0; + border-top: solid 6px $euiColorEmptyShade; + border-bottom: solid 6px $euiColorEmptyShade; + border-right: none; + border-left: none; + line-height: $euiSizeL - $euiSizeXS; + } + + &--selected, + &--in-selecting-range { + height: $euiSizeXL; + margin: 0 $euiSizeXS / 2; + border-radius: $euiBorderRadius; + background-color: $euiColorPrimary; + line-height: $euiSizeL + $euiSizeXS; + border: solid $euiSizeXS / 2 $euiColorPrimary; + color: $euiColorGhost; + + &:hover { + background-color: darken($euiColorPrimary, 5%); + } + } + + &--keyboard-selected { + border-radius: $euiBorderRadius; + border: solid $euiSizeXS / 2 $euiColorPrimary; + font-weight: $euiFontWeightBold; + + &:hover { + background-color: darken($euiColorPrimary, 5%); + color: $euiColorGhost; + } + } + + &--in-selecting-range:not(&--in-range) { + background-color: rgba($euiColorPrimary, 0.5); + } + + &--in-range:not(&--in-selecting-range) { + .react-datepicker__month--selecting-range & { + background-color: $euiColorEmptyShade; + color: $euiColorFullShade; + } + } + + &--disabled { + cursor: not-allowed; + color: $euiColorLightShade; + + &:hover { + background-color: transparent; + } + } +} + +.react-datepicker__input-container { + position: relative; +} + +.react-datepicker__year-read-view { + font-weight: $euiFontWeightLight; + color: $euiColorDarkShade; +} + +.react-datepicker__month-read-view { + font-weight: $euiFontWeightMedium; +} + +.react-datepicker__year-read-view, +.react-datepicker__month-read-view, +.react-datepicker__month-year-read-view { + font-size: $euiFontSizeL; + + &:hover { + cursor: pointer; + color: $euiColorPrimary; + + .react-datepicker__year-read-view--down-arrow, + .react-datepicker__month-read-view--down-arrow { + border-top-color: darken($euiColorLightestShade, 10%); + } + } + + &--down-arrow { + display: none; + } +} + +.react-datepicker__year-dropdown, +.react-datepicker__month-dropdown, +.react-datepicker__month-year-dropdown { + background-color: $euiColorEmptyShade; + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 1; + text-align: center; + border-radius: $euiBorderRadius; + display: flex; + flex-wrap: wrap; + animation: euiAnimFadeIn $euiAnimSpeedFast ease-in; + align-content: space-around; + align-items: center; + padding: $euiSizeS; + + + &:hover { + cursor: pointer; + } + + // &--scrollable { + // height: 150px; + // overflow-y: scroll; + // } +} + +// Strike that, reverse it Willy Wonka style +.react-datepicker__year-dropdown { + flex-wrap: wrap-reverse; + flex-direction: row-reverse; + justify-content: flex-end; +} + +.react-datepicker__year-option { + &:first-of-type, + &:last-of-type { + display: none; + } +} + +.react-datepicker__year-option, +.react-datepicker__month-option, +.react-datepicker__month-year-option { + font-size: $euiFontSizeXS; + padding: $euiSizeS; + color: $euiColorDarkestShade; + flex-basis: 33.3%; + + &:first-of-type { + border-top-left-radius: $euiBorderRadius; + border-top-right-radius: $euiBorderRadius; + } + + &:last-of-type { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + border-bottom-left-radius: $euiBorderRadius; + border-bottom-right-radius: $euiBorderRadius; + } + + &:hover { + background-color: $euiColorLightestShade; + + .react-datepicker__navigation--years-upcoming { + border-bottom-color: darken($euiColorLightestShade, 10%); + } + + .react-datepicker__navigation--years-previous { + border-top-color: darken($euiColorLightestShade, 10%); + } + } + + &--selected { + display: none; + } +} + +.react-datepicker__screenReaderOnly { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; +} + +.react-datepicker__year-option--preselected, +.react-datepicker__month-option--preselected { + background: $euiFocusBackgroundColor; +} + +.react-datepicker__year-option--selected_year.react-datepicker__year-option--preselected, +.react-datepicker__month-option--selected_month.react-datepicker__month-option--preselected{ + background: $euiColorPrimary; +} + +.react-datepicker__time-list-item--preselected, +.react-datepicker__year-option--preselected, +.react-datepicker__month-option--preselected { + background: darken($euiFocusBackgroundColor, 5%); +} + +.react-datepicker__time-container--focus { + background: $euiFocusBackgroundColor; +} + +.react-datepicker__month-read-view:focus, +.react-datepicker__year-read-view:focus { + text-decoration: underline; +} + +.react-datepicker__month--accessible:focus { + background: $euiFocusBackgroundColor; + + .react-datepicker__day--in-range:not(.react-datepicker__day--selected) { + border-top-color: $euiFocusBackgroundColor; + border-bottom-color: $euiFocusBackgroundColor; + } +} +.react-datepicker__navigation:focus { + background-color: $euiFocusBackgroundColor; +} + +// These selectors are not a typo. react-datepicker has a bug where these selectors +// output as "--selected_year". Sass has trouble compiling .--selected_year, so instead +// we use this generic selector get around it. +.react-datepicker__year-option--selected_year, +.react-datepicker__month-option--selected_month { + background: $euiColorPrimary; + color: $euiColorEmptyShade; + font-weight: $euiFontWeightBold; + border-radius: $euiBorderRadius; +} + +.react-datepicker__focusTrap { + display: flex; +} + +// 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. + +// .react-datepicker__close-icon { +// background-color: transparent; +// border: 0; +// cursor: pointer; +// display: inline-block; +// height: 0; +// outline: 0; +// padding: 0; +// vertical-align: middle; +// +// &::after { +// background-color: $euiColorPrimary; +// border-radius: 50%; +// bottom: 0; +// box-sizing: border-box; +// color: #fff; +// content: "\00d7"; +// cursor: pointer; +// font-size: 12px; +// height: 16px; +// width: 16px; +// line-height: 1; +// margin: -8px auto 0; +// padding: 2px; +// position: absolute; +// right: 7px; +// text-align: center; +// top: 50%; +// } +// } +// +// .react-datepicker__today-button { +// background: $euiColorEmptyShade; +// border-top: 1px solid $euiBorderColor; +// cursor: pointer; +// text-align: center; +// font-weight: bold; +// padding: 5px 0; +// clear: left; +// } +// +// .react-datepicker__portal { +// position: fixed; +// width: 100vw; +// height: 100vh; +// background-color: rgba(0, 0, 0, 0.8); +// left: 0; +// top: 0; +// justify-content: center; +// align-items: center; +// display: flex; +// z-index: 2147483647; +// +// .react-datepicker__day-name, +// .react-datepicker__day, +// .react-datepicker__time-name { +// width: 3rem; +// line-height: 3rem; +// } +// +// // Resize for small screens +// @media (max-width: 400px), (max-height: 550px) { +// .react-datepicker__day-name, +// .react-datepicker__day, +// .react-datepicker__time-name { +// width: 2rem; +// line-height: 2rem; +// } +// } +// +// .react-datepicker__current-month, +// .react-datepicker-time__header { +// font-size: $euiFontSizeXS * 1.8; +// } +// +// .react-datepicker__navigation { +// border: 1.8 * $euiSize solid transparent; +// } +// +// .react-datepicker__navigation--previous { +// border-right-color: $euiColorLightestShade; +// +// &:hover { +// border-right-color: darken($euiColorLightestShade, 10%); +// } +// +// &--disabled, +// &--disabled:hover { +// border-right-color: $datepicker__navigation-disabled-color; +// cursor: default; +// } +// } +// +// .react-datepicker__navigation--next { +// border-left-color: $euiColorLightestShade; +// +// &:hover { +// border-left-color: darken($euiColorLightestShade, 10%); +// } +// +// &--disabled, +// &--disabled:hover { +// border-left-color: $datepicker__navigation-disabled-color; +// cursor: default; +// } +// } +// } diff --git a/src/global_styling/react_date_picker/_index.scss b/src/global_styling/react_date_picker/_index.scss new file mode 100644 index 00000000000..48ea2f99771 --- /dev/null +++ b/src/global_styling/react_date_picker/_index.scss @@ -0,0 +1,2 @@ +@import 'variables'; +@import 'date_picker'; diff --git a/src/global_styling/react_date_picker/_variables.scss b/src/global_styling/react_date_picker/_variables.scss new file mode 100644 index 00000000000..6a5abd4e528 --- /dev/null +++ b/src/global_styling/react_date_picker/_variables.scss @@ -0,0 +1 @@ +$euiDatePickerCalendarWidth: 284px; \ No newline at end of file diff --git a/src/themes/eui-amsterdam/global_styling/index.scss b/src/themes/eui-amsterdam/global_styling/index.scss index 9df71159436..36432e23208 100644 --- a/src/themes/eui-amsterdam/global_styling/index.scss +++ b/src/themes/eui-amsterdam/global_styling/index.scss @@ -14,3 +14,6 @@ // The reset file makes use of variables and mixins @import 'reset/index'; + +// Customization of the React Date Picker +@import 'react_date_picker/index'; diff --git a/src/components/date_picker/_date_picker.scss b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker.scss similarity index 96% rename from src/components/date_picker/_date_picker.scss rename to src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker.scss index d1f7ace7eea..ca8881324c9 100644 --- a/src/components/date_picker/_date_picker.scss +++ b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker.scss @@ -60,16 +60,16 @@ z-index: $euiZContentMenu; animation: euiAnimFadeIn $euiAnimSpeedFast ease-in; - &[data-placement^="top"] { + &[data-placement^='top'] { @include euiBottomShadowFlat; border-radius: $euiBorderRadius $euiBorderRadius 0 0; } - &[data-placement^="right"] { + &[data-placement^='right'] { margin-left: 0; } - &[data-placement^="left"] { + &[data-placement^='left'] { margin-right: 0; } } @@ -116,6 +116,6 @@ } .react-datepicker__time-box { - margin-top: 0; + margin-top: 0; } } diff --git a/src/components/date_picker/_date_picker_days.scss b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_days.scss similarity index 87% rename from src/components/date_picker/_date_picker_days.scss rename to src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_days.scss index 87edfe782e7..dd449d9d8b1 100644 --- a/src/components/date_picker/_date_picker_days.scss +++ b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_days.scss @@ -18,17 +18,10 @@ */ - @mixin reactDatePickerDisabled($transparency: .9) { - $percentConversion: $transparency * 100%; - $backgroundColorSimulated: mix($euiPageBackgroundColor, $euiButtonColorDisabled, 90%); - background-color: transparentize($euiButtonColorDisabled, .9); - color: makeDisabledContrastColor($euiButtonColorDisabled, $backgroundColorSimulated); - } - - .react-datepicker__day-names, - .react-datepicker__week { - white-space: nowrap; - } +.react-datepicker__day-names, +.react-datepicker__week { + white-space: nowrap; +} .react-datepicker__day-name, .react-datepicker__day { @@ -80,6 +73,7 @@ } &--in-range:not(&--range-start):not(&--range-end):not(:hover) { + // sass-lint:disable-block indentation box-shadow: -2px 0 transparentize($euiColorPrimary, $euiButtonDefaultTransparency), 2px 0 transparentize($euiColorPrimary, $euiButtonDefaultTransparency); border-radius: 0; @@ -87,6 +81,7 @@ &:first-of-type { box-shadow: 2px 0 transparentize($euiColorPrimary, $euiButtonDefaultTransparency); } + &:last-of-type { box-shadow: -2px 0 transparentize($euiColorPrimary, $euiButtonDefaultTransparency); } @@ -108,7 +103,7 @@ // } &--in-selecting-range:not(&--in-range) { - background-color: rgba($euiColorDanger, 0.5); //todo + background-color: transparentize($euiColorDanger, .5); //todo } &--disabled, diff --git a/src/components/date_picker/_date_picker_month_year.scss b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_month_year.scss similarity index 75% rename from src/components/date_picker/_date_picker_month_year.scss rename to src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_month_year.scss index 9c9ecbd6c50..071aeefe448 100644 --- a/src/components/date_picker/_date_picker_month_year.scss +++ b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_month_year.scss @@ -23,6 +23,7 @@ .react-datepicker__header__dropdown { padding: $euiDatePickerGap * 2; display: flex; + // sass-lint:disable-block no-misspelled-properties gap: $euiDatePickerGap; position: absolute; top: 0; @@ -34,37 +35,37 @@ /** * Make the top selectors look like select inputs */ - .react-datepicker__year-read-view, - .react-datepicker__month-read-view, - .react-datepicker__month-year-read-view { - @include euiFormControlStyle($borderOnly: false, $includeStates: false, $includeSizes: false); - @include euiFormControlStyleCompressed($borderOnly: true, $includeStates: false); - height: $euiFormControlCompressedHeight; - font-weight: $euiFontWeightMedium; - display: flex; - flex-direction: row-reverse; - justify-content: space-between; - align-items: center; - - &:hover { - cursor: pointer; - text-decoration: underline; - } - - &--down-arrow { - @include datePicker__caret; - right: $euiSizeS; - height: $euiSizeM; - width: $euiSizeM; - display: inline-block; - background-size: cover; - } - - &--selected-month, - &--selected-year { - @include euiTextTruncate; - } - } +.react-datepicker__year-read-view, +.react-datepicker__month-read-view, +.react-datepicker__month-year-read-view { + @include euiFormControlStyle($borderOnly: false, $includeStates: false, $includeSizes: false); + @include euiFormControlStyleCompressed($borderOnly: true, $includeStates: false); + height: $euiFormControlCompressedHeight; + font-weight: $euiFontWeightMedium; + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + align-items: center; + + &:hover { + cursor: pointer; + text-decoration: underline; + } + + &--down-arrow { + @include datePickerCaret; + right: $euiSizeS; + height: $euiSizeM; + width: $euiSizeM; + display: inline-block; + background-size: cover; + } + + &--selected-month, + &--selected-year { + @include euiTextTruncate; + } +} .react-datepicker__year-dropdown-container, .react-datepicker__month-dropdown-container { @@ -75,7 +76,7 @@ // Using the unnamed div for the years dropdown because we want to be able to control the // flex direction of the years but you can't put overflow on a flex group -.react-datepicker__year-dropdown-container > div:not([class*="read-view"]), +.react-datepicker__year-dropdown-container > div:not([class*='read-view']), .react-datepicker__month-dropdown { @include euiYScroll; @include euiBottomShadowSmall; @@ -87,7 +88,7 @@ min-width: $euiDatePickerMinControlWidth; } -.react-datepicker__year-dropdown-container > div:not([class*="read-view"]) { +.react-datepicker__year-dropdown-container > div:not([class*='read-view']) { // Reverse the direction of the years so that earlier is first .react-datepicker__year-dropdown { padding: $euiSizeXS; @@ -146,7 +147,7 @@ } .react-datepicker__year-option--selected_year, -.react-datepicker__month-option--selected_month{ +.react-datepicker__month-option--selected_month { &, &:hover { @include euiButtonDefaultStyle($euiColorPrimary, false, 0); diff --git a/src/components/date_picker/_date_picker_navigation.scss b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_navigation.scss similarity index 95% rename from src/components/date_picker/_date_picker_navigation.scss rename to src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_navigation.scss index 989b1bd3631..b88cfe3983e 100644 --- a/src/components/date_picker/_date_picker_navigation.scss +++ b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_navigation.scss @@ -1,6 +1,6 @@ .react-datepicker__navigation--next, .react-datepicker__navigation--previous { - @include datePicker__arrow; + @include datePickerArrow; cursor: pointer; position: absolute; top: $euiDatePickerGap * 2; diff --git a/src/components/date_picker/_date_picker_times.scss b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_times.scss similarity index 94% rename from src/components/date_picker/_date_picker_times.scss rename to src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_times.scss index c647b069e5b..1716d61f90e 100644 --- a/src/components/date_picker/_date_picker_times.scss +++ b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_times.scss @@ -32,9 +32,9 @@ .react-datepicker__time-list { @include euiScrollBar; // Set the min-height with the following, but it should stretch to fit if the container is larger - height: 200px !important; // Overrides inline height + height: 200px !important; // sass-lint:disable-line no-important display: flex; - gap: $euiSizeXS; + gap: $euiSizeXS; // sass-lint:disable-line no-misspelled-properties flex-direction: column; flex-grow: 1; overflow-y: auto; diff --git a/src/themes/eui-amsterdam/global_styling/react_date_picker/_index.scss b/src/themes/eui-amsterdam/global_styling/react_date_picker/_index.scss new file mode 100644 index 00000000000..3e68b4b3189 --- /dev/null +++ b/src/themes/eui-amsterdam/global_styling/react_date_picker/_index.scss @@ -0,0 +1,8 @@ +@import 'variables'; +@import 'mixins'; + +@import 'date_picker_days'; +@import 'date_picker_times'; +@import 'date_picker_month_year'; +@import 'date_picker_navigation'; +@import 'date_picker'; diff --git a/src/components/date_picker/_mixins.scss b/src/themes/eui-amsterdam/global_styling/react_date_picker/_mixins.scss similarity index 97% rename from src/components/date_picker/_mixins.scss rename to src/themes/eui-amsterdam/global_styling/react_date_picker/_mixins.scss index e707eb31bff..44cf8a91571 100644 --- a/src/components/date_picker/_mixins.scss +++ b/src/themes/eui-amsterdam/global_styling/react_date_picker/_mixins.scss @@ -1,6 +1,7 @@ // Because we don't have control over react-datepicker's dom we use SVG URIs for the navigation arrows. // There is one for light and dark. -@mixin datePicker__caret { +// sass-lint:disable-block url-quotes +@mixin datePickerCaret { background-position: center; @if (lightness($euiColorEmptyShade) > 50) { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+ICA8ZGVmcz4gICAgPHBhdGggaWQ9ImFycm93X2Rvd24tYSIgZD0iTTEzLjA2ODg1MDgsNS4xNTcyNTAzOCBMOC4zODQyMzk3NSw5Ljc2ODI3NDI4IEM4LjE3MDU0NDE1LDkuOTc4NjEzMDggNy44Mjk5OTIxNCw5Ljk3OTE0MDk1IDcuNjE1NzYwMjUsOS43NjgyNzQyOCBMMi45MzExNDkxNSw1LjE1NzI1MDM4IEMyLjcxODEzNTksNC45NDc1ODMyMSAyLjM3Mjc3MzE5LDQuOTQ3NTgzMjEgMi4xNTk3NTk5NCw1LjE1NzI1MDM4IEMxLjk0Njc0NjY5LDUuMzY2OTE3NTYgMS45NDY3NDY2OSw1LjcwNjg1NTIyIDIuMTU5NzU5OTQsNS45MTY1MjI0IEw2Ljg0NDM3MTA0LDEwLjUyNzU0NjMgQzcuNDg1MTc0MjQsMTEuMTU4MjgzNiA4LjUxNjQ0OTc5LDExLjE1NjY4NTEgOS4xNTU2Mjg5NiwxMC41Mjc1NDYzIEwxMy44NDAyNDAxLDUuOTE2NTIyNCBDMTQuMDUzMjUzMyw1LjcwNjg1NTIyIDE0LjA1MzI1MzMsNS4zNjY5MTc1NiAxMy44NDAyNDAxLDUuMTU3MjUwMzggQzEzLjYyNzIyNjgsNC45NDc1ODMyMSAxMy4yODE4NjQxLDQuOTQ3NTgzMjEgMTMuMDY4ODUwOCw1LjE1NzI1MDM4IFoiLz4gIDwvZGVmcz4gIDxnIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgIDx1c2UgZmlsbC1ydWxlPSJub256ZXJvIiB4bGluazpocmVmPSIjYXJyb3dfZG93bi1hIi8+ICA8L2c+PC9zdmc+); @@ -9,7 +10,7 @@ } } -@mixin datePicker__arrow { +@mixin datePickerArrow { background-position: center; @if (lightness($euiColorEmptyShade) > 50) { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iIzM0Mzc0MSIgZD0iTTExLjY5MiA3SDMuNTU2QzMuMjQ5IDcgMyA3LjIyNCAzIDcuNXMuMjQ5LjUuNTU2LjVoOC4xMzZsLTQuMDk2IDQuMDk2YS41LjUgMCAwMC43MDcuNzA3bDQuMjQzLTQuMjQyYy4yNTgtLjI1OS40MDMtLjU4Ny40MzMtLjkyNWEuNDU0LjQ1NCAwIDAwMC0uMjcyIDEuNDk0IDEuNDk0IDAgMDAtLjQzMy0uOTI1TDguMzAzIDIuMTk3YS41LjUgMCAxMC0uNzA3LjcwN0wxMS42OTIgN3oiLz48L3N2Zz4=); diff --git a/src/components/date_picker/_variables.scss b/src/themes/eui-amsterdam/global_styling/react_date_picker/_variables.scss similarity index 100% rename from src/components/date_picker/_variables.scss rename to src/themes/eui-amsterdam/global_styling/react_date_picker/_variables.scss From 6f67e43d6acf797e7c3d37eada4331975b377087 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 3 Aug 2021 15:07:30 -0400 Subject: [PATCH 09/14] Fix contrast warnings and fullWidth layout --- src/global_styling/functions/_colors.scss | 2 +- .../global_styling/mixins/_button.scss | 32 +++++++++++++++---- .../react_date_picker/_date_picker.scss | 4 +++ .../react_date_picker/_date_picker_days.scss | 25 ++++++++++++--- .../_date_picker_month_year.scss | 5 ++- .../react_date_picker/_date_picker_times.scss | 8 ++--- 6 files changed, 57 insertions(+), 19 deletions(-) diff --git a/src/global_styling/functions/_colors.scss b/src/global_styling/functions/_colors.scss index 6fa3b9bd842..25834e10add 100644 --- a/src/global_styling/functions/_colors.scss +++ b/src/global_styling/functions/_colors.scss @@ -72,7 +72,7 @@ // Given $color, decide whether $lightText or $darkText should be used as the text color // ex: chooseLightOrDarkText(#EEE, #FFF, #000) would return #000 because it has // a higher contrast than #FFF against a #EEE background. -@function chooseLightOrDarkText($background, $lightText, $darkText) { +@function chooseLightOrDarkText($background, $lightText: $euiColorGhost, $darkText: $euiColorInk) { $lightContrast: contrastRatio($background, $lightText); $darkContrast: contrastRatio($background, $darkText); diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_button.scss b/src/themes/eui-amsterdam/global_styling/mixins/_button.scss index 753dc41faf3..ac0bd3e5e29 100644 --- a/src/themes/eui-amsterdam/global_styling/mixins/_button.scss +++ b/src/themes/eui-amsterdam/global_styling/mixins/_button.scss @@ -15,24 +15,44 @@ } } -// Creates the Amsterdam style of button with a transparent background -@mixin euiButtonDefaultStyle($color, $includeStates: true, $transparency: $euiButtonDefaultTransparency) { +/* + * Creates the Amsterdam style of button with a transparent background + */ +@mixin euiButtonDefaultStyle($color: 'primary', $includeStates: true, $transparency: $euiButtonDefaultTransparency) { + $backgroundColor: $color; + + @if (map-has-key($euiButtonTypes, $color)) { + $backgroundColor: map-get($euiButtonTypes, $color); + } + $percentConversion: $transparency * 100%; // This variable simulates the possibly darkest background the button could be on // Simulates the 20% opaque color on top of the page background color - $backgroundColorSimulated: mix($euiPageBackgroundColor, $color, $percentConversion); + $backgroundColorSimulated: mix($euiPageBackgroundColor, $backgroundColor, $percentConversion); // Then we can calculate the darkest text color needed - color: makeHighContrastColor($color, $backgroundColorSimulated); + color: makeHighContrastColor($backgroundColor, $backgroundColorSimulated); // But still use transparency - background-color: transparentize($color, $transparency); + background-color: transparentize($backgroundColor, $transparency); @if ($includeStates) { &:not([class*='isDisabled']) { &:hover, &:focus { // Duplicated from inert state simply to override default theme - background-color: transparentize($color, $transparency); + background-color: transparentize($backgroundColor, $transparency); } } } } + +// Creates the Amsterdam style of button with a transparent background +@mixin euiButtonFillStyle($color: 'primary') { + $backgroundColor: $color; + + @if (map-has-key($euiButtonTypes, $color)) { + $backgroundColor: map-get($euiButtonTypes, $color); + } + + background-color: $backgroundColor; + color: chooseLightOrDarkText($backgroundColor); +} diff --git a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker.scss b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker.scss index ca8881324c9..b2f80923a5e 100644 --- a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker.scss +++ b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker.scss @@ -99,6 +99,10 @@ @include euiTextTruncate; } +.react-datepicker__month-container { + flex-grow: 1; +} + .react-datepicker__month { text-align: center; border-radius: $euiBorderRadius; diff --git a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_days.scss b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_days.scss index dd449d9d8b1..98bda95d252 100644 --- a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_days.scss +++ b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_days.scss @@ -21,6 +21,9 @@ .react-datepicker__day-names, .react-datepicker__week { white-space: nowrap; + display: flex; + justify-content: space-between; + flex-grow: 1; } .react-datepicker__day-name, @@ -44,7 +47,7 @@ transition: transform $euiAnimSpeedExtraFast ease-in-out; &:hover { - @include euiButtonDefaultStyle($euiColorPrimary, false); + @include euiButtonDefaultStyle('primary', false); text-decoration: underline; @include euiCanAnimate { @@ -64,15 +67,17 @@ &--highlighted, &--highlighted:hover { - @include euiButtonDefaultStyle($euiColorSuccess, false); + @include euiButtonDefaultStyle('success', false); } &--in-range, &--in-range:hover { - @include euiButtonDefaultStyle($euiColorPrimary, false); + @include euiButtonDefaultStyle('primary', false); } - &--in-range:not(&--range-start):not(&--range-end):not(:hover) { + // Ranges use 2 side box-shadows that are the same as the button style + // to create a solid blue highlight, only rounded at the ends + &--in-range:not(&--selected):not(:hover) { // sass-lint:disable-block indentation box-shadow: -2px 0 transparentize($euiColorPrimary, $euiButtonDefaultTransparency), 2px 0 transparentize($euiColorPrimary, $euiButtonDefaultTransparency); @@ -87,11 +92,21 @@ } } + &--in-range#{&}--range-start:not(&--selected) { + border-top-left-radius: $euiBorderRadiusSmall; + border-bottom-left-radius: $euiBorderRadiusSmall; + } + + &--in-range#{&}--range-end:not(&--selected) { + border-top-right-radius: $euiBorderRadiusSmall; + border-bottom-right-radius: $euiBorderRadiusSmall; + } + &--selected, &--in-selecting-range, &--selected:hover, &--in-selecting-range:hover { - @include euiButtonDefaultStyle($euiColorPrimary, false, 0); + @include euiButtonFillStyle; } // THis doesn't seem to mean keyboard focus diff --git a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_month_year.scss b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_month_year.scss index 071aeefe448..9c9c7acb104 100644 --- a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_month_year.scss +++ b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_month_year.scss @@ -71,7 +71,7 @@ .react-datepicker__month-dropdown-container { display: inline-block; flex-grow: 1; - max-width: $euiDatePickerMinControlWidth; + max-width: $euiFormMaxWidth; } // Using the unnamed div for the years dropdown because we want to be able to control the @@ -100,7 +100,6 @@ .react-datepicker__month-dropdown-container { flex-grow: 2; - max-width: $euiDatePickerMaxControlWidth; .react-datepicker__month-dropdown { padding: $euiSizeXS; @@ -150,6 +149,6 @@ .react-datepicker__month-option--selected_month { &, &:hover { - @include euiButtonDefaultStyle($euiColorPrimary, false, 0); + @include euiButtonFillStyle; } } diff --git a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_times.scss b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_times.scss index 1716d61f90e..c2ba2d2e7f4 100644 --- a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_times.scss +++ b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_times.scss @@ -26,13 +26,13 @@ display: flex; flex-direction: column; flex-grow: 1; - margin-top: $euiSizeXXL; + margin-top: $euiSizeXL; } .react-datepicker__time-list { @include euiScrollBar; // Set the min-height with the following, but it should stretch to fit if the container is larger - height: 200px !important; // sass-lint:disable-line no-important + height: 100px !important; // sass-lint:disable-line no-important display: flex; gap: $euiSizeXS; // sass-lint:disable-line no-misspelled-properties flex-direction: column; @@ -66,7 +66,7 @@ &--injected, &--injected:hover { - @include euiButtonDefaultStyle($euiColorSuccess, false); + @include euiButtonDefaultStyle('success', false); } &--preselected, @@ -76,7 +76,7 @@ &--selected, &--selected:hover { - @include euiButtonDefaultStyle($euiColorPrimary, false, 0); + @include euiButtonFillStyle; } } From db3563da53331984b06189c383eb90be63fb1248 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 4 Aug 2021 10:58:54 -0400 Subject: [PATCH 10/14] More cleanup --- src-docs/src/views/icon/icon_example.js | 7 + .../__snapshots__/date_picker.test.tsx.snap | 1602 ++++++++--------- .../date_picker_range.test.tsx.snap | 86 +- src/components/date_picker/date_picker.tsx | 108 +- .../react_date_picker/_date_picker.scss | 4 - .../_date_picker_month_year.scss | 2 + 6 files changed, 900 insertions(+), 909 deletions(-) diff --git a/src-docs/src/views/icon/icon_example.js b/src-docs/src/views/icon/icon_example.js index ba12d9b6d91..1a1b5589f7d 100644 --- a/src-docs/src/views/icon/icon_example.js +++ b/src-docs/src/views/icon/icon_example.js @@ -79,6 +79,13 @@ export const IconExample = { use the default size of{' '} size="m".

+

+ If you would like to contribute to our growing list of glyphs, + you can follow{' '} + + these guidelines + . +

), demo: , diff --git a/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap b/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap index 863934edc64..5e194cd2d9c 100644 --- a/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap +++ b/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap @@ -1,22 +1,20 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiDatePicker is rendered 1`] = ` - - + - - - - - - - - + + + + + + `; @@ -64,742 +62,738 @@ exports[`EuiDatePicker is rendered 2`] = ` `; exports[`EuiDatePicker localization accepts the locale prop 1`] = ` - - +
+ + +
- - -
+ 7월 2019 +
+
- 7월 2019 -
-
-
- - - 7월 - -
-
-
-
+ - - - 2019 - -
+ 7월 +
- 일 -
-
- 월 -
-
- 화 -
-
- 수 -
-
- 목 -
-
- 금 -
-
- 토 + + + 2019 +
-
-
- 30 -
-
- 1 -
-
- 2 -
-
- 3 -
-
- 4 -
-
- 5 -
-
- 6 -
+ 일
-
- 7 -
-
- 8 -
-
- 9 -
-
- 10 -
-
- 11 -
-
- 12 -
-
- 13 -
+ 월
-
- 14 -
-
- 15 -
-
- 16 -
-
- 17 -
-
- 18 -
-
- 19 -
-
- 20 -
+ 화
-
- 21 -
-
- 22 -
-
- 23 -
-
- 24 -
-
- 25 -
-
- 26 -
-
- 27 -
+ 수
-
- 28 -
-
- 29 -
-
- 30 -
-
- 31 -
-
- 1 -
-
- 2 -
-
- 3 -
+ 목 +
+
+ 금 +
+
+ 토
-
-
-
- - -`; - -exports[`EuiDatePicker localization inherits locale from context 1`] = ` - - -
-
-
- - -
+
- juillet 2019 + 30
-
-
- - - juillet - -
-
-
-
- - - 2019 - -
-
+ 1
-
- lu -
-
- ma -
-
- me -
-
- je -
-
- ve -
-
- sa -
-
- di -
+ 2 +
+
+ 3 +
+
+ 4 +
+
+ 5 +
+
+ 6
-
-
- 1 -
-
- 2 -
-
- 3 -
-
- 4 -
-
- 5 -
-
- 6 -
-
- 7 -
+ 7
-
- 8 -
-
- 9 -
-
- 10 -
-
- 11 -
-
- 12 -
-
- 13 -
-
- 14 -
+ 8
-
- 15 -
-
- 16 -
-
- 17 -
-
- 18 -
-
- 19 -
-
- 20 -
-
- 21 -
+ 9
-
- 22 -
-
- 23 -
-
- 24 -
-
- 25 -
-
- 26 -
-
- 27 -
-
- 28 -
+ 10
+ 11 +
+
+ 12 +
+
+ 13 +
+
+
+
+ 14 +
+
+ 15 +
+
+ 16 +
+
+ 17 +
+
+ 18 +
+
+ 19 +
+
+ 20 +
+
+
+
+ 21 +
+
+ 22 +
+
+ 23 +
+
+ 24 +
+
+ 25 +
+
+ 26 +
+
+ 27 +
+
+
+
+ 28 +
+
+ 29 +
+
+ 30 +
+
+ 31 +
+
+ 1 +
+
+ 2 +
+
+ 3 +
+
+
+
+
+
+
+ +`; + +exports[`EuiDatePicker localization inherits locale from context 1`] = ` + +
+
+
+
+ + +
+
+
+ juillet 2019 +
+
+
- 29 -
-
- 30 -
-
- 31 -
-
- 1 -
-
- 2 -
-
- 3 + + + juillet +
+
+
- 4 + + + 2019 +
+
+
+ lu +
+
+ ma +
+
+ me +
+
+ je +
+
+ ve +
+
+ sa +
+
+ di +
+
+
+
+ +
+
+ 1 +
+
+ 2 +
+
+ 3 +
+
+ 4 +
+
+ 5 +
+
+ 6 +
+
+ 7 +
+
+
+
+ 8 +
+
+ 9 +
+
+ 10 +
+
+ 11 +
+
+ 12 +
+
+ 13 +
+
+ 14 +
+
+
+
+ 15 +
+
+ 16 +
+
+ 17 +
+
+ 18 +
+
+ 19 +
+
+ 20 +
+
+ 21 +
+
+
+
+ 22 +
+
+ 23 +
+
+ 24 +
+
+ 25 +
+
+ 26 +
+
+ 27 +
+
+ 28 +
+
+
+
+ 29 +
+
+ 30 +
+
+ 31 +
+
+ 1 +
+
+ 2 +
+
+ 3 +
+
+ 4 +
+
- +
`; @@ -820,163 +814,161 @@ exports[`EuiDatePicker popoverPlacement top-end is rendered 1`] = ` showTimeSelect={false} timeFormat="hh:mm A" > - - + -
-
- - - + + + +
+ } + > + + + - -
- } - > - - -
-
- -
+
- - - - - - - + + + + + + + +
-
- - + - -
- -
+ /> + + + +
+
- - +
+ `; diff --git a/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap b/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap index f1e5a1906e3..567ec535352 100644 --- a/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap +++ b/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap @@ -6,46 +6,44 @@ exports[`EuiDatePickerRange is rendered 1`] = ` class="euiDatePickerRange testClass1 testClass2" data-test-subj="test subject string" > - - +
-
- -
+
-
+
+ - -
+ aria-hidden="true" + class="euiFormControlLayoutCustomIcon__icon" + data-euiicon-type="calendar" + /> +
- +
- - +
-
- -
+
- +
`; diff --git a/src/components/date_picker/date_picker.tsx b/src/components/date_picker/date_picker.tsx index 1fb8d0d2f8b..c58579b25b5 100644 --- a/src/components/date_picker/date_picker.tsx +++ b/src/components/date_picker/date_picker.tsx @@ -213,7 +213,9 @@ export class EuiDatePicker extends Component<_EuiDatePickerProps> { // This is easy enough to do. It can conflict with isLoading state this.props.isClearable || // There is no reason to launch the datepicker in its own modal. Can always build these ourselves - this.props.withPortal + this.props.withPortal || + // Causes Error: Cannot read property 'clone' of undefined + this.props.showMonthYearDropdown ) { return ( @@ -223,60 +225,56 @@ export class EuiDatePicker extends Component<_EuiDatePickerProps> { } return ( - - - - - - {({ locale: contextLocale }) => { - return ( - - ); - }} - - - - + + + + + {({ locale: contextLocale }) => { + return ( + + ); + }} + + + ); } diff --git a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker.scss b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker.scss index b2f80923a5e..6c2ca436370 100644 --- a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker.scss +++ b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker.scss @@ -108,10 +108,6 @@ border-radius: $euiBorderRadius; } -.react-datepicker__input-container { - position: relative; -} - // On small screens put the times at the bottom @include euiBreakpoint('xs') { .react-datepicker__focusTrap, diff --git a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_month_year.scss b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_month_year.scss index 9c9c7acb104..9c79ebe05b5 100644 --- a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_month_year.scss +++ b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_month_year.scss @@ -69,6 +69,7 @@ .react-datepicker__year-dropdown-container, .react-datepicker__month-dropdown-container { + position: relative; display: inline-block; flex-grow: 1; max-width: $euiFormMaxWidth; @@ -86,6 +87,7 @@ z-index: 1; border-radius: $euiBorderRadius; min-width: $euiDatePickerMinControlWidth; + width: 100%; } .react-datepicker__year-dropdown-container > div:not([class*='read-view']) { From b2b704b5623f8aa97030d63d472352f107e63d9b Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 11 Aug 2021 16:13:43 -0400 Subject: [PATCH 11/14] Cleanup --- .../__snapshots__/date_picker_range.test.tsx.snap | 2 +- src/components/date_picker/_index.scss | 3 ++- src/components/date_picker/date_picker_range.tsx | 2 +- .../global_styling/mixins/_button.scss | 4 +++- .../react_date_picker/_date_picker.scss | 13 ------------- .../react_date_picker/_date_picker_days.scss | 8 -------- 6 files changed, 7 insertions(+), 25 deletions(-) diff --git a/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap b/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap index 567ec535352..bf6bdc15fc7 100644 --- a/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap +++ b/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap @@ -71,7 +71,7 @@ exports[`EuiDatePickerRange is rendered 1`] = ` > diff --git a/src/components/date_picker/_index.scss b/src/components/date_picker/_index.scss index 343fed98937..962d4bc7df3 100644 --- a/src/components/date_picker/_index.scss +++ b/src/components/date_picker/_index.scss @@ -1,3 +1,4 @@ -// Uses some form mixins +// The react-date-picker overrides exists in the global_styling folder +// to easily style differently between default and Amsterdam theme @import 'date_picker_range'; @import 'super_date_picker/index'; diff --git a/src/components/date_picker/date_picker_range.tsx b/src/components/date_picker/date_picker_range.tsx index 83652cbfbcb..82fd1ef5c2f 100644 --- a/src/components/date_picker/date_picker_range.tsx +++ b/src/components/date_picker/date_picker_range.tsx @@ -96,7 +96,7 @@ export const EuiDatePickerRange: FunctionComponent = ({ popoverPlacement: 'bottom-end', className: classNames( 'euiDatePickerRange__end', - startDateControl.props + startDateControl.props.className ), } ); diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_button.scss b/src/themes/eui-amsterdam/global_styling/mixins/_button.scss index ac0bd3e5e29..fd24f97ef85 100644 --- a/src/themes/eui-amsterdam/global_styling/mixins/_button.scss +++ b/src/themes/eui-amsterdam/global_styling/mixins/_button.scss @@ -45,7 +45,9 @@ } } -// Creates the Amsterdam style of button with a transparent background +/* + * Creates the Amsterdam style of fill button + */ @mixin euiButtonFillStyle($color: 'primary') { $backgroundColor: $color; diff --git a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker.scss b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker.scss index 6c2ca436370..64699dbfbc3 100644 --- a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker.scss +++ b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker.scss @@ -1,21 +1,8 @@ /* This file is a heavy retheme of react-datepicker's Sass as of v1.4.0 ** https://github.com/Hacker0x01/react-datepicker -** -** In places where features were disabled, I've commented out the original Sass -** selectors rather than removing it so we can better understand what's changed. -** Commented out selectors that don't have properties indicate that we are not -** using those dom elements for styling of any kind. For example, react-datepicker -** has lots of pointer arrows attached to its popovers, but we choose not to render -** then in any way. -** -** Similarly, you will also find several times where we use display: none to -** completely remove extraneous UI (they had some overly obvious legends for example). */ -// The only "new" css in this component is a wrapper class for dealing with shadows. -// This is mostly here so that we can provide an inline version that doesn't have the -// shadows and depth. .euiDatePicker { .euiFormControlLayout { height: auto; diff --git a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_days.scss b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_days.scss index 98bda95d252..fbffbad2697 100644 --- a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_days.scss +++ b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_days.scss @@ -109,14 +109,6 @@ @include euiButtonFillStyle; } - // THis doesn't seem to mean keyboard focus - // &--keyboard-selected, - // &--keyboard-selected:hover { - // @include euiButtonDefaultStyle($euiColorPrimary); - // font-weight: $euiFontWeightBold; - // outline: $euiFocusRingSize solid currentColor; - // } - &--in-selecting-range:not(&--in-range) { background-color: transparentize($euiColorDanger, .5); //todo } From 35d8e088eca92e02bac18243e7381ba14c2e20e4 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 11 Aug 2021 16:18:22 -0400 Subject: [PATCH 12/14] cl --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b7f015c7e9e..3f27b36d725 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,10 @@ - Fixed usage of `outsideClickCloses` prop of `EuiFlyout` ([#4986](https://github.com/elastic/eui/pull/4986)) +**Theme: Amsterdam** + +- Updated styles for `EuiDatePicker` ([#5000](https://github.com/elastic/eui/pull/5000)) + ## [`37.1.0`](https://github.com/elastic/eui/tree/v37.1.0) - Added `isDisabled` prop to `EuiFormRow` that disables the child field element ([#4908](https://github.com/elastic/eui/pull/4908)) From b15e17dd08a08a732b1280bcf54099034567dd0c Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 11 Aug 2021 17:17:49 -0400 Subject: [PATCH 13/14] =?UTF-8?q?=F0=9F=A4=9EFixing=20Safari=20and=20Firef?= =?UTF-8?q?ox?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../react_date_picker/_date_picker.scss | 24 ++++++++------ .../react_date_picker/_date_picker_times.scss | 32 ++++++++++++------- 2 files changed, 35 insertions(+), 21 deletions(-) diff --git a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker.scss b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker.scss index 64699dbfbc3..8d0c82870dd 100644 --- a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker.scss +++ b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker.scss @@ -4,10 +4,19 @@ .euiDatePicker { + display: block; + .euiFormControlLayout { height: auto; } + &.euiDatePicker--inline { + .euiFormControlLayout { + display: inline-block; + width: auto; + } + } + &.euiDatePicker--shadow { .react-datepicker-popper { @include euiBottomShadowMedium; @@ -25,11 +34,6 @@ background-color: $euiColorEmptyShade; border-radius: $euiBorderRadius; } - - .euiFormControlLayout { - display: inline-block; - width: auto; - } } } } @@ -76,20 +80,20 @@ justify-content: center; } +.react-datepicker__month-container { + flex-grow: 1; + margin-top: $euiSizeXL + $euiDatePickerGap; +} + .react-datepicker__header { display: flex; flex-direction: column; - margin-top: $euiSizeXL + $euiDatePickerGap; } .react-datepicker-time__header { @include euiTextTruncate; } -.react-datepicker__month-container { - flex-grow: 1; -} - .react-datepicker__month { text-align: center; border-radius: $euiBorderRadius; diff --git a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_times.scss b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_times.scss index c2ba2d2e7f4..15862086139 100644 --- a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_times.scss +++ b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_times.scss @@ -7,10 +7,21 @@ * --injected */ +.react-datepicker__header--time { + display: none; +} + .react-datepicker__time-container { + @include euiYScroll; + height: auto; + overflow-x: hidden; + margin-top: $euiSizeXL + $euiDatePickerGap; display: flex; - padding: 8px 0 0 8px; flex-grow: 1; + background-color: $euiPageBackgroundColor; + padding: $euiSizeXS $euiSizeM; + border-radius: $euiBorderRadius; + margin-left: $euiSizeS; } .react-datepicker__time { @@ -20,24 +31,18 @@ } .react-datepicker__time-box { - background-color: $euiPageBackgroundColor; - padding: $euiSizeXS; - border-radius: $euiBorderRadius; display: flex; flex-direction: column; flex-grow: 1; - margin-top: $euiSizeXL; } .react-datepicker__time-list { - @include euiScrollBar; // Set the min-height with the following, but it should stretch to fit if the container is larger height: 100px !important; // sass-lint:disable-line no-important display: flex; gap: $euiSizeXS; // sass-lint:disable-line no-misspelled-properties flex-direction: column; flex-grow: 1; - overflow-y: auto; align-items: center; } @@ -83,13 +88,18 @@ // When in time only mode we make the dropdown look more like the combo box styling. .react-datepicker--time-only { - .react-datepicker__time-container { - padding: 0; + @include euiYScroll; + + .react-datepicker__time-list { + // sass-lint:disable-block no-important + height: 204px !important; } - .react-datepicker__time-box { + .react-datepicker__time-container { + padding: 0 $euiSize 0 0; + overflow: initial; background-color: transparent; - margin-top: 0; + margin: 0; } .react-datepicker__time-list-item { From b56836c2fd193e73b683a558b3e36d7e83338cf3 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 17 Aug 2021 15:14:47 -0400 Subject: [PATCH 14/14] Fix time list focust states --- .../react_date_picker/_date_picker_times.scss | 40 +++++++++---------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_times.scss b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_times.scss index 15862086139..5c63b8f75a8 100644 --- a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_times.scss +++ b/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_times.scss @@ -1,7 +1,7 @@ /** * LEGEND * __time-list-item : - * --preselected : closest current time but not selected + * --preselected : closest current time but not selected (also applied when using arrow keys to indicate focus) * --selected * --disabled * --injected @@ -12,24 +12,23 @@ } .react-datepicker__time-container { - @include euiYScroll; - height: auto; - overflow-x: hidden; - margin-top: $euiSizeXL + $euiDatePickerGap; + border-left: $euiBorderColor; + width: auto; display: flex; + margin-top: $euiSizeXL + ($euiDatePickerGap * 2); + margin-left: $euiSizeS; flex-grow: 1; background-color: $euiPageBackgroundColor; - padding: $euiSizeXS $euiSizeM; border-radius: $euiBorderRadius; - margin-left: $euiSizeS; -} -.react-datepicker__time { - flex-grow: 1; - display: flex; - flex-direction: column; + &--focus { + .react-datepicker__time-list-item--preselected { + text-decoration: underline; + } + } } +.react-datepicker__time, .react-datepicker__time-box { display: flex; flex-direction: column; @@ -37,13 +36,15 @@ } .react-datepicker__time-list { + @include euiYScroll; + padding: $euiSizeXS $euiSizeM; // Set the min-height with the following, but it should stretch to fit if the container is larger height: 100px !important; // sass-lint:disable-line no-important display: flex; - gap: $euiSizeXS; // sass-lint:disable-line no-misspelled-properties flex-direction: column; flex-grow: 1; align-items: center; + gap: $euiSizeXS; // sass-lint:disable-line no-misspelled-properties } // Mainly a copy/paste of .euiEmptyButton @@ -88,20 +89,17 @@ // When in time only mode we make the dropdown look more like the combo box styling. .react-datepicker--time-only { - @include euiYScroll; - - .react-datepicker__time-list { - // sass-lint:disable-block no-important - height: 204px !important; - } + padding: 0 !important; // sass-lint:disable-line no-important .react-datepicker__time-container { - padding: 0 $euiSize 0 0; - overflow: initial; background-color: transparent; margin: 0; } + .react-datepicker__time-list { + height: 204px !important; // sass-lint:disable-line no-important + } + .react-datepicker__time-list-item { font-size: $euiFontSizeS; min-width: $euiButtonMinWidth;