playbook_ui 14.2.1.pre.alpha.PBNTR431fixingduplicatingtextareaclassname3689 → 14.2.1.pre.alpha.PBNTR479removeextraspacingfromradiochildren3669

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_circle_icon_button/_circle_icon_button.tsx +0 -3
  3. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +1 -1
  4. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb +0 -2
  5. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js +0 -15
  6. data/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml +0 -2
  7. data/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js +0 -1
  8. data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +1 -0
  9. data/app/pb_kits/playbook/pb_textarea/textarea.html.erb +1 -0
  10. data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +13 -0
  11. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +8 -1
  12. data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx +23 -16
  13. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb +88 -0
  14. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx +60 -0
  15. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
  16. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  17. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -1
  18. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +6 -1
  19. data/dist/chunks/{_typeahead-KAYMhDNO.js → _typeahead-DfMKlsoq.js} +2 -2
  20. data/dist/chunks/{_weekday_stacked-Bms5JW8f.js → _weekday_stacked-DWwxor7z.js} +2 -2
  21. data/dist/chunks/vendor.js +1 -1
  22. data/dist/playbook-doc.js +1 -1
  23. data/dist/playbook-rails-react-bindings.js +1 -1
  24. data/dist/playbook-rails.js +1 -1
  25. data/lib/playbook/version.rb +1 -1
  26. metadata +6 -6
  27. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.html.erb +0 -29
  28. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_loading.jsx +0 -43
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e5176e3600e405965bbf3825210db99f5e79045b2ab05ec5d9dd415b85029a7c
4
- data.tar.gz: c7acd54ee584b58d4e7626f3988e03abc55c78d8eb897fa84601f42a6356bb19
3
+ metadata.gz: 544fa71e47c1a842ee29ae5d8b008a74f614e9f47e72c8234994708474986f19
4
+ data.tar.gz: fe0a673000274c03f0e6e2e7d18b20501df4e411bfe3b3af73b34bde1540a403
5
5
  SHA512:
6
- metadata.gz: 49ca875dcc91d6e2beae3d93ff7ff9e741e8db0a4df9fb3a7c0561311a011fdf301308217f22c65708298ee6f5854015bb8929fc2f67e94820ffc64d1c50bd7e
7
- data.tar.gz: 309f669294d766289d8b79a466d488107c69c243aa1725292b7c15c380ca87bd1f81a2d1c33d1c6c0395ad7a94f8df59f377e340c38342006dc8f0518ae12023
6
+ metadata.gz: '018f79a3becb9f34370e4cba0bdf4919d8901126f1aceab3dfb18a6444e4c091920e863de71641ceda1e3d3ed57ccb1430d22f85954963970276506c1a85466b'
7
+ data.tar.gz: 1f42c264341869cc5f0f55d95d067b778be08d8b2d398bde88200ffda102e4d7a03a8ffff22821853ff04268366d0ad4b3e186aee8a75b63e2f2f6472bbca1ac
@@ -16,7 +16,6 @@ type CircleIconButtonProps = {
16
16
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
17
17
  id?: string,
18
18
  link?: string,
19
- loading?: boolean,
20
19
  onClick?: React.MouseEventHandler<HTMLElement>,
21
20
  newWindow?: boolean,
22
21
  type?: 'button' | 'submit' | 'reset' | undefined,
@@ -33,7 +32,6 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
33
32
  htmlOptions = {},
34
33
  icon,
35
34
  id,
36
- loading = false,
37
35
  onClick = noop,
38
36
  type,
39
37
  link,
@@ -63,7 +61,6 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
63
61
  disabled={disabled}
64
62
  htmlType={type}
65
63
  link={link}
66
- loading={loading}
67
64
  newWindow={newWindow}
68
65
  onClick={onClick}
69
66
  text={null}
@@ -1,5 +1,5 @@
1
1
  <%= pb_content_tag do %>
2
- <%= pb_rails("button", props: {type: object.type, loading: object.loading, link: object.link, new_window:object.new_window, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
2
+ <%= pb_rails("button", props: {type: object.type, link: object.link, new_window:object.new_window, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
3
3
  <%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
4
4
  <% end %>
5
5
  <% end %>
@@ -12,8 +12,6 @@ module Playbook
12
12
  prop :disabled, type: Playbook::Props::Boolean,
13
13
  default: false
14
14
  prop :icon, required: true
15
- prop :loading, type: Playbook::Props::Boolean,
16
- default: false
17
15
  prop :link
18
16
  prop :new_window, type: Playbook::Props::Boolean,
19
17
  default: false
@@ -15,18 +15,3 @@ test('default test', () => {
15
15
 
16
16
  expect(kit).toHaveClass('pb_circle_icon_button_kit')
17
17
  })
18
-
19
- test('passes loading prop to button', () => {
20
- render(
21
- <CircleIconButton
22
- data={{ testid: 'loading-test' }}
23
- icon="plus"
24
- loading
25
- />
26
- )
27
-
28
- const kit = screen.getByTestId('loading-test')
29
- const button = kit.querySelector('.pb_button_kit_primary_inline_enabled_loading')
30
-
31
- expect(button).toBeInTheDocument()
32
- })
@@ -3,10 +3,8 @@ examples:
3
3
  rails:
4
4
  - circle_icon_button_default: Default
5
5
  - circle_icon_button_link: Link
6
- - circle_icon_button_loading: Loading
7
6
 
8
7
  react:
9
8
  - circle_icon_button_default: Default
10
9
  - circle_icon_button_click: Click Handler
11
10
  - circle_icon_button_link: Link
12
- - circle_icon_button_loading: Loading
@@ -1,4 +1,3 @@
1
1
  export { default as CircleIconButtonDefault } from './_circle_icon_button_default.jsx'
2
2
  export { default as CircleIconButtonClick } from './_circle_icon_button_click.jsx'
3
3
  export { default as CircleIconButtonLink } from './_circle_icon_button_link.jsx'
4
- export { default as CircleIconButtonLoading } from './_circle_icon_button_loading.jsx'
@@ -92,6 +92,7 @@ const Textarea = ({
92
92
  <Caption text={label} />
93
93
  {children || (
94
94
  <textarea
95
+ className="pb_textarea_kit"
95
96
  disabled={disabled}
96
97
  name={name}
97
98
  onChange={onChange}
@@ -15,6 +15,7 @@
15
15
  <%= text_area(
16
16
  :object,
17
17
  :method,
18
+ :class => "#{object.classname}",
18
19
  :max_characters => object.max_characters,
19
20
  :name => object.name,
20
21
  :onkeyup => object.onkeyup,
@@ -107,4 +107,17 @@ test('should pass className prop', () => {
107
107
 
108
108
  const kit = screen.getByTestId('typeahead-test')
109
109
  expect(kit).toHaveClass(className)
110
+ })
111
+
112
+ test('typeahead textinput has mb_sm class by default', () => {
113
+ render(
114
+ <Typeahead
115
+ data={{ testid: 'default-mb-test' }}
116
+ options={options}
117
+ />
118
+ )
119
+
120
+ const kit = screen.getByTestId('default-mb-test')
121
+ const textInput = kit.querySelector(".pb_text_input_kit")
122
+ expect(textInput).toHaveClass("mb_sm")
110
123
  })
@@ -45,6 +45,7 @@ type TypeaheadProps = {
45
45
  getOptionLabel?: string | (() => any),
46
46
  getOptionValue?: string | (() => any),
47
47
  name?: string,
48
+ marginBottom?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
48
49
  } & GlobalProps
49
50
 
50
51
  export type SelectValueType = {
@@ -76,12 +77,18 @@ const Typeahead = ({
76
77
  htmlOptions = {},
77
78
  id,
78
79
  loadOptions = noop,
80
+ marginBottom = "sm",
79
81
  ...props
80
82
  }: TypeaheadProps) => {
81
83
  const selectProps = {
82
84
  cacheOptions: true,
83
85
  components: {
84
- Control,
86
+ Control: (controlProps: any) => (
87
+ <Control
88
+ {...controlProps}
89
+ marginBottom={marginBottom}
90
+ />
91
+ ),
85
92
  ClearIndicator,
86
93
  IndicatorsContainer,
87
94
  IndicatorSeparator: null as null,
@@ -6,23 +6,30 @@ import TextInput from '../../pb_text_input/_text_input'
6
6
 
7
7
  type Props = {
8
8
  selectProps: any,
9
+ marginBottom?: string,
9
10
  }
10
11
 
11
- const TypeaheadControl = (props: Props) => (
12
- <div className="pb_typeahead_wrapper">
13
- <TextInput
14
- dark={props.selectProps.dark}
15
- error={props.selectProps.error}
16
- label={props.selectProps.label}
17
- >
18
- <Flex>
19
- <components.Control
20
- className="text_input"
21
- {...props}
22
- />
23
- </Flex>
24
- </TextInput>
25
- </div>
26
- )
12
+ const TypeaheadControl = (props: Props) => {
13
+ const { selectProps, marginBottom } = props
14
+ const { dark, error, label } = selectProps
15
+
16
+ return (
17
+ <div className="pb_typeahead_wrapper">
18
+ <TextInput
19
+ dark={dark}
20
+ error={error}
21
+ label={label}
22
+ marginBottom={marginBottom}
23
+ >
24
+ <Flex>
25
+ <components.Control
26
+ className="text_input"
27
+ {...props}
28
+ />
29
+ </Flex>
30
+ </TextInput>
31
+ </div>
32
+ )
33
+ }
27
34
 
28
35
  export default TypeaheadControl
@@ -0,0 +1,88 @@
1
+ <%
2
+ options = [
3
+ { label: 'Orange', value: '#FFA500' },
4
+ { label: 'Red', value: '#FF0000' },
5
+ { label: 'Green', value: '#00FF00' },
6
+ { label: 'Blue', value: '#0000FF' },
7
+ ]
8
+ %>
9
+
10
+ <%= pb_rails("typeahead", props: {
11
+ id: "typeahead-default",
12
+ placeholder: "All Colors",
13
+ options: options,
14
+ label: "None",
15
+ name: :foo,
16
+ is_multi: false,
17
+ margin_bottom: "none",
18
+ })
19
+ %>
20
+ <%= pb_rails("typeahead", props: {
21
+ id: "typeahead-default",
22
+ placeholder: "All Colors",
23
+ options: options,
24
+ label: "XXS",
25
+ name: :foo,
26
+ is_multi: false,
27
+ margin_bottom: "xxs",
28
+ })
29
+ %>
30
+ <%= pb_rails("typeahead", props: {
31
+ id: "typeahead-default",
32
+ placeholder: "All Colors",
33
+ options: options,
34
+ label: "XS",
35
+ name: :foo,
36
+ is_multi: false,
37
+ margin_bottom: "xs",
38
+ })
39
+ %>
40
+ <%= pb_rails("typeahead", props: {
41
+ id: "typeahead-default",
42
+ placeholder: "All Colors",
43
+ options: options,
44
+ label: "Default - SM",
45
+ name: :foo,
46
+ is_multi: false,
47
+ })
48
+ %>
49
+ <%= pb_rails("typeahead", props: {
50
+ id: "typeahead-default",
51
+ placeholder: "All Colors",
52
+ options: options,
53
+ label: "MD",
54
+ name: :foo,
55
+ is_multi: false,
56
+ margin_bottom: "md",
57
+ })
58
+ %>
59
+ <%= pb_rails("typeahead", props: {
60
+ id: "typeahead-default",
61
+ placeholder: "All Colors",
62
+ options: options,
63
+ label: "LG",
64
+ name: :foo,
65
+ is_multi: false,
66
+ margin_bottom: "lg",
67
+ })
68
+ %>
69
+ <%= pb_rails("typeahead", props: {
70
+ id: "typeahead-default",
71
+ placeholder: "All Colors",
72
+ options: options,
73
+ label: "XL",
74
+ name: :foo,
75
+ is_multi: false,
76
+ margin_bottom: "xl",
77
+ })
78
+ %>
79
+
80
+ <%= javascript_tag defer: "defer" do %>
81
+ document.addEventListener("pb-typeahead-kit-typeahead-default-result-option-select", function(event) {
82
+ console.log('Single Option selected')
83
+ console.dir(event.detail)
84
+ })
85
+ document.addEventListener("pb-typeahead-kit-typeahead-default-result-clear", function() {
86
+ console.log('All options cleared')
87
+ })
88
+ <% end %>
@@ -0,0 +1,60 @@
1
+ import React from 'react'
2
+
3
+ import Typeahead from '../_typeahead'
4
+
5
+ const options = [
6
+ { label: 'Orange', value: '#FFA500' },
7
+ { label: 'Red', value: '#FF0000' },
8
+ { label: 'Green', value: '#00FF00' },
9
+ { label: 'Blue', value: '#0000FF' },
10
+ ]
11
+
12
+ const TypeaheadMarginBottom = (props) => {
13
+ return (
14
+ <>
15
+ <Typeahead
16
+ label="None"
17
+ marginBottom="none"
18
+ options={options}
19
+ {...props}
20
+ />
21
+ <Typeahead
22
+ label="XXS"
23
+ marginBottom="xxs"
24
+ options={options}
25
+ {...props}
26
+ />
27
+ <Typeahead
28
+ label="XS"
29
+ marginBottom="xs"
30
+ options={options}
31
+ {...props}
32
+ />
33
+ <Typeahead
34
+ label="Default - SM"
35
+ options={options}
36
+ {...props}
37
+ />
38
+ <Typeahead
39
+ label="MD"
40
+ marginBottom="md"
41
+ options={options}
42
+ {...props}
43
+ />
44
+ <Typeahead
45
+ label="LG"
46
+ marginBottom="lg"
47
+ options={options}
48
+ {...props}
49
+ />
50
+ <Typeahead
51
+ label="XL"
52
+ marginBottom="xl"
53
+ options={options}
54
+ {...props}
55
+ />
56
+ </>
57
+ )
58
+ }
59
+
60
+ export default TypeaheadMarginBottom
@@ -9,6 +9,7 @@ examples:
9
9
  - typeahead_inline: Inline
10
10
  - typeahead_multi_kit: Multi Kit Options
11
11
  - typeahead_error_state: Error State
12
+ - typeahead_margin_bottom: Margin Bottom
12
13
 
13
14
  react:
14
15
  - typeahead_default: Default
@@ -23,3 +24,4 @@ examples:
23
24
  - typeahead_async_createable: Createable (+ Async Data)
24
25
  - typeahead_error_state: Error State
25
26
  - typeahead_custom_menu_list: Custom MenuList
27
+ - typeahead_margin_bottom: Margin Bottom
@@ -10,3 +10,4 @@ export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
10
10
  export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'
11
11
  export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'
12
12
  export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_list.jsx'
13
+ export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx'
@@ -20,7 +20,8 @@
20
20
  label: object.label,
21
21
  name: object.name,
22
22
  value: object.value,
23
- placeholder: object.placeholder
23
+ placeholder: object.placeholder,
24
+ margin_bottom: "none",
24
25
  }) %>
25
26
  <%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
26
27
  <% end %>
@@ -14,6 +14,9 @@ module Playbook
14
14
  default: false
15
15
  prop :label
16
16
  prop :load_options
17
+ prop :margin_bottom, type: Playbook::Props::Enum,
18
+ values: %w[none xxs xs sm md lg xl],
19
+ default: "sm"
17
20
  prop :multi_kit, type: Playbook::Props::String,
18
21
  default: ""
19
22
  prop :name
@@ -36,7 +39,8 @@ module Playbook
36
39
  prop :value
37
40
 
38
41
  def classname
39
- generate_classname("pb_typeahead_kit")
42
+ default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
43
+ generate_classname("pb_typeahead_kit") + default_margin_bottom
40
44
  end
41
45
 
42
46
  def inline_class
@@ -65,6 +69,7 @@ module Playbook
65
69
  inline: inline,
66
70
  isMulti: is_multi,
67
71
  label: label,
72
+ marginBottom: margin_bottom,
68
73
  multiKit: multi_kit,
69
74
  name: name,
70
75
  options: options,