[Feature Branch] Update compressed form control styles #2174

cchaos · 2019-07-26T19:45:32Z

feature/compressed-editor-controls

Primarily updating the existing `--compressed` styles to match the new style

I also fixed a few styles for the form control layouts as well as allow for more types of elements to be passed via append/prepend.

Docs

My last commit is [TEMP], it adds compressed to all the examples in Forms/Controls so it's easier to test and evaluate these styles. I'll revert that commit before margins.

Components

I'll go through EUI's usages of any compressed controls in a separate PR.

Breaking!

But in style only. Now compressed=true is a completely different style for forms.

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 get added in the feature branch

chandlerprall · 2019-07-29T16:03:53Z

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

@@ -68,9 +72,12 @@ export default class extends Component {

        <EuiSelect
          options={this.options}
-          value={this.state.value}
+          // value={this.state.value}


Was this intended?

Probably not, but I'll be reverting all those docs pages changes before merging. I was just giving you all an easy way to view all the compressed styles.

chandlerprall

JS/TSX changes LGTM - I'm loving this progress! Pulled locally and saw pretty things.

# Conflicts: # src/components/form/form_control_layout/_form_control_layout.scss

# Conflicts: # src/components/form/_mixins.scss

# Conflicts: # src/components/form/form_control_layout/_form_control_layout.scss

snide · 2019-07-30T14:34:10Z

Quick one while I'm working through this. I could see this as being difficult if used without regular form rows? Will this need to manually be done?

Saw your note about docs, so dunno if this stuff was just temp.

snide · 2019-07-30T14:43:03Z

- Spacing around pills - Compressed version # Conflicts: # src-docs/src/i18ntokens.json

cchaos · 2019-07-30T14:45:31Z

Pushed the combobox fix

snide · 2019-07-30T14:58:14Z

For another PR, but I think given how we've used these within panels, we should either made a compressed mode for EuiExpression or just make the default smaller.

snide · 2019-07-30T15:03:44Z

Form control layout changes doing some funky stuff on inline datepickers.

snide · 2019-07-30T15:05:36Z

Color picker compressed shadows

cchaos · 2019-07-30T15:20:23Z

Yes, the expression styles will come in another PR.

I have pushed fixes for the date pickers and color picker

snide

Some small code comments. Looks pretty clean.

snide · 2019-07-30T15:08:36Z

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

@@ -80,8 +82,12 @@ export class FilePicker extends Component {
        <EuiSpacer size="m" />

        <EuiFilePicker
+          id="asdf4"


snide · 2019-07-30T15:10:51Z

src/components/form/_mixins.scss

    }
  }
 }

-@mixin euiFormControlWithIcon($isIconOptional: false, $side: 'left') {
+@mixin euiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: false) {


snide · 2019-07-30T15:12:20Z

src/components/form/_mixins.scss

@@ -172,25 +167,49 @@
  border-radius: 0;
  padding: $euiFormControlPadding;

+  @if ($includeStates) {


src/components/form/file_picker/_file_picker.scss

src/components/form/form_control_layout/_form_control_layout.scss

snide · 2019-07-30T15:19:02Z

src/components/form/form_control_layout/_form_control_layout.scss


    &:disabled {
      background-color: $euiFormBackgroundDisabledColor;
      color: $euiFormControlDisabledColor; // ensures established contrast
    }

+    // sass-lint:disable-block no-important
    // This is the only way to target specific components to override styling


^^ Just a reminder to @thompsongl that occasionally this type of thing exists in EUI. It is very, very rare. Just another hard problem to figure out.

Yeah so the only other way I can of to not have this, is to be more strict in the append/prepend props by only allowing them to pass something like:

prepend: { button: "Some text for button", iconButton: "iconType", label: "Some text for a label", popover: meh? }

But right now the component allows you to pass any number of React.elements which is the most flexible.

We've decided that we will leave this as-is for now and revisit before the feature branch merges.

src/components/form/form_control_layout/_form_control_layout.scss

ryankeairns

This all looks great, can't wait to use it!

From a visual review standpoint, the alignment of input text alongside and icons/labels in prepend/append buttons stands out though the code looks good (even padding; line-height match input heights, etc.).

I'm not certain there is anything more to be done here that isn't rather hacky with regard to height and line-height (i.e. likely just how Inter UI is designed to some degree), but here is the current state where the prepend icon looks a bit low relative to button label and button label and input text look top-aligned (I realize they are not actually top aligned, just stating what it looks like visually):

It would be tidier looking if it looked more like this, but this is the result of some unacceptable nudging with odd height and such (just to demonstrate):

Take or leave this feedback, not sure how actionable it is in reality.

snide

LGTM. This stuff looks great.

cchaos · 2019-07-30T16:02:37Z

Thanks @ryankeairns It was bugging me too, but couldn't find a good solution. However, since you brought it up I decided to look into it again and I think I found a solution, though maybe a weird one. Essentially I had a 16px line-height added to all the prepend/appends but if I changed that to 15px all the elements seem to line up better:

I'll push the fix. I checked in FF and IE again as well, and all looks swell.

ryankeairns

@cchaos nice! That is essentially how I hacked together the screenshot 😬 Thanks for making the change.

This reverts commit 2121702.

snide · 2019-07-30T17:09:08Z

but if I changed that to 15px all the elements seem to line up better

I know I had transforms(-1px) on some icons back in the day. I wouldn't be surprised if it's related. I kind of don't remember where though.

cchaos · 2019-07-30T17:17:30Z

Force retest to try to trigger the report back, Jenkins, test this

* 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] 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 the breaking change label Jul 26, 2019

cchaos requested review from snide, chandlerprall, ryankeairns and thompsongl July 26, 2019 20:06

chandlerprall reviewed Jul 29, 2019

View reviewed changes

chandlerprall approved these changes Jul 29, 2019

View reviewed changes

cchaos force-pushed the feature/compressed-editor-controls branch from 836497d to 880ea3f Compare July 29, 2019 19:20

cchaos added 15 commits July 29, 2019 15:20

Updated compressed visual style in mixin

22569eb

Compressed updates to from control groups

3310a64

# Conflicts: # src/components/form/form_control_layout/_form_control_layout.scss

Fix compressed state overrides

56e8477

Reduce horizontal padding for compressed

d590b08

Added a compressed option for from euiFormControlLayoutPadding

13969c2

# Conflicts: # src/components/form/_mixins.scss

Added compressed padding for inputs with icons

a69736e

Fix readonly & compressed input groups

96be885

# Conflicts: # src/components/form/form_control_layout/_form_control_layout.scss

Fix group heights

13cb4d5

Icons and button icons in input groups

3939f7e

cleanup

0cd0e14

Update file picker with new compressed styles

a6112e0

More cleanup

1225224

Fix delimited compressed and fullwidth styles

e1bb513

[TEMP] Compress all the docs

2121702

Firefox and delimited fixes

0536eee

cchaos force-pushed the into-feature/compressed-styles branch from 5eab41d to 0536eee Compare July 29, 2019 19:20

Fixed EuiComboBox

ab39aa4

- Spacing around pills - Compressed version # Conflicts: # src-docs/src/i18ntokens.json

cchaos added 2 commits July 30, 2019 11:09

Added reduced padding for EuiColorPicker

70b9966

Fixed date pickers

f60e205

snide reviewed Jul 30, 2019

View reviewed changes

cchaos added 2 commits July 30, 2019 11:34

Variables for border-radius

348dc89

Update comment numbering

83b8a09

ryankeairns reviewed Jul 30, 2019

View reviewed changes

snide approved these changes Jul 30, 2019

View reviewed changes

Fix alignments

bb7a3c4

ryankeairns self-requested a review July 30, 2019 16:25

ryankeairns approved these changes Jul 30, 2019

View reviewed changes

Revert "[TEMP] Compress all the docs"

09c1cdf

This reverts commit 2121702.

thompsongl approved these changes Jul 30, 2019

View reviewed changes

cchaos merged commit 3637a74 into elastic:feature/compressed-editor-controls Jul 30, 2019

cchaos deleted the into-feature/compressed-styles branch July 30, 2019 17:38

shaunmcgough mentioned this pull request Aug 22, 2019

[Canvas] Compress Canvas side panel inputs elastic/kibana#43807

Closed

snide mentioned this pull request Sep 5, 2019

[META] Compressed panels release plan #2286

Closed

13 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feature Branch] Update compressed form control styles #2174

[Feature Branch] Update compressed form control styles #2174

cchaos commented Jul 26, 2019 •

edited

Loading

chandlerprall Jul 29, 2019

cchaos Jul 29, 2019

chandlerprall left a comment •

edited

Loading

snide commented Jul 30, 2019 •

edited

Loading

snide commented Jul 30, 2019

cchaos commented Jul 30, 2019

snide commented Jul 30, 2019

snide commented Jul 30, 2019 •

edited

Loading

snide commented Jul 30, 2019

cchaos commented Jul 30, 2019

snide left a comment

snide Jul 30, 2019

snide Jul 30, 2019

snide Jul 30, 2019

snide Jul 30, 2019

snide Jul 30, 2019

cchaos Jul 30, 2019

cchaos Jul 30, 2019

ryankeairns left a comment

snide left a comment

cchaos commented Jul 30, 2019

ryankeairns left a comment

snide commented Jul 30, 2019

cchaos commented Jul 30, 2019

[Feature Branch] Update compressed form control styles #2174

[Feature Branch] Update compressed form control styles #2174

Conversation

cchaos commented Jul 26, 2019 • edited Loading

feature/compressed-editor-controls

Primarily updating the existing --compressed styles to match the new style

Docs

Components

Breaking!

Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chandlerprall left a comment • edited Loading

Choose a reason for hiding this comment

snide commented Jul 30, 2019 • edited Loading

snide commented Jul 30, 2019

cchaos commented Jul 30, 2019

snide commented Jul 30, 2019

snide commented Jul 30, 2019 • edited Loading

snide commented Jul 30, 2019

cchaos commented Jul 30, 2019

snide left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ryankeairns left a comment

Choose a reason for hiding this comment

snide left a comment

Choose a reason for hiding this comment

cchaos commented Jul 30, 2019

ryankeairns left a comment

Choose a reason for hiding this comment

snide commented Jul 30, 2019

cchaos commented Jul 30, 2019

cchaos commented Jul 26, 2019 •

edited

Loading

Primarily updating the existing `--compressed` styles to match the new style

chandlerprall left a comment •

edited

Loading

snide commented Jul 30, 2019 •

edited

Loading

snide commented Jul 30, 2019 •

edited

Loading