[UI Framework][K7]: Form components #13435

snide · 2017-08-09T20:37:05Z

Adds form components.

Todo before merge...

Need to flesh out the docs to show various configs.
Add in validation.

Todo after merge...

Make sizing system (I'd like these to be applied to containers, not the inputs themselves).
Related, but show how horizontal, grid based layouts work. Again, should be all container handled, not applied directly to the core elements.

Stuff that I need help from @cjcenizal...

Figuring out the actual KuiForm wrapper component.
Figuring out how / if we pass arrays into checkboxes / selects.
Replace icon usage with a background svg solution so they can work on naked inputs.
How to handle button/form submit.

Light version

Dark version

snide · 2017-08-09T20:45:32Z

ui_framework/src/components/form/form_checkbox/form_checkbox.js

+
+  return (
+    <div>
+      {options.map(function (option, index) {


I have no idea how this should really be handled, right now I use a simple array, but that doesn't allow for things like passing defaultChecked on the actual input. Figured @cjcenizal could help here. I can say that checkboxes should always be in multiple sets, because switches are the single use checkbox variant.

snide · 2017-08-09T20:46:06Z

ui_framework/src/components/form/form_select/form_select.js

+      className={classes}
+      {...rest}
+    >
+      {options.map(function (option, index) {


Again, dunno the best way to deal with this. Figure @cjcenizal can help here.

snide · 2017-08-09T20:54:10Z

ui_framework/dist/ui_framework.css

@@ -557,6 +557,284 @@ table {
 .kuiCallOutHeader__title {
  color: #0079a5; }

+.kuiForm__textField {


I ended up using a base class to style all the similar text fields (text, textarea, password, number...etc). I originally had this as a mixin, but figured having a base class saves us a lot of CSS.

You can see this class passed as a default class on top of every text based input... ex: <input type="password" className="kuiForm__textField kuiFormPassword" />.

I think that's the right way to do it.

snide · 2017-08-09T20:57:45Z

ui_framework/src/components/form/form_range/_form_range.scss

@@ -0,0 +1,83 @@
+// The following code is inspired by...


I modified this quite a bit. It's small enough I didn't want to install it as a dependency, because the overwrites would have been just as large as the original source. Let me know if this is the proper way to credit stuff in our code.

cjcenizal · 2017-08-10T18:46:47Z

Name suggestions:

KuiFormRow
KuiNumberInput
KuiPasswordInput
KuiSearchInput
KuiTextInput
KuiTextArea (capital A to form a pattern, e.g. TextInput/TextArea)
KuiRangeSlider
KuiSelect
KuiSwitch
KuiCheckbox

cjcenizal · 2017-08-10T22:31:42Z

ui_framework/src/components/form/form_row/form_row.js

@@ -0,0 +1,69 @@
+import React, {


We'll only need to pass id to <KuiFormRow> (and not to the child component), if we do this:

import React, { cloneElement, PropTypes, } from 'react'; import classNames from 'classnames'; import { KuiIcon } from '../../../components'; export const KuiFormRow = ({ children, icon, helpText, invalid, errors, label, id, className, ...rest }) => { const classes = classNames( 'kuiFormRow', className, { 'kuiFormRow--withIcon' : icon, 'kuiFormRow--invalid' : invalid, } ); let optionalIcon = null; if (icon) { optionalIcon = <KuiIcon className="kuiFormRow__icon" type={icon} size="medium" />; } let optionalHelpText = null; if (helpText) { optionalHelpText = <div className="kuiFormRow__helpText">{helpText}</div>; } let optionalErrors = null; if (errors) { optionalErrors = ( errors.map(function (error, index) { return <div key={index} className="kuiFormRow__error">{error}</div>; }) ); } let optionalLabel = null; if (label) { optionalLabel = <label className="kuiFormRow__label" htmlFor={id}>{label}</label>; } let field; if (id) { field = cloneElement(children, { id, }); } else { field = children; } return ( <div className={classes} {...rest} > {/* Order is important here. The label needs to be UNDER the children. We rearrange the flex order in the CSS so the label ends up displaying above the children / input. This allows us to still use sibling selectors against the label that are tiggered by the focus state of the input. */} {field} {optionalLabel} {optionalErrors} {optionalHelpText} {optionalIcon} </div> ); }; KuiFormRow.propTypes = { label: PropTypes.string, id: PropTypes.string, icon: PropTypes.string, invalid: PropTypes.bool, errors: PropTypes.array, helpText: PropTypes.string, };

This worked and I applied it. The only negative is it won't register when the child has isRequired on the prop. I went ahead and removed is required from the child components.

…ation

snide · 2017-08-11T05:41:28Z

OK @cjcenizal I think this is in a pretty good state. I ran tests but a couple of them fail because of required props. Might need a primer on that tomorrow.

cjcenizal

This is beautiful! Great work @snide. Had a few comments but nothing major.

cjcenizal · 2017-08-11T17:51:14Z

ui_framework/src/components/form/range/_range.scss

+// to be more easily maintained / themable going forward.
+
+.kuiRange {
+  -webkit-appearance: none;


How about just appearance: none here, and let PostCSS autoprefix it?

cjcenizal · 2017-08-11T17:54:36Z

ui_framework/doc_site/src/views/form/field_text.js

+// Don't use this, make proper ids instead. This is just for the example.
+function makeId() {
+  return Math.random().toString(36).substr(2, 5);
+}


Note to self: port @BigFunger's ID generator over to the UI Framework.

cjcenizal · 2017-08-11T17:55:31Z

ui_framework/doc_site/src/views/form/field_text.js

+          id={makeId()}
+          label="Text field in a form row"
+        >
+          <KuiFieldText name="text_name_in_row" />


Note to self: update examples with ARIA attributes.

cjcenizal · 2017-08-11T17:56:32Z

ui_framework/doc_site/src/views/form/form_example.js

+      }]}
+    >
+      <GuideText>
+        <p>


I don't think we need a <p> here btw.

cjcenizal · 2017-08-11T17:58:40Z

ui_framework/doc_site/src/views/kibana/kibana.js

-            <button>
-              Logstash
-            </button>
+            Logstash


Good catch!

cjcenizal · 2017-08-11T18:07:23Z

ui_framework/src/components/form/range/_index.scss

+$kuiRangeTrackHeight: 2px !default;
+$kuiRangeTrackBorderWidth: 0 !default;
+$kuiRangeTrackBorderColor: $kuiColorLightShade !default;
+$kuiRangeTrackRadius: $kuiBorderRadius !default;


Just wondering, why are we marking these overrideable?

no need. copy/pasta. ill remove

cjcenizal · 2017-08-11T18:08:20Z

ui_framework/src/components/form/range/_range.scss

+// MIT License
+
+// It has been modified to fit the styling patterns of Kibana and
+// to be more easily maintained / themable going forward.


This credit looks good to me, but I think "themable" is spelled "themeable", based on a quick Google search.

cjcenizal · 2017-08-11T18:08:59Z

ui_framework/src/components/form/select/_select.scss

+  @include kuiFieldStyle;
+}
+
+.kuiSelect::-ms-expand {


Can this be nested with & inside of .kuiSelect?

cjcenizal · 2017-08-11T18:09:24Z

ui_framework/src/components/form/select/select.js

+
+
+
+


Is there any way to set Vim to ensure there's only one empty line at the end of the file? https://www.google.com/search?q=vim+eof+newline&rlz=1C5CHFA_enUS695US695&oq=vim+eof+&aqs=chrome.3.69i57j0l5.5218j0j7&sourceid=chrome&ie=UTF-8

cjcenizal · 2017-08-11T18:10:13Z

ui_framework/src/components/form/switch/_switch.scss

+  /**
+   * 1. The label is our main clickable area. It sits above the actual switch.
+   */
+  .kuiSwitch__label {


Can we unnest everything from this line down?

snide · 2017-08-11T18:51:57Z

@cjcenizal Got everything but the nesting. Can do the tyography stuff in a different PR. Removed radio. I'll need to add that next week.

cjcenizal

LGTM!

Adds form components and example documentation to KUI.

snide force-pushed the k7/forms branch from 0fe1fb1 to 04f9d2f Compare August 9, 2017 20:43

snide commented Aug 9, 2017

View reviewed changes

snide requested a review from cjcenizal August 9, 2017 20:50

snide commented Aug 9, 2017

View reviewed changes

cjcenizal mentioned this pull request Aug 10, 2017

K7 KUI #12807

Closed

51 tasks

cjcenizal reviewed Aug 10, 2017

View reviewed changes

snide added 10 commits August 10, 2017 16:24

scaffolding for form components

fbe6b91

switches and dropdowns for forms

31763c3

more form styling

f6249b5

move textfield mixin to a base class

a48e7b7

code cleanup

01c83db

add number component

d9c6e86

form checkbox use array

994aec3

code cleanup for react

23e2680

replace textfield with mixin, add form row validation, add form valid…

54d3eda

…ation

rename to CJ recomendation

9406718

snide force-pushed the k7/forms branch from 99b9a2c to 9406718 Compare August 10, 2017 23:27

snide added 6 commits August 10, 2017 17:23

validation documentation

2a1148f

more documentation

784887d

more docs

a1afb2d

clone id onto inputs, make random ids in docs

777ab5b

make checkboxes use an object so ids can be passed

cd732cb

better checkbox / selects

06f4160

fix dark color validation

8783e8f

cjcenizal suggested changes Aug 11, 2017

View reviewed changes

cjcenizal mentioned this pull request Aug 11, 2017

[UI Framework][K7] Toast cleanup #13480

Closed

cjcenizal added the Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. label Aug 11, 2017

snide added 3 commits August 11, 2017 11:46

address feedback

75ca7b9

nest properly

ebf3e21

fix range selectors / spelling

ce67bc3

cjcenizal approved these changes Aug 11, 2017

View reviewed changes

snide merged commit 97812a1 into elastic:k7-ui-framework Aug 11, 2017

snide deleted the k7/forms branch August 11, 2017 19:02

snide added a commit to snide/kibana that referenced this pull request Aug 14, 2017

[UI Framework][K7]: Form components (elastic#13435)

b7768cd

Adds form components and example documentation to KUI.

cjcenizal pushed a commit to cjcenizal/kibana that referenced this pull request Aug 16, 2017

[UI Framework][K7]: Form components (elastic#13435)

0027a0f

Adds form components and example documentation to KUI.

cjcenizal pushed a commit to cjcenizal/kibana that referenced this pull request Aug 26, 2017

[UI Framework][K7]: Form components (elastic#13435)

230060e

Adds form components and example documentation to KUI.

cjcenizal pushed a commit that referenced this pull request Sep 19, 2017

[UI Framework][K7]: Form components (#13435)

1da1846

Adds form components and example documentation to KUI.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[UI Framework][K7]: Form components #13435

[UI Framework][K7]: Form components #13435

snide commented Aug 9, 2017 •

edited

Loading

snide Aug 9, 2017

snide Aug 9, 2017

snide Aug 9, 2017 •

edited

Loading

snide Aug 9, 2017

cjcenizal commented Aug 10, 2017

cjcenizal Aug 10, 2017

snide Aug 11, 2017

snide commented Aug 11, 2017

cjcenizal left a comment

cjcenizal Aug 11, 2017

cjcenizal Aug 11, 2017

cjcenizal Aug 11, 2017

cjcenizal Aug 11, 2017

cjcenizal Aug 11, 2017

cjcenizal Aug 11, 2017

snide Aug 11, 2017

cjcenizal Aug 11, 2017

cjcenizal Aug 11, 2017

cjcenizal Aug 11, 2017

cjcenizal Aug 11, 2017

snide commented Aug 11, 2017

cjcenizal left a comment

[UI Framework][K7]: Form components #13435

[UI Framework][K7]: Form components #13435

Conversation

snide commented Aug 9, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

snide Aug 9, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cjcenizal commented Aug 10, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

snide commented Aug 11, 2017

cjcenizal 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

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

snide commented Aug 11, 2017

cjcenizal left a comment

Choose a reason for hiding this comment

snide commented Aug 9, 2017 •

edited

Loading

snide Aug 9, 2017 •

edited

Loading