playbook_ui 9.6.1 → 9.9.0.alpha.inline1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_badge/_badge.jsx +26 -1
- data/app/pb_kits/playbook/pb_date/_date.jsx +3 -3
- data/app/pb_kits/playbook/pb_date/date.html.erb +2 -3
- data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb +8 -0
- data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +10 -0
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +6 -1
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +3 -0
- data/app/pb_kits/playbook/pb_dialog/dialog_header.rb +23 -24
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +4 -2
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +7 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +2 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx +2 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.md +1 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +7 -1
- data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +1 -1
- data/app/pb_kits/playbook/pb_form_group/_form_group.jsx +3 -1
- data/app/pb_kits/playbook/pb_form_group/_form_group.scss +8 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.html.erb +13 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.jsx +43 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.md +1 -0
- data/app/pb_kits/playbook/pb_form_group/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_form_group/docs/index.js +1 -1
- data/app/pb_kits/playbook/pb_form_group/form_group.rb +10 -1
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx +12 -2
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +19 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.html.erb +13 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx +25 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb +4 -5
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx +2 -6
- data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +5 -0
- data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +1 -1
- data/app/pb_kits/playbook/pb_nav/docs/_block_nav.html.erb +41 -5
- data/app/pb_kits/playbook/pb_nav/docs/_block_nav.jsx +44 -6
- data/app/pb_kits/playbook/pb_passphrase/_passphrase.jsx +12 -9
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb +1 -0
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.jsx +24 -0
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.md +3 -0
- data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.jsx +1 -0
- data/app/pb_kits/playbook/pb_passphrase/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_passphrase/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_passphrase/passphrase.rb +2 -0
- data/app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx +12 -0
- data/app/pb_kits/playbook/pb_passphrase/useHaveIBeenPwned.js +52 -0
- data/app/pb_kits/playbook/pb_passphrase/useZxcvbn.js +58 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx +10 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +61 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb +6 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx +16 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.html.erb +4 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx +14 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb +9 -2
- data/app/pb_kits/playbook/pb_select/_select.jsx +10 -1
- data/app/pb_kits/playbook/pb_select/_select.scss +27 -30
- data/app/pb_kits/playbook/pb_select/select.rb +5 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.jsx +3 -0
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +8 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.html.erb +5 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.jsx +22 -0
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +7 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +11 -2
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +23 -0
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +23 -11
- data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.jsx +17 -4
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.html.erb +36 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.jsx +43 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb +35 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx +44 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +7 -5
- data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +6 -2
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +20 -12
- data/lib/playbook/version.rb +1 -1
- metadata +34 -14
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: aad061e395898f02d246cad01fc3ca3c158c910c058c546fdff62258f99ceced
|
4
|
+
data.tar.gz: fb468e1242133f77abb769f74805a44c6a3caa88fb40dd10cf48791b98683466
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: e23d91eb54be1797a2cfb44c35941b3c0302d7bb02cb880ee61a21710a540014a0c4a0bc9b82c3b09d47d38d0b030a702f33a2d3b54fdf0ceec805d674958545
|
7
|
+
data.tar.gz: e04139cbbbf7a5e9b93e47ec464583715fae88a10463047c08da99ffae60986832117ae533c880de82cf54989bfe2914191dc1d87cf37763f8426c2bca571662
|
@@ -3,6 +3,7 @@
|
|
3
3
|
import React from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
5
|
import { globalProps } from '../utilities/globalProps.js'
|
6
|
+
import { Icon } from '../'
|
6
7
|
|
7
8
|
import {
|
8
9
|
buildAriaProps,
|
@@ -13,8 +14,15 @@ import {
|
|
13
14
|
type BadgeProps = {
|
14
15
|
aria?: object,
|
15
16
|
className?: string,
|
17
|
+
closeProps?: {
|
18
|
+
onClick?: EventHandler,
|
19
|
+
onMouseDown?: EventHandler,
|
20
|
+
onTouchEnd?: EventHandler,
|
21
|
+
},
|
16
22
|
data?: object,
|
17
23
|
id?: string,
|
24
|
+
removeIcon?: Boolean,
|
25
|
+
removeOnClick?: EventHandler,
|
18
26
|
rounded?: boolean,
|
19
27
|
text?: string,
|
20
28
|
variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
|
@@ -23,8 +31,11 @@ const Badge = (props: BadgeProps) => {
|
|
23
31
|
const {
|
24
32
|
aria = {},
|
25
33
|
className,
|
34
|
+
closeProps = {},
|
26
35
|
data = {},
|
27
36
|
id,
|
37
|
+
removeIcon = false,
|
38
|
+
removeOnClick = () => {},
|
28
39
|
rounded = false,
|
29
40
|
text,
|
30
41
|
variant = 'neutral',
|
@@ -44,7 +55,21 @@ const Badge = (props: BadgeProps) => {
|
|
44
55
|
className={css}
|
45
56
|
id={id}
|
46
57
|
>
|
47
|
-
<span>
|
58
|
+
<span>
|
59
|
+
{text}
|
60
|
+
<If condition={removeIcon}>
|
61
|
+
<span
|
62
|
+
onClick={removeOnClick}
|
63
|
+
style={{ cursor: 'pointer' }}
|
64
|
+
{...closeProps}
|
65
|
+
>
|
66
|
+
<Icon
|
67
|
+
fixedWidth
|
68
|
+
icon="times"
|
69
|
+
/>
|
70
|
+
</span>
|
71
|
+
</If>
|
72
|
+
</span>
|
48
73
|
</div>
|
49
74
|
)
|
50
75
|
}
|
@@ -95,16 +95,16 @@ const PbDate = (props: PbDateProps) => {
|
|
95
95
|
<Else />
|
96
96
|
<>
|
97
97
|
<If condition={showIcon}>
|
98
|
-
<
|
98
|
+
<Caption
|
99
99
|
className="pb_icon_kit_container"
|
100
|
-
color="light"
|
101
100
|
tag="span"
|
102
101
|
>
|
103
102
|
<Icon
|
104
103
|
fixedWidth
|
105
104
|
icon="calendar-alt"
|
105
|
+
size="xs"
|
106
106
|
/>
|
107
|
-
</
|
107
|
+
</Caption>
|
108
108
|
</If>
|
109
109
|
<If condition={showDayOfWeek}>
|
110
110
|
<Caption tag="div">
|
@@ -39,11 +39,10 @@
|
|
39
39
|
|
40
40
|
<!-- icon -->
|
41
41
|
<% if object.show_icon %>
|
42
|
-
<%= pb_rails("
|
43
|
-
color: "light",
|
42
|
+
<%= pb_rails("caption", props: {
|
44
43
|
tag: "div",
|
45
44
|
}) do %>
|
46
|
-
<%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
|
45
|
+
<%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: 'xs' }) %>
|
47
46
|
<% end %>
|
48
47
|
<% end %>
|
49
48
|
|
@@ -4,6 +4,16 @@ import { Date as FormattedDate } from '../..'
|
|
4
4
|
const DateVariants = (props) => {
|
5
5
|
return (
|
6
6
|
<div>
|
7
|
+
<FormattedDate
|
8
|
+
showIcon
|
9
|
+
size="sm"
|
10
|
+
value="1995-12-25"
|
11
|
+
{...props}
|
12
|
+
/>
|
13
|
+
|
14
|
+
<br />
|
15
|
+
<br />
|
16
|
+
|
7
17
|
<FormattedDate
|
8
18
|
value="1995-12-25"
|
9
19
|
{...props}
|
@@ -25,6 +25,8 @@ type DatePickerProps = {
|
|
25
25
|
id?: String,
|
26
26
|
inputAria?: object,
|
27
27
|
inputData?: object,
|
28
|
+
inputOnChange?: (String) => void,
|
29
|
+
inputValue?: any,
|
28
30
|
label?: String,
|
29
31
|
maxDate: String,
|
30
32
|
minDate: String,
|
@@ -55,6 +57,8 @@ const DatePicker = (props: DatePickerProps) => {
|
|
55
57
|
id,
|
56
58
|
inputAria,
|
57
59
|
inputData,
|
60
|
+
inputOnChange,
|
61
|
+
inputValue,
|
58
62
|
label = 'Date Picker',
|
59
63
|
maxDate,
|
60
64
|
minDate,
|
@@ -114,7 +118,6 @@ const DatePicker = (props: DatePickerProps) => {
|
|
114
118
|
className={classes}
|
115
119
|
id={id}
|
116
120
|
>
|
117
|
-
{className}
|
118
121
|
<div className="input_wrapper">
|
119
122
|
<TextInput
|
120
123
|
aria={inputAria}
|
@@ -126,7 +129,9 @@ const DatePicker = (props: DatePickerProps) => {
|
|
126
129
|
id={pickerId}
|
127
130
|
label={hideLabel ? null : label}
|
128
131
|
name={name}
|
132
|
+
onChange={inputOnChange}
|
129
133
|
placeholder={placeholder}
|
134
|
+
value={inputValue}
|
130
135
|
/>
|
131
136
|
<If condition={!hideIcon}>
|
132
137
|
<div
|
@@ -166,6 +166,9 @@ const datePickerHelper = (config) => {
|
|
166
166
|
picker.input.style.caretColor = 'transparent'
|
167
167
|
picker.input.style.cursor = 'pointer'
|
168
168
|
}
|
169
|
+
|
170
|
+
// Fix event bubbling bug on wrapper
|
171
|
+
document.querySelector(`#${pickerId}`).parentElement.addEventListener('click', (e) => e.stopPropagation())
|
169
172
|
}
|
170
173
|
|
171
174
|
export default datePickerHelper
|
@@ -1,31 +1,30 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Playbook
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
partial "pb_dialog/child_kits/dialog_header"
|
4
|
+
module PbDialog
|
5
|
+
class DialogHeader
|
6
|
+
include Playbook::Props
|
9
7
|
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
8
|
+
partial "pb_dialog/child_kits/dialog_header"
|
9
|
+
|
10
|
+
prop :closeable, type: Playbook::Props::Boolean, default: true
|
11
|
+
prop :padding
|
12
|
+
prop :separator, type: Playbook::Props::Boolean, default: true
|
13
|
+
prop :spacing
|
14
|
+
prop :text
|
15
|
+
prop :title
|
16
|
+
|
17
|
+
def dialog_header_options
|
18
|
+
{
|
19
|
+
id: id,
|
20
|
+
closeable: closeable,
|
21
|
+
padding: padding,
|
22
|
+
separator: separator,
|
23
|
+
spacing: spacing,
|
24
|
+
text: text,
|
25
|
+
title: title,
|
26
|
+
}
|
28
27
|
end
|
29
28
|
end
|
30
29
|
end
|
31
|
-
|
30
|
+
end
|
@@ -17,15 +17,17 @@ type FixedConfirmationToastProps = {
|
|
17
17
|
closeable?: boolean,
|
18
18
|
data?: string,
|
19
19
|
id?: string,
|
20
|
-
|
20
|
+
multiLine?: boolean,
|
21
|
+
status?: 'success' | 'error' | 'neutral' | 'tip',
|
21
22
|
text: string,
|
22
23
|
}
|
23
24
|
|
24
25
|
const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
|
25
26
|
const [showToast, toggleToast] = useState(true)
|
26
|
-
const { className, closeable = false, status = 'neutral', text } = props
|
27
|
+
const { className, closeable = false, multiLine = false, status = 'neutral', text } = props
|
27
28
|
const css = classnames(
|
28
29
|
`pb_fixed_confirmation_toast_kit_${status}`,
|
30
|
+
{ '_multi_line': multiLine },
|
29
31
|
globalProps(props),
|
30
32
|
className
|
31
33
|
)
|
@@ -47,6 +47,13 @@ $confirmation_toast_colors: (
|
|
47
47
|
.pb_icon {
|
48
48
|
color: $white;
|
49
49
|
}
|
50
|
+
|
51
|
+
&[class*=_multi_line] .pb_fixed_confirmation_toast_text {
|
52
|
+
color: $white;
|
53
|
+
margin: 0 $space_md 0 $space_md;
|
54
|
+
max-width: 100%;
|
55
|
+
white-space: break-spaces;
|
56
|
+
}
|
50
57
|
}
|
51
58
|
}
|
52
59
|
}
|
data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
CHANGED
@@ -5,8 +5,9 @@ const FixedConfirmationToastMultiLine = (props) => {
|
|
5
5
|
return (
|
6
6
|
<div>
|
7
7
|
<FixedConfirmationToast
|
8
|
+
multiLine
|
8
9
|
status="tip"
|
9
|
-
text=
|
10
|
+
text="Scan to Assign Selected Items. Click here to generate report"
|
10
11
|
{...props}
|
11
12
|
/>
|
12
13
|
</div>
|
data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.md
CHANGED
@@ -1,2 +1,2 @@
|
|
1
1
|
|
2
|
-
Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow.
|
2
|
+
Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.
|
@@ -7,6 +7,8 @@ module Playbook
|
|
7
7
|
values: %w[success error neutral tip],
|
8
8
|
default: "neutral"
|
9
9
|
prop :text, type: Playbook::Props::String
|
10
|
+
prop :multi_line, type: Playbook::Props::Boolean,
|
11
|
+
default: false
|
10
12
|
prop :closeable, type: Playbook::Props::Boolean,
|
11
13
|
default: false
|
12
14
|
|
@@ -18,6 +20,10 @@ module Playbook
|
|
18
20
|
closeable.present? ? " remove_toast" : ""
|
19
21
|
end
|
20
22
|
|
23
|
+
def multi_line_class
|
24
|
+
multi_line.present? ? "multi_line" : nil
|
25
|
+
end
|
26
|
+
|
21
27
|
def icon_value
|
22
28
|
case status
|
23
29
|
when "success"
|
@@ -32,7 +38,7 @@ module Playbook
|
|
32
38
|
end
|
33
39
|
|
34
40
|
def classname
|
35
|
-
generate_classname("pb_fixed_confirmation_toast_kit", status) + close_class
|
41
|
+
generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class
|
36
42
|
end
|
37
43
|
end
|
38
44
|
end
|
@@ -14,7 +14,7 @@ type FlexItemPropTypes = {
|
|
14
14
|
}
|
15
15
|
|
16
16
|
const FlexItem = (props: FlexItemPropTypes) => {
|
17
|
-
const { children, className, fixedSize, grow, overflow = null, shrink, flex } = props
|
17
|
+
const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none' } = props
|
18
18
|
const growClass = grow === true ? 'grow' : ''
|
19
19
|
const flexClass = flex !== 'none' ? `flex_${flex}` : ''
|
20
20
|
const overflowClass = overflow ? `overflow_${overflow}` : ''
|
@@ -10,6 +10,7 @@ type FormGroupProps = {
|
|
10
10
|
children?: Node,
|
11
11
|
className?: string,
|
12
12
|
data?: object,
|
13
|
+
fullWidth?: boolean,
|
13
14
|
id?: string,
|
14
15
|
}
|
15
16
|
|
@@ -18,13 +19,14 @@ const FormGroup = (props: FormGroupProps) => {
|
|
18
19
|
aria = {},
|
19
20
|
className,
|
20
21
|
data = {},
|
22
|
+
fullWidth = false,
|
21
23
|
id,
|
22
24
|
children,
|
23
25
|
} = props
|
24
26
|
|
25
27
|
const ariaProps = buildAriaProps(aria)
|
26
28
|
const dataProps = buildDataProps(data)
|
27
|
-
const classes = classnames(buildCss('pb_form_group_kit'), globalProps(props), className)
|
29
|
+
const classes = classnames(buildCss('pb_form_group_kit', { full: fullWidth }), globalProps(props), className)
|
28
30
|
|
29
31
|
return (
|
30
32
|
<div
|
@@ -4,6 +4,14 @@
|
|
4
4
|
align-items: flex-end;
|
5
5
|
justify-content: flex-start;
|
6
6
|
|
7
|
+
&[class*=_full] {
|
8
|
+
display: flex;
|
9
|
+
justify-content: space-between;
|
10
|
+
& > div {
|
11
|
+
width: 100%;
|
12
|
+
}
|
13
|
+
}
|
14
|
+
|
7
15
|
& [class^=pb_text_input_kit] .text_input_wrapper,
|
8
16
|
& [class^=pb_date_picker_kit] .input_wrapper,
|
9
17
|
& [class^=pb_select] {
|
@@ -0,0 +1,13 @@
|
|
1
|
+
<div>
|
2
|
+
<%= pb_rails("form_group", props: { full_width: true }) do %>
|
3
|
+
<%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter First Name" }) %>
|
4
|
+
<%= pb_rails("text_input", props: { label: "Middle Intial", placeholder: "Enter Middle Initial" }) %>
|
5
|
+
<%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter Last Name" }) %>
|
6
|
+
<% end %>
|
7
|
+
<br/>
|
8
|
+
<br/>
|
9
|
+
<%= pb_rails("form_group", props: { full_width: true }) do %>
|
10
|
+
<%= pb_rails("text_input", props: { placeholder: "Search" }) %>
|
11
|
+
<%= pb_rails("button", props: { text: "Submit", variant: "secondary" }) %>
|
12
|
+
<% end %>
|
13
|
+
</div>
|
@@ -0,0 +1,43 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Button, FormGroup, TextInput } from '../../'
|
3
|
+
|
4
|
+
const FormGroupFullWidth = (props) => (
|
5
|
+
<div>
|
6
|
+
<div>
|
7
|
+
<FormGroup fullWidth>
|
8
|
+
<TextInput
|
9
|
+
label="First Name"
|
10
|
+
placeholder="Enter First Name"
|
11
|
+
{...props}
|
12
|
+
/>
|
13
|
+
<TextInput
|
14
|
+
label="Middle Intial"
|
15
|
+
placeholder="Enter Middle Initial"
|
16
|
+
{...props}
|
17
|
+
/>
|
18
|
+
<TextInput
|
19
|
+
label="Last Name"
|
20
|
+
placeholder="Enter Last Name"
|
21
|
+
{...props}
|
22
|
+
/>
|
23
|
+
</FormGroup>
|
24
|
+
</div>
|
25
|
+
<br />
|
26
|
+
<div>
|
27
|
+
<FormGroup fullWidth>
|
28
|
+
<TextInput
|
29
|
+
placeholder="Search"
|
30
|
+
{...props}
|
31
|
+
/>
|
32
|
+
<Button
|
33
|
+
onClick={() => alert('Button Clicked!')}
|
34
|
+
text="Submit"
|
35
|
+
variant="secondary"
|
36
|
+
{...props}
|
37
|
+
/>
|
38
|
+
</FormGroup>
|
39
|
+
</div>
|
40
|
+
</div>
|
41
|
+
)
|
42
|
+
|
43
|
+
export default FormGroupFullWidth
|
@@ -0,0 +1 @@
|
|
1
|
+
Full Width is a prop that can be added to any of the Form Group options. This prop allows the Form Group to stretch the full width of the div.
|