Into feature/compressed editor docs #2295

cchaos · 2019-09-06T02:32:32Z

feature/compressed-editor-controls

1. Adds documentation for the compressed form controls and layout

There is a new section under Forms called Compressed forms which goes through some explanations of why and how to use compressed controls.

2. Adds a `DisplayToggles` wrapping component for input controls in docs

This handles toggling of all of the states of a particular control.

3. Other

Allow passing a string as the prepend and appends and it automatically wraps it in a form label and connects it to the form control via htmlFor.
Updated all the EuiSuperDatePicker inputs inside the popovers to be compressed.

Checklist

Checked in dark mode
Checked in mobile
Checked in IE11 and Firefox
Props have proper autodocs
Added documentation examples
Added or updated jest tests
~~[ ] Checked for breaking changes and labeled appropriately~~
Checked for accessibility including keyboard-only and screenreader modes
~~[ ] A changelog entry exists and is marked appropriately~~ Will be added the the feature branch

For better alignment of switch style controls

…it in a form label

cchaos · 2019-09-06T02:36:12Z

I've started to create a complex example based on our mocks @ryankeairns and found that there are still some outstanding issues. I've started a list/table in #2286 to track these as follow-up PR's

ryankeairns

This is looking really great!

My comments are mostly suggestions around wording, along with one visual nit pictured below, so I've marked these as comments vs requested changes.

src-docs/src/views/form_compressed/form_compressed_example.js

src-docs/src/views/form_compressed/form_compressed.js

src-docs/src/views/form_compressed/form_compressed_example.js

cchaos · 2019-09-06T13:54:33Z

@ryankeairns Thank you! I will start working on your suggestions, all viable!

And yes, that spacing with the slider will be fixed when #2179 gets merged as it also fixes the height of the compressed state of ranges which currently are still the same height as the normal form controls.

cchaos · 2019-09-06T14:25:47Z

@ryankeairns I think I've addressed all your suggestions.

thompsongl

Just some nits

Looks good!

thompsongl · 2019-09-06T16:45:26Z

src-docs/src/views/color_picker/kitchen_sink.js

-        </EuiFormRow>
-      </React.Fragment>
+      /* DisplayToggles wrapper for Docs only */
+      <DisplayToggles canLoading={false}>


src-docs/src/views/form_compressed/complex_example.js

src-docs/src/views/form_compressed/form_compressed_example.js

snide

Only comment in here is that the JS demo is a little less direct then it used to be. We should in a near future, follow-up PR add snippets to these controls (that's more a call to the team entire).

snide · 2019-09-06T17:45:08Z

src-docs/src/views/form_controls/shared.js

+  EuiSpacer,
+} from '../../../../src/components';
+
+export class DisplayToggles extends Component {


i'd expect this file to be called display_toggles.js

ryankeairns

Thank you!!

One little misspell snuck by... "Do no use..." :)

cchaos · 2019-09-06T18:05:16Z

Only comment in here is that the JS demo is a little less direct then it used to be. We should in a near future, follow-up PR add snippets to these controls (that's more a call to the team entire).

Kind of... It was hard to sift through six component implementations to find the one you want. I would hope they can rely on the toggle names or props table. But we can survey ;)

ryankeairns

LGTM

* 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] 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

cchaos added 17 commits August 30, 2019 15:16

Adding a shared component for the different states of each form control

c9ca269

Move toggles to popover

665207a

Rename and place toggles beneath control

36d48b7

cleanup

3a9daac

New docs section for compressed

f92b383

Added columnCompressedSwitch to display type of EuiFormRow

91209a7

For better alignment of switch style controls

Add help section

c1fedce

Account for tooltips as pre/appends

8f358a7

Finalize help section

854ec6d

Allow passing a string as the pre/appends and it automatically wraps …

53d993b

…it in a form label

Added DisplayToggles for more form controls

067bc5e

Added Complex example

972839a

Made all EuiSuperDatePicker form controls compressed (in popover)

0f3af1c

Connection prepend/appends with input via htmlFor

b68c29b

Allowing passing of style to EuiColorPickerSwatch

f51b621

More complex examples and accessibility

bc4da69

Allow an array of strings a pre/append

da6e316

cchaos requested review from thompsongl, ryankeairns and snide September 6, 2019 02:36

ryankeairns reviewed Sep 6, 2019

View reviewed changes

Addressing PR comments, mostly wording

3961a1f

cchaos requested a review from ryankeairns September 6, 2019 14:25

thompsongl approved these changes Sep 6, 2019

View reviewed changes

More PR review updates

db729e0

snide approved these changes Sep 6, 2019

View reviewed changes

ryankeairns requested changes Sep 6, 2019

View reviewed changes

Rename file

1c1f02c

cchaos requested a review from ryankeairns September 6, 2019 18:05

ryankeairns approved these changes Sep 6, 2019

View reviewed changes

cchaos merged commit 1dfd030 into elastic:feature/compressed-editor-controls Sep 6, 2019

cchaos deleted the into-feature/compressed-editor-docs branch September 6, 2019 18:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Into feature/compressed editor docs #2295

Into feature/compressed editor docs #2295

cchaos commented Sep 6, 2019 •

edited

Loading

cchaos commented Sep 6, 2019

ryankeairns left a comment

cchaos commented Sep 6, 2019

cchaos commented Sep 6, 2019

thompsongl left a comment

thompsongl Sep 6, 2019

snide left a comment

snide Sep 6, 2019

ryankeairns left a comment

cchaos commented Sep 6, 2019

ryankeairns left a comment

Into feature/compressed editor docs #2295

Into feature/compressed editor docs #2295

Conversation

cchaos commented Sep 6, 2019 • edited Loading

feature/compressed-editor-controls

1. Adds documentation for the compressed form controls and layout

2. Adds a DisplayToggles wrapping component for input controls in docs

3. Other

Checklist

cchaos commented Sep 6, 2019

ryankeairns left a comment

Choose a reason for hiding this comment

cchaos commented Sep 6, 2019

cchaos commented Sep 6, 2019

thompsongl left a comment

Choose a reason for hiding this comment

thompsongl Sep 6, 2019

Choose a reason for hiding this comment

snide left a comment

Choose a reason for hiding this comment

snide Sep 6, 2019

Choose a reason for hiding this comment

ryankeairns left a comment

Choose a reason for hiding this comment

cchaos commented Sep 6, 2019

ryankeairns left a comment

Choose a reason for hiding this comment

cchaos commented Sep 6, 2019 •

edited

Loading

2. Adds a `DisplayToggles` wrapping component for input controls in docs