[Docs] Selection controls by elizabetdev · Pull Request #5607 · elastic/eui

elizabetdev · 2022-02-07T14:47:08Z

Summary

This PR adds a new section called selection controls. It's basically a follow-up on #5558 where we were adding switch guidelines. But we started having some issues, just the EuiSwitch had text in the examples section. The same was happening in the guidelines tab.

So I decided to go ahead and add texts for all the components in the examples tab. Also, more generic guidelines to cover other components.

Decisions to make

Right now in the selection controls section lives:

Checkboxes
Radio buttons
Switches

Should the EuiSelect move out from form controls section and move to this new section?

If we decided to move the EuiSelect to this section let's do it in another PR. Just to not overcomplicate.

Checklist

Check against all themes for compatibility in both light and dark modes
[ ] Checked in mobile
Checked in Chrome, Safari, Edge, and Firefox
[ ] Props have proper autodocs and playground toggles
Added documentation~
~~[ ] Checked Code Sandbox works for any docs examples~~
[ ] Added or updated jest and cypress 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~~

…ing-guidelines

…ng-guidelines

kibanamachine · 2022-02-07T15:36:57Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5607/

kibanamachine · 2022-02-07T20:20:39Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5607/

kibanamachine · 2022-02-08T14:11:17Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5607/

kibanamachine · 2022-02-08T15:50:31Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5607/

florent-leborgne

LGTM. I left a few small comments. Thanks for putting this together!

src-docs/src/views/selection_controls/guidelines.js

florent-leborgne · 2022-02-08T16:20:04Z

src-docs/src/views/selection_controls/guidelines.js

+        description={
+          <p>
+            The label should be static, action-oriented, and describe the
+            feature or present a question.


Do you have an example where the label is (or should be) a question?

That's a good point. I couldn't find in our products any example where we presented a question so for now I deleted this text.
@cchaos this text was already in our docs, do you have any example of when we should present a question?

🤷‍♀️ 🤣

Co-authored-by: florent-leborgne <florent.leborgne@elastic.co>

…le.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

kibanamachine · 2022-02-11T19:24:11Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5607/

kibanamachine · 2022-02-14T16:31:29Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5607/

kibanamachine · 2022-02-14T19:22:01Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5607/

elizabetdev · 2022-02-14T19:51:40Z

Thanks, @cchaos for all the help and suggestions. I address all of them.

But... I had some difficulties addressing the playground console log warnings. I was able to address the EuiCheckbox and EuiRadio onChange is marked as required warnings. But for the EuiSwitch, the checked prop is required. If I set it to false:

It gets a warning:

Warning: Failed prop type: The prop `checked` is marked as required in `EuiSwitch`, but its value is `undefined`.

elizabetdev · 2022-02-14T19:57:32Z

src-docs/src/views/selection_controls/playground.js

+
+  propsToUse.onChange = {
+    ...propsToUse.onChange,
+    value: 'onChange',


This value renders onChange={()=> {}}:

I actually don't think you need this configuration at all because the the value you're passing is actually a string not function. I think the dummy function is coming from line 85:

customProps: { onChange: dummyFunction, },

cchaos

LGTM! Just found some last text fixes.

src-docs/src/views/guidelines/writing_guidelines.js

cchaos · 2022-02-15T16:42:31Z

src-docs/src/views/selection_controls/guidelines.js

+          text="In a list of already created items, use the past tense."
+          minHeight={234}
+        >
+          <EuiBasicTable columns={columns} items={items} tableLayout="auto" />


src-docs/src/views/selection_controls/selection_controls_example.js

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

…le.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

kibanamachine · 2022-02-15T19:34:39Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5607/

florent-leborgne and others added 11 commits January 20, 2022 15:57

Normalize switch labels throughout docs

b548137

Update switch writing guidelines and move examples

adab0ef

Merge branch 'main' of github.com:elastic/eui into toggle-switch-writ…

d1ae315

…ing-guidelines

Make switch guidelines dos and donts and link from writing section

96156b7

Merge remote-tracking branch 'upstream/main' into toggle-switch-writi…

6156b97

…ng-guidelines

Adding selection controls under forms

8bd0d90

Adding guidelines tab

2caf010

Fixing es lint warning

bd5c3b4

add link to guidelines from component example

ae87cbb

Merge remote-tracking branch 'upstream/main' into toggle-switch-writi…

8214575

…ng-guidelines

Better guidelines structure

46822a3

elizabetdev added the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Feb 7, 2022

Better example texts

725e099

elizabetdev added 2 commits February 7, 2022 16:23

Better examples texts

af54c88

Switch label past tense example

9678ad8

elizabetdev mentioned this pull request Feb 7, 2022

[Docs] Update Switch writing guidelines #5558

Closed

Merge remote-tracking branch 'upstream/main' into selection-controls

ae04096

Better intro

009c1c5

elizabetdev added the documentation Issues or PRs that only affect documentation - will not need changelog entries label Feb 8, 2022

Adding compressed for EuiSwitch in tables

9e2ed69

elizabetdev marked this pull request as ready for review February 8, 2022 15:18

elizabetdev requested review from cchaos and florent-leborgne February 8, 2022 15:18

florent-leborgne approved these changes Feb 8, 2022

View reviewed changes

elizabetdev and others added 2 commits February 8, 2022 17:34

Update src-docs/src/views/selection_controls/guidelines.js

13d7650

Co-authored-by: florent-leborgne <florent.leborgne@elastic.co>

Update src-docs/src/views/selection_controls/guidelines.js

e3f2205

Co-authored-by: florent-leborgne <florent.leborgne@elastic.co>

elizabetdev and others added 14 commits February 11, 2022 17:38

Update src-docs/src/views/selection_controls/selection_controls_examp…

019d92f

…le.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Update src-docs/src/views/selection_controls/selection_controls_examp…

0668827

…le.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Update src-docs/src/views/selection_controls/selection_controls_examp…

00c5f81

…le.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Update src-docs/src/views/selection_controls/selection_controls_examp…

2507bb9

…le.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Update src-docs/src/views/selection_controls/selection_controls_examp…

9fe87f6

…le.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Update src-docs/src/views/selection_controls/selection_controls_examp…

43fc51f

…le.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Update src-docs/src/views/selection_controls/selection_controls_examp…

25a5a76

…le.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Prettier

5b1df65

Merge remote-tracking branch 'upstream/main' into selection-controls

3c7012c

Merge remote-tracking branch 'upstream/main' into selection-controls

ba59d1e

Better table example and moving "Fieldset and legend" to new section.

625ed8e

Fixing guidelines console errors

e4e97d7

Updating links to new section

18de4c2

More fixes

98ced5b

elizabetdev added 2 commits February 14, 2022 15:39

Adding generatedId and required onChange

22c5c1b

Removing unnecessary text.

9891d6e

Switch playground onChange

e204293

elizabetdev commented Feb 14, 2022

View reviewed changes

elizabetdev requested a review from cchaos February 14, 2022 19:57

cchaos approved these changes Feb 15, 2022

View reviewed changes

elizabetdev and others added 4 commits February 15, 2022 18:41

Update src-docs/src/views/guidelines/writing_guidelines.js

dc03546

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Update src-docs/src/views/selection_controls/selection_controls_examp…

676643c

…le.js Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Prettier

a15909e

Merge remote-tracking branch 'upstream/main' into selection-controls

72848ff

elizabetdev merged commit ab4f37f into elastic:main Feb 15, 2022

Conversation

elizabetdev commented Feb 7, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Decisions to make

Checklist

Uh oh!

kibanamachine commented Feb 7, 2022

Uh oh!

kibanamachine commented Feb 7, 2022

Uh oh!

kibanamachine commented Feb 8, 2022

Uh oh!

kibanamachine commented Feb 8, 2022

Uh oh!

florent-leborgne left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

florent-leborgne Feb 8, 2022

Choose a reason for hiding this comment

Uh oh!

elizabetdev Feb 14, 2022

Choose a reason for hiding this comment

Uh oh!

cchaos Feb 14, 2022

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Feb 11, 2022

Uh oh!

kibanamachine commented Feb 14, 2022

Uh oh!

kibanamachine commented Feb 14, 2022

Uh oh!

elizabetdev commented Feb 14, 2022

Uh oh!

elizabetdev Feb 14, 2022

Choose a reason for hiding this comment

Uh oh!

cchaos Feb 15, 2022

Choose a reason for hiding this comment

Uh oh!

cchaos left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cchaos Feb 15, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kibanamachine commented Feb 15, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

elizabetdev commented Feb 7, 2022 •

edited

Loading