diff --git a/CHANGELOG.md b/CHANGELOG.md
index e42060b9cbf..37e3cf8ef74 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
- Added `partial` glyph to `EuiIcon` ([#2152](https://github.com/elastic/eui/pull/2152))
- Added `tall`, `fullWidth`, and `isInvalid` props to `EuiFilePicker` ([#2145](https://github.com/elastic/eui/pull/2145))
- Added exports for `react-beautiful-dnd` interfaces used by EUI components ([#2173](https://github.com/elastic/eui/pull/2173))
+- Added `isDisabled` prop & styles to `EuiSuperDatePicker` ([#2139](https://github.com/elastic/eui/pull/2139))
**Bug fixes**
diff --git a/src-docs/src/views/date_picker/super_date_picker.js b/src-docs/src/views/date_picker/super_date_picker.js
index 1375132f7cc..d92324ef9c6 100644
--- a/src-docs/src/views/date_picker/super_date_picker.js
+++ b/src-docs/src/views/date_picker/super_date_picker.js
@@ -22,6 +22,7 @@ function MyCustomQuickSelectPanel({ applyTime }) {
export default class extends Component {
state = {
recentlyUsedRanges: [],
+ isDiasabled: false,
isLoading: false,
showUpdateButton: true,
isAutoRefreshOnly: false,
@@ -87,6 +88,12 @@ export default class extends Component {
});
};
+ toggleDisabled = () => {
+ this.setState(prevState => ({
+ isDisabled: !prevState.isDisabled,
+ }));
+ };
+
toggleShowApplyButton = () => {
this.setState(prevState => ({
showUpdateButton: !prevState.showUpdateButton,
@@ -162,8 +169,15 @@ export default class extends Component {
onChange={this.toggleShowCustomQuickSelectPanel}
checked={this.state.showCustomQuickSelectPanel}
/>
+
+
Last 15 minutes
diff --git a/src/components/date_picker/super_date_picker/_super_date_picker.scss b/src/components/date_picker/super_date_picker/_super_date_picker.scss
index 0e55797c955..77de35f0803 100644
--- a/src/components/date_picker/super_date_picker/_super_date_picker.scss
+++ b/src/components/date_picker/super_date_picker/_super_date_picker.scss
@@ -33,7 +33,7 @@
justify-content: space-between;
text-align: left;
- &:hover,
+ &:not(:disabled):hover,
&:focus {
text-decoration: none;
@@ -41,6 +41,16 @@
text-decoration: underline;
}
}
+
+ &:disabled {
+ background-color: $euiFormBackgroundDisabledColor;
+ color: $euiColorDarkShade;
+ cursor: not-allowed;
+
+ .euiSuperDatePicker__prettyFormatLink {
+ display: none;
+ }
+ }
}
.euiSuperDatePicker__prettyFormatLink {
diff --git a/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss b/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss
index bf7f4815883..87602a224c9 100644
--- a/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss
+++ b/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss
@@ -32,6 +32,12 @@
background-image: euiFormControlGradient($euiColorDanger);
}
}
+
+ &:disabled {
+ background-color: $euiFormBackgroundDisabledColor;
+ color: $euiColorDarkShade;
+ cursor: default;
+ }
}
.euiDatePopoverButton--start {
diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js
index af9669db471..4c7c8561a6d 100644
--- a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js
+++ b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.js
@@ -10,6 +10,7 @@ import { EuiDatePopoverContent } from './date_popover_content';
export function EuiDatePopoverButton(props) {
const {
position,
+ isDisabled,
isInvalid,
needsUpdating,
value,
@@ -30,6 +31,7 @@ export function EuiDatePopoverButton(props) {
'euiDatePopoverButton-isSelected': isOpen,
'euiDatePopoverButton-isInvalid': isInvalid,
'euiDatePopoverButton-needsUpdating': needsUpdating,
+ 'euiDatePopoverButton-disabled': isDisabled,
},
]);
@@ -45,6 +47,7 @@ export function EuiDatePopoverButton(props) {
onClick={onPopoverToggle}
className={classes}
title={title}
+ disabled={isDisabled}
data-test-subj={`superDatePicker${position}DatePopoverButton`}
{...buttonProps}>
{formatTimeString(value, dateFormat, roundUp)}
@@ -75,6 +78,7 @@ export function EuiDatePopoverButton(props) {
EuiDatePopoverButton.propTypes = {
position: PropTypes.oneOf(['start', 'end']),
isInvalid: PropTypes.bool,
+ isDisabled: PropTypes.bool,
needsUpdating: PropTypes.bool,
value: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap
index 0c6bacfc5a7..731246ec4a5 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.js.snap
@@ -11,6 +11,7 @@ exports[`EuiQuickSelectPopover is rendered 1`] = `
data-test-subj="superDatePickerToggleQuickMenuButton"
iconSide="right"
iconType="arrowDown"
+ isDisabled={false}
onClick={[Function]}
size="xs"
textProps={
@@ -97,6 +98,7 @@ exports[`EuiQuickSelectPopover isAutoRefreshOnly 1`] = `
data-test-subj="superDatePickerToggleQuickMenuButton"
iconSide="right"
iconType="arrowDown"
+ isDisabled={false}
onClick={[Function]}
size="xs"
textProps={
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js
index 2e3c66e0e2a..25e34c2d2d6 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js
@@ -106,6 +106,7 @@ export class EuiQuickSelectPopover extends Component {
size="xs"
iconType="arrowDown"
iconSide="right"
+ isDisabled={this.props.isDisabled}
data-test-subj="superDatePickerToggleQuickMenuButton">
{
const { start, end, hasChanged, isInvalid } = this.state;
+ const { isDisabled } = this.props;
if (this.props.isAutoRefreshOnly) {
return (
@@ -309,8 +312,11 @@ export class EuiSuperDatePicker extends Component {
startDateControl={}
endDateControl={}>