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.
Files changed (29) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +0 -6
  3. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +2 -4
  4. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +3 -5
  5. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +3 -2
  6. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +1 -43
  7. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -2
  8. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +1 -15
  9. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss +2 -1
  10. data/app/pb_kits/playbook/pb_nav/docs/example.yml +0 -17
  11. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +1 -0
  12. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +1 -4
  13. data/app/pb_kits/playbook/pb_text_input/text_input.rb +1 -5
  14. data/dist/playbook-rails.js +1 -1
  15. data/lib/playbook/version.rb +2 -2
  16. metadata +7 -20
  17. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_colors_swift.md +0 -27
  18. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default_swift.md +0 -22
  19. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_props_table.md +0 -8
  20. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_sizes_swift.md +0 -26
  21. data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_bold_swift.md +0 -17
  22. data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_default_swift.md +0 -17
  23. data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_subtle_no_highlight_swift.md +0 -18
  24. data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_subtle_swift.md +0 -18
  25. data/app/pb_kits/playbook/pb_nav/docs/_nav_props_swift.md +0 -11
  26. data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_bold_swift.md +0 -18
  27. data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_default_swift.md +0 -18
  28. data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_subtle_no_highlight_swift.md +0 -19
  29. 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: d3d5b87f2b6c16e79587bb3c5e948214ab861f720b447f1de049940fe74d6d3f
4
- data.tar.gz: 35f0b35d0c9e112c30f0ca5af3916e1b57f05068650e320c1da973a97cf12936
3
+ metadata.gz: fd6f86769005f1cf4bd5400be7f925bf38d3e16560fbec5da24158c969873663
4
+ data.tar.gz: 5c879bd8ecc90a4e2d02adbab1d208f81098708f949e60ece5c95eb2875bd81e
5
5
  SHA512:
6
- metadata.gz: dcec116e1d5fb1e095e0b92fec1a0a80f85407472821bcd7a22bafdafbd6e3d412d72237ab150c3338e934043e7a5427e567ceb87b2615836716e1cf2928c5a1
7
- data.tar.gz: 88b6924b8a19996f02acad09f739e80a04aec6c2caf49374bb5ec37709f84939c29ecc8a9e591297d4d436c5e80c2c5060552423a073ba1bc3be4c02e38b4be8
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
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
127
- // @ts-ignore
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={`date_picker_input_wrapper ${inputClasses}`}>
182
+ <div className="date_picker_input_wrapper">
225
183
  <input
226
184
  autoComplete="off"
227
185
  className="date_picker_input"
@@ -19,7 +19,6 @@
19
19
  name: object.name,
20
20
  placeholder: object.placeholder,
21
21
  required: object.required,
22
- classname: margins_to_remove.join(" ")
23
22
  }) %>
24
23
  <% end %>
25
24
 
@@ -81,4 +80,4 @@
81
80
  }
82
81
  })
83
82
  <% end %>
84
- <% end %>
83
+ <% end %>
@@ -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
- regex = Regexp.union(margins_to_remove)
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
@@ -1,6 +1,7 @@
1
1
  @import "../../pb_textarea/textarea_mixin";
2
2
 
3
3
  [class^=pb_date_picker_kit] {
4
+ margin-bottom: $space_sm;
4
5
 
5
6
  .pb_date_picker_kit_label {
6
7
  margin-bottom: $space_xs;
@@ -64,4 +65,4 @@
64
65
  }
65
66
  }
66
67
  }
67
- }
68
+ }
@@ -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
-
@@ -3,6 +3,7 @@
3
3
  @import "../tokens/colors";
4
4
 
5
5
  [class^="pb_text_input_kit"] {
6
+ margin-bottom: $space_sm;
6
7
  .pb_text_input_kit_label {
7
8
  margin-bottom: $space_xs;
8
9
  display: block;
@@ -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 + default_margin_bottom
29
+ generate_classname("pb_text_input_kit") + error_class + inline_class
34
30
  end
35
31
 
36
32
  def input_tag