playbook_ui 13.5.0 → 13.6.0.pre.alpha.play845allkitsbytypes1219

Sign up to get free protection for your applications and to get access to all the features.
Files changed (62) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -0
  3. data/app/pb_kits/playbook/pb_body/_body.tsx +1 -1
  4. data/app/pb_kits/playbook/pb_body/docs/_body_truncate.html.erb +12 -0
  5. data/app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx +50 -0
  6. data/app/pb_kits/playbook/pb_body/docs/_body_truncate.md +4 -0
  7. data/app/pb_kits/playbook/pb_body/docs/example.yml +3 -0
  8. data/app/pb_kits/playbook/pb_body/docs/index.js +1 -0
  9. data/app/pb_kits/playbook/pb_caption/_caption.tsx +1 -1
  10. data/app/pb_kits/playbook/pb_card/card.rb +1 -1
  11. data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +1 -1
  12. data/app/pb_kits/playbook/pb_collapsible/_helper_functions.ts +26 -22
  13. data/app/pb_kits/playbook/pb_collapsible/index.js +4 -0
  14. data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.rb +2 -2
  15. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +1 -1
  16. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +2 -2
  17. data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx +1 -1
  18. data/app/pb_kits/playbook/pb_file_upload/file_upload.rb +1 -1
  19. data/app/pb_kits/playbook/pb_flex/_flex_item.scss +0 -8
  20. data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +1 -4
  21. data/app/pb_kits/playbook/pb_flex/flex_item.rb +1 -9
  22. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +6 -6
  23. data/app/pb_kits/playbook/pb_passphrase/passphrase.rb +1 -1
  24. data/app/pb_kits/playbook/pb_radio/radio.rb +1 -1
  25. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx +3 -1
  26. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx +2 -0
  27. data/app/pb_kits/playbook/pb_select/select.rb +1 -1
  28. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +1 -1
  29. data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb +1 -1
  30. data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb +1 -1
  31. data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb +1 -1
  32. data/app/pb_kits/playbook/pb_source/source.rb +1 -1
  33. data/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb +31 -27
  34. data/app/pb_kits/playbook/pb_table/docs/_table_header.md +8 -1
  35. data/app/pb_kits/playbook/pb_table/styles/_table_header.scss +20 -1
  36. data/app/pb_kits/playbook/pb_table/table_header.html.erb +23 -49
  37. data/app/pb_kits/playbook/pb_table/table_header.rb +34 -6
  38. data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -2
  39. data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx +1 -1
  40. data/app/pb_kits/playbook/pb_title/_title.scss +15 -14
  41. data/app/pb_kits/playbook/pb_title/_title.tsx +4 -4
  42. data/app/pb_kits/playbook/pb_title/_title_mixin.scss +6 -6
  43. data/app/pb_kits/playbook/pb_title/docs/_title_truncate.html.erb +12 -0
  44. data/app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx +53 -0
  45. data/app/pb_kits/playbook/pb_title/docs/_title_truncate.md +4 -0
  46. data/app/pb_kits/playbook/pb_title/docs/example.yml +2 -0
  47. data/app/pb_kits/playbook/pb_title/docs/index.js +1 -0
  48. data/app/pb_kits/playbook/pb_title/title.rb +1 -1
  49. data/app/pb_kits/playbook/pb_toggle/toggle.rb +1 -1
  50. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +1 -1
  51. data/app/pb_kits/playbook/tokens/_overflow.scss +10 -0
  52. data/app/pb_kits/playbook/utilities/_overflow.scss +22 -0
  53. data/app/pb_kits/playbook/utilities/globalProps.ts +23 -8
  54. data/dist/menu.yml +235 -110
  55. data/dist/playbook-rails.js +5 -5
  56. data/lib/playbook/classnames.rb +1 -0
  57. data/lib/playbook/kit_base.rb +4 -2
  58. data/lib/playbook/overflow.rb +33 -0
  59. data/lib/playbook/props/base.rb +1 -1
  60. data/lib/playbook/props/hash.rb +1 -1
  61. data/lib/playbook/version.rb +2 -2
  62. metadata +16 -7
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 3fbde0c47559510e98e402f39e88e8eee92d920fe6316a10cf69edd6433c593d
4
- data.tar.gz: 528eb97cc4627c05a97fdc42c44e2b306481fe8467f9abf38dd135e95916c5a1
3
+ metadata.gz: 3e6b57d0d26183afb97a6a5faf415a98dbd1bf20c9d8ef15613e11dfb951571f
4
+ data.tar.gz: efc28ffbd1362659ea4fb5204006e0415246a7d4dacf490be1ebc7edbb646ca9
5
5
  SHA512:
6
- metadata.gz: 476c5d3b3afc10856fad58a4a417b9124a45bce23ac7af0987fb94e7e5987785786472c35b35a8fe8c1acb8db6c5c040c423f29886c26a0dd8ec7c7ea2baf072
7
- data.tar.gz: ae782bd74d7a7cf8ee5f88a804079742e28044fc0f7228b1243292711c1d40bf6c8f54c2ed004bc8994321183d35efe7e975c867a99e5baba781f939d8eb76e9
6
+ metadata.gz: 4352cfd4a202df9b47db9ea1dd9690346069ee7fc81c88363d08d4b2299de5aefe292214b7a5386e7a85c7a68d169ec820c27f114f69b90c082b974774b5be91
7
+ data.tar.gz: b0d2d42a9e94c59732d2f9791ecbdfadb0be34e90d203bc7e22eda20e35dcac172e1daab4f3781c6d51f49c4f015607476a02e56ea5159031f1a05b6b4c554e2
data/app/pb_kits/playbook/_playbook.scss CHANGED
@@ -113,5 +113,6 @@
113
113
  @import './utilities/border_radius';
114
114
  @import './utilities/hover';
115
115
  @import './utilities/text_align';
116
+ @import './utilities/overflow';
116
117
 
117
118
  @import 'pb_multi_level_select/multi_level_select';
data/app/pb_kits/playbook/pb_body/_body.tsx CHANGED
@@ -24,7 +24,7 @@ type BodyProps = {
24
24
  } & GlobalProps
25
25
 
26
26
  const Body = (props: BodyProps): React.ReactElement => {
27
- if (props.variant) deprecatedProps("Body", ["status"]) //status prop is deprecated, use color instead please
27
+ if (props.variant) deprecatedProps() //status prop is deprecated, use color instead please
28
28
  const {
29
29
  aria = {},
30
30
  children,
data/app/pb_kits/playbook/pb_body/docs/_body_truncate.html.erb ADDED
@@ -0,0 +1,12 @@
1
+ <% lorem = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, minus. Nisi beatae voluptatum labore sequi. Nemo accusantium corrupti, reiciendis magnam tenetur perferendis esse pariatur voluptas eaque hic vel rem nihil quidem dolorum ex dolor, libero ullam placeat, sapiente eos. Cumque obcaecati dignissimos molestiae, minima quibusdam sint maxime libero accusantium animi quis quia maiores enim ipsum, esse, modi laudantium illum error!" %>
2
+
3
+ <%= pb_rails("flex", props: { orientation: "column", max_width: "md" }) do %>
4
+ <%= pb_rails("caption", props: { text: "After first row" }) %>
5
+ <%= pb_rails("body", props: { text: lorem, truncate: "1", margin_bottom: "md" }) %>
6
+
7
+ <%= pb_rails("caption", props: { text: "After second row" }) %>
8
+ <%= pb_rails("body", props: { text: lorem, truncate: "2", margin_bottom: "md" }) %>
9
+
10
+ <%= pb_rails("caption", props: { text: "After third row" }) %>
11
+ <%= pb_rails("body", props: { text: lorem, truncate: "3" }) %>
12
+ <% end %>
data/app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx ADDED
@@ -0,0 +1,50 @@
1
+ import React from 'react';
2
+
3
+ import Body from '../_body';
4
+ import Caption from '../../pb_caption/_caption'
5
+ import Flex from '../../pb_flex/_flex'
6
+
7
+ const BodyTruncate = (props) => {
8
+ const lorem = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, minus. Nisi beatae voluptatum labore sequi. Nemo accusantium corrupti, reiciendis magnam tenetur perferendis esse pariatur voluptas eaque hic vel rem nihil quidem dolorum ex dolor, libero ullam placeat, sapiente eos. Cumque obcaecati dignissimos molestiae, minima quibusdam sint maxime libero accusantium animi quis quia maiores enim ipsum, esse, modi laudantium illum error!"
9
+
10
+ return (
11
+ <Flex
12
+ maxWidth="md"
13
+ orientation="column"
14
+ >
15
+ <Caption
16
+ text="After first row"
17
+ {...props}
18
+ />
19
+ <Body
20
+ marginBottom="md"
21
+ text={lorem}
22
+ truncate="1"
23
+ {...props}
24
+ />
25
+
26
+ <Caption
27
+ text="After second row"
28
+ {...props}
29
+ />
30
+ <Body
31
+ marginBottom="md"
32
+ text={lorem}
33
+ truncate="2"
34
+ {...props}
35
+ />
36
+
37
+ <Caption
38
+ text="After third row"
39
+ {...props}
40
+ />
41
+ <Body
42
+ text={lorem}
43
+ truncate="3"
44
+ {...props}
45
+ />
46
+ </Flex>
47
+ )
48
+ }
49
+
50
+ export default BodyTruncate
data/app/pb_kits/playbook/pb_body/docs/_body_truncate.md ADDED
@@ -0,0 +1,4 @@
1
+ ##### Prop
2
+ `truncate` | **Type**: String | **Values**: "1" | "2" | "3" | "4" | "5"
3
+
4
+ The `truncate` prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.
data/app/pb_kits/playbook/pb_body/docs/example.yml CHANGED
@@ -4,8 +4,11 @@ examples:
4
4
  - body_block: Block
5
5
  - body_articles: Best settings for articles
6
6
  - body_styled: Styled tags
7
+ - body_truncate: Truncate
8
+
7
9
  react:
8
10
  - body_light: Default
9
11
  - body_block: Block
10
12
  - body_articles: Best settings for articles
11
13
  - body_styled: Styled tags
14
+ - body_truncate: Truncate
data/app/pb_kits/playbook/pb_body/docs/index.js CHANGED
@@ -2,3 +2,4 @@ export { default as BodyLight } from './_body_light.jsx'
2
2
  export { default as BodyBlock } from './_body_block.jsx'
3
3
  export { default as BodyStyled } from './_body_styled.jsx'
4
4
  export { default as BodyArticles } from './_body_articles.jsx'
5
+ export { default as BodyTruncate } from './_body_truncate.jsx'
data/app/pb_kits/playbook/pb_caption/_caption.tsx CHANGED
@@ -17,7 +17,7 @@ type CaptionProps = {
17
17
  } & GlobalProps;
18
18
 
19
19
  const Caption = (props: CaptionProps): React.ReactElement => {
20
- if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
20
+ if (props.variant) deprecatedProps() //variant prop is deprecated, use color instead
21
21
  const {
22
22
  aria = {},
23
23
  children,
data/app/pb_kits/playbook/pb_card/card.rb CHANGED
@@ -4,7 +4,7 @@ module Playbook
4
4
  module PbCard
5
5
  class Card < Playbook::KitBase
6
6
  prop :selected, type: Playbook::Props::Boolean, default: false
7
- prop :highlight, type: Playbook::Props::Hash,
7
+ prop :highlight, type: Playbook::Props::HashProp,
8
8
  default: {}
9
9
  prop :tag, type: Playbook::Props::Enum,
10
10
  values: %w[div section footer header article aside main nav],
data/app/pb_kits/playbook/pb_checkbox/checkbox.rb CHANGED
@@ -10,7 +10,7 @@ module Playbook
10
10
  prop :value
11
11
  prop :name
12
12
 
13
- prop :input_options, type: Playbook::Props::Hash,
13
+ prop :input_options, type: Playbook::Props::HashProp,
14
14
  default: {}
15
15
  prop :required, type: Playbook::Props::Boolean,
16
16
  default: false
data/app/pb_kits/playbook/pb_collapsible/_helper_functions.ts CHANGED
@@ -1,25 +1,29 @@
1
- export const showElement = (elem: any) => {
2
- elem.style.display = 'block';
3
- const height = elem.scrollHeight + 'px'; // Get its height
4
- elem.style.height = height; // Update the max-height
5
- elem.classList.add('is-visible')
6
- // Once the transition is complete, remove the inline max-height so the content can scale responsively
7
- window.setTimeout(() => {
8
- elem.style.height = '';
9
- }, 300);
10
- };
1
+ export const showElement = (elem:any) => {
2
+ elem.style.display = 'block';
3
+ const height = elem.scrollHeight + 'px'; // Get its height
4
+ elem.style.height = height; // Update the max-height
5
+ elem.classList.add('is-visible');
6
+ elem.style.overflow = "hidden"
7
+ // Once the transition is complete, remove the inline max-height so the content can scale responsively
8
+ window.setTimeout(() => {
9
+ elem.style.height = '';
10
+ elem.style.overflow = "visible"
11
+ }, 300);
12
+ };
11
13
 
12
- export const hideElement = (elem:any) => {
13
- elem.style.height = elem.scrollHeight + 'px';
14
+ export const hideElement = (elem:any) => {
15
+ elem.style.height = elem.scrollHeight + 'px';
14
16
 
15
- window.setTimeout(() => {
16
- elem.style.height = '0';
17
- elem.style.paddingTop = '0';
18
- elem.style.paddingBottom = '0';
19
- }, 1);
17
+ window.setTimeout(() => {
18
+ elem.style.height = '0';
19
+ elem.style.paddingTop = '0';
20
+ elem.style.paddingBottom = '0';
21
+ elem.style.overflow = "hidden"
22
+ }, 1);
20
23
 
21
- // When the transition is complete, hide it
22
- window.setTimeout(() => {
23
- elem.classList.remove('is-visible');
24
- }, 300);
25
- };
24
+ // When the transition is complete, hide it
25
+ window.setTimeout(() => {
26
+ elem.classList.remove('is-visible');
27
+ elem.style.overflow = ""
28
+ }, 300);
29
+ };
data/app/pb_kits/playbook/pb_collapsible/index.js CHANGED
@@ -33,10 +33,12 @@ export default class PbCollapsible extends PbEnhancedElement {
33
33
  const height = getHeight()
34
34
  elem.classList.add('is-visible')
35
35
  elem.style.height = height // Update the max-height
36
+ elem.style.overflow = "hidden"
36
37
 
37
38
  // Once the transition is complete, remove the inline max-height so the content can scale responsively
38
39
  window.setTimeout(() => {
39
40
  elem.style.height = ''
41
+ elem.style.overflow = "visible"
40
42
  }, 300)
41
43
  }
42
44
 
@@ -48,11 +50,13 @@ export default class PbCollapsible extends PbEnhancedElement {
48
50
  elem.style.height = '0'
49
51
  elem.style.paddingTop = '0'
50
52
  elem.style.paddingBottom = '0'
53
+ elem.style.overflow = "hidden"
51
54
  }, 1)
52
55
 
53
56
  // When the transition is complete, hide it
54
57
  window.setTimeout(() => {
55
58
  elem.classList.remove('is-visible')
59
+ elem.style.overflow = ""
56
60
  }, 300)
57
61
  }
58
62
 
data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.rb CHANGED
@@ -6,10 +6,10 @@ module Playbook
6
6
  prop :align, type: Playbook::Props::Enum,
7
7
  values: %w[left center right],
8
8
  default: "left"
9
- prop :stat_change, type: Playbook::Props::Hash,
9
+ prop :stat_change, type: Playbook::Props::HashProp,
10
10
  default: {}
11
11
  prop :stat_label
12
- prop :stat_value, type: Playbook::Props::Hash,
12
+ prop :stat_value, type: Playbook::Props::HashProp,
13
13
  default: {}
14
14
 
15
15
  def formatted_stat_value
data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx CHANGED
@@ -49,7 +49,7 @@ type DatePickerProps = {
49
49
  } & GlobalProps
50
50
 
51
51
  const DatePicker = (props: DatePickerProps): React.ReactElement => {
52
- if (props.plugins) deprecatedProps('Date Picker', ['plugins'])
52
+ if (props.plugins) deprecatedProps()
53
53
 
54
54
  const {
55
55
  allowInput = false,
data/app/pb_kits/playbook/pb_date_picker/date_picker.rb CHANGED
@@ -34,9 +34,9 @@ module Playbook
34
34
  default: false
35
35
  prop :label, type: Playbook::Props::String,
36
36
  default: "Date Picker"
37
- prop :input_aria, type: Playbook::Props::Hash,
37
+ prop :input_aria, type: Playbook::Props::HashProp,
38
38
  default: {}
39
- prop :input_data, type: Playbook::Props::Hash,
39
+ prop :input_data, type: Playbook::Props::HashProp,
40
40
  default: {}
41
41
  prop :max_date, type: Playbook::Props::String
42
42
  prop :min_date, type: Playbook::Props::String
data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx CHANGED
@@ -19,7 +19,7 @@ type DateTimeStackedProps = {
19
19
  }
20
20
 
21
21
  const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
22
- if (props.date) deprecatedProps('Date Time Stacked', ['date'])
22
+ if (props.date) deprecatedProps()
23
23
 
24
24
  const {
25
25
  date,
data/app/pb_kits/playbook/pb_file_upload/file_upload.rb CHANGED
@@ -18,7 +18,7 @@ module Playbook
18
18
  prop :full_width, type: Playbook::Props::Boolean,
19
19
  default: false
20
20
 
21
- prop :input_options, type: Playbook::Props::Hash,
21
+ prop :input_options, type: Playbook::Props::HashProp,
22
22
  default: {}
23
23
 
24
24
  def classname
data/app/pb_kits/playbook/pb_flex/_flex_item.scss CHANGED
@@ -44,14 +44,6 @@
44
44
  order: -1;
45
45
  }
46
46
 
47
- $overflow_values: auto, hidden, inherit, initial, scroll, visible;
48
-
49
- @each $value in $overflow_values {
50
- &.overflow_#{$value} {
51
- overflow: #{$value}
52
- }
53
- }
54
-
55
47
  @for $i from 0 through 12 {
56
48
  &[class*=_flex_#{$i}]{
57
49
  flex: $i;
data/app/pb_kits/playbook/pb_flex/_flex_item.tsx CHANGED
@@ -8,7 +8,6 @@ type FlexItemPropTypes = {
8
8
  grow?: boolean,
9
9
  shrink?: boolean,
10
10
  className?: string,
11
- overflow?: "auto" | "hidden" | "initial" | "inherit" | "scroll" | "visible",
12
11
  order?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
13
12
  alignSelf?: "start" | "end" | "center" | "stretch" | null,
14
13
  displayFlex?: boolean
@@ -20,7 +19,6 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
20
19
  className,
21
20
  fixedSize,
22
21
  grow,
23
- overflow = null,
24
22
  shrink,
25
23
  flex = 'none',
26
24
  order = 'none',
@@ -30,7 +28,6 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
30
28
  const growClass = grow === true ? 'grow' : ''
31
29
  const displayFlexClass = displayFlex === true ? `display_flex_${displayFlex}` : ''
32
30
  const flexClass = flex !== 'none' ? `flex_${flex}` : ''
33
- const overflowClass = overflow ? `overflow_${overflow}` : ''
34
31
  const shrinkClass = shrink === true ? 'shrink' : ''
35
32
  const alignSelfClass = alignSelf ? `align_self_${alignSelf}` : ''
36
33
  const fixedStyle =
@@ -39,7 +36,7 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
39
36
 
40
37
  return (
41
38
  <div
42
- className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), overflowClass, orderClass, alignSelfClass, globalProps(props), className)}
39
+ className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), orderClass, alignSelfClass, globalProps(props), className)}
43
40
  style={fixedStyle}
44
41
  >
45
42
  {children}
data/app/pb_kits/playbook/pb_flex/flex_item.rb CHANGED
@@ -9,10 +9,6 @@ module Playbook
9
9
  prop :shrink, type: Playbook::Props::Boolean,
10
10
  default: false
11
11
 
12
- prop :overflow, type: Playbook::Props::Enum,
13
- values: %w[auto hidden inherit initial scroll visible] + [nil],
14
- default: nil
15
-
16
12
  prop :align_self, type: Playbook::Props::Enum,
17
13
  values: %w[start center end stretch] + [nil],
18
14
  default: nil
@@ -21,7 +17,7 @@ module Playbook
21
17
  default: false
22
18
 
23
19
  def classname
24
- generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + overflow_class + align_self_class
20
+ generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + align_self_class
25
21
  end
26
22
 
27
23
  def style_value
@@ -46,10 +42,6 @@ module Playbook
46
42
  grow ? "grow" : nil
47
43
  end
48
44
 
49
- def overflow_class
50
- overflow ? " overflow_#{overflow}" : ""
51
- end
52
-
53
45
  def shrink_class
54
46
  shrink ? "shrink" : nil
55
47
  end
data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss CHANGED
@@ -33,7 +33,7 @@
33
33
  margin: 0;
34
34
  }
35
35
  &[class*="_active"] {
36
- .pb_collapsible_main_kit {
36
+ >.pb_collapsible_main_kit {
37
37
  background-color: $active_light;
38
38
  }
39
39
  }
@@ -46,7 +46,7 @@
46
46
  }
47
47
  }
48
48
  &[class*="_active"] {
49
- .pb_collapsible_main_kit {
49
+ >.pb_collapsible_main_kit {
50
50
  background-color: mix($white, $card_dark, 20%);
51
51
  .pb_nav_list_item_text_collapsible,
52
52
  svg {
@@ -63,7 +63,7 @@
63
63
  .pb_collapsible_kit {
64
64
  &[class*="_active"] {
65
65
  background-color: unset;
66
- .pb_collapsible_main_kit {
66
+ >.pb_collapsible_main_kit {
67
67
  background-color: $primary;
68
68
  border-radius: $border_rad_heavier;
69
69
  .pb_nav_list_item_text_collapsible,
@@ -94,7 +94,7 @@
94
94
  &.dark {
95
95
  .pb_collapsible_kit {
96
96
  &[class*="_active"] {
97
- .pb_collapsible_main_kit {
97
+ >.pb_collapsible_main_kit {
98
98
  background-color: $primary;
99
99
  }
100
100
  .pb_nav_list_item_link {
@@ -112,7 +112,7 @@
112
112
  .pb_collapsible_kit {
113
113
  &[class*="_active"] {
114
114
  background-color: unset;
115
- .pb_collapsible_main_kit {
115
+ >.pb_collapsible_main_kit {
116
116
  background-color: $active_light;
117
117
  border-radius: $border_rad_heavier;
118
118
  .pb_nav_list_item_text_collapsible,
@@ -128,7 +128,7 @@
128
128
  &.dark {
129
129
  .pb_collapsible_kit {
130
130
  &[class*="_active"] {
131
- .pb_collapsible_main_kit {
131
+ >.pb_collapsible_main_kit {
132
132
  background-color: mix($white, $card_dark, 20%) !important;
133
133
  .pb_nav_list_item_text_collapsible,
134
134
  svg {
data/app/pb_kits/playbook/pb_passphrase/passphrase.rb CHANGED
@@ -4,7 +4,7 @@ module Playbook
4
4
  module PbPassphrase
5
5
  class Passphrase < Playbook::KitBase
6
6
  prop :confirmation, type: Playbook::Props::Boolean, default: false
7
- prop :input_props, type: Playbook::Props::Hash, default: {}
7
+ prop :input_props, type: Playbook::Props::HashProp, default: {}
8
8
  prop :label
9
9
  prop :show_tips_below, type: Playbook::Props::Enum,
10
10
  values: %w[always xs sm md lg xl],
data/app/pb_kits/playbook/pb_radio/radio.rb CHANGED
@@ -11,7 +11,7 @@ module Playbook
11
11
  default: false
12
12
  prop :error, type: Playbook::Props::Boolean,
13
13
  default: false
14
- prop :input_options, type: Playbook::Props::Hash,
14
+ prop :input_options, type: Playbook::Props::HashProp,
15
15
  default: {}
16
16
  prop :name, type: Playbook::Props::String,
17
17
  default: "radio_name"
data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx CHANGED
@@ -31,8 +31,10 @@ const EditorButton = ({
31
31
  >
32
32
  <button
33
33
  className={classname}
34
- onClick={onclick}
35
34
  disabled={disable}
35
+ onClick={onclick}
36
+ role="button"
37
+ type="button"
36
38
  >
37
39
  <Flex
38
40
  align="center"
data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx CHANGED
@@ -22,6 +22,8 @@ const popoverReference = (
22
22
  <button
23
23
  className="toolbar_button"
24
24
  onClick={handleTogglePopover}
25
+ role="button"
26
+ type="button"
25
27
  >
26
28
  <Flex
27
29
  align="center"
data/app/pb_kits/playbook/pb_select/select.rb CHANGED
@@ -6,7 +6,7 @@ require "action_view"
6
6
  module Playbook
7
7
  module PbSelect
8
8
  class Select < Playbook::KitBase
9
- prop :attributes, type: Playbook::Props::Hash,
9
+ prop :attributes, type: Playbook::Props::HashProp,
10
10
  default: {}
11
11
  prop :blank_selection
12
12
  prop :compact, type: Playbook::Props::Boolean, default: false
data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb CHANGED
@@ -15,7 +15,7 @@ module Playbook
15
15
  default: true
16
16
  prop :input_id, type: Playbook::Props::String
17
17
 
18
- prop :input_options, type: Playbook::Props::Hash,
18
+ prop :input_options, type: Playbook::Props::HashProp,
19
19
  default: {}
20
20
  prop :name
21
21
  prop :text
data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb CHANGED
@@ -23,7 +23,7 @@ module Playbook
23
23
  default: false
24
24
  prop :value
25
25
 
26
- prop :input_options, type: Playbook::Props::Hash,
26
+ prop :input_options, type: Playbook::Props::HashProp,
27
27
  default: {}
28
28
 
29
29
  def classname
data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb CHANGED
@@ -21,7 +21,7 @@ module Playbook
21
21
  default: false
22
22
  prop :value
23
23
 
24
- prop :input_options, type: Playbook::Props::Hash,
24
+ prop :input_options, type: Playbook::Props::HashProp,
25
25
  default: {}
26
26
 
27
27
  # Conditional rendering for input field
data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb CHANGED
@@ -12,7 +12,7 @@ module Playbook
12
12
  prop :variant, type: Playbook::Props::Enum,
13
13
  values: %w[radio checkbox],
14
14
  default: "radio"
15
- prop :input_options, type: Playbook::Props::Hash,
15
+ prop :input_options, type: Playbook::Props::HashProp,
16
16
  default: {}
17
17
 
18
18
  def classname
data/app/pb_kits/playbook/pb_source/source.rb CHANGED
@@ -10,7 +10,7 @@ module Playbook
10
10
  prop :type, type: Playbook::Props::Enum,
11
11
  values: %w[user retail inbound outbound prospecting events referral],
12
12
  default: "inbound"
13
- prop :user, type: Playbook::Props::Hash, default: {}
13
+ prop :user, type: Playbook::Props::HashProp, default: {}
14
14
 
15
15
  def type_text
16
16
  if type == "user" || (type == "referral" && user.present?)
data/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb CHANGED
@@ -2,27 +2,31 @@
2
2
  <thead>
3
3
  <tr>
4
4
  <%= pb_rails("table/table_header", props: {
5
- id: "name",
6
- colspan: 2,
5
+ text: "Territory",
6
+ id: "territory",
7
7
  sort_menu: [
8
- { item: "Name", link: "?q[sorts]=name+desc", active: false, direction: "desc" },
9
- { item: "Name", link: "?q[sorts]=name+asc", active: true, direction: "asc" },
8
+ { item: "Territory", link: "?sort=territory_desc", active: params["sort"] == "territory_desc", direction: "desc" },
9
+ { item: "Territory", link: "?sort=territory_asc", active: params["sort"] == "territory_asc", direction: "asc" }
10
10
  ],
11
11
  }) %>
12
12
  <%= pb_rails("table/table_header", props: {
13
- text: "Age",
14
- id: "age",
13
+ id: "name",
14
+ text: "Full Name",
15
+ colspan: 2,
15
16
  sort_menu: [
16
- { item: "Age", link: "?q[sorts]=age+desc", active: false, direction: "desc" },
17
- { item: "Age", link: "?q[sorts]=age+asc", active: false, direction: "asc" },
17
+ { item: "First Name Descending", link: "?sort=firstname_desc", active: params["sort"] == "firstname_desc", direction: "desc" },
18
+ { item: "First Name Ascending", link: "?sort=firstname_asc", active: params["sort"] == "firstname_asc", direction: "asc" },
19
+ { item: "Last Name Descending", link: "?sort=lastname_desc", active: params["sort"] == "lastname_desc", direction: "desc" },
20
+ { item: "Last Name Ascending", link: "?sort=lastname_asc", active: params["sort"] == "lastname_asc", direction: "asc" }
18
21
  ],
19
22
  }) %>
20
23
  <%= pb_rails("table/table_header", props: {
21
- text: "Territory",
22
- id: "territory",
24
+ text: "Age",
25
+ id: "age",
26
+ sort_dropdown: true,
23
27
  sort_menu: [
24
- { item: "Territory", link: "?q[sorts]=territory+desc", active: false, direction: "desc" },
25
- { item: "Territory", link: "?q[sorts]=territory+asc", active: false, direction: "asc" },
28
+ { item: "Age Descending", link: "?sort=age_desc", active: params["sort"] == "age_desc", direction: "desc" },
29
+ { item: "Age Ascending", link: "?sort=age_asc", active: params["sort"] == "age_asc", direction: "asc" }
26
30
  ],
27
31
  }) %>
28
32
  <%= pb_rails("table/table_header", props: { text: "Job Title" }) %>
@@ -30,25 +34,25 @@
30
34
  </thead>
31
35
  <tbody>
32
36
  <tr>
33
- <td>Name 1</td>
34
- <td>Name 2</td>
35
- <td>Value 3</td>
36
- <td>Value 4</td>
37
- <td>Value 5</td>
37
+ <td>Ter 1</td>
38
+ <td>First Name 1</td>
39
+ <td>Last Name 1</td>
40
+ <td>Age 1</td>
41
+ <td>Job 1</td>
38
42
  </tr>
39
43
  <tr>
40
- <td>Name 1</td>
41
- <td>Name 2</td>
42
- <td>Value 3</td>
43
- <td>Value 4</td>
44
- <td>Value 5</td>
44
+ <td>Ter 2</td>
45
+ <td>First Name 2</td>
46
+ <td>Last Name 2</td>
47
+ <td>Age 2</td>
48
+ <td>Job 2</td>
45
49
  </tr>
46
50
  <tr>
47
- <td>Name 1</td>
48
- <td>Name 2</td>
49
- <td>Value 3</td>
50
- <td>Value 4</td>
51
- <td>Value 5</td>
51
+ <td>Ter 3</td>
52
+ <td>First Name 3</td>
53
+ <td>Last Name 3</td>
54
+ <td>Age 3</td>
55
+ <td>Job 3</td>
52
56
  </tr>
53
57
  </tbody>
54
58
  <% end %>
data/app/pb_kits/playbook/pb_table/docs/_table_header.md CHANGED
@@ -1 +1,8 @@
1
- A kit that produces a `<th>` tag. You can also use the `sort_menu` prop to make the header a sortable link, just like <a href="https://playbook.powerapp.cloud/kits/filter#sort-only" target="_blank">our filter kit.</a>
1
+ The `table_header` subcomponent creates `<th>` elements and optionally accepts:
2
+
3
+ * `colspan` (number) for setting column span
4
+ * `sort_menu` accepts sort options as an array of `item` objects.
5
+ presence of `sort_menu` enables the sort link within the header
6
+ * `sort_dropdown` (boolean) optionally declares that (true) clicking a header's sort link opens a dropdown of sort options, or (false) each sort link click cycles through available sort_menu items in the order they are passed
7
+ * passing a valid `colspan` will render sort options within a dropdown by default, without requiring `sort_dropdown` explicitly. Alternatively, the default sort dropdown can be prevented on headers with `colspan` by setting `sort_dropdown: false`, which reverts the column to sorting to multi-click default (each click of the sort link cycles through the available sort_menu items in the order they are passed)
8
+ * `id` (string) is required for headers that have a dropdown (for popover reference); otherwise they are optional