[Feature branch] Updated form control border color #2114
Merged
Conversation
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
cchaos
changed the title
snide
approved these changes
Jul 12, 2019
cchaos
added a commit
that referenced
this pull request
Jul 23, 2019
* Updated form control border color * Slighly more transparent * change sass var name to $euiFormBorderOpaqueColor
cchaos
added a commit
that referenced
this pull request
Jul 24, 2019
* Updated form control border color * Slighly more transparent * change sass var name to $euiFormBorderOpaqueColor
cchaos
added a commit
that referenced
this pull request
Jul 29, 2019
* Updated form control border color * Slighly more transparent * change sass var name to $euiFormBorderOpaqueColor
cchaos
added a commit
that referenced
this pull request
Aug 13, 2019
* Updated form control border color * Slighly more transparent * change sass var name to $euiFormBorderOpaqueColor
cchaos
added a commit
that referenced
this pull request
Aug 29, 2019
* Updated form control border color * Slighly more transparent * change sass var name to $euiFormBorderOpaqueColor
cchaos
added a commit
that referenced
this pull request
Aug 30, 2019
* Updated form control border color * Slighly more transparent * change sass var name to $euiFormBorderOpaqueColor
13 tasks
cchaos
added a commit
that referenced
this pull request
Sep 9, 2019
* Updated form control border color * Slighly more transparent * change sass var name to $euiFormBorderOpaqueColor
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is the first (of some, not many) PR's that will go into the compressed editor style controls feature branch
Updates the color of the form control border to be more "blue"
When playing around in sketch, I noticed that the border color is light transparency of one of our dark grays which when more transparent becomes less "blue". It's a very subtle difference, but now it looks like our horizontal rule and other border colors.
It needs to stay as a transparent inner shadow because it will overlap the background image which creates the thickened primary bottom border for the focus and invalid states.
You can see the difference if you compare the border color to the bottom border of the tabs above it.
Checklist
[ ] This was checked in mobile[ ] This was checked in IE11[ ] 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