playbook_ui 9.7.0.pre.alphawidth1 → 9.7.0
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_date/_date.jsx +3 -3
- data/app/pb_kits/playbook/pb_date/date.html.erb +3 -2
- data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb +0 -8
- data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +0 -10
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +2 -4
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +0 -7
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +1 -2
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx +1 -2
- 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 +1 -7
- data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +1 -1
- data/app/pb_kits/playbook/pb_form_group/_form_group.jsx +1 -3
- data/app/pb_kits/playbook/pb_form_group/_form_group.scss +0 -8
- data/app/pb_kits/playbook/pb_form_group/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_form_group/docs/index.js +1 -1
- data/app/pb_kits/playbook/pb_form_group/form_group.rb +1 -10
- data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +1 -1
- data/app/pb_kits/playbook/pb_nav/docs/_block_nav.html.erb +5 -41
- data/app/pb_kits/playbook/pb_nav/docs/_block_nav.jsx +6 -44
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +1 -5
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +13 -5
- data/lib/playbook/version.rb +1 -1
- metadata +4 -7
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.html.erb +0 -13
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.jsx +0 -43
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.md +0 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: f80298017b48e65f5ec8a3ec7a6782608b90adf0bae7c32596837f3c964f5c85
|
4
|
+
data.tar.gz: 2c8e80673442f37ff2cce022f1324642c80c17b8c6da2912a119502a84c5781e
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: ee6e023775fc1c6d7ec91beaec5d1bed2d4cca9f342ef4e7b8c203f70f577e197b7ae0048e1872f881d12c13113fe9eadd7fd3a369c4d0ff8213541c8ab67b9c
|
7
|
+
data.tar.gz: 75e487fb2251126f2c74d67d4db3173c68e2838e7350279f1c4e5a1e5315be3e0c17233e22b645adb8438695317797b05baf44ce0448764db22139200a1e40d3
|
@@ -95,16 +95,16 @@ const PbDate = (props: PbDateProps) => {
|
|
95
95
|
<Else />
|
96
96
|
<>
|
97
97
|
<If condition={showIcon}>
|
98
|
-
<
|
98
|
+
<Body
|
99
99
|
className="pb_icon_kit_container"
|
100
|
+
color="light"
|
100
101
|
tag="span"
|
101
102
|
>
|
102
103
|
<Icon
|
103
104
|
fixedWidth
|
104
105
|
icon="calendar-alt"
|
105
|
-
size="xs"
|
106
106
|
/>
|
107
|
-
</
|
107
|
+
</Body>
|
108
108
|
</If>
|
109
109
|
<If condition={showDayOfWeek}>
|
110
110
|
<Caption tag="div">
|
@@ -39,10 +39,11 @@
|
|
39
39
|
|
40
40
|
<!-- icon -->
|
41
41
|
<% if object.show_icon %>
|
42
|
-
<%= pb_rails("
|
42
|
+
<%= pb_rails("body", props: {
|
43
|
+
color: "light",
|
43
44
|
tag: "div",
|
44
45
|
}) do %>
|
45
|
-
<%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true
|
46
|
+
<%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
|
46
47
|
<% end %>
|
47
48
|
<% end %>
|
48
49
|
|
@@ -4,16 +4,6 @@ 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
|
-
|
17
7
|
<FormattedDate
|
18
8
|
value="1995-12-25"
|
19
9
|
{...props}
|
@@ -17,17 +17,15 @@ type FixedConfirmationToastProps = {
|
|
17
17
|
closeable?: boolean,
|
18
18
|
data?: string,
|
19
19
|
id?: string,
|
20
|
-
|
21
|
-
status?: 'success' | 'error' | 'neutral' | 'tip',
|
20
|
+
status?: "success" | "error" | "neutral" | "tip",
|
22
21
|
text: string,
|
23
22
|
}
|
24
23
|
|
25
24
|
const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
|
26
25
|
const [showToast, toggleToast] = useState(true)
|
27
|
-
const { className, closeable = false,
|
26
|
+
const { className, closeable = false, status = 'neutral', text } = props
|
28
27
|
const css = classnames(
|
29
28
|
`pb_fixed_confirmation_toast_kit_${status}`,
|
30
|
-
{ '_multi_line': multiLine },
|
31
29
|
globalProps(props),
|
32
30
|
className
|
33
31
|
)
|
@@ -47,13 +47,6 @@ $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
|
-
}
|
57
50
|
}
|
58
51
|
}
|
59
52
|
}
|
data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
CHANGED
@@ -5,9 +5,8 @@ const FixedConfirmationToastMultiLine = (props) => {
|
|
5
5
|
return (
|
6
6
|
<div>
|
7
7
|
<FixedConfirmationToast
|
8
|
-
multiLine
|
9
8
|
status="tip"
|
10
|
-
text=
|
9
|
+
text={'Scan to Assign Selected Items.\n Click here to generate report'}
|
11
10
|
{...props}
|
12
11
|
/>
|
13
12
|
</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.
|
@@ -7,8 +7,6 @@ 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
|
12
10
|
prop :closeable, type: Playbook::Props::Boolean,
|
13
11
|
default: false
|
14
12
|
|
@@ -20,10 +18,6 @@ module Playbook
|
|
20
18
|
closeable.present? ? " remove_toast" : ""
|
21
19
|
end
|
22
20
|
|
23
|
-
def multi_line_class
|
24
|
-
multi_line.present? ? "multi_line" : nil
|
25
|
-
end
|
26
|
-
|
27
21
|
def icon_value
|
28
22
|
case status
|
29
23
|
when "success"
|
@@ -38,7 +32,7 @@ module Playbook
|
|
38
32
|
end
|
39
33
|
|
40
34
|
def classname
|
41
|
-
generate_classname("pb_fixed_confirmation_toast_kit", status
|
35
|
+
generate_classname("pb_fixed_confirmation_toast_kit", status) + close_class
|
42
36
|
end
|
43
37
|
end
|
44
38
|
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
|
17
|
+
const { children, className, fixedSize, grow, overflow = null, shrink, flex } = props
|
18
18
|
const growClass = grow === true ? 'grow' : ''
|
19
19
|
const flexClass = flex !== 'none' ? `flex_${flex}` : ''
|
20
20
|
const overflowClass = overflow ? `overflow_${overflow}` : ''
|
@@ -10,7 +10,6 @@ type FormGroupProps = {
|
|
10
10
|
children?: Node,
|
11
11
|
className?: string,
|
12
12
|
data?: object,
|
13
|
-
fullWidth?: boolean,
|
14
13
|
id?: string,
|
15
14
|
}
|
16
15
|
|
@@ -19,14 +18,13 @@ const FormGroup = (props: FormGroupProps) => {
|
|
19
18
|
aria = {},
|
20
19
|
className,
|
21
20
|
data = {},
|
22
|
-
fullWidth = false,
|
23
21
|
id,
|
24
22
|
children,
|
25
23
|
} = props
|
26
24
|
|
27
25
|
const ariaProps = buildAriaProps(aria)
|
28
26
|
const dataProps = buildDataProps(data)
|
29
|
-
const classes = classnames(buildCss('pb_form_group_kit'
|
27
|
+
const classes = classnames(buildCss('pb_form_group_kit'), globalProps(props), className)
|
30
28
|
|
31
29
|
return (
|
32
30
|
<div
|
@@ -4,14 +4,6 @@
|
|
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
|
-
|
15
7
|
& [class^=pb_text_input_kit] .text_input_wrapper,
|
16
8
|
& [class^=pb_date_picker_kit] .input_wrapper,
|
17
9
|
& [class^=pb_select] {
|
@@ -3,7 +3,6 @@ examples:
|
|
3
3
|
rails:
|
4
4
|
- form_group_default: Default
|
5
5
|
- form_group_button: Button
|
6
|
-
- form_group_full_width: Full Width
|
7
6
|
- form_group_date_picker: Date Picker
|
8
7
|
# - form_group_typeahead: Typeahead
|
9
8
|
- form_group_select: Select
|
@@ -14,7 +13,6 @@ examples:
|
|
14
13
|
react:
|
15
14
|
- form_group_default: Default
|
16
15
|
- form_group_button: Button
|
17
|
-
- form_group_full_width: Full Width
|
18
16
|
- form_group_date_picker: Date Picker
|
19
17
|
# - form_group_typeahead: Typeahead
|
20
18
|
- form_group_select: Select
|
@@ -1,7 +1,7 @@
|
|
1
1
|
export { default as FormGroupDefault } from './_form_group_default.jsx'
|
2
2
|
export { default as FormGroupButton } from './_form_group_button.jsx'
|
3
|
-
export { default as FormGroupFullWidth } from './_form_group_full_width.jsx'
|
4
3
|
export { default as FormGroupDatePicker } from './_form_group_date_picker.jsx'
|
4
|
+
// export { default as FormGroupTypeahead } from './_form_group_typeahead.jsx'
|
5
5
|
export { default as FormGroupSelect } from './_form_group_select.jsx'
|
6
6
|
export { default as FormGroupSelectableCard } from './_form_group_selectable_card.jsx'
|
7
7
|
export { default as FormGroupSelectableCardIcon } from './_form_group_selectable_card_icon.jsx'
|
@@ -3,17 +3,8 @@
|
|
3
3
|
module Playbook
|
4
4
|
module PbFormGroup
|
5
5
|
class FormGroup < Playbook::KitBase
|
6
|
-
prop :full_width, type: Playbook::Props::Boolean,
|
7
|
-
default: false
|
8
|
-
|
9
6
|
def classname
|
10
|
-
generate_classname("pb_form_group_kit"
|
11
|
-
end
|
12
|
-
|
13
|
-
private
|
14
|
-
|
15
|
-
def full_width_class
|
16
|
-
full_width ? "full" : nil
|
7
|
+
generate_classname("pb_form_group_kit")
|
17
8
|
end
|
18
9
|
end
|
19
10
|
end
|
@@ -1,42 +1,6 @@
|
|
1
|
-
<%= pb_rails("nav", props: {title: "
|
2
|
-
<%= pb_rails("nav/item", props: { link: "#", active: true }) do%>
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
title: "Remodeling Consultant",
|
7
|
-
orientation: "horizontal",
|
8
|
-
align: "left",
|
9
|
-
avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
|
10
|
-
}) %>
|
11
|
-
<% end %>
|
12
|
-
<%= pb_rails("nav/item", props: { link: "#" }) do%>
|
13
|
-
<%= pb_rails("user", props: {
|
14
|
-
name: "Julie Hamilton",
|
15
|
-
territory: "PHL",
|
16
|
-
title: "Inside Sales Agent",
|
17
|
-
orientation: "horizontal",
|
18
|
-
align: "left",
|
19
|
-
avatar_url: "https://randomuser.me/api/portraits/women/45.jpg"
|
20
|
-
}) %>
|
21
|
-
<% end %>
|
22
|
-
<%= pb_rails("nav/item", props: { link: "#" }) do%>
|
23
|
-
<%= pb_rails("user", props: {
|
24
|
-
name: "Dennis Wilks",
|
25
|
-
territory: "PHL",
|
26
|
-
title: "Senior Remodeling Consultant",
|
27
|
-
orientation: "horizontal",
|
28
|
-
align: "left",
|
29
|
-
avatar_url: "https://randomuser.me/api/portraits/men/44.jpg"
|
30
|
-
}) %>
|
31
|
-
<% end %>
|
32
|
-
<%= pb_rails("nav/item", props: { link: "#" }) do%>
|
33
|
-
<%= pb_rails("user", props: {
|
34
|
-
name: "Ronnie Martin",
|
35
|
-
territory: "PHL",
|
36
|
-
title: "Customer Development Representative",
|
37
|
-
orientation: "horizontal",
|
38
|
-
align: "left",
|
39
|
-
avatar_url: "https://randomuser.me/api/portraits/men/46.jpg"
|
40
|
-
}) %>
|
41
|
-
<% end %>
|
1
|
+
<%= pb_rails("nav", props: {title: "Menu", link: "#"}) do %>
|
2
|
+
<%= pb_rails("nav/item", props: { link: "#", active: true }) do%>Photos<% end %>
|
3
|
+
<%= pb_rails("nav/item", props: { link: "#" }) do%>Music<% end %>
|
4
|
+
<%= pb_rails("nav/item", props: { link: "#" }) do%>Video<% end %>
|
5
|
+
<%= pb_rails("nav/item", props: { link: "#" }) do%>Files<% end %>
|
42
6
|
<% end %>
|
@@ -1,12 +1,12 @@
|
|
1
1
|
import React from 'react'
|
2
|
-
import { Nav
|
2
|
+
import { Nav } from '../../'
|
3
3
|
import NavItem from '../_item.jsx'
|
4
4
|
|
5
5
|
const BlockNav = (props) => {
|
6
6
|
return (
|
7
7
|
<Nav
|
8
8
|
link="#"
|
9
|
-
title="
|
9
|
+
title="Menu"
|
10
10
|
{...props}
|
11
11
|
>
|
12
12
|
<NavItem
|
@@ -14,49 +14,11 @@ const BlockNav = (props) => {
|
|
14
14
|
link="#"
|
15
15
|
{...props}
|
16
16
|
>
|
17
|
-
|
18
|
-
align="left"
|
19
|
-
avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
|
20
|
-
name="Anna Black"
|
21
|
-
orientation="horizontal"
|
22
|
-
territory="PHL"
|
23
|
-
title="Remodeling Consultant"
|
24
|
-
{...props}
|
25
|
-
/>
|
26
|
-
</NavItem>
|
27
|
-
<NavItem link="#">
|
28
|
-
<User
|
29
|
-
align="left"
|
30
|
-
avatarUrl="https://randomuser.me/api/portraits/women/45.jpg"
|
31
|
-
name="Julie Hamilton"
|
32
|
-
orientation="horizontal"
|
33
|
-
territory="PHL"
|
34
|
-
title="Inside Sales Agent"
|
35
|
-
{...props}
|
36
|
-
/>
|
37
|
-
</NavItem>
|
38
|
-
<NavItem link="#">
|
39
|
-
<User
|
40
|
-
align="left"
|
41
|
-
avatarUrl="https://randomuser.me/api/portraits/men/44.jpg"
|
42
|
-
name="Dennis Wilks"
|
43
|
-
orientation="horizontal"
|
44
|
-
territory="PHL"
|
45
|
-
title="Senior Remodeling Consultant"
|
46
|
-
{...props}
|
47
|
-
/>
|
48
|
-
</NavItem>
|
49
|
-
<NavItem link="#">
|
50
|
-
<User
|
51
|
-
align="left"
|
52
|
-
avatarUrl="https://randomuser.me/api/portraits/men/46.jpg"
|
53
|
-
name="Ronnie Martin"
|
54
|
-
orientation="horizontal"
|
55
|
-
territory="PHL"
|
56
|
-
title="Customer Development Representative"
|
57
|
-
{...props}
|
58
|
-
/>
|
17
|
+
{'Photos'}
|
59
18
|
</NavItem>
|
19
|
+
<NavItem link="#">{'Music'}</NavItem>
|
20
|
+
<NavItem link="#">{'Video'}</NavItem>
|
21
|
+
<NavItem link="#">{'Files'}</NavItem>
|
60
22
|
</Nav>
|
61
23
|
)
|
62
24
|
}
|
@@ -7,11 +7,7 @@
|
|
7
7
|
class: object.classname) do %>
|
8
8
|
<div class="pb_typeahead_wrapper">
|
9
9
|
<div class="pb_typeahead_loading_indicator" data-pb-typeahead-kit-loading-indicator>
|
10
|
-
|
11
|
-
icon: "spinner",
|
12
|
-
pulse: true,
|
13
|
-
fixed_width: true,
|
14
|
-
}) %>
|
10
|
+
<i class="far fa-spinner fa-spin"></i>
|
15
11
|
</div>
|
16
12
|
<%= pb_rails("text_input", props: {
|
17
13
|
type: "search",
|
@@ -3,7 +3,8 @@
|
|
3
3
|
module Playbook
|
4
4
|
module PbTypeahead
|
5
5
|
class Typeahead < Playbook::KitBase
|
6
|
-
prop :async, type: Playbook::Props::Boolean,
|
6
|
+
prop :async, type: Playbook::Props::Boolean,
|
7
|
+
default: false
|
7
8
|
prop :default_options, type: Playbook::Props::HashArray, default: []
|
8
9
|
prop :get_option_label
|
9
10
|
prop :get_option_value
|
@@ -12,7 +13,9 @@ module Playbook
|
|
12
13
|
prop :load_options
|
13
14
|
prop :name
|
14
15
|
prop :options, type: Playbook::Props::HashArray, default: []
|
15
|
-
prop :pills, type: Playbook::Props::Boolean,
|
16
|
+
prop :pills, type: Playbook::Props::Boolean,
|
17
|
+
default: false
|
18
|
+
|
16
19
|
prop :placeholder
|
17
20
|
prop :search_term_minimum_length, default: 3
|
18
21
|
prop :search_debounce_timeout, default: 250
|
@@ -42,9 +45,14 @@ module Playbook
|
|
42
45
|
placeholder: placeholder,
|
43
46
|
}
|
44
47
|
|
45
|
-
base_options.merge!({
|
46
|
-
base_options.merge!({
|
47
|
-
|
48
|
+
base_options.merge!({getOptionLabel: get_option_label}) if get_option_label.present?
|
49
|
+
base_options.merge!({getOptionValue: get_option_value}) if get_option_value.present?
|
50
|
+
|
51
|
+
base_options.merge!({
|
52
|
+
async: true,
|
53
|
+
loadOptions: load_options,
|
54
|
+
}) if async
|
55
|
+
|
48
56
|
base_options
|
49
57
|
end
|
50
58
|
end
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 9.7.0
|
4
|
+
version: 9.7.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2021-04-
|
12
|
+
date: 2021-04-19 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -1004,9 +1004,6 @@ files:
|
|
1004
1004
|
- app/pb_kits/playbook/pb_form_group/docs/_form_group_date_picker.jsx
|
1005
1005
|
- app/pb_kits/playbook/pb_form_group/docs/_form_group_default.html.erb
|
1006
1006
|
- app/pb_kits/playbook/pb_form_group/docs/_form_group_default.jsx
|
1007
|
-
- app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.html.erb
|
1008
|
-
- app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.jsx
|
1009
|
-
- app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.md
|
1010
1007
|
- app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb
|
1011
1008
|
- app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx
|
1012
1009
|
- app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card.html.erb
|
@@ -2129,9 +2126,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
2129
2126
|
version: '0'
|
2130
2127
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
2131
2128
|
requirements:
|
2132
|
-
- - "
|
2129
|
+
- - ">="
|
2133
2130
|
- !ruby/object:Gem::Version
|
2134
|
-
version:
|
2131
|
+
version: '0'
|
2135
2132
|
requirements: []
|
2136
2133
|
rubyforge_project:
|
2137
2134
|
rubygems_version: 2.7.3
|
@@ -1,13 +0,0 @@
|
|
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>
|
@@ -1,43 +0,0 @@
|
|
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
|
@@ -1 +0,0 @@
|
|
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.
|