playbook_ui 13.15.0.pre.alpha.1132globalpropdatepickerspacing1929 → 13.15.0
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/pb_collapsible/docs/example.yml +0 -6
- data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +2 -4
- data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +3 -5
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +3 -2
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +1 -43
- data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -2
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +1 -15
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss +2 -1
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +0 -17
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +1 -0
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +1 -4
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +1 -5
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/version.rb +2 -2
- metadata +7 -20
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_colors_swift.md +0 -27
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default_swift.md +0 -22
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_props_table.md +0 -8
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_sizes_swift.md +0 -26
- data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_bold_swift.md +0 -17
- data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_default_swift.md +0 -17
- data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_subtle_no_highlight_swift.md +0 -18
- data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_subtle_swift.md +0 -18
- data/app/pb_kits/playbook/pb_nav/docs/_nav_props_swift.md +0 -11
- data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_bold_swift.md +0 -18
- data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_default_swift.md +0 -18
- data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_subtle_no_highlight_swift.md +0 -19
- data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_subtle_swift.md +0 -17
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: fd6f86769005f1cf4bd5400be7f925bf38d3e16560fbec5da24158c969873663
|
4
|
+
data.tar.gz: 5c879bd8ecc90a4e2d02adbab1d208f81098708f949e60ece5c95eb2875bd81e
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 3d4bfff63b93a145834de3cfe80f3ecfa04f3d29ef10e7194fe2ad9149111a61efaeb70557b289db0fe499b1297e150ef0008af6f712289f45a84eaa83eab120
|
7
|
+
data.tar.gz: 94718a4b5a91761a32365bcb149b47c4e2aaea0a58fbc9860773117069875627018e92ea69626de9556d064fa50fde854107eee264e86bbede4d5bf0e14054da
|
@@ -14,9 +14,3 @@ examples:
|
|
14
14
|
- collapsible_color: Icon Color
|
15
15
|
- collapsible_icons: Custom Icons
|
16
16
|
- collapsible_state: useCollapsible Hook
|
17
|
-
|
18
|
-
swift:
|
19
|
-
- collapsible_default_swift: Default
|
20
|
-
- collapsible_sizes_swift: Sizes
|
21
|
-
- collapsible_colors_swift: Colors
|
22
|
-
- collapsible_props_table: ""
|
@@ -122,11 +122,9 @@ const highchartsDarkTheme: ThemeProps = {
|
|
122
122
|
// specific to gauge
|
123
123
|
// unfilled gauge color
|
124
124
|
pane: {
|
125
|
-
background: {
|
126
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
127
|
-
// @ts-ignore
|
125
|
+
background: [{
|
128
126
|
borderColor: colors.border_dark,
|
129
|
-
},
|
127
|
+
}],
|
130
128
|
},
|
131
129
|
|
132
130
|
plotOptions: {
|
@@ -122,11 +122,9 @@ const highchartsTheme: ThemeProps = {
|
|
122
122
|
// specific to gauge
|
123
123
|
// unfilled gauge color
|
124
124
|
pane: {
|
125
|
-
background: {
|
126
|
-
|
127
|
-
|
128
|
-
borderColor: colors.border_light,
|
129
|
-
},
|
125
|
+
background: [{
|
126
|
+
borderColor: colors.border_light,
|
127
|
+
}],
|
130
128
|
},
|
131
129
|
|
132
130
|
plotOptions: {
|
@@ -10,6 +10,7 @@
|
|
10
10
|
|
11
11
|
[class^=pb_date_picker_kit] {
|
12
12
|
.input_wrapper {
|
13
|
+
margin-bottom: $space_sm;
|
13
14
|
position: relative;
|
14
15
|
|
15
16
|
.flatpickr-wrapper {
|
@@ -46,7 +47,7 @@
|
|
46
47
|
.text_input_wrapper_add_on .add-on-right .text_input{
|
47
48
|
cursor: pointer;
|
48
49
|
}
|
49
|
-
|
50
|
+
|
50
51
|
}
|
51
52
|
|
52
53
|
|
@@ -75,4 +76,4 @@
|
|
75
76
|
&:after {
|
76
77
|
content: none;
|
77
78
|
}
|
78
|
-
}
|
79
|
+
}
|
@@ -1,8 +1,6 @@
|
|
1
1
|
import React, { useEffect } from 'react'
|
2
2
|
import classnames from 'classnames'
|
3
3
|
|
4
|
-
import { Spacing } from "../types"
|
5
|
-
|
6
4
|
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
7
5
|
import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
|
8
6
|
|
@@ -11,7 +9,6 @@ import Icon from '../pb_icon/_icon'
|
|
11
9
|
import Caption from '../pb_caption/_caption'
|
12
10
|
import Body from '../pb_body/_body'
|
13
11
|
|
14
|
-
|
15
12
|
type DatePickerProps = {
|
16
13
|
allowInput?: boolean,
|
17
14
|
aria?: { [key: string]: string },
|
@@ -37,13 +34,6 @@ type DatePickerProps = {
|
|
37
34
|
inputOnChange?: (e: React.FormEvent<HTMLInputElement>) => void,
|
38
35
|
inputValue?: string,
|
39
36
|
label?: string,
|
40
|
-
margin?: Spacing;
|
41
|
-
marginBottom?: Spacing;
|
42
|
-
marginTop?: Spacing;
|
43
|
-
marginRight?: Spacing;
|
44
|
-
marginLeft?: Spacing;
|
45
|
-
marginX?: Spacing;
|
46
|
-
marginY?: Spacing;
|
47
37
|
maxDate: string,
|
48
38
|
minDate: string,
|
49
39
|
name: string,
|
@@ -88,13 +78,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
88
78
|
inputOnChange,
|
89
79
|
inputValue,
|
90
80
|
label = 'Date Picker',
|
91
|
-
margin,
|
92
|
-
marginBottom = "sm",
|
93
|
-
marginTop,
|
94
|
-
marginRight,
|
95
|
-
marginLeft,
|
96
|
-
marginX,
|
97
|
-
marginY,
|
98
81
|
maxDate,
|
99
82
|
minDate,
|
100
83
|
mode = 'single',
|
@@ -151,33 +134,8 @@ useEffect(() => {
|
|
151
134
|
required: false,
|
152
135
|
}, scrollContainer)
|
153
136
|
})
|
154
|
-
|
155
|
-
const spacingMarginProps = {
|
156
|
-
margin,
|
157
|
-
marginBottom,
|
158
|
-
marginTop,
|
159
|
-
marginRight,
|
160
|
-
marginLeft,
|
161
|
-
marginX,
|
162
|
-
marginY,
|
163
|
-
}
|
164
|
-
|
165
137
|
const filteredProps = {...props}
|
166
138
|
delete filteredProps?.position
|
167
|
-
delete filteredProps?.margin;
|
168
|
-
delete filteredProps?.marginX;
|
169
|
-
delete filteredProps?.marginY;
|
170
|
-
delete filteredProps?.marginBottom;
|
171
|
-
delete filteredProps?.marginTop;
|
172
|
-
delete filteredProps?.marginRight;
|
173
|
-
delete filteredProps?.marginLeft;
|
174
|
-
|
175
|
-
const inputClasses = classnames(
|
176
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
177
|
-
//@ts-ignore
|
178
|
-
globalProps(spacingMarginProps),
|
179
|
-
className
|
180
|
-
)
|
181
139
|
|
182
140
|
const classes = classnames(
|
183
141
|
buildCss('pb_date_picker_kit'),
|
@@ -221,7 +179,7 @@ useEffect(() => {
|
|
221
179
|
text={hideLabel ? null : label}
|
222
180
|
/>
|
223
181
|
<>
|
224
|
-
<div className=
|
182
|
+
<div className="date_picker_input_wrapper">
|
225
183
|
<input
|
226
184
|
autoComplete="off"
|
227
185
|
className="date_picker_input"
|
@@ -74,22 +74,8 @@ module Playbook
|
|
74
74
|
prop :year_range, type: Playbook::Props::Array,
|
75
75
|
default: [1900, 2100]
|
76
76
|
|
77
|
-
def margins_to_remove
|
78
|
-
margin_classes_to_remove = []
|
79
|
-
margin_classes_to_remove << "m_#{object.margin}" if object.margin
|
80
|
-
margin_classes_to_remove << "mx_#{object.margin_x}" if object.margin_x
|
81
|
-
margin_classes_to_remove << "my_#{object.margin_y}" if object.margin_y
|
82
|
-
margin_classes_to_remove << "mb_#{object.margin_bottom}" if object.margin_bottom
|
83
|
-
margin_classes_to_remove << "mt_#{object.margin_top}" if object.margin_top
|
84
|
-
margin_classes_to_remove << "mr_#{object.margin_right}" if object.margin_right
|
85
|
-
margin_classes_to_remove << "ml_#{object.margin_left}" if object.margin_left
|
86
|
-
margin_classes_to_remove
|
87
|
-
end
|
88
|
-
|
89
77
|
def classname
|
90
|
-
|
91
|
-
classnames = generate_classname("pb_date_picker_kit")
|
92
|
-
classnames.gsub(regex, "").strip.gsub(/\s+/, " ")
|
78
|
+
generate_classname("pb_date_picker_kit")
|
93
79
|
end
|
94
80
|
|
95
81
|
def date_picker_config
|
@@ -42,20 +42,3 @@ examples:
|
|
42
42
|
- block_nav: Block
|
43
43
|
- block_no_title_nav: Without Title
|
44
44
|
- new_tab: Open in a New Tab
|
45
|
-
|
46
|
-
swift:
|
47
|
-
- nav_vertical_default_swift: Vertical Default
|
48
|
-
- nav_vertical_subtle_swift: Vertical Subtle
|
49
|
-
- nav_vertical_subtle_no_highlight_swift: Vertical Subtle No Highlight
|
50
|
-
- nav_vertical_bold_swift: Vertical Bold
|
51
|
-
- nav_horizontal_default_swift: Horizontal Default
|
52
|
-
- nav_horizontal_subtle_swift: Horizontal Subtle
|
53
|
-
- nav_horizontal_subtle_no_highlight_swift: Horizontal Subtle No Highlight
|
54
|
-
- nav_horizontal_bold_swift: Horizontal Bold
|
55
|
-
- nav_props_swift: ""
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
@@ -70,15 +70,12 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
|
|
70
70
|
const shouldShowAddOn = icon !== null
|
71
71
|
const addOnCss = shouldShowAddOn ? 'text_input_wrapper_add_on' : ""
|
72
72
|
const addOnDarkModeCardCss = (shouldShowAddOn && dark) ? 'add-on-card-dark' : ""
|
73
|
-
const defaultMarginBottom = props.marginBottom ?? "mb_sm"
|
74
|
-
|
75
73
|
const css = classnames([
|
76
74
|
'pb_text_input_kit',
|
77
75
|
inline ? 'inline' : "",
|
78
76
|
error ? 'error' : "",
|
79
77
|
globalProps(props),
|
80
78
|
className,
|
81
|
-
defaultMarginBottom
|
82
79
|
])
|
83
80
|
const addOnIcon = (
|
84
81
|
<Icon
|
@@ -147,7 +144,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
|
|
147
144
|
{...htmlProps}
|
148
145
|
className={css}
|
149
146
|
>
|
150
|
-
{label &&
|
147
|
+
{label &&
|
151
148
|
<Caption
|
152
149
|
className="pb_text_input_kit_label"
|
153
150
|
text={label}
|
@@ -25,12 +25,8 @@ module Playbook
|
|
25
25
|
prop :add_on, type: Playbook::Props::NestedProps,
|
26
26
|
nested_kit: Playbook::PbTextInput::AddOn
|
27
27
|
|
28
|
-
def default_margin_bottom
|
29
|
-
object.margin_bottom.present? ? "" : " mb_sm"
|
30
|
-
end
|
31
|
-
|
32
28
|
def classname
|
33
|
-
generate_classname("pb_text_input_kit") + error_class + inline_class
|
29
|
+
generate_classname("pb_text_input_kit") + error_class + inline_class
|
34
30
|
end
|
35
31
|
|
36
32
|
def input_tag
|