Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

[Feature branch] Added EuiFormControlLayoutDelimited component #2117

Conversation

cchaos
Copy link
Contributor

@cchaos cchaos commented Jul 12, 2019

feature/compressed-editor-controls

This is a pre-cursor to being able to build out this type of control:

Screen Shot 2019-07-12 at 13 29 44 PM

EuiFormControlLayoutRange EuiFormControlLayoutDelimited

Basically inherits all the same properties from EuiFormControlLayout but doesn't accept children only a startControl and endControl.

Screen Shot 2019-07-12 at 13 02 27 PM

And compressed (which is still the old style for now)

Screen Shot 2019-07-12 at 12 56 56 PM

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 Will be added via the feature branch PR
    - [ ] 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

cchaos and others added 6 commits July 12, 2019 12:14
* Updated form control border color

* Slighly more transparent

* change sass var name to $euiFormBorderOpaqueColor
As a layout helper component to create date and number ranges
Remove unused className and unnecessary TS type complexity it created.
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.

JS/TS Code changes LGTM - looks like euiFormControlLayout__child--noStyle hasn't been a valid style for a while? Definitely cleans up EuiFormControlLayout a ton!

There's a failing SCSS lint warning

src/components/form/field_number/_field_number.scss Outdated Show resolved Hide resolved
Copy link
Contributor

@snide snide left a comment

Choose a reason for hiding this comment

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

Small bit on flexibility (which is likely easy to change). I dunno if that would require changing the name of the overall component? EuiFormControlLayoutDelimited?

I did a scan of the code and did some resizing tests. All looked good there.

cchaos added 3 commits July 18, 2019 17:36
EuiFormControlLayoutRange -> EuiFormControlLayoutDelimited
@cchaos cchaos requested a review from snide July 18, 2019 22:08
@cchaos
Copy link
Contributor Author

cchaos commented Jul 23, 2019

@snide Can you take another look?

@cchaos cchaos force-pushed the feature/compressed-editor-controls branch from b5e0db1 to ec1524e Compare July 23, 2019 02:06
Copy link
Contributor

@snide snide left a comment

Choose a reason for hiding this comment

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

Excellent. Thanks for making that change.

@cchaos cchaos merged commit c9914d1 into elastic:feature/compressed-editor-controls Jul 23, 2019
@cchaos cchaos deleted the into-feature/form-layout-range branch July 23, 2019 14:19
@cchaos cchaos changed the title [Feature branch] Added EuiFormControlLayoutRange component [Feature branch] Added EuiFormControlLayoutDelimited component Jul 23, 2019
cchaos added a commit that referenced this pull request Jul 24, 2019
As a layout helper component to create date and number ranges

* Added Sass var for `$euiFormControlLayoutGroupInputHeight` and compressed version
cchaos added a commit that referenced this pull request Jul 29, 2019
As a layout helper component to create date and number ranges

* Added Sass var for `$euiFormControlLayoutGroupInputHeight` and compressed version
cchaos added a commit that referenced this pull request Aug 13, 2019
As a layout helper component to create date and number ranges

* Added Sass var for `$euiFormControlLayoutGroupInputHeight` and compressed version
cchaos added a commit that referenced this pull request Aug 29, 2019
As a layout helper component to create date and number ranges

* Added Sass var for `$euiFormControlLayoutGroupInputHeight` and compressed version
cchaos added a commit that referenced this pull request Aug 30, 2019
As a layout helper component to create date and number ranges

* Added Sass var for `$euiFormControlLayoutGroupInputHeight` and compressed version
@snide snide mentioned this pull request Sep 5, 2019
13 tasks
cchaos added a commit that referenced this pull request Sep 9, 2019
As a layout helper component to create date and number ranges

* Added Sass var for `$euiFormControlLayoutGroupInputHeight` and compressed version
thompsongl pushed a commit to thompsongl/eui that referenced this pull request Sep 10, 2019
…ic#2117)

As a layout helper component to create date and number ranges

* Added Sass var for `$euiFormControlLayoutGroupInputHeight` and compressed version
cchaos added a commit that referenced this pull request Sep 11, 2019
* [Feature branch] Updated form control border color (#2114)

* Updated form control border color

* Slighly more transparent

* change sass var name to $euiFormBorderOpaqueColor

* [Feature branch]  Added EuiFormControlLayoutDelimited component (#2117)

As a layout helper component to create date and number ranges

* Added Sass var for `$euiFormControlLayoutGroupInputHeight` and compressed version

* [Feature branch] Compressed EuiSuperSelect dropdown (#2155)

- Added truncation example
- Added max-height

* [Feature Branch] Update compressed form control styles (#2174)

* Updated compressed visual style in mixin
* Compressed updates to from control groups
* Fix compressed state overrides
* Reduce horizontal padding for compressed
* Icons and button icons in input groups
* Added a compressed option for from` euiFormControlLayoutPadding`
* Added compressed padding for inputs with icons
* Fix readonly & compressed input groups
* Fix group heights
* Update file picker with new compressed styles
* Fix delimited compressed and fullwidth styles
* Fixed EuiComboBox
* Added reduced padding for EuiColorPicker
* Fixed date pickers
* Variables for border-radius

* [Feature branch] Compressed form rows (#2181)

* Removed padding from compressed form row
* Create mixin for `euiTextBreakWord`
* Added option for horizontal compressed style

Breaking: `compressed` is no longer passed to children

* [Docs] Final compressed doc example changes
* Fix combobox height
* Fixed usages where spacers were needed
* Deprecated `displayOnly` for `display: center`

* Fix snap

* Into feature/compressed editor docs (#2295)

* Adding a shared component for the different states of each form control
* New docs section for compressed
* Added `columnCompressedSwitch` to display type of EuiFormRow for better alignment of switch style controls
* Account for tooltips as pre/appends
* Allow passing a string as the pre/appends and it automatically wraps it in a form label
* Made all EuiSuperDatePicker form controls compressed (in popover)
* Connection prepend/appends with input via `htmlFor`
* Allowing passing of `style` to EuiColorPickerSwatch
* Allow an array of strings a pre/append

* [Feature Branch] Add support for EuiRange in a dropdown with input (#2179)

* Compressed EuiRange step 1: Decrease overall height of the range when compressed
* Compressed EuiRange step 2:
- Attempt at single range compressed input with popover
- Fixes z-indexes being too high
- Fix up widths
* Compressed EuiRange step 3: Dual range now supports dropdown style
* Fix for delimited
* Fix full-width delimited
* Added `controlOnly` prop to EuiFieldNumber
* Finalize styles of input only ranges
- Needed some fixes to EuiFormControlLayoutDelimited
* Open popover on focus
* dual range respond to resize events when in showInputOnly mode
* use callback instead of resizeObserver
* ie11 focus fix
* use focusout instead of blur

* Added some display toggles for ranges and ranges with dropdowns to the complex example

Has issues

* Fix console errors

* Some fixes

- Ranges use div spacers between slider and input instead of margin
- Pre/Appends are restrictred to 50% width and truncated

* [feature/compressed-editor-controls] EuiRange + EuiFormRow (#2321)

* focus management

* add euiformrow to some examples

* use prevention flag

* Add `controlOnly` prop to EuiFieldText

* Update TS defs

* Some docs fixes

* Fix inherit screen reader ability of EuiRange

By moving the id to the input if it exists

* Add dual range to complex example
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants