-
Notifications
You must be signed in to change notification settings - Fork 842
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[EuiDatePickerRange] Add
inline display behavior; [EuiDatePicker] I…
…mprove `inline` display behavior (#6795) * [EuiDatePicker] Remove unused CSS - `.react-datepicker-popper` is no longer a class being set anywhere - shadow styles don't use a border * [EuiDatePicker] Improve `inline` display - fix `disabled` and `readOnly` styling & behavior - should match inputs and no longer be interactable - render form control icons below the datepicker - better docs - write tests (e2e for now, should likely be storybook) * [EuiDatePickerRange] Convert to emotion + remove unnecessary height style - appears to already work as-is thanks to `.euiFormControlLayoutDelimited` * [EuiDatePickerRange] Remove unused modifier classes & syntax cleanup * [EuiDatePickerRange] Use `span` wrapper to match EuiDatePicker - helps separate form control and date picker range concerns * [EuiDatePickerRange] Fix now non-working `isLoading` behavior/display toggle - due to new `span` `isLoading` needs to be specified via typescript + pulled out of `...rest` tests - reorganize w/ `describe` - add missing props tests docs - convert to TSX - fix bad `isInvalid` use from min test - remove non-working `isInvalid` from `range.tsx` - the display toggle is overriding that prop * [EuiDatePickerRange] Add `inline` and `shadow` support - use separate styles fn, since display is so different and has many extra conditions - requires a lot of resets and layout fixes - update docs examples with toggles & snippet - add unit test - but most permutations should likely be storybooks * [EuiDatePickerRange] When `inline`, remove `iconType`, `fullWidth`, and `prepend/append` display - they don't make sense to render, and the single datepicker doesn't render them either * [setup] Upgrade `@emotion` dependencies to latest - to get `@container` query support, which I'll want to use for responsive `inline` behavior * [EuiDatePickerRange] Use container queries for better `inline` responsiveness (sadly, jsdom errors on this, so we have to add another console error exclusion) * Fix `inline` snapshot to not change literally every day lol * [PR feedback] Unset `.euiFormControlLayoutDelimited`'s 1px padding * [PR feedback] Finetune container queries
- Loading branch information
Showing
23 changed files
with
1,932 additions
and
494 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import React, { useState } from 'react'; | ||
|
|
||
| import moment from 'moment'; | ||
|
|
||
| import { | ||
| EuiDatePicker, | ||
| EuiDatePickerRange, | ||
| EuiFlexGroup, | ||
| EuiSwitch, | ||
| EuiSpacer, | ||
| } from '../../../../src/components'; | ||
|
|
||
| import { DisplayToggles } from '../form_controls/display_toggles'; | ||
|
|
||
| export default () => { | ||
| const [shadow, setShadow] = useState(true); | ||
| const [showTimeSelect, setShowTimeSelect] = useState(true); | ||
|
|
||
| const [startDate, setStartDate] = useState(moment()); | ||
| const [endDate, setEndDate] = useState(moment().add(11, 'd')); | ||
|
|
||
| return ( | ||
| <> | ||
| <EuiFlexGroup> | ||
| <EuiSwitch | ||
| label="Show shadow" | ||
| checked={shadow} | ||
| onChange={() => setShadow((toggle) => !toggle)} | ||
| /> | ||
| <EuiSwitch | ||
| label="Show time select" | ||
| checked={showTimeSelect} | ||
| onChange={() => setShowTimeSelect((toggle) => !toggle)} | ||
| /> | ||
| </EuiFlexGroup> | ||
| <EuiSpacer /> | ||
| <DisplayToggles spacerSize="s" canCompressed={false} canFullWidth={false}> | ||
| <EuiDatePicker | ||
| selected={startDate} | ||
| onChange={(date) => date && setStartDate(date)} | ||
| inline | ||
| showTimeSelect={showTimeSelect} | ||
| shadow={shadow} | ||
| /> | ||
| </DisplayToggles> | ||
| <EuiSpacer /> | ||
| <DisplayToggles spacerSize="s" canCompressed={false} canFullWidth={false}> | ||
| <EuiDatePickerRange | ||
| inline | ||
| shadow={shadow} | ||
| startDateControl={ | ||
| <EuiDatePicker | ||
| aria-label="Start date" | ||
| selected={startDate} | ||
| onChange={(date) => date && setStartDate(date)} | ||
| startDate={startDate} | ||
| endDate={endDate} | ||
| showTimeSelect={showTimeSelect} | ||
| /> | ||
| } | ||
| endDateControl={ | ||
| <EuiDatePicker | ||
| aria-label="End date" | ||
| selected={endDate} | ||
| onChange={(date) => date && setEndDate(date)} | ||
| startDate={startDate} | ||
| endDate={endDate} | ||
| showTimeSelect={showTimeSelect} | ||
| /> | ||
| } | ||
| /> | ||
| </DisplayToggles> | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.