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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +1 -0
- data/app/pb_kits/playbook/pb_body/_body.tsx +1 -1
- data/app/pb_kits/playbook/pb_caption/_caption.tsx +1 -1
- data/app/pb_kits/playbook/pb_card/card.rb +1 -1
- data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +1 -1
- data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.rb +2 -2
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +1 -1
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +2 -2
- data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx +1 -1
- data/app/pb_kits/playbook/pb_file_upload/file_upload.rb +1 -1
- data/app/pb_kits/playbook/pb_flex/_flex_item.scss +0 -8
- data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +1 -4
- data/app/pb_kits/playbook/pb_flex/flex_item.rb +1 -9
- data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +6 -6
- data/app/pb_kits/playbook/pb_passphrase/passphrase.rb +1 -1
- data/app/pb_kits/playbook/pb_radio/radio.rb +1 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx +3 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx +2 -0
- data/app/pb_kits/playbook/pb_select/select.rb +1 -1
- data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +1 -1
- data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb +1 -1
- data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb +1 -1
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb +1 -1
- data/app/pb_kits/playbook/pb_source/source.rb +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb +31 -27
- data/app/pb_kits/playbook/pb_table/docs/_table_header.md +8 -1
- data/app/pb_kits/playbook/pb_table/styles/_table_header.scss +20 -1
- data/app/pb_kits/playbook/pb_table/table_header.html.erb +23 -49
- data/app/pb_kits/playbook/pb_table/table_header.rb +34 -6
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -2
- data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx +1 -1
- data/app/pb_kits/playbook/pb_title/_title.tsx +1 -1
- data/app/pb_kits/playbook/pb_toggle/toggle.rb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +1 -1
- data/app/pb_kits/playbook/tokens/_overflow.scss +10 -0
- data/app/pb_kits/playbook/utilities/_overflow.scss +22 -0
- data/app/pb_kits/playbook/utilities/globalProps.ts +23 -8
- data/dist/playbook-rails.js +2 -2
- data/lib/playbook/classnames.rb +1 -0
- data/lib/playbook/kit_base.rb +4 -2
- data/lib/playbook/overflow.rb +33 -0
- data/lib/playbook/props/base.rb +1 -1
- data/lib/playbook/props/hash.rb +1 -1
- data/lib/playbook/version.rb +2 -2
- 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-
|
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::
|
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::
|
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(
|
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(
|
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::
|
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::
|
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,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 = (
|
421
|
-
if (process.env.NODE_ENV === 'development') {
|
422
|
-
|
423
|
-
|
424
|
-
|
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} => {
|