Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[EuiSuperDatePicker] add showApplyButton prop #1399

Merged
merged 7 commits into from
Jan 3, 2019
Merged

[EuiSuperDatePicker] add showApplyButton prop #1399

merged 7 commits into from
Jan 3, 2019

Conversation

nreese
Copy link
Contributor

@nreese nreese commented Dec 28, 2018 •
edited
Loading

Summary

Kibana would like to include EuiSuperDatePicker within a UI that also contains a query bar. Showing the Update button within EuiSuperDatePicker does not make sense in this case because there should be a single apply button for all components, not an apply button for each component.

This PR adds the prop showApplyButton to EuiSuperDatePicker. Set showApplyButton to false to immediately invoke onTimeChange for all start and end changes. This will allow parent components to embed EuiSuperDatePicker into more complex UIs and design there own Apply logic.

Checklist

  • This was checked in mobile
  • This was checked in IE11
  • This was checked in dark mode
  • Any props added have proper autodocs
  • Documentation examples were added
  • A changelog entry exists and is marked appropriately
  • This was checked for breaking changes and labeled appropriately
  • Jest tests were updated or added to match the most common scenarios
  • This was checked against keyboard-only and screenreader scenarios
  • This required updates to Framer X components

@nreese
Copy link
Contributor Author

nreese commented Dec 28, 2018

@cchaos @chandlerprall @snide
I have hit a road block with this PR. The problem is that the absolute and relative tabs do not have an apply button in there design so all changes immediately change the datetime value. In the use case where showApplyButton is false, a user needs to finish interacting with the absolute and relative tabs and trigger the change. What do you think about adding an apply button to those tabs? Any other ideas on how to make the flow better when showApplyButton is false?

@snide
Copy link
Contributor

snide commented Dec 28, 2018

For context. We realized that using this in kibana we'd need to use it in concert with @Bargs' filter bar. We don't want to have two update buttons in use, so the idea was to allow the datepicker to handle the button part optionally. I've set a meeting for next week to figure out how we tie these two components together, but let them live separately as well.

@nreese
Copy link
Contributor Author

nreese commented Jan 2, 2019

@chandlerprall @cchaos I don't think any redesign is needed for the absolute and relative tabs any more. This PR is ready for review

@snide snide mentioned this pull request Jan 2, 2019
Closed
8 tasks
cchaos
cchaos reviewed Jan 2, 2019
View reviewed changes
src-docs/src/views/date_picker/super_date_picker.js Outdated
<EuiFormRow
label="start time"
>
<EuiFieldText
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you move these inputs to below the actual component and make them readOnly instead of disabled?

src/components/date_picker/super_date_picker/super_date_picker.js Outdated
@@ -236,6 +258,10 @@ export class EuiSuperDatePicker extends Component {
}

renderUpdateButton = () => {
if (!this.props.showApplyButton) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I got really confused by the naming of this prop 'showApplyButton' with it meaning hiding this "apply" button:

Can you rename it to 'showUpdateButton' instead?

cchaos
cchaos reviewed Jan 2, 2019
View reviewed changes
CHANGELOG.md Outdated
@@ -1,8 +1,8 @@
## [`master`](https://github.com/elastic/eui/tree/master)

No public interface changes since `6.0.1`.
- Added `showApplyButton` prop to `EuiSuperDatePicker` ([#1399](https://github.com/elastic/eui/pull/1399))
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changelog needs updating too

cchaos
cchaos approved these changes Jan 2, 2019
View reviewed changes
Copy link
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LG, thanks!

chandlerprall
chandlerprall approved these changes Jan 3, 2019
View reviewed changes
Copy link
Contributor

@chandlerprall chandlerprall left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes LGTM and work as expected in docs

@chandlerprall
Copy link
Contributor

jenkins test this

@nreese nreese merged commit 29e07d0 into elastic:master Jan 3, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@cchaos cchaos cchaos approved these changes

@chandlerprall chandlerprall chandlerprall approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@nreese @snide @chandlerprall @cchaos