playbook_ui 9.7.0 → 9.10.0.pre.alpha2
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_background/background.rb +0 -1
- data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +9 -10
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb +4 -2
- 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_stacked/date_stacked.rb +7 -9
- data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb +2 -2
- data/app/pb_kits/playbook/pb_filter/filter.rb +1 -1
- 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_flex/flex.rb +4 -4
- data/app/pb_kits/playbook/pb_form/form.rb +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_icon_stat_value/icon_stat_value.rb +0 -1
- 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_progress_pills/progress_pills.rb +2 -1
- data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +1 -1
- data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb +1 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb +2 -2
- data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb +1 -1
- data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb +1 -1
- data/app/pb_kits/playbook/pb_stat_change/stat_change.rb +8 -12
- data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.md +1 -1
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +5 -1
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +5 -13
- data/app/pb_kits/playbook/pb_user_badge/user_badge.rb +1 -1
- data/lib/playbook/forms/builder/action_area.rb +2 -2
- data/lib/playbook/forms/builder/collection_select_field.rb +2 -2
- data/lib/playbook/forms/builder/select_field.rb +1 -1
- data/lib/playbook/kit_resolver.rb +1 -1
- data/lib/playbook/markdown/template_handler.rb +4 -2
- data/lib/playbook/pb_doc_helper.rb +4 -2
- data/lib/playbook/props.rb +1 -4
- data/lib/playbook/props/base.rb +1 -2
- data/lib/playbook/version.rb +1 -1
- metadata +38 -31
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 210dfcb2a5011173148bd19f95f1295fa55e69a26814da550b09e85b64025d81
|
4
|
+
data.tar.gz: 7b79476f36d303bcd6d992c5239c29faae33d8f1068674bbef0365af9ff6b9bc
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: fd106f6e9df0b198ef6b46729612c215e0ce06e7e0228135b006a91b8a08bca39410558c62b993745596b6366331a2790301a7565afed611aec2da196c9290fe
|
7
|
+
data.tar.gz: 8892f5c04d2cfd31a6f229807a8a61c10f4eb059feefff3c6ec5b0ec2cbf8fd8cb2846227f5c395cc33ff9f411158e6dfd07cb30dfc3fa9880a5d30755c26a2a
|
@@ -6,37 +6,36 @@ module Playbook
|
|
6
6
|
prop :chart_data, type: Playbook::Props::Array,
|
7
7
|
default: []
|
8
8
|
prop :style, type: Playbook::Props::Enum,
|
9
|
-
|
10
|
-
|
9
|
+
values: %w[pie],
|
10
|
+
default: "pie"
|
11
11
|
|
12
12
|
prop :data_labels, type: Playbook::Props::Boolean, default: false
|
13
13
|
prop :min_point_size, type: Playbook::Props::Numeric
|
14
14
|
prop :max_point_size, type: Playbook::Props::Numeric
|
15
15
|
prop :inner_size, type: Playbook::Props::Enum,
|
16
|
-
|
17
|
-
|
16
|
+
values: %w[sm md lg none],
|
17
|
+
default: "md"
|
18
18
|
prop :z_min, type: Playbook::Props::Numeric
|
19
19
|
prop :start_angle, type: Playbook::Props::Numeric
|
20
20
|
prop :header_format
|
21
|
-
prop :data_label_html, default:
|
21
|
+
prop :data_label_html, default: "<div>{point.name}</div>"
|
22
22
|
prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">●</span>
|
23
23
|
{point.name}: ' + '<b>{point.y}
|
24
24
|
</b>'
|
25
25
|
prop :use_html, type: Playbook::Props::Boolean, default: false
|
26
26
|
prop :legend, type: Playbook::Props::Boolean, default: false
|
27
|
-
prop :title, default:
|
27
|
+
prop :title, default: ""
|
28
28
|
prop :rounded, type: Playbook::Props::Boolean, default: false
|
29
29
|
prop :colors, type: Playbook::Props::Array,
|
30
30
|
default: []
|
31
31
|
|
32
|
-
|
33
32
|
def chart_type
|
34
33
|
style == "variablepie" ? "variablepie" : "pie"
|
35
34
|
end
|
36
35
|
|
37
36
|
def chart_data_formatted
|
38
|
-
chart_data.map{ |hash| hash[:y] = hash.delete :value}
|
39
|
-
|
37
|
+
chart_data.map { |hash| hash[:y] = hash.delete :value }
|
38
|
+
chart_data
|
40
39
|
end
|
41
40
|
|
42
41
|
def inner_size_format
|
@@ -57,7 +56,7 @@ module Playbook
|
|
57
56
|
end
|
58
57
|
|
59
58
|
def rounded_border_color
|
60
|
-
rounded == true ?
|
59
|
+
rounded == true ? "null" : nil
|
61
60
|
end
|
62
61
|
|
63
62
|
def chart_options
|
@@ -1,3 +1,5 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
1
3
|
module Playbook
|
2
4
|
module PbCircleIconButton
|
3
5
|
class CircleIconButton < Playbook::KitBase
|
@@ -8,11 +10,11 @@ module Playbook
|
|
8
10
|
values: %w[primary secondary link],
|
9
11
|
default: "primary"
|
10
12
|
prop :disabled, type: Playbook::Props::Boolean,
|
11
|
-
|
13
|
+
default: false
|
12
14
|
prop :icon, required: true
|
13
15
|
prop :link
|
14
16
|
prop :new_window, type: Playbook::Props::Boolean,
|
15
|
-
|
17
|
+
default: false
|
16
18
|
def classname
|
17
19
|
generate_classname("pb_circle_icon_button_kit")
|
18
20
|
end
|
@@ -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}
|
@@ -5,13 +5,13 @@ module Playbook
|
|
5
5
|
class DateStacked < Playbook::KitBase
|
6
6
|
prop :date, type: Playbook::Props::Date, required: true
|
7
7
|
prop :align, type: Playbook::Props::Enum,
|
8
|
-
|
9
|
-
|
8
|
+
values: %w[left center right],
|
9
|
+
default: "left"
|
10
10
|
prop :size, type: Playbook::Props::Enum,
|
11
11
|
values: %w[sm md],
|
12
12
|
default: "sm"
|
13
13
|
prop :reverse, type: Playbook::Props::Boolean,
|
14
|
-
|
14
|
+
default: false
|
15
15
|
prop :dark, type: Playbook::Props::Boolean,
|
16
16
|
default: false
|
17
17
|
|
@@ -20,20 +20,20 @@ module Playbook
|
|
20
20
|
end
|
21
21
|
|
22
22
|
def title_size
|
23
|
-
size == "md" ? 3: 4
|
23
|
+
size == "md" ? 3 : 4
|
24
24
|
end
|
25
25
|
|
26
26
|
def day
|
27
27
|
day = Playbook::PbKit::PbDateTime.new(date)
|
28
28
|
content_tag(:time, datetime: day.to_iso) do
|
29
|
-
|
29
|
+
day.to_day.to_s
|
30
30
|
end
|
31
31
|
end
|
32
32
|
|
33
33
|
def month
|
34
34
|
month = Playbook::PbKit::PbDateTime.new(date)
|
35
35
|
content_tag(:time, datetime: month.to_iso) do
|
36
|
-
|
36
|
+
month.to_month.to_s
|
37
37
|
end
|
38
38
|
end
|
39
39
|
|
@@ -42,9 +42,8 @@ module Playbook
|
|
42
42
|
year = Playbook::PbKit::PbDateTime.new(date).to_year.to_i
|
43
43
|
if current_year != year
|
44
44
|
content_tag(:time, datetime: year) do
|
45
|
-
|
45
|
+
year.to_s
|
46
46
|
end
|
47
|
-
else
|
48
47
|
end
|
49
48
|
end
|
50
49
|
|
@@ -57,7 +56,6 @@ module Playbook
|
|
57
56
|
def dark_class
|
58
57
|
dark ? "dark" : nil
|
59
58
|
end
|
60
|
-
|
61
59
|
end
|
62
60
|
end
|
63
61
|
end
|
@@ -7,9 +7,9 @@ module Playbook
|
|
7
7
|
values: %w[lg sm],
|
8
8
|
default: "lg"
|
9
9
|
prop :widths, type: Playbook::Props::NumberArray,
|
10
|
-
|
10
|
+
default: [1]
|
11
11
|
prop :colors, type: Playbook::Props::Array,
|
12
|
-
|
12
|
+
default: []
|
13
13
|
|
14
14
|
def classname
|
15
15
|
generate_classname("pb_distribution_bar", size)
|
@@ -3,7 +3,7 @@
|
|
3
3
|
module Playbook
|
4
4
|
module PbFilter
|
5
5
|
class Filter < Playbook::KitBase
|
6
|
-
prop :filters, type: Playbook::Props::HashArray, default: [{name:
|
6
|
+
prop :filters, type: Playbook::Props::HashArray, default: [{ name: "" }]
|
7
7
|
prop :sort_menu, type: Playbook::Props::HashArray, default: [{}]
|
8
8
|
prop :results, type: Playbook::Props::Numeric
|
9
9
|
prop :template, type: Playbook::Props::Enum,
|
@@ -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}` : ''
|
@@ -74,8 +74,8 @@ module Playbook
|
|
74
74
|
def horizontal_class
|
75
75
|
if orientation == "row"
|
76
76
|
"justify_content_#{horizontal}"
|
77
|
-
|
78
|
-
"align_items_#{horizontal}"
|
77
|
+
elsif align == "none"
|
78
|
+
"align_items_#{horizontal}"
|
79
79
|
end
|
80
80
|
end
|
81
81
|
|
@@ -102,8 +102,8 @@ module Playbook
|
|
102
102
|
def vertical_class
|
103
103
|
if orientation == "row"
|
104
104
|
"align_items_#{vertical}"
|
105
|
-
|
106
|
-
"justify_content_#{vertical}"
|
105
|
+
elsif justify == "none"
|
106
|
+
"justify_content_#{vertical}"
|
107
107
|
end
|
108
108
|
end
|
109
109
|
|
@@ -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
|