playbook_ui 13.5.0 → 13.6.0.pre.alpha.tiptapreacthookformbug1210

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) 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_caption/_caption.tsx +1 -1
  5. data/app/pb_kits/playbook/pb_card/card.rb +1 -1
  6. data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +1 -1
  7. data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.rb +2 -2
  8. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +1 -1
  9. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +2 -2
  10. data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx +1 -1
  11. data/app/pb_kits/playbook/pb_file_upload/file_upload.rb +1 -1
  12. data/app/pb_kits/playbook/pb_flex/_flex_item.scss +0 -8
  13. data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +1 -4
  14. data/app/pb_kits/playbook/pb_flex/flex_item.rb +1 -9
  15. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +6 -6
  16. data/app/pb_kits/playbook/pb_passphrase/passphrase.rb +1 -1
  17. data/app/pb_kits/playbook/pb_radio/radio.rb +1 -1
  18. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx +3 -1
  19. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx +2 -0
  20. data/app/pb_kits/playbook/pb_select/select.rb +1 -1
  21. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +1 -1
  22. data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb +1 -1
  23. data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb +1 -1
  24. data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb +1 -1
  25. data/app/pb_kits/playbook/pb_source/source.rb +1 -1
  26. data/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb +31 -27
  27. data/app/pb_kits/playbook/pb_table/docs/_table_header.md +8 -1
  28. data/app/pb_kits/playbook/pb_table/styles/_table_header.scss +20 -1
  29. data/app/pb_kits/playbook/pb_table/table_header.html.erb +23 -49
  30. data/app/pb_kits/playbook/pb_table/table_header.rb +34 -6
  31. data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -2
  32. data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx +1 -1
  33. data/app/pb_kits/playbook/pb_title/_title.tsx +1 -1
  34. data/app/pb_kits/playbook/pb_toggle/toggle.rb +1 -1
  35. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +1 -1
  36. data/app/pb_kits/playbook/tokens/_overflow.scss +10 -0
  37. data/app/pb_kits/playbook/utilities/_overflow.scss +22 -0
  38. data/app/pb_kits/playbook/utilities/globalProps.ts +23 -8
  39. data/dist/playbook-rails.js +2 -2
  40. data/lib/playbook/classnames.rb +1 -0
  41. data/lib/playbook/kit_base.rb +4 -2
  42. data/lib/playbook/overflow.rb +33 -0
  43. data/lib/playbook/props/base.rb +1 -1
  44. data/lib/playbook/props/hash.rb +1 -1
  45. data/lib/playbook/version.rb +2 -2
  46. metadata +10 -7
@@ -9,15 +9,20 @@ module Playbook
9
9
  prop :align_content, type: Playbook::Props::Enum,
10
10
  values: %w[start center end stretch baseline none],
11
11
  default: "center"
12
+ prop :justify_sort_icon, type: Playbook::Props::Enum,
13
+ values: %w[start center end stretch around between evenly none],
14
+ default: "between"
12
15
  prop :colspan, type: Playbook::Props::Number,
13
16
  default: 1
14
17
  prop :placement, type: Playbook::Props::Enum,
15
18
  values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
16
- default: "bottom-start"
19
+ default: "bottom-end"
17
20
  prop :sort_menu, type: Playbook::Props::HashArray,
18
21
  default: [{}]
19
22
  prop :text, type: Playbook::Props::String,
20
23
  default: ""
24
+ prop :sort_dropdown, type: Playbook::Props::Boolean,
25
+ default: false
21
26
 
22
27
  def classname
23
28
  generate_classname("pb_table_header_kit", align_class)
@@ -30,23 +35,46 @@ module Playbook
30
35
  def next_link
31
36
  return sort_menu[0][:link] if sort_menu.all? { |item| item[:active] == false }
32
37
 
38
+ link = ""
39
+
33
40
  sort_menu.each_with_index do |item, index|
34
41
  if item[:active] == true
35
42
  next_index = (index + 1) % sort_menu.length
36
- sort_menu[next_index][:link]
43
+ link = sort_menu[next_index][:link]
37
44
  end
38
45
  end
46
+ link
47
+ end
48
+
49
+ def sorting_style?
50
+ sort_menu != [{}]
51
+ end
52
+
53
+ def use_dropdown_select
54
+ sort_menu != [{}] && (object.colspan > 1 || sort_dropdown)
39
55
  end
40
56
 
41
- def sort_icon(direction)
57
+ def sort_icon(direction, active)
42
58
  case direction
43
59
  when "asc"
44
- "sort-amount-up"
60
+ active ? "sort-amount-up" : ""
45
61
  when "desc"
46
- "sort-amount-down"
62
+ active ? "sort-amount-down" : ""
47
63
  else
48
- ""
64
+ "arrow-up-arrow-down"
65
+ end
66
+ end
67
+
68
+ def link_style
69
+ active_item.any? ? "" : "color: #687887;"
70
+ end
71
+
72
+ def active_item
73
+ active_item = {}
74
+ sort_menu.each do |item|
75
+ active_item = item if item[:active] == true
49
76
  end
77
+ active_item
50
78
  end
51
79
  end
52
80
  end
@@ -11,7 +11,7 @@ module Playbook
11
11
  prop :error
12
12
  prop :inline, 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 :label
17
17
  prop :name
@@ -19,7 +19,7 @@ module Playbook
19
19
  prop :required, type: Playbook::Props::Boolean,
20
20
  default: false
21
21
  prop :type, default: "text"
22
- prop :validation, type: Playbook::Props::Hash,
22
+ prop :validation, type: Playbook::Props::HashProp,
23
23
  default: {}
24
24
  prop :value
25
25
  prop :add_on, type: Playbook::Props::NestedProps,
@@ -20,7 +20,7 @@ type TimeStackedProps = {
20
20
  }
21
21
 
22
22
  const TimeStackedDefault = (props: TimeStackedProps): React.ReactElement => {
23
- if (props.date) deprecatedProps('Time Stacked', ['date']) //date prop is deprecated, use time instead
23
+ if (props.date) deprecatedProps() //date prop is deprecated, use time instead
24
24
 
25
25
  const {
26
26
  align = 'left',
@@ -22,7 +22,7 @@ type TitleProps = {
22
22
  } & GlobalProps
23
23
 
24
24
  const Title = (props: TitleProps): React.ReactElement => {
25
- if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
25
+ if (props.variant) deprecatedProps() //variant prop is deprecated, use color instead
26
26
  const {
27
27
  aria = {},
28
28
  children,
@@ -5,7 +5,7 @@ require "action_view"
5
5
  module Playbook
6
6
  module PbToggle
7
7
  class Toggle < Playbook::KitBase
8
- prop :input_options, type: Playbook::Props::Hash,
8
+ prop :input_options, type: Playbook::Props::HashProp,
9
9
  default: {}
10
10
 
11
11
  prop :checked, type: Playbook::Props::Boolean,
@@ -19,7 +19,7 @@ module Playbook
19
19
  prop :name
20
20
  prop :options, type: Playbook::Props::HashArray,
21
21
  default: []
22
- prop :input_options, type: Playbook::Props::Hash,
22
+ prop :input_options, type: Playbook::Props::HashProp,
23
23
  default: {}
24
24
 
25
25
  prop :is_multi, type: Playbook::Props::Boolean,
@@ -0,0 +1,10 @@
1
+ $visible: visible !default;
2
+ $hidden: hidden !default;
3
+ $scroll: scroll !default;
4
+ $auto: auto !default;
5
+ $overflow: (
6
+ visible: $visible,
7
+ hidden: $hidden,
8
+ scroll: $scroll,
9
+ auto: $auto,
10
+ );
@@ -0,0 +1,22 @@
1
+ @import "../tokens/overflow";
2
+
3
+ $overflow_classes: (
4
+ visible: $visible,
5
+ hidden: $hidden,
6
+ scroll: $scroll,
7
+ auto: $auto,
8
+ );
9
+
10
+ $variants: (
11
+ overflow_x: "overflow-x",
12
+ overflow_y: "overflow-y",
13
+ overflow: "overflow",
14
+ );
15
+
16
+ @each $variant_name, $variant_property in $variants {
17
+ @each $class_name, $overflow_value in $overflow_classes {
18
+ .#{$variant_name}_#{$class_name} {
19
+ #{$variant_property}: #{$overflow_value} !important;
20
+ }
21
+ }
22
+ }
@@ -128,6 +128,13 @@ type TextAlign = {
128
128
  textAlign?: "start" | "end" | "left" | "right" | "center" | "justify" | "justifyAll" | "matchParent",
129
129
  }
130
130
 
131
+ type OverflowTypes = "scroll" | "visible" | "hidden" | "auto"
132
+ type Overflow = {
133
+ overflowX?: OverflowTypes,
134
+ overflowY?: OverflowTypes,
135
+ overflow?: OverflowTypes
136
+ }
137
+
131
138
  type ZIndexType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
132
139
  type ZIndexResponsiveType = {[key: string]: ZIndexType}
133
140
  type ZIndex = {
@@ -138,7 +145,7 @@ type ZIndex = {
138
145
  export type GlobalProps = AlignContent & AlignItems & AlignSelf &
139
146
  BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
140
147
  FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
141
- LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
148
+ LineHeight & Margin & MaxWidth & NumberSpacing & Order & Overflow & Padding &
142
149
  Position & Shadow & TextAlign & ZIndex & { hover?: string };
143
150
 
144
151
  const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
@@ -255,6 +262,14 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
255
262
  css += borderRadius ? `border_radius_${borderRadius} ` : ''
256
263
  return css
257
264
  },
265
+ overflowProps: ({ overflow, overflowX, overflowY }: Overflow) => {
266
+ let css = ''
267
+ css += overflow ? `overflow_${overflow}` : ''
268
+ css += overflowX ? `overflow_x_${overflowX}` : ''
269
+ css += overflowY ? `overflow_y_${overflowY}` : ''
270
+ return css
271
+ },
272
+
258
273
  darkProps: ({ dark }: Dark) => dark ? 'dark' : '',
259
274
  numberSpacingProps: ({ numberSpacing }: NumberSpacing) => {
260
275
  let css = ''
@@ -417,13 +432,13 @@ export const globalProps = (props: GlobalProps, defaultProps: DefaultProps = {})
417
432
  }
418
433
 
419
434
 
420
- export const deprecatedProps = (kit: string, props: string[] = []): void => {
421
- if (process.env.NODE_ENV === 'development') {
422
- /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
423
- props.forEach((prop) => {
424
- console.warn(`${kit} Kit: The prop '${prop}' is deprecated and will be removed in a future release!`)
425
- })
426
- }
435
+ export const deprecatedProps = (): void => {
436
+ // if (process.env.NODE_ENV === 'development') {
437
+ // /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
438
+ // props.forEach((prop) => {
439
+ // console.warn(`${kit} Kit: The prop '${prop}' is deprecated and will be removed in a future release!`)
440
+ // })
441
+ // }
427
442
  }
428
443
 
429
444
  export const domSafeProps = (props: {[key: string]: string}): {[key: string]: string} => {