playbook_ui 13.15.0 → 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2010

Sign up to get free protection for your applications and to get access to all the features.
Files changed (108) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +14 -12
  3. data/app/pb_kits/playbook/index.js +2 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx +30 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +59 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/Components/LoadingCell.tsx +5 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +30 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +61 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +120 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +28 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx +5 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/SubComponents/TableBody.tsx +95 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/SubComponents/TableHeader.tsx +51 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/Utilities/helper_functions.tsx +77 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +8 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +97 -0
  17. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +237 -0
  18. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +56 -0
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +52 -0
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +278 -0
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +5 -0
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -0
  23. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss +60 -0
  24. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_pseudo_states.scss +12 -0
  25. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_colors_swift.md +27 -0
  26. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default_swift.md +22 -0
  27. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_props_table.md +8 -0
  28. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_sizes_swift.md +26 -0
  29. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +6 -0
  30. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +4 -2
  31. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +5 -3
  32. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +40 -33
  33. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +4 -4
  34. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +44 -30
  35. data/app/pb_kits/playbook/pb_flex/_flex.tsx +5 -5
  36. data/app/pb_kits/playbook/pb_form_group/_form_group.tsx +3 -2
  37. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +7 -4
  38. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +10 -10
  39. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +10 -9
  40. data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +3 -2
  41. data/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx +3 -2
  42. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +1 -1
  43. data/app/pb_kits/playbook/pb_layout/_layout.tsx +2 -1
  44. data/app/pb_kits/playbook/pb_layout/layout.test.js +8 -4
  45. data/app/pb_kits/playbook/pb_legend/_legend.tsx +6 -6
  46. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +4 -4
  47. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +1 -1
  48. data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -3
  49. data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +30 -22
  50. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -5
  51. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +4 -4
  52. data/app/pb_kits/playbook/pb_list/_list.tsx +15 -15
  53. data/app/pb_kits/playbook/pb_list/_list_item.tsx +1 -1
  54. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +9 -9
  55. data/app/pb_kits/playbook/pb_map/_map.tsx +8 -8
  56. data/app/pb_kits/playbook/pb_map/_map_controls.tsx +15 -7
  57. data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx +4 -2
  58. data/app/pb_kits/playbook/pb_message/_message.tsx +1 -1
  59. data/app/pb_kits/playbook/pb_message/_message_mention.tsx +6 -6
  60. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +46 -42
  61. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +20 -20
  62. data/app/pb_kits/playbook/pb_nav/_item.tsx +56 -47
  63. data/app/pb_kits/playbook/pb_nav/_nav.tsx +15 -15
  64. data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_bold_swift.md +17 -0
  65. data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_default_swift.md +17 -0
  66. data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_subtle_no_highlight_swift.md +18 -0
  67. data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_subtle_swift.md +18 -0
  68. data/app/pb_kits/playbook/pb_nav/docs/_nav_props_swift.md +11 -0
  69. data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_bold_swift.md +18 -0
  70. data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_default_swift.md +18 -0
  71. data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_subtle_no_highlight_swift.md +19 -0
  72. data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_subtle_swift.md +17 -0
  73. data/app/pb_kits/playbook/pb_nav/docs/example.yml +17 -0
  74. data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +51 -50
  75. data/app/pb_kits/playbook/pb_person_contact/_person_contact.tsx +20 -19
  76. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +4 -3
  77. data/app/pb_kits/playbook/pb_popover/_popover.tsx +6 -4
  78. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx +20 -20
  79. data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.tsx +4 -4
  80. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx +19 -17
  81. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts +1 -1
  82. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx +23 -21
  83. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx +18 -10
  84. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +46 -23
  85. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx +8 -8
  86. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx +7 -7
  87. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +17 -15
  88. data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +9 -7
  89. data/app/pb_kits/playbook/pb_select/_select.scss +13 -4
  90. data/app/pb_kits/playbook/pb_select/_select.tsx +7 -4
  91. data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.html.erb +24 -0
  92. data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx +38 -0
  93. data/app/pb_kits/playbook/pb_select/docs/example.yml +2 -0
  94. data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
  95. data/app/pb_kits/playbook/pb_select/select.rb +6 -1
  96. data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.tsx +25 -24
  97. data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx +27 -26
  98. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx +2 -1
  99. data/app/pb_kits/playbook/pb_source/_source.tsx +15 -15
  100. data/app/pb_kits/playbook/pb_table/_table.tsx +29 -29
  101. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +1 -1
  102. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +4 -2
  103. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  104. data/app/pb_kits/playbook/utilities/globalProps.ts +1 -1
  105. data/dist/menu.yml +4 -1
  106. data/dist/playbook-rails.js +14 -6
  107. data/lib/playbook/version.rb +2 -2
  108. metadata +43 -7
@@ -20,17 +20,19 @@ const MoreExtensionsDropdown = ({extensions}: any) => {
20
20
 
21
21
  const popoverReference = (
22
22
  <button
23
- className="toolbar_button"
24
- onClick={handleTogglePopover}
25
- role="button"
26
- type="button"
23
+ className="toolbar_button"
24
+ onClick={handleTogglePopover}
25
+ role="button"
26
+ type="button"
27
27
  >
28
28
  <Flex
29
- align="center"
30
- className="toolbar_button_icon"
31
- justify="center"
29
+ align="center"
30
+ className="toolbar_button_icon"
31
+ justify="center"
32
32
  >
33
- <Icon icon="ellipsis" size="lg" />
33
+ <Icon icon="ellipsis"
34
+ size="lg"
35
+ />
34
36
  </Flex>
35
37
  </button>
36
38
 
@@ -46,21 +48,21 @@ const popoverReference = (
46
48
  show={showPopover}
47
49
  >
48
50
  <Nav
49
- paddingTop={extensions.length > 1 ? "xs" : "none"}
50
- paddingBottom={extensions.length > 1 ? "xs" : "none"}
51
- variant="subtle"
51
+ paddingBottom={extensions.length > 1 ? "xs" : "none"}
52
+ paddingTop={extensions.length > 1 ? "xs" : "none"}
53
+ variant="subtle"
52
54
  >
53
- {extensions && extensions.map(({ icon, text, onclick, isActive}:any, index:number) => (
55
+ {extensions && extensions.map(({ icon, text, onclick, isActive}: any, index: number) => (
54
56
  <NavItem
55
- cursor="pointer"
56
- className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "is-active" : ""}`}
57
- iconLeft={icon}
58
- key={`${text}_${index}`}
59
- margin='none'
60
- onClick={()=> {onclick(); setShowPopover(false)}}
61
- text={text}
62
- paddingTop='xxs'
63
- paddingBottom='xxs'
57
+ className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "is-active" : ""}`}
58
+ cursor="pointer"
59
+ iconLeft={icon}
60
+ key={`${text}_${index}`}
61
+ margin='none'
62
+ onClick={()=> {onclick(); setShowPopover(false)}}
63
+ paddingBottom='xxs'
64
+ paddingTop='xxs'
65
+ text={text}
64
66
  />
65
67
  ))}
66
68
  </Nav>
@@ -11,7 +11,7 @@ import { ToolbarTypes } from "./EditorTypes";
11
11
  import ToolbarHistoryItems from "./ToolbarHistory";
12
12
  import MoreExtensionsDropdown from "./MoreExtensionsDropdown";
13
13
 
14
- const EditorToolbar = ({ editor, extensions }:any) => {
14
+ const EditorToolbar = ({ editor, extensions }: any): React.ReactElement => {
15
15
  const toolbaritems = [
16
16
  {
17
17
  icon: "bold",
@@ -34,19 +34,27 @@ const EditorToolbar = ({ editor, extensions }:any) => {
34
34
  ]
35
35
 
36
36
  return (
37
- <Background backgroundColor="white" className="toolbar">
38
- <Flex flex="0" justify="between" paddingX="sm" paddingY="xxs">
39
- <FlexItem className="toolbar_block" displayFlex>
37
+ <Background backgroundColor="white"
38
+ className="toolbar"
39
+ >
40
+ <Flex flex="0"
41
+ justify="between"
42
+ paddingX="sm"
43
+ paddingY="xxs"
44
+ >
45
+ <FlexItem className="toolbar_block"
46
+ displayFlex
47
+ >
40
48
  <ToolbarDropdown editor={editor}/>
41
49
  <SectionSeparator orientation="vertical" />
42
50
  {toolbaritems && toolbaritems.map(
43
- ({ icon, text, classname, onclick}:ToolbarTypes, index:number) => (
51
+ ({ icon, text, classname, onclick}: ToolbarTypes, index: number) => (
44
52
  <EditorButton
45
- classname={classname}
46
- icon={icon}
47
- key={index}
48
- text={text}
49
- onclick={onclick}
53
+ classname={classname}
54
+ icon={icon}
55
+ key={index}
56
+ onclick={onclick}
57
+ text={text}
50
58
  />
51
59
  )
52
60
  )}
@@ -9,7 +9,7 @@ import NavItem from '../../pb_nav/_item'
9
9
 
10
10
  import { ToolbarTypes } from './EditorTypes'
11
11
 
12
- const ToolbarDropdown = ({editor}: any) => {
12
+ const ToolbarDropdown = ({editor}: any): React.ReactElement => {
13
13
  const [showPopover, setShowPopover] = useState(false)
14
14
 
15
15
  const toolbarDropdownItems = [
@@ -81,11 +81,21 @@ for (const { text, isActive, icon } of toolbarDropdownItems) {
81
81
  if (isActive) {
82
82
  activeCount ++
83
83
  activeItems.push(
84
- <Flex align="center" key={icon} gap="xs">
85
- <Icon icon={icon} size="lg" />
84
+ <Flex align="center"
85
+ gap="xs"
86
+ key={icon}
87
+ >
88
+ <Icon icon={icon}
89
+ size="lg"
90
+ />
86
91
  <div>{text}</div>
87
- <Flex className={showPopover ? "fa-flip-vertical" : ""} display="inline_flex">
88
- <Icon fixedWidth icon="angle-down" margin-left="xs" />
92
+ <Flex className={showPopover ? "fa-flip-vertical" : ""}
93
+ display="inline_flex"
94
+ >
95
+ <Icon fixedWidth
96
+ icon="angle-down"
97
+ margin-left="xs"
98
+ />
89
99
  </Flex>
90
100
  </Flex>
91
101
  );
@@ -93,7 +103,10 @@ for (const { text, isActive, icon } of toolbarDropdownItems) {
93
103
  }
94
104
 
95
105
  const popoverReference = (
96
- <Button className="editor-dropdown-button" onClick={handleTogglePopover} variant="secondary">
106
+ <Button className="editor-dropdown-button"
107
+ onClick={handleTogglePopover}
108
+ variant="secondary"
109
+ >
97
110
  {
98
111
  activeCount === 2 ? (
99
112
  activeItems[1]
@@ -101,11 +114,21 @@ const popoverReference = (
101
114
  activeCount === 1 ? (
102
115
  activeItems[0] || null
103
116
  ) : (
104
- <Flex align="center" key="paragraph" gap="xs">
105
- <Icon icon="paragraph" size="lg" />
117
+ <Flex align="center"
118
+ gap="xs"
119
+ key="paragraph"
120
+ >
121
+ <Icon icon="paragraph"
122
+ size="lg"
123
+ />
106
124
  <div>Paragraph</div>
107
- <Flex className={showPopover ? "fa-flip-vertical" : ""} display="inline_flex">
108
- <Icon fixedWidth icon="angle-down" margin-left="xs" />
125
+ <Flex className={showPopover ? "fa-flip-vertical" : ""}
126
+ display="inline_flex"
127
+ >
128
+ <Icon fixedWidth
129
+ icon="angle-down"
130
+ margin-left="xs"
131
+ />
109
132
  </Flex>
110
133
  </Flex>
111
134
  )
@@ -124,21 +147,21 @@ const popoverReference = (
124
147
  show={showPopover}
125
148
  >
126
149
  <Nav
127
- paddingTop="xs"
128
- paddingBottom="xs"
129
- variant="subtle"
150
+ paddingBottom="xs"
151
+ paddingTop="xs"
152
+ variant="subtle"
130
153
  >
131
- {toolbarDropdownItems.map(({ icon, text, onclick, isActive}:ToolbarTypes, index:number) => (
154
+ {toolbarDropdownItems.map(({ icon, text, onclick, isActive}: ToolbarTypes, index: number) => (
132
155
  <NavItem
133
- cursor="pointer"
134
- className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "is-active" : ""}`}
135
- iconLeft={icon}
136
- key={`${text}_${index}`}
137
- margin='none'
138
- onClick={()=> {onclick(); setShowPopover(false)}}
139
- text={text}
140
- paddingTop='xxs'
141
- paddingBottom='xxs'
156
+ className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "is-active" : ""}`}
157
+ cursor="pointer"
158
+ iconLeft={icon}
159
+ key={`${text}_${index}`}
160
+ margin='none'
161
+ onClick={()=> {onclick(); setShowPopover(false)}}
162
+ paddingBottom='xxs'
163
+ paddingTop='xxs'
164
+ text={text}
142
165
  />
143
166
  ))}
144
167
  </Nav>
@@ -3,7 +3,7 @@ import FlexItem from "../../pb_flex/_flex_item";
3
3
  import EditorButton from "./EditorButton";
4
4
  import { ToolbarTypes } from "./EditorTypes";
5
5
 
6
- const ToolbarHistoryItems = ({editor}:any) => {
6
+ const ToolbarHistoryItems = ({editor}: any): React.ReactElement => {
7
7
 
8
8
  const toolbarHistoryItems = [
9
9
  {
@@ -26,14 +26,14 @@ const toolbarHistoryItems = [
26
26
  <>
27
27
  <FlexItem displayFlex>
28
28
  {toolbarHistoryItems.map(
29
- ({ onclick, classname, disable, icon, text }:ToolbarTypes, index:number) => (
29
+ ({ onclick, classname, disable, icon, text }: ToolbarTypes, index: number) => (
30
30
  <EditorButton
31
- classname={classname}
32
- onclick={onclick}
33
- disable={disable}
34
- icon={icon}
35
- key={index}
36
- text={text}
31
+ classname={classname}
32
+ disable={disable}
33
+ icon={icon}
34
+ key={index}
35
+ onclick={onclick}
36
+ text={text}
37
37
  />
38
38
  )
39
39
  )}
@@ -2,7 +2,7 @@ import React, {useCallback} from "react";
2
2
  import EditorButton from "./EditorButton";
3
3
  import { ToolbarTypes } from "./EditorTypes";
4
4
 
5
- const ToolbarNodes = ({editor}:any) => {
5
+ const ToolbarNodes = ({editor}: any): React.ReactElement => {
6
6
 
7
7
  // eslint-disable-next-line react-hooks/rules-of-hooks
8
8
  const setLink = useCallback(() => {
@@ -42,13 +42,13 @@ const toolbarNodesItems = [
42
42
 
43
43
  return (
44
44
  <>
45
- {toolbarNodesItems.map(({ onclick, icon, text, isActive }:ToolbarTypes, index:number) => (
45
+ {toolbarNodesItems.map(({ onclick, icon, text, isActive }: ToolbarTypes, index: number) => (
46
46
  <EditorButton
47
- classname={`toolbar_button ${isActive ? 'is-active' : ''}`}
48
- onclick={onclick}
49
- icon={icon}
50
- key={index}
51
- text={text}
47
+ classname={`toolbar_button ${isActive ? 'is-active' : ''}`}
48
+ icon={icon}
49
+ key={index}
50
+ onclick={onclick}
51
+ text={text}
52
52
  />
53
53
  ))}
54
54
  </>
@@ -17,27 +17,27 @@ import { TrixEditor } from "react-trix"
17
17
  import EditorToolbar from './TipTap/Toolbar'
18
18
 
19
19
  type Editor = {
20
- attributeIsActive?: Function,
20
+ attributeIsActive?: ([any]: string) => boolean,
21
21
  element?: HTMLElement,
22
- getSelectedDocument?: Function,
22
+ getSelectedDocument?: () => any,
23
23
  getSelectedRange?: () => Array<number>,
24
- insertHTML?: Function,
25
- loadHTML?: Function,
26
- setSelectedRange?: (range: Array<number>) => void,
24
+ insertHTML?: ([any]: string) => void,
25
+ loadHTML?: ([any]: string) => void,
26
+ setSelectedRange?: (range: Array<number>) => void,
27
27
  }
28
28
 
29
29
  type RichTextEditorProps = {
30
30
  aria?: { [key: string]: string },
31
31
  advancedEditor?: any,
32
32
  advancedEditorToolbar?: boolean,
33
- toolbarBottom?: Boolean,
33
+ toolbarBottom?: boolean,
34
34
  children?: React.ReactNode | React.ReactNode[]
35
35
  className?: string,
36
36
  data?: { [key: string]: string },
37
37
  focus?: boolean,
38
38
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
39
39
  id?: string,
40
- inline?: boolean,
40
+ inline?: boolean,
41
41
  extensions?: { [key: string]: string }[],
42
42
  name?: string,
43
43
  onChange: (html: string, text: string) => void,
@@ -49,7 +49,7 @@ type RichTextEditorProps = {
49
49
  maxWidth?: string
50
50
  } & GlobalProps
51
51
 
52
- const RichTextEditor = (props: RichTextEditorProps) => {
52
+ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
53
53
  const {
54
54
  aria = {},
55
55
  advancedEditor,
@@ -81,7 +81,6 @@ const RichTextEditor = (props: RichTextEditorProps) => {
81
81
  const handleOnEditorReady = (editorInstance: Editor) => setEditor(editorInstance),
82
82
  element = editor?.element
83
83
 
84
-
85
84
  // DOM manipulation must wait for editor to be ready
86
85
  if (editor) {
87
86
  const toolbarElement = element.parentElement.querySelector('trix-toolbar') as HTMLElement,
@@ -117,6 +116,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
117
116
  focus
118
117
  ? (document.addEventListener('trix-focus', useFocus),
119
118
  document.addEventListener('trix-blur', useFocus),
119
+ // eslint-disable-next-line react-hooks/rules-of-hooks
120
120
  useFocus())
121
121
  : null
122
122
 
@@ -164,10 +164,10 @@ const RichTextEditor = (props: RichTextEditorProps) => {
164
164
 
165
165
  return (
166
166
  <div
167
- {...ariaProps}
168
- {...dataProps}
169
- {...htmlProps}
170
- className={css}
167
+ {...ariaProps}
168
+ {...dataProps}
169
+ {...htmlProps}
170
+ className={css}
171
171
  >
172
172
  {
173
173
  advancedEditor ? (
@@ -175,9 +175,11 @@ const RichTextEditor = (props: RichTextEditorProps) => {
175
175
  className={classnames("pb_rich_text_editor_advanced_container", {
176
176
  ["toolbar-active"]: advancedEditorToolbar,
177
177
  })}
178
- >
178
+ >
179
179
  {advancedEditorToolbar && (
180
- <EditorToolbar extensions={extensions} editor={advancedEditor}/>
180
+ <EditorToolbar editor={advancedEditor}
181
+ extensions={extensions}
182
+ />
181
183
  )}
182
184
  { children }
183
185
  </div>
@@ -20,7 +20,7 @@ type SectionSeparatorProps = {
20
20
  variant?: "card" | "background",
21
21
  }
22
22
 
23
- const SectionSeparator = (props: SectionSeparatorProps) => {
23
+ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
24
24
  const {
25
25
  aria = {},
26
26
  children,
@@ -42,17 +42,19 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
42
42
  return (
43
43
 
44
44
  <div
45
- {...ariaProps}
46
- {...dataProps}
47
- {...htmlProps}
48
- className={classes}
49
- id={id}
45
+ {...ariaProps}
46
+ {...dataProps}
47
+ {...htmlProps}
48
+ className={classes}
49
+ id={id}
50
50
  >
51
51
  {
52
52
  children && children ||
53
53
  text && (
54
54
  <span>
55
- <Caption text={text} dark={dark} />
55
+ <Caption dark={dark}
56
+ text={text}
57
+ />
56
58
  </span>
57
59
  )
58
60
  }
@@ -102,20 +102,29 @@
102
102
  pointer-events: none;
103
103
  }
104
104
  &.inline {
105
+ @mixin active_arrow_style {
106
+ svg {
107
+ color: $primary !important;
108
+ font-size: 16px;
109
+ }
110
+ }
105
111
  &:not(:hover) {
106
112
  svg {
107
113
  display: none;
108
114
  }
109
115
  }
116
+ &.show_arrow:not(:hover) {
117
+ svg {
118
+ display: block;
119
+ }
120
+ @include active_arrow_style();
121
+ }
110
122
  &:hover {
123
+ @include active_arrow_style();
111
124
  select {
112
125
  color: $primary !important;
113
126
  background: rgba(0,130,255,0.1);
114
127
  }
115
- svg {
116
- color: $primary !important;
117
- font-size: 16px;
118
- }
119
128
  }
120
129
  select {
121
130
  box-shadow: none;
@@ -36,6 +36,7 @@ type SelectProps = {
36
36
  onChange: InputCallback<HTMLSelectElement>,
37
37
  options: SelectOption[],
38
38
  required?: boolean,
39
+ showArrow?: boolean,
39
40
  value?: string,
40
41
  } & GlobalProps
41
42
 
@@ -63,9 +64,10 @@ const Select = ({
63
64
  inline = false,
64
65
  multiple = false,
65
66
  name,
66
- onChange = () => {},
67
+ onChange = () => undefined,
67
68
  options = [],
68
69
  required = false,
70
+ showArrow = false,
69
71
  value,
70
72
  ...props
71
73
  }: SelectProps, ref: React.LegacyRef<HTMLSelectElement>) => {
@@ -77,15 +79,16 @@ const Select = ({
77
79
  const inlineClass = inline ? 'inline' : null
78
80
  const compactClass = compact ? 'compact' : null
79
81
  const classes = classnames(
80
- buildCss('pb_select'),
82
+ buildCss("pb_select"),
81
83
  globalProps({
82
84
  ...props,
83
- marginBottom: props.marginBottom || props.margin || 'sm',
85
+ marginBottom: props.marginBottom || props.margin || "sm",
84
86
  }),
85
87
  className,
86
88
  inlineClass,
89
+ { show_arrow: showArrow },
87
90
  compactClass
88
- )
91
+ );
89
92
 
90
93
  const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
91
94
  const selectBody =(() =>{
@@ -0,0 +1,24 @@
1
+ <%= pb_rails("select", props: {
2
+ label: "Favorite Food",
3
+ name: "food",
4
+ inline: true,
5
+ options: [
6
+ {
7
+ value: "1",
8
+ value_text: "Burgers",
9
+ },
10
+ {
11
+ value: "2",
12
+ value_text: "Pizza",
13
+ },
14
+ {
15
+ value: "3",
16
+ value_text: "Tacos",
17
+ },
18
+ {
19
+ value: "4",
20
+ value_text: "BBQ",
21
+ },
22
+ ],
23
+ show_arrow: true
24
+ }) %>
@@ -0,0 +1,38 @@
1
+ import React from 'react'
2
+ import { Body, Select } from '../..'
3
+
4
+ const SelectInlineShowArrow = (props) => {
5
+ const options = [
6
+ {
7
+ value: '1',
8
+ text: 'Burgers',
9
+ },
10
+ {
11
+ value: '2',
12
+ text: 'Pizza',
13
+ },
14
+ {
15
+ value: '3',
16
+ text: 'Tacos',
17
+ },
18
+ ]
19
+
20
+ return (
21
+ <div>
22
+ <Select
23
+ inline
24
+ label="Favorite Food"
25
+ name="food"
26
+ options={options}
27
+ showArrow
28
+ {...props}
29
+ />
30
+ <Body
31
+ status="negative"
32
+ {...props}
33
+ />
34
+ </div>
35
+ )
36
+ }
37
+
38
+ export default SelectInlineShowArrow
@@ -10,6 +10,7 @@ examples:
10
10
  - select_custom_select: Custom Select
11
11
  - select_error: Select w/ Error
12
12
  - select_inline: Select Inline
13
+ - select_inline_show_arrow: Select Inline (Always Show Arrow)
13
14
  - select_inline_compact: Select Inline Compact
14
15
  - select_attributes: Select W/ Attributes
15
16
  - select_multiple: Select Multiple
@@ -26,6 +27,7 @@ examples:
26
27
  - select_custom_select: Custom Select
27
28
  - select_error: Select w/ Error
28
29
  - select_inline: Select Inline
30
+ - select_inline_show_arrow: Select Inline (Always Show Arrow)
29
31
  - select_inline_compact: Select Inline Compact
30
32
  - select_multiple: Select Multiple
31
33
 
@@ -7,5 +7,6 @@ export { default as SelectCustomSelect } from './_select_custom_select.jsx'
7
7
  export { default as SelectValueTextSame } from './_select_value_text_same.jsx'
8
8
  export { default as SelectError } from './_select_error.jsx'
9
9
  export { default as SelectInline } from './_select_inline.jsx'
10
+ export { default as SelectInlineShowArrow } from './_select_inline_show_arrow.jsx'
10
11
  export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
11
12
  export { default as SelectMultiple } from './_select_multiple.jsx'
@@ -19,10 +19,11 @@ module Playbook
19
19
  prop :name
20
20
  prop :onchange
21
21
  prop :options, type: Playbook::Props::HashArray, required: false, default: []
22
+ prop :show_arrow, type: Playbook::Props::Boolean, default: false
22
23
  prop :required, type: Playbook::Props::Boolean, default: false
23
24
 
24
25
  def classnames
25
- classname + inline_class + compact_class
26
+ classname + inline_class + compact_class + show_arrow_class
26
27
  end
27
28
 
28
29
  def all_attributes
@@ -49,6 +50,10 @@ module Playbook
49
50
  compact ? "compact" : ""
50
51
  end
51
52
 
53
+ def show_arrow_class
54
+ show_arrow ? "show_arrow" : ""
55
+ end
56
+
52
57
  def select_wrapper_class
53
58
  "pb_select_kit_wrapper" + error_class
54
59
  end
@@ -33,7 +33,7 @@ type SelectableCardIconProps = {
33
33
  onChange?: (event: React.FormEvent<HTMLInputElement>) => void,
34
34
  }
35
35
 
36
- const SelectableCardIcon = (props: SelectableCardIconProps) => {
36
+ const SelectableCardIcon = (props: SelectableCardIconProps): React.ReactElement => {
37
37
  const {
38
38
  aria = {},
39
39
  checkmark = false,
@@ -70,36 +70,37 @@ const SelectableCardIcon = (props: SelectableCardIconProps) => {
70
70
 
71
71
  return (
72
72
  <div
73
- {...ariaProps}
74
- {...dataProps}
75
- {...htmlProps}
76
- className={classes}
73
+ {...ariaProps}
74
+ {...dataProps}
75
+ {...htmlProps}
76
+ className={classes}
77
77
  >
78
78
  <SelectableCard
79
- checked={checked}
80
- customIcon={customIcon}
81
- dark={dark}
82
- disabled={disabled}
83
- icon={checkmark}
84
- inputId={inputId}
85
- multi={multi}
86
- name={name}
87
- onChange={onChange}
88
- value={value}
79
+ checked={checked}
80
+ customIcon={customIcon}
81
+ dark={dark}
82
+ disabled={disabled}
83
+ icon={checkmark}
84
+ inputId={inputId}
85
+ multi={multi}
86
+ name={name}
87
+ onChange={onChange}
88
+ value={value}
89
89
  >
90
90
  {
91
91
  <>
92
92
  <SelectableIcon
93
- customIcon={customIcon}
94
- icon={icon}
95
- inputId={''}
96
- inputs="disabled"
97
- name={''}
98
- text={titleText} />
93
+ customIcon={customIcon}
94
+ icon={icon}
95
+ inputId={''}
96
+ inputs="disabled"
97
+ name={''}
98
+ text={titleText}
99
+ />
99
100
  <Body
100
- color="light"
101
- dark={dark}
102
- text={bodyText}
101
+ color="light"
102
+ dark={dark}
103
+ text={bodyText}
103
104
  />
104
105
  </>
105
106
  }