Skip to content

Commit 8bd0d90

Browse files
elizabetdevelizabetdev
committed
Adding selection controls under forms
1 parent 6156b97 commit 8bd0d90

11 files changed

Lines changed: 420 additions & 397 deletions

File tree

‎src-docs/src/routes.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,8 @@ import { FocusTrapExample } from './views/focus_trap/focus_trap_example';
116116

117117
import { FormControlsExample } from './views/form_controls/form_controls_example';
118118

119+
import { SelectionControlsExample } from './views/selection_controls/selection_controls_example';
120+
119121
import { FormLayoutsExample } from './views/form_layouts/form_layouts_example';
120122

121123
import { FormCompressedExample } from './views/form_compressed/form_compressed_example';
@@ -524,6 +526,7 @@ const navigation = [
524526
name: 'Forms',
525527
items: [
526528
FormControlsExample,
529+
SelectionControlsExample,
527530
FormLayoutsExample,
528531
FormCompressedExample,
529532
FormValidationExample,

‎src-docs/src/views/form_controls/form_controls_example.js‎

Lines changed: 1 addition & 275 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,11 @@ import React, { Fragment } from 'react';
22

33
import { Link } from 'react-router-dom';
44

5-
import {
6-
GuideSectionTypes,
7-
GuideRule,
8-
GuideRuleExample,
9-
} from '../../components';
5+
import { GuideSectionTypes } from '../../components';
106

117
import {
128
EuiBadge,
139
EuiCallOut,
14-
EuiCheckbox,
15-
EuiCheckboxGroup,
1610
EuiCode,
1711
EuiFieldNumber,
1812
EuiFieldPassword,
@@ -23,12 +17,8 @@ import {
2317
EuiFormLegend,
2418
EuiFormControlLayout,
2519
EuiFormControlLayoutDelimited,
26-
EuiFormRow,
2720
EuiLink,
28-
EuiRadio,
29-
EuiRadioGroup,
3021
EuiSelect,
31-
EuiSwitch,
3222
EuiTextArea,
3323
EuiSpacer,
3424
} from '../../../../src/components';
@@ -39,9 +29,6 @@ import {
3929
FieldNumberConfig,
4030
FieldPasswordConfig,
4131
TextAreaConfig,
42-
CheckboxConfig,
43-
RadioConfig,
44-
SwitchConfig,
4532
} from './playground';
4633

4734
import FieldSearch from './field_search';
@@ -134,65 +121,6 @@ const selectSnippet = [
134121
/>`,
135122
];
136123

137-
import Checkbox from './checkbox';
138-
const checkboxSource = require('!!raw-loader!./checkbox');
139-
const checkboxSnippet = [
140-
`<EuiCheckbox
141-
id={checkboxId__1}
142-
label="I am a checkbox"
143-
checked={checked}
144-
onChange={onChange}
145-
/>`,
146-
`<EuiCheckbox
147-
id={checkboxId__2}
148-
label="I am an indeterminate checkbox"
149-
indeterminate={indeterminate}
150-
onChange={onChangeIndeterminate}
151-
/>`,
152-
];
153-
154-
import CheckboxGroup from './checkbox_group';
155-
const checkboxGroupSource = require('!!raw-loader!./checkbox_group');
156-
157-
import Radio from './radio';
158-
const radioSource = require('!!raw-loader!./radio');
159-
const radioSnippet = [
160-
`<EuiRadio
161-
label="I am a radio"
162-
checked={checked}
163-
onChange={onChange}
164-
/>`,
165-
];
166-
167-
import RadioGroup from './radio_group';
168-
const radioGroupSource = require('!!raw-loader!./radio_group');
169-
170-
import Switch from './switch';
171-
const switchSource = require('!!raw-loader!./switch');
172-
const switchSnippet = `<EuiSwitch
173-
label="Malware protection"
174-
checked={checked}
175-
onChange={onChange}
176-
/>`;
177-
import SwitchLabel from './switch_label';
178-
const switchLabelSource = require('!!raw-loader!./switch_label');
179-
const switchLabelSnippet = [
180-
`<EuiSwitch
181-
showLabel={false}
182-
label="Autoscaling"
183-
checked={checked}
184-
onChange={onChange}
185-
compressed
186-
/>`,
187-
`<EuiSwitch
188-
label={checked ? 'on' : 'off'}
189-
aria-describedby={labelId}
190-
checked={checked}
191-
onChange={onChange}
192-
compressed
193-
/>`,
194-
];
195-
196124
import PrependAppend from './prepend_append';
197125
const PrependAppendSource = require('!!raw-loader!./prepend_append');
198126

@@ -365,208 +293,6 @@ export const FormControlsExample = {
365293
demo: <FilePickerRemove />,
366294
props: { EuiFilePicker },
367295
},
368-
{
369-
title: 'Checkbox',
370-
source: [
371-
{
372-
type: GuideSectionTypes.JS,
373-
code: checkboxSource,
374-
},
375-
],
376-
snippet: checkboxSnippet,
377-
props: {
378-
EuiCheckbox,
379-
},
380-
demo: <Checkbox />,
381-
playground: CheckboxConfig,
382-
},
383-
{
384-
title: 'Checkbox group',
385-
source: [
386-
{
387-
type: GuideSectionTypes.JS,
388-
code: checkboxGroupSource,
389-
},
390-
],
391-
props: {
392-
EuiCheckboxGroup,
393-
},
394-
demo: <CheckboxGroup />,
395-
snippet: `<EuiCheckboxGroup
396-
options={[
397-
{
398-
id: id1,
399-
label: 'Option one',
400-
},
401-
]}
402-
idToSelectedMap={{ id1: true }}
403-
onChange={onChange}
404-
/>`,
405-
},
406-
{
407-
title: 'Radio',
408-
source: [
409-
{
410-
type: GuideSectionTypes.JS,
411-
code: radioSource,
412-
},
413-
],
414-
snippet: radioSnippet,
415-
props: {
416-
EuiRadio,
417-
},
418-
demo: <Radio />,
419-
playground: RadioConfig,
420-
},
421-
{
422-
title: 'Radio group',
423-
source: [
424-
{
425-
type: GuideSectionTypes.JS,
426-
code: radioGroupSource,
427-
},
428-
],
429-
props: {
430-
EuiRadioGroup,
431-
},
432-
demo: <RadioGroup />,
433-
snippet: `<EuiRadioGroup
434-
options={[
435-
{
436-
id: id1,
437-
label: 'Option one',
438-
},
439-
]}
440-
idSelected={id1}
441-
onChange={onChange}
442-
name="radio group"
443-
legend={{
444-
children: 'A legend',
445-
}}
446-
/>`,
447-
},
448-
{
449-
title: 'Switch',
450-
text: (
451-
<>
452-
<p>
453-
A switch can be substituted for a checkbox when the semantics of the
454-
label dictate a true on/off state.
455-
</p>
456-
</>
457-
),
458-
source: [
459-
{
460-
type: GuideSectionTypes.JS,
461-
code: switchSource,
462-
},
463-
],
464-
snippet: switchSnippet,
465-
props: {
466-
EuiSwitch,
467-
},
468-
demo: <Switch />,
469-
playground: SwitchConfig,
470-
},
471-
{
472-
text: (
473-
<>
474-
<p>
475-
<strong>Label</strong>
476-
</p>
477-
<GuideRule>
478-
<GuideRuleExample
479-
type="do"
480-
text="Use a static noun describing the setting to turn on or off."
481-
>
482-
<div style={{ width: 400 }}>
483-
<EuiSwitch
484-
checked={false}
485-
onChange={() => {}}
486-
label="Malware protection"
487-
/>
488-
</div>
489-
</GuideRuleExample>
490-
<GuideRuleExample
491-
type="dont"
492-
text='Start with statements such as "If true" or "If
493-
enabled".'
494-
>
495-
<div style={{ width: 400 }}>
496-
<EuiSwitch
497-
checked={false}
498-
onChange={() => {}}
499-
label="If enabled, uses malware protection"
500-
/>
501-
</div>
502-
</GuideRuleExample>
503-
<GuideRuleExample
504-
type="do"
505-
text='If
506-
relevant, start with a verb ("Use A",
507-
"Show B") and add help text to provide more info.'
508-
>
509-
<div style={{ width: 400 }}>
510-
<EuiFormRow helpText="Rollover when an index is 30 days old or reaches 50 gigabytes.">
511-
<EuiSwitch
512-
checked={false}
513-
onChange={() => {}}
514-
label="Use recommended defaults"
515-
/>
516-
</EuiFormRow>
517-
</div>
518-
</GuideRuleExample>
519-
<GuideRuleExample
520-
type="dont"
521-
text='Use only a verb, such as "Enable".'
522-
>
523-
<div style={{ width: 400 }}>
524-
<EuiSwitch checked={false} onChange={() => {}} label="Enable" />
525-
</div>
526-
</GuideRuleExample>
527-
</GuideRule>
528-
<p>Special cases:</p>
529-
<p>
530-
<ul>
531-
<li>
532-
Use past tense only when labelling a list of previously created
533-
items, like in a{' '}
534-
<EuiLink href="https://github.com/elastic/eui/pull/5119#discussion_r699717319">
535-
table header
536-
</EuiLink>
537-
.
538-
</li>
539-
<li>
540-
If the switch is described in some other manner, like when using
541-
an{' '}
542-
<Link to="/forms/form-layouts#form-and-form-rows">
543-
<strong>EuiFormRow</strong>
544-
</Link>
545-
, you can eliminate the visible label with{' '}
546-
<EuiCode language="tsx">{'showLabel={false}'}</EuiCode> or use
547-
it to further describe the state.
548-
</li>
549-
</ul>
550-
</p>
551-
<EuiCallOut
552-
color="warning"
553-
iconType="accessibility"
554-
title="When providing the state as the label, you'll need to provide an aria-describedby with the label's id to associate it with the swtich."
555-
/>
556-
</>
557-
),
558-
source: [
559-
{
560-
type: GuideSectionTypes.JS,
561-
code: switchLabelSource,
562-
},
563-
],
564-
snippet: switchLabelSnippet,
565-
props: {
566-
EuiSwitch,
567-
},
568-
demo: <SwitchLabel />,
569-
},
570296
{
571297
title: 'Fieldset and legend',
572298
source: [

0 commit comments

Comments
 (0)