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.
Files changed (28) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date/_date.jsx +3 -3
  3. data/app/pb_kits/playbook/pb_date/date.html.erb +3 -2
  4. data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb +0 -8
  5. data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +0 -10
  6. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +2 -4
  7. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +0 -7
  8. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +1 -2
  9. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx +1 -2
  10. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.md +1 -1
  11. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +1 -7
  12. data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +1 -1
  13. data/app/pb_kits/playbook/pb_form_group/_form_group.jsx +1 -3
  14. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +0 -8
  15. data/app/pb_kits/playbook/pb_form_group/docs/example.yml +0 -2
  16. data/app/pb_kits/playbook/pb_form_group/docs/index.js +1 -1
  17. data/app/pb_kits/playbook/pb_form_group/form_group.rb +1 -10
  18. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +1 -1
  19. data/app/pb_kits/playbook/pb_nav/docs/_block_nav.html.erb +5 -41
  20. data/app/pb_kits/playbook/pb_nav/docs/_block_nav.jsx +6 -44
  21. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +1 -1
  22. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +1 -5
  23. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +13 -5
  24. data/lib/playbook/version.rb +1 -1
  25. metadata +4 -7
  26. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.html.erb +0 -13
  27. data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.jsx +0 -43
  28. 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: 3a4e16697962adfdbfb453aae9013b077e229bb1043d6584b6c872f7a876d57d
4
- data.tar.gz: 565485a903d9e946589f765a24e2518e5380fa05818917780560f42eb02a08f3
3
+ metadata.gz: f80298017b48e65f5ec8a3ec7a6782608b90adf0bae7c32596837f3c964f5c85
4
+ data.tar.gz: 2c8e80673442f37ff2cce022f1324642c80c17b8c6da2912a119502a84c5781e
5
5
  SHA512:
6
- metadata.gz: 3aae8d85a3f348aef5f23c41f22a4d5917bd729e007a2766a33cdc79b54ac60504063f31f1e2d021f3bc6ce16486e32832a0eca0c681560191a9d4ac1049b213
7
- data.tar.gz: 95d568d4915960a1370c2200456c8f6d2a9f7d2963a86477e92e8158fa0f75a00ed305b4be7a04b5e007645f8fa177bf23773088d249e5eb8e40b1e1d399a769
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
- <Caption
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
- </Caption>
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("caption", props: {
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, size: 'xs' }) %>
46
+ <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
46
47
  <% end %>
47
48
  <% end %>
48
49
 
@@ -1,12 +1,4 @@
1
1
  <div>
2
- <%= pb_rails("date", props: {
3
- date: DateTime.now,
4
- show_icon: true,
5
- size: "sm"
6
- }) %>
7
-
8
- <br>
9
-
10
2
  <%= pb_rails("date", props: {
11
3
  date: DateTime.now,
12
4
  }) %>
@@ -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
- multiLine?: boolean,
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, multiLine = false, status = 'neutral', text } = props
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
  }
@@ -1,5 +1,4 @@
1
1
  <%= pb_rails("fixed_confirmation_toast", props: {
2
- multi_line: true,
3
- text: "Scan to Assign Selected Items. Click here to generate report",
2
+ text: "Scan to Assign Selected Items.\nClick here to generate report",
4
3
  status: "tip",
5
4
  }) %>
@@ -5,9 +5,8 @@ const FixedConfirmationToastMultiLine = (props) => {
5
5
  return (
6
6
  <div>
7
7
  <FixedConfirmationToast
8
- multiLine
9
8
  status="tip"
10
- text="Scan to Assign Selected Items. Click here to generate report"
9
+ text={'Scan to Assign Selected Items.\n Click here to generate report'}
11
10
  {...props}
12
11
  />
13
12
  </div>
@@ -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. Simply resize the screen to see the fixed confirmation toast wrap the text.
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, multi_line_class) + close_class
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 = 'none' } = props
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', { full: fullWidth }), globalProps(props), className)
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", full_width_class)
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
@@ -16,7 +16,7 @@ $selector: ".pb_nav_list";
16
16
  list-style: none;
17
17
  }
18
18
 
19
- [class*=pb_nav_list_title] {
19
+ [class*=_title] {
20
20
  padding: 0 $space_md $space_sm;
21
21
  }
22
22
 
@@ -1,42 +1,6 @@
1
- <%= pb_rails("nav", props: {title: "Users", link: "#"}) do %>
2
- <%= pb_rails("nav/item", props: { link: "#", active: true }) do%>
3
- <%= pb_rails("user", props: {
4
- name: "Anna Black",
5
- territory: "PHL",
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, User } from '../../'
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="Users"
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
- <User
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
  }
@@ -8,7 +8,7 @@
8
8
  <% end %>
9
9
 
10
10
  <%= pb_rails("body") do %>
11
- When you make a selection, you will see it appear in the list below
11
+ When you make a selection, you will see it apear in the list below
12
12
  <% end %>
13
13
 
14
14
  <div data-selected-option></div>
@@ -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
- <%= pb_rails("icon", props: {
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, default: false
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, default: false
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!({ getOptionLabel: get_option_label }) if get_option_label.present?
46
- base_options.merge!({ getOptionValue: get_option_value }) if get_option_value.present?
47
- base_options.merge!({ async: true, loadOptions: load_options }) if async
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
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- VERSION = "9.7.0.pre.alphawidth1"
4
+ VERSION = "9.7.0"
5
5
  end
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.pre.alphawidth1
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-20 00:00:00.000000000 Z
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: 1.3.1
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.