playbook_ui 13.25.0.pre.alpha.barchartfix2766 → 13.26.0.pre.alpha.jasoncypretpatch12816

Sign up to get free protection for your applications and to get access to all the features.
Files changed (95) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +1 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +14 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb +33 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md +24 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +5 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -2
  8. data/app/pb_kits/playbook/pb_advanced_table/index.js +78 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +4 -2
  10. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +3 -2
  11. data/app/pb_kits/playbook/pb_avatar/Utilities/GetPlacementPropsHelper.tsx +44 -0
  12. data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +86 -21
  13. data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +26 -3
  14. data/app/pb_kits/playbook/pb_avatar/avatar.rb +41 -0
  15. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb +71 -0
  16. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +77 -0
  17. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb +71 -0
  18. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +77 -0
  19. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +20 -0
  20. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +4 -0
  21. data/app/pb_kits/playbook/pb_avatar/docs/index.js +2 -0
  22. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +1 -0
  23. data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +49 -0
  24. data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx +3 -0
  25. data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +2 -1
  26. data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js +14 -0
  27. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.html.erb +23 -0
  28. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.jsx +29 -0
  29. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +2 -0
  30. data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
  31. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md +3 -1
  32. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md +3 -1
  33. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
  34. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +92 -31
  35. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +60 -21
  36. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +2 -20
  37. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -0
  38. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx +42 -0
  39. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +7 -0
  40. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +1 -4
  41. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +0 -1
  42. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +1 -1
  43. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +3 -1
  44. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +1 -4
  45. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +1 -1
  46. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +1 -4
  47. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +59 -0
  48. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +72 -0
  49. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +39 -0
  50. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +1 -0
  51. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +6 -2
  52. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +5 -1
  53. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +200 -10
  54. data/app/pb_kits/playbook/pb_dropdown/hooks/useDropdown.tsx +2 -2
  55. data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx +4 -4
  56. data/app/pb_kits/playbook/pb_dropdown/scss_partials/_dropdown_animation.scss +18 -0
  57. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx +17 -8
  58. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +25 -15
  59. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +96 -78
  60. data/app/pb_kits/playbook/pb_dropdown/utilities/clickOutsideHelper.tsx +41 -0
  61. data/app/pb_kits/playbook/pb_dropdown/utilities/index.ts +2 -0
  62. data/app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx +9 -7
  63. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +3 -1
  64. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.html.erb +13 -0
  65. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.jsx +26 -0
  66. data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_light.html.erb → _loading_inline_default.html.erb} +2 -2
  67. data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_light.jsx → _loading_inline_default.jsx} +2 -2
  68. data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml +4 -2
  69. data/app/pb_kits/playbook/pb_loading_inline/docs/index.js +2 -1
  70. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +1 -1
  71. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb +1 -0
  72. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js +14 -0
  73. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.html.erb +3 -0
  74. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx +16 -0
  75. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.md +1 -0
  76. data/app/pb_kits/playbook/pb_progress_simple/docs/example.yml +2 -0
  77. data/app/pb_kits/playbook/pb_progress_simple/docs/index.js +1 -0
  78. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb +1 -1
  79. data/app/pb_kits/playbook/pb_radio/_radio.scss +35 -0
  80. data/app/pb_kits/playbook/pb_radio/_radio.tsx +3 -0
  81. data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx +4 -1
  82. data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx +4 -1
  83. data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.html.erb +26 -0
  84. data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.jsx +31 -0
  85. data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx +2 -1
  86. data/app/pb_kits/playbook/pb_radio/docs/example.yml +2 -0
  87. data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
  88. data/app/pb_kits/playbook/pb_radio/radio.rb +5 -0
  89. data/app/pb_kits/playbook/pb_radio/radio.test.js +17 -0
  90. data/app/pb_kits/playbook/playbook-rails.js +3 -0
  91. data/dist/menu.yml +1 -1
  92. data/dist/playbook-rails.js +6 -6
  93. data/lib/playbook/version.rb +2 -2
  94. metadata +30 -5
  95. data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md +0 -1
@@ -0,0 +1,41 @@
1
+ type HandleClickOutsideType = {
2
+ inputWrapperRef?: React.RefObject<HTMLDivElement>;
3
+ dropdownContainerRef?: React.RefObject<HTMLDivElement>;
4
+ setIsDropDownClosed?: (value: boolean) => void;
5
+ setFocusedOptionIndex?: (value: number) => void;
6
+ setIsInputFocused?: (value: boolean) => void;
7
+ };
8
+
9
+ export const handleClickOutside =
10
+ ({
11
+ inputWrapperRef,
12
+ dropdownContainerRef,
13
+ setIsDropDownClosed,
14
+ setFocusedOptionIndex,
15
+ setIsInputFocused,
16
+ }: HandleClickOutsideType) =>
17
+ (e: MouseEvent) => {
18
+ let targetElement = e.target as HTMLElement;
19
+ let shouldClose = true;
20
+
21
+ //Only needed for when useDropdown hook used with external trigger
22
+ while (targetElement && shouldClose) {
23
+ if (
24
+ targetElement.getAttribute("data-dropdown") === "pb-dropdown-trigger"
25
+ ) {
26
+ shouldClose = false;
27
+ }
28
+ targetElement = targetElement.parentElement as HTMLElement;
29
+ }
30
+ if (
31
+ inputWrapperRef.current &&
32
+ !inputWrapperRef.current.contains((e.target as HTMLElement)) &&
33
+ dropdownContainerRef.current &&
34
+ !dropdownContainerRef.current.contains((e.target as HTMLElement)) &&
35
+ shouldClose
36
+ ) {
37
+ setIsDropDownClosed(true);
38
+ setFocusedOptionIndex(-1);
39
+ setIsInputFocused(false);
40
+ }
41
+ };
@@ -0,0 +1,2 @@
1
+ export { separateChildComponents, prepareSubcomponents } from './subComponentHelper';
2
+ export { handleClickOutside } from './clickOutsideHelper';
@@ -4,11 +4,12 @@ import DropdownContainer from "../subcomponents/DropdownContainer";
4
4
 
5
5
  type PrepareComponentsProps = {
6
6
  children: React.ReactChild[] | React.ReactChild;
7
- hasTriggerSubcomponent: boolean;
8
- hasContainerSubcomponent: boolean;
9
- trigger: React.ReactChild;
10
7
  container: React.ReactChild;
8
+ dark?: boolean;
9
+ hasContainerSubcomponent: boolean;
10
+ hasTriggerSubcomponent: boolean;
11
11
  otherChildren: React.ReactChild[];
12
+ trigger: React.ReactChild;
12
13
  };
13
14
 
14
15
  export const separateChildComponents = (children: React.ReactChild[] | React.ReactChild | ReactElement[]) => {
@@ -36,19 +37,20 @@ export const prepareSubcomponents = ({
36
37
  trigger,
37
38
  container,
38
39
  otherChildren,
40
+ dark
39
41
  }: PrepareComponentsProps) => {
40
42
  const componentsToRender = [];
41
43
 
42
44
  if (!hasTriggerSubcomponent && !hasContainerSubcomponent) {
43
- componentsToRender.push(<DropdownTrigger />);
44
- componentsToRender.push(<DropdownContainer>{children}</DropdownContainer>);
45
+ componentsToRender.push(<DropdownTrigger dark={dark}/>);
46
+ componentsToRender.push(<DropdownContainer dark={dark}>{children}</DropdownContainer>);
45
47
  } else if (!hasTriggerSubcomponent && hasContainerSubcomponent) {
46
- componentsToRender.push(<DropdownTrigger />);
48
+ componentsToRender.push(<DropdownTrigger dark={dark}/>);
47
49
  componentsToRender.push(children);
48
50
  } else if (hasTriggerSubcomponent && !hasContainerSubcomponent) {
49
51
  componentsToRender.push(trigger);
50
52
  componentsToRender.push(
51
- <DropdownContainer>{otherChildren}</DropdownContainer>
53
+ <DropdownContainer dark={dark}>{otherChildren}</DropdownContainer>
52
54
  );
53
55
  } else {
54
56
  componentsToRender.push(trigger);
@@ -14,6 +14,7 @@ type LoadingInlineProps = {
14
14
  data?: { [key: string]: string },
15
15
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
16
16
  id?: string,
17
+ text?: string,
17
18
  }
18
19
 
19
20
  const LoadingInline = (props: LoadingInlineProps) => {
@@ -24,6 +25,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
24
25
  data = {},
25
26
  htmlOptions = {},
26
27
  id,
28
+ text = ' Loading',
27
29
  } = props
28
30
 
29
31
  const ariaProps = buildAriaProps(aria)
@@ -50,7 +52,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
50
52
  icon="spinner"
51
53
  pulse
52
54
  />
53
- {' Loading'}
55
+ {text}
54
56
  </Body>
55
57
  </div>
56
58
  )
@@ -0,0 +1,13 @@
1
+ <%= pb_rails("loading_inline", props: {
2
+ text: "Saving"
3
+ }) %>
4
+
5
+ <%= pb_rails("loading_inline", props: {
6
+ align: "center",
7
+ text: "Saving"
8
+ }) %>
9
+
10
+ <%= pb_rails("loading_inline", props: {
11
+ align: "right",
12
+ text: "Saving",
13
+ }) %>
@@ -0,0 +1,26 @@
1
+ import React from 'react'
2
+
3
+ import LoadingInline from '../_loading_inline'
4
+
5
+ const LoadingInlineCustom = (props) => {
6
+ return (
7
+ <div>
8
+ <LoadingInline
9
+ text=' Saving'
10
+ {...props}
11
+ />
12
+ <LoadingInline
13
+ align="center"
14
+ text=' Saving'
15
+ {...props}
16
+ />
17
+ <LoadingInline
18
+ align="right"
19
+ text=' Saving'
20
+ {...props}
21
+ />
22
+ </div>
23
+ )
24
+ }
25
+
26
+ export default LoadingInlineCustom
@@ -1,9 +1,9 @@
1
1
  <%= pb_rails("loading_inline") %>
2
2
 
3
3
  <%= pb_rails("loading_inline", props: {
4
- align: "center"
4
+ align: "center"
5
5
  }) %>
6
6
 
7
7
  <%= pb_rails("loading_inline", props: {
8
- align: "right"
8
+ align: "right"
9
9
  }) %>
@@ -2,7 +2,7 @@ import React from 'react'
2
2
 
3
3
  import LoadingInline from '../_loading_inline'
4
4
 
5
- const LoadingInlineLight = (props) => {
5
+ const LoadingInlineDefault = (props) => {
6
6
  return (
7
7
  <div>
8
8
  <LoadingInline
@@ -20,4 +20,4 @@ const LoadingInlineLight = (props) => {
20
20
  )
21
21
  }
22
22
 
23
- export default LoadingInlineLight
23
+ export default LoadingInlineDefault
@@ -1,9 +1,11 @@
1
1
  examples:
2
2
 
3
3
  rails:
4
- - loading_inline_light: Light
4
+ - loading_inline_default: Default
5
+ - loading_inline_custom: Custom Text
5
6
 
6
7
 
7
8
 
8
9
  react:
9
- - loading_inline_light: Default
10
+ - loading_inline_default: Default
11
+ - loading_inline_custom: Custom Text
@@ -1 +1,2 @@
1
- export { default as LoadingInlineLight } from './_loading_inline_light.jsx'
1
+ export { default as LoadingInlineDefault } from './_loading_inline_default.jsx'
2
+ export { default as LoadingInlineCustom } from './_loading_inline_custom.jsx'
@@ -1,5 +1,5 @@
1
1
  <%= pb_content_tag do %>
2
2
  <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
3
- <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> Loading
3
+ <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> <%= object.text %>
4
4
  <% end %>
5
5
  <% end %>
@@ -7,6 +7,7 @@ module Playbook
7
7
  values: %w[left center right],
8
8
  default: "left"
9
9
  prop :dark, type: Playbook::Props::Boolean, default: false
10
+ prop :text, type: Playbook::Props::String, default: "Loading"
10
11
 
11
12
  def classname
12
13
  generate_classname("pb_loading_inline_kit", align)
@@ -39,3 +39,17 @@ test('should render aria-label', () => {
39
39
  const kit = screen.getByTestId(testId)
40
40
  expect(kit).toHaveAttribute('aria-label', testId)
41
41
  })
42
+
43
+
44
+ test('displays custom text content', () => {
45
+ render(
46
+ <LoadingInline
47
+ aria={{ label: testId }}
48
+ data={{ testid: testId }}
49
+ text=' Saving'
50
+ />
51
+ )
52
+
53
+ const kit = screen.getByTestId(testId)
54
+ expect(kit).toHaveTextContent('Saving')
55
+ })
@@ -0,0 +1,3 @@
1
+ <%= pb_rails("flex") do %>
2
+ <%= pb_rails("progress_simple", props: { flex: "1", percent: 50 }) %>
3
+ <% end %>
@@ -0,0 +1,16 @@
1
+ import React from 'react'
2
+ import { Flex, ProgressSimple } from '../..'
3
+
4
+ const ProgressSimpleFlex = () => {
5
+ return (
6
+ <Flex>
7
+ <ProgressSimple
8
+ align="left"
9
+ flex="1"
10
+ percent={68}
11
+ />
12
+ </Flex>
13
+ )
14
+ }
15
+
16
+ export default ProgressSimpleFlex
@@ -0,0 +1 @@
1
+ When rendering a Progress Simple through within a Flex container, you must pass `flex="1"` to the kit itself so that it fills the available space
@@ -3,6 +3,7 @@ examples:
3
3
  rails:
4
4
  - progress_simple_default: Default
5
5
  - progress_simple_value: Setting Values
6
+ - progress_simple_flex: Within a Flex
6
7
  - progress_simple_width: Progress Bar Width
7
8
  - progress_simple_variants: Variants
8
9
  - progress_simple_muted: Muted
@@ -12,6 +13,7 @@ examples:
12
13
  react:
13
14
  - progress_simple_default: Default
14
15
  - progress_simple_value: Setting Values
16
+ - progress_simple_flex: Within a Flex
15
17
  - progress_simple_width: Progress Bar Width
16
18
  - progress_simple_variants: Variants
17
19
  - progress_simple_muted: Muted
@@ -2,6 +2,7 @@ export { default as ProgressSimpleAlign } from './_progress_simple_align.jsx'
2
2
  export { default as ProgressSimpleDefault } from './_progress_simple_default.jsx'
3
3
  export { default as ProgressSimpleMuted } from './_progress_simple_muted.jsx'
4
4
  export { default as ProgressSimpleValue } from './_progress_simple_value.jsx'
5
+ export { default as ProgressSimpleFlex } from './_progress_simple_flex.jsx'
5
6
  export { default as ProgressSimpleWidth } from './_progress_simple_width.jsx'
6
7
  export { default as ProgressSimpleVariants } from './_progress_simple_variants.jsx'
7
8
 
@@ -48,7 +48,7 @@ module Playbook
48
48
  end
49
49
 
50
50
  def wrapper_classname
51
- "pb_progress_simple_wrapper_#{align}"
51
+ generate_classname("pb_progress_simple_wrapper_#{align}")
52
52
  end
53
53
 
54
54
  def classname
@@ -40,6 +40,23 @@
40
40
  border: 6px solid $primary;
41
41
  }
42
42
  }
43
+
44
+ &:disabled + .pb_radio_button {
45
+ cursor: not-allowed;
46
+ background-color: mix($charcoal, $white, 5%);
47
+ border-color: $border_light;
48
+
49
+ & ~ .pb_body_kit {
50
+ cursor: not-allowed;
51
+ color: $text_lt_light;
52
+ }
53
+ }
54
+
55
+ &:disabled:checked + .pb_radio_button{
56
+ cursor: not-allowed;
57
+ background-color: $white;
58
+ border: 6px solid $neutral;
59
+ }
43
60
  }
44
61
 
45
62
  &[class*=vertical] {
@@ -66,6 +83,24 @@
66
83
  border: 6px solid $primary;
67
84
  }
68
85
  }
86
+
87
+ &:disabled + .pb_radio_button {
88
+ cursor: not-allowed;
89
+ background-color: mix($charcoal, $white, 80%);
90
+ border: 2px solid $border_dark;
91
+
92
+ & ~ .pb_body_kit {
93
+ cursor: not-allowed;
94
+ color: $text_dk_light;
95
+ }
96
+ }
97
+
98
+ &:disabled:checked {
99
+ & ~ .pb_radio_button {
100
+ background-color: mix($charcoal, $white, 80%);
101
+ border: 6px solid $border_dark;
102
+ }
103
+ }
69
104
  }
70
105
 
71
106
  @media (hover:hover) {
@@ -14,6 +14,7 @@ type RadioProps = {
14
14
  className?: string,
15
15
  dark?: boolean,
16
16
  data?: {[key: string]: string},
17
+ disabled?: boolean,
17
18
  error?: boolean,
18
19
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
19
20
  id?: string,
@@ -31,6 +32,7 @@ const Radio = ({
31
32
  className,
32
33
  dark = false,
33
34
  data = {},
35
+ disabled = false,
34
36
  error = false,
35
37
  htmlOptions = {},
36
38
  id,
@@ -56,6 +58,7 @@ const Radio = ({
56
58
  else
57
59
  return (
58
60
  <input
61
+ disabled={disabled}
59
62
  id={id}
60
63
  name={name}
61
64
  onChange={onChange}
@@ -1,7 +1,7 @@
1
1
  import React from 'react'
2
2
  import { Flex, Radio } from '../../'
3
3
 
4
- const RadioAlignment = () => {
4
+ const RadioAlignment = (props) => {
5
5
  return (
6
6
  <Flex>
7
7
  <Radio
@@ -11,6 +11,7 @@ const RadioAlignment = () => {
11
11
  name="Group2"
12
12
  tabIndex={0}
13
13
  value="Power"
14
+ {...props}
14
15
  />
15
16
  <br />
16
17
  <Radio
@@ -20,6 +21,7 @@ const RadioAlignment = () => {
20
21
  marginRight="sm"
21
22
  name="Group2"
22
23
  value="Nitro"
24
+ {...props}
23
25
  />
24
26
  <br />
25
27
  <Radio
@@ -28,6 +30,7 @@ const RadioAlignment = () => {
28
30
  label="Google"
29
31
  name="Group2"
30
32
  value="Google"
33
+ {...props}
31
34
  />
32
35
  </Flex>
33
36
  )
@@ -2,7 +2,7 @@ import React from 'react'
2
2
 
3
3
  import Radio from '../_radio'
4
4
 
5
- const RadioDefault = () => {
5
+ const RadioDefault = (props) => {
6
6
  const ref = React.createRef()
7
7
 
8
8
  return (
@@ -13,6 +13,7 @@ const RadioDefault = () => {
13
13
  ref={ref}
14
14
  tabIndex={0}
15
15
  value="Power"
16
+ {...props}
16
17
  />
17
18
  <br />
18
19
  <Radio
@@ -20,6 +21,7 @@ const RadioDefault = () => {
20
21
  label="Nitro"
21
22
  name="Group2"
22
23
  value="Nitro"
24
+ {...props}
23
25
  />
24
26
  <br />
25
27
  <Radio
@@ -27,6 +29,7 @@ const RadioDefault = () => {
27
29
  label="Google"
28
30
  name="Group2"
29
31
  value="Google"
32
+ {...props}
30
33
  />
31
34
  </div>
32
35
  )
@@ -0,0 +1,26 @@
1
+ <%= pb_rails("flex", props: {orientation: "column"}) do %>
2
+ <%= pb_rails("flex/flex_item") do %>
3
+ <%= pb_rails("radio", props: {
4
+ text: "Disabled unselected",
5
+ input_options: {
6
+ tabindex: 0,
7
+ disabled: true,
8
+ },
9
+ margin_bottom: "xs",
10
+ name: "DisabledGroup",
11
+ value: "Disabled unselected",
12
+ }) %>
13
+ <% end %>
14
+ <%= pb_rails("flex/flex_item") do %>
15
+ <%= pb_rails("radio", props: {
16
+ text: "Disabled selected",
17
+ input_options: {
18
+ tabindex: 0,
19
+ disabled: true,
20
+ },
21
+ checked: true,
22
+ name: "DisabledGroup",
23
+ value: "Disabled selected"
24
+ }) %>
25
+ <% end %>
26
+ <% end %>
@@ -0,0 +1,31 @@
1
+ import React from 'react'
2
+
3
+ import Radio from '../_radio'
4
+
5
+ const RadioDisabled = (props) => {
6
+ const ref = React.createRef()
7
+
8
+ return (
9
+ <div style={{ display: "flex", flexDirection: "column" }}>
10
+ <Radio
11
+ disabled
12
+ label="Disabled unselected"
13
+ marginBottom="xs"
14
+ name="DisabledGroup"
15
+ ref={ref}
16
+ tabIndex={0}
17
+ value="Disabled unselected"
18
+ {...props}
19
+ />
20
+ <Radio
21
+ checked
22
+ disabled
23
+ label="Disabled selected"
24
+ name="DisabledGroup"
25
+ value="Disabled selected"
26
+ {...props}
27
+ />
28
+ </div>
29
+ )
30
+ }
31
+ export default RadioDisabled
@@ -1,7 +1,7 @@
1
1
  import React from 'react'
2
2
  import { Radio } from '../..'
3
3
 
4
- const RadioError = () => {
4
+ const RadioError = (props) => {
5
5
  return (
6
6
  <div>
7
7
  <Radio
@@ -9,6 +9,7 @@ const RadioError = () => {
9
9
  label="Power"
10
10
  name="Group2"
11
11
  value="Power"
12
+ {...props}
12
13
  />
13
14
  </div>
14
15
  )
@@ -6,12 +6,14 @@ examples:
6
6
  - radio_error: With Error
7
7
  - radio_options: With Options
8
8
  - radio_alignment: Alignment
9
+ - radio_disabled: Disabled
9
10
 
10
11
  react:
11
12
  - radio_default: Default
12
13
  - radio_custom: Custom
13
14
  - radio_error: With Error
14
15
  - radio_alignment: Alignment
16
+ - radio_disabled: Disabled
15
17
 
16
18
  swift:
17
19
  - radio_default_swift: Default
@@ -2,3 +2,4 @@ export { default as RadioDefault } from './_radio_default.jsx'
2
2
  export { default as RadioCustom } from './_radio_custom.jsx'
3
3
  export { default as RadioError } from './_radio_error.jsx'
4
4
  export { default as RadioAlignment } from './_radio_alignment.jsx'
5
+ export { default as RadioDisabled } from './_radio_disabled.jsx'
@@ -11,6 +11,7 @@ module Playbook
11
11
  default: false
12
12
  prop :error, type: Playbook::Props::Boolean,
13
13
  default: false
14
+ prop :disabled, type: Playbook::Props::Boolean, default: false
14
15
  prop :input_options, type: Playbook::Props::HashProp,
15
16
  default: {}
16
17
  prop :name, type: Playbook::Props::String,
@@ -32,6 +33,10 @@ module Playbook
32
33
  error ? "negative" : nil
33
34
  end
34
35
 
36
+ def input
37
+ radio_button_tag(name, value, checked, input_options.merge(disabled: disabled))
38
+ end
39
+
35
40
  private
36
41
 
37
42
  def error_class
@@ -69,3 +69,20 @@ test('returns dark + error class name', () => {
69
69
  const kit = screen.getByTestId(testId)
70
70
  expect(kit).toHaveClass(`${kitClass} dark error`)
71
71
  })
72
+
73
+ test('has disabled attribute', () => {
74
+ render(
75
+ <Radio
76
+ data={{ testid: testId }}
77
+ disabled
78
+ label="Power"
79
+ name="Group2"
80
+ value="Power"
81
+ />
82
+ )
83
+
84
+ const kit = screen.getByTestId(testId)
85
+ const input = kit.querySelector('input')
86
+ expect(input).toHaveAttribute('disabled')
87
+ })
88
+
@@ -33,6 +33,9 @@ PbTable.start()
33
33
  import PbTextarea from './pb_textarea'
34
34
  PbTextarea.start()
35
35
 
36
+ import PbAdvancedTable from './pb_advanced_table'
37
+ PbAdvancedTable.start()
38
+
36
39
  import 'flatpickr'
37
40
 
38
41
  // React-Rendered Rails Kits =====
data/dist/menu.yml CHANGED
@@ -53,7 +53,7 @@ kits:
53
53
  description: Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data.
54
54
  status: "stable"
55
55
  - name: "advanced_table"
56
- platforms: *react_only
56
+ platforms: *web
57
57
  description: The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting.
58
58
  status: "stable"
59
59
  - name: "list"