playbook_ui 10.23.0 → 10.25.0.pre.treeshaking1

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 (28) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_background/_background.jsx +11 -2
  3. data/app/pb_kits/playbook/pb_background/_background.scss +2 -2
  4. data/app/pb_kits/playbook/pb_background/background.html.erb +5 -2
  5. data/app/pb_kits/playbook/pb_background/background.rb +28 -1
  6. data/app/pb_kits/playbook/pb_background/background.test.js +17 -0
  7. data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb +1 -1
  8. data/app/pb_kits/playbook/pb_background/docs/_background_size.html.erb +5 -0
  9. data/app/pb_kits/playbook/pb_background/docs/_background_size.jsx +36 -0
  10. data/app/pb_kits/playbook/pb_background/docs/_background_size.md +3 -0
  11. data/app/pb_kits/playbook/pb_background/docs/_description.md +3 -1
  12. data/app/pb_kits/playbook/pb_background/docs/example.yml +2 -0
  13. data/app/pb_kits/playbook/pb_background/docs/index.js +1 -0
  14. data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.jsx +2 -2
  15. data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.rb +13 -1
  16. data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.html.erb +13 -6
  17. data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.jsx +9 -0
  18. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +3 -3
  19. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.md +2 -2
  20. data/app/pb_kits/playbook/pb_passphrase/_passphrase.jsx +0 -1
  21. data/app/pb_kits/playbook/pb_select/_select.jsx +2 -2
  22. data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.html.erb +2 -0
  23. data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.jsx +1 -1
  24. data/app/pb_kits/playbook/pb_stat_value/stat_value.rb +2 -2
  25. data/app/pb_kits/playbook/pb_text_input/_text_input.jsx +24 -19
  26. data/app/pb_kits/playbook/utilities/globalProps.ts +23 -0
  27. data/lib/playbook/version.rb +2 -2
  28. metadata +7 -4
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 6798a70ed76fb5f5a6e1b65a7906c237fed66449377b09cdd42ed93133fd9148
4
- data.tar.gz: 4cff4b45c818dc8844e10a4ffa3a2708a4041d1277af4a2adb473138661a95c1
3
+ metadata.gz: aefb339d6c0b9b986bb10dd16b045f6012cb6b2819ee1d924a1651aa2d4e13fd
4
+ data.tar.gz: d658abf6db94843cb077d1a93647c0e0b2b11586eb1a745b922cf1612532e8ab
5
5
  SHA512:
6
- metadata.gz: b4b508b9345c83fd51fb058bd42de424ffbe05df3ec05ca043e1803a434b1955648b3591e83b9a5894065e5138f4ac4d136d23471f3f26794a2625f80533df26
7
- data.tar.gz: 0a3f4fa1c1fa89edbd972f83ef5c3379212dd17fb4dc4233af400068724b9a6c0cb3b27100818989b48cc70fab6b9a6e556f3694087b75be9b037e498e7a6e22
6
+ metadata.gz: 0507f95acaa25aeb202b2b801ded2a85f58d88a425b363b9b5906a9497c9ff869cc8b49cd30034d74f455393dca771fe606904b71b5056b89c20b040fd7d39c3
7
+ data.tar.gz: b19ca53b6d78eeea25a9098f847ac43f8baf617352d5c5dccc037cf2e196e15abbff9e9050738054c9bd856f1e3c925901fb6efcaca3393223559ae56de98272
@@ -9,8 +9,11 @@ type BackgroundProps = {
9
9
  alt?: string,
10
10
  aria?: object,
11
11
  backgroundColor?: 'gradient' | 'dark' | 'light' | 'white' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'category_1' | 'category_2' | 'category_3' | 'category_4' | 'category_5' | 'category_6' | 'category_7' | 'category_8' | 'category_9' | 'category_10' | 'category_11' | 'category_12' | 'category_13' | 'category_14' | 'category_15' | 'category_16' | 'category_17' | 'category_18' | 'category_19' | 'category_20' | 'category_21',
12
+ backgroundRepeat?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round' | 'initial' | 'inherit',
13
+ backgroundSize?: 'auto' | 'cover' | 'contain',
12
14
  children?: array<React.ReactNode> | React.ReactNode,
13
15
  className?: string,
16
+ customColor?: string,
14
17
  data?: object,
15
18
  id?: string,
16
19
  imageUrl?: string,
@@ -24,8 +27,11 @@ const Background = (props: BackgroundProps) => {
24
27
  alt = '',
25
28
  aria = {},
26
29
  backgroundColor = 'light',
30
+ backgroundRepeat = 'initial',
31
+ backgroundSize = 'cover',
27
32
  children,
28
33
  className,
34
+ customColor,
29
35
  data = {},
30
36
  id,
31
37
  imageUrl = '',
@@ -38,9 +44,11 @@ const Background = (props: BackgroundProps) => {
38
44
 
39
45
  const backgroundStyle = {
40
46
  backgroundImage: `url(${imageUrl})`,
41
- backgroundSize: 'cover',
47
+ backgroundRepeat: `${backgroundRepeat}`,
48
+ backgroundSize: `${backgroundSize}`,
42
49
  }
43
- const classes = classnames(buildCss('pb_background_kit'), 'lazyload', backgroundStyle, transition, globalProps(props), `pb_background_color_${backgroundColor}`, className)
50
+ const getBackgroundColor = customColor ? 'pb_background_custom_color' : `pb_background_color_${backgroundColor}`
51
+ const classes = classnames(buildCss('pb_background_kit'), 'lazyload', backgroundStyle, transition, globalProps(props), getBackgroundColor, className)
44
52
  const Tag = `${tag}`
45
53
 
46
54
  return (
@@ -62,6 +70,7 @@ const Background = (props: BackgroundProps) => {
62
70
  {...dataProps}
63
71
  className={classes}
64
72
  id={id}
73
+ style={customColor ? { backgroundColor: customColor } : null}
65
74
  >
66
75
  { children }
67
76
  </Tag>
@@ -29,7 +29,7 @@ $background_colors: map-merge($additional_colors, $merge_kits2);
29
29
  transition: opacity 400ms ease-in;
30
30
  }
31
31
  }
32
-
32
+
33
33
  &.blur {
34
34
  filter: blur(5px);
35
35
  &.lazyloaded {
@@ -38,7 +38,7 @@ $background_colors: map-merge($additional_colors, $merge_kits2);
38
38
  transition: filter 400ms ease-in;
39
39
  }
40
40
  }
41
-
41
+
42
42
  &.scale {
43
43
  opacity: 0;
44
44
  transform: scale(0.9);
@@ -4,7 +4,9 @@
4
4
  data: object.data,
5
5
  id: object.id,
6
6
  class: object.classname,
7
- style: "background-image: url('#{object.image_url}');"
7
+ style: "background-image: url('#{object.image_url}');
8
+ background-repeat: #{object.background_repeat};
9
+ background-size: #{object.background_size};"
8
10
  ) do %>
9
11
  <%= content.presence %>
10
12
  <% end %>
@@ -13,7 +15,8 @@
13
15
  aria: object.aria,
14
16
  data: object.data,
15
17
  id: object.id,
16
- class: object.classname
18
+ class: object.classname,
19
+ style: object.custom_background_color
17
20
  ) do %>
18
21
  <%= content.presence %>
19
22
  <% end %>
@@ -6,6 +6,24 @@ module Playbook
6
6
  prop :background_color, type: Playbook::Props::Enum,
7
7
  values: %w[gradient dark light white success warning error info neutral primary category_1 category_2 category_3 category_4 category_5 category_6 category_7 category_8 category_9 category_10 category_11 category_12 category_13 category_14 category_15 category_16 category_17 category_18 category_19 category_20 category_21],
8
8
  default: "light"
9
+
10
+ prop :background_repeat, type: Playbook::Props::Enum,
11
+ values: %w[
12
+ repeat
13
+ repeat-x
14
+ repeat-y
15
+ no-repeat
16
+ space
17
+ round
18
+ initial
19
+ inherit
20
+ ],
21
+ default: "initial"
22
+
23
+ prop :background_size, type: Playbook::Props::Enum,
24
+ values: %w[contain cover auto],
25
+ default: "cover"
26
+
9
27
  prop :image_url
10
28
 
11
29
  prop :tag, type: Playbook::Props::Enum,
@@ -16,14 +34,23 @@ module Playbook
16
34
  values: ["blur", "fade", "scale", nil],
17
35
  default: nil
18
36
 
37
+ prop :custom_color, type: Playbook::Props::String,
38
+ default: nil
39
+
19
40
  def classname
20
41
  generate_classname("pb_background_kit", image_classname, separator: " ")
21
42
  end
22
43
 
44
+ def custom_background_color
45
+ "background-color: #{custom_color};"
46
+ end
47
+
23
48
  private
24
49
 
25
50
  def image_classname
26
- image_url.present? ? "lazyload #{transition}" : "pb_background_color_#{background_color}"
51
+ background_class = custom_color.present? ? "pb_background_custom_color" : "pb_background_color_#{background_color}"
52
+ background_class_lazy = image_url.present? ? " lazyload #{transition}" : ""
53
+ "#{background_class}#{background_class_lazy}"
27
54
  end
28
55
  end
29
56
  end
@@ -20,3 +20,20 @@ test('backgroundColor = category_1', () => {
20
20
  const kit = renderKit(Background, props, { backgroundColor: 'category_1' })
21
21
  expect(kit).toHaveClass('pb_background_kit pb_background_color_category_1')
22
22
  })
23
+
24
+ test('customColor prop styles background color with a hex value', () => {
25
+ const kit = renderKit(Background, props, { customColor: '#1d99a8' })
26
+
27
+ expect(kit).toHaveClass('pb_background_kit pb_background_custom_color')
28
+ expect(kit).toHaveStyle(`background-color: #1d99a8;`)
29
+ })
30
+
31
+ test('backgroundRepeat = repeat', () => {
32
+ const kit = renderKit(Background, props, { classname: "background-image", imageUrl: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", backgroundRepeat: 'repeat' })
33
+ expect(kit).toHaveStyle('background-repeat: repeat')
34
+ })
35
+
36
+ test('backgroundSize = auto', () => {
37
+ const kit = renderKit(Background, props, { classname: "background-image", imageUrl: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", backgroundSize: 'auto' })
38
+ expect(kit).toHaveStyle('background-size: auto')
39
+ })
@@ -1,3 +1,3 @@
1
1
  <%= pb_rails("background", props: { background_color: "light", padding: "xl" }) do %>
2
2
 
3
- <% end %>
3
+ <% end %>
@@ -0,0 +1,5 @@
1
+ <%= pb_rails("background", props: { classname: "background-image", image_url: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", background_size: "auto", padding: "xl" }) %>
2
+ <br/>
3
+ <%= pb_rails("background", props: { classname: "background-image", image_url: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", background_size: "cover", padding: "xl" }) %>
4
+ <br/>
5
+ <%= pb_rails("background", props: { classname: "background-image", image_url: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", background_repeat: "no-repeat", background_size: "contain", padding: "xl" }) %>
@@ -0,0 +1,36 @@
1
+ import React, { Fragment as F } from 'react'
2
+ import { Background } from '../..'
3
+
4
+ const BackgroundSize = (props) => (
5
+ <F>
6
+ <Background
7
+ alt="colorful background"
8
+ backgroundSize="auto"
9
+ className="background lazyload"
10
+ imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
11
+ padding="xl"
12
+ {...props}
13
+ />
14
+ <br/>
15
+ <Background
16
+ alt="colorful background"
17
+ backgroundSize="cover"
18
+ className="background lazyload"
19
+ imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
20
+ padding="xl"
21
+ {...props}
22
+ />
23
+ <br/>
24
+ <Background
25
+ alt="colorful background"
26
+ backgroundRepeat="no-repeat"
27
+ backgroundSize="contain"
28
+ className="background lazyload"
29
+ imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
30
+ padding="xl"
31
+ {...props}
32
+ />
33
+ </F>
34
+ )
35
+
36
+ export default BackgroundSize
@@ -0,0 +1,3 @@
1
+ Background size can be passed into the background kit. Values `auto`, `cover`, and `contain` are accepted.
2
+
3
+ 💡 *Note:* When using `contain` you might not want to have a repeating background as this will not always look pleasant. To prevent this, you may pass `no-repeat` to the `backgroundRepeat` prop.
@@ -1 +1,3 @@
1
- The background kit is used for adding a background to a page or to any container. Instead of adding a custom class to give something a background, you can now wrap the elements in the background kit and use the `background_color` prop to assign its color. The colors that you can choose from for the `background_color` prop are: gradient, dark, light, white, status colors, product colors, and category colors.
1
+ The background kit is used for adding a background to a page or to any container. Instead of adding a custom class to give something a background, you can now wrap the elements in the background kit and use the `background_color` prop to assign its color. The colors that you can choose from for the `background_color` prop are: gradient, dark, light, white, status colors, product colors, and category colors.
2
+
3
+ The `custom_color` prop allows you to pass a hex value (ex. "#e43718") in place of `background_color`. It is not case sensitive, but needs to start with `#`. This prop exists primarily for use in microsites and very specific situations. Avoid using unless absolutely necessary to maintain continuity.
@@ -7,6 +7,7 @@ examples:
7
7
  - background_image: Image
8
8
  - background_status: Status
9
9
  - background_category: Category
10
+ - background_size: Size
10
11
 
11
12
  react:
12
13
  - background_light: Light
@@ -15,3 +16,4 @@ examples:
15
16
  - background_image: Image
16
17
  - background_status: Status
17
18
  - background_category: Category
19
+ - background_size: Size
@@ -4,3 +4,4 @@ export { default as BackgroundGradient } from './_background_gradient.jsx'
4
4
  export { default as BackgroundImage } from './_background_image.jsx'
5
5
  export { default as BackgroundStatus } from './_background_status.jsx'
6
6
  export { default as BackgroundCategory } from './_background_category.jsx'
7
+ export { default as BackgroundSize } from './_background_size.jsx'
@@ -2,7 +2,7 @@
2
2
 
3
3
  import React from 'react'
4
4
  import classnames from 'classnames'
5
- import { globalProps } from '../utilities/globalProps'
5
+ import { globalProps, domSafeProps } from '../utilities/globalProps'
6
6
 
7
7
  import {
8
8
  buildAriaProps,
@@ -43,7 +43,7 @@ const BreadCrumbItem = (props: BreadCrumbItemProps) => {
43
43
  >
44
44
  <Component
45
45
  className="pb_bread_crumb_item"
46
- {...rest}
46
+ {...domSafeProps(rest)}
47
47
  />
48
48
  </div>
49
49
  )
@@ -13,12 +13,24 @@ module Playbook
13
13
  default: {}
14
14
 
15
15
  def formatted_stat_value
16
- { **stat_value, value: stat_value[:value].to_i }
16
+ { **stat_value, value: sanitized_stat_value }
17
17
  end
18
18
 
19
19
  def classname
20
20
  generate_classname("pb_dashboard_value_kit", align)
21
21
  end
22
+
23
+ # rubocop:disable Lint/FloatComparison
24
+ # Comparing the value coerced to a float versus an integer is the point of this methodd
25
+ def sanitized_stat_value
26
+ value = stat_value[:value]
27
+ if value.is_a?(::String)
28
+ value.to_f == value.to_i ? value.to_i : value.to_f
29
+ else
30
+ value
31
+ end
32
+ end
33
+ # rubocop:enable Lint/FloatComparison
22
34
  end
23
35
  end
24
36
  end
@@ -1,21 +1,28 @@
1
1
  <%= pb_rails("dashboard_value", props: {
2
2
  stat_label: "Decreased Value",
3
- stat_value: {value: 1428, unit: "appts"},
4
- stat_change: {change: "decrease", value: 26.1}
3
+ stat_value: { value: 1428, unit: "appts" },
4
+ stat_change: { change: "decrease", value: 26.1 }
5
5
  }) %>
6
6
 
7
7
  <br><br>
8
8
 
9
9
  <%= pb_rails("dashboard_value", props: {
10
10
  stat_label: "Increased Value",
11
- stat_value: {value: 938, unit: "homes"},
12
- stat_change: {change: "increase", value: 56.1}
11
+ stat_value: { value: 938, unit: "homes" },
12
+ stat_change: { change: "increase", value: 56.1 }
13
13
  }) %>
14
14
 
15
15
  <br><br>
16
16
 
17
17
  <%= pb_rails("dashboard_value", props: {
18
18
  stat_label: "Neutral Value",
19
- stat_value: {value: 261, unit: "windows"},
20
- stat_change: {value: 86}
19
+ stat_value: { value: 261, unit: "windows" },
20
+ stat_change: { value: 86 }
21
+ }) %>
22
+
23
+ <br><br>
24
+
25
+ <%= pb_rails("dashboard_value", props: {
26
+ stat_label: "Pitch Rate",
27
+ stat_value: { value: 90.9, unit: "%" }
21
28
  }) %>
@@ -31,6 +31,15 @@ const DashboardValueDefault = (props) => {
31
31
  statValue={{ value: '261', unit: 'windows' }}
32
32
  {...props}
33
33
  />
34
+
35
+ <br />
36
+ <br />
37
+
38
+ <DashboardValue
39
+ statLabel="Pitch Rate"
40
+ statValue={{ value: '90.9', unit: '%' }}
41
+ {...props}
42
+ />
34
43
  </div>
35
44
  )
36
45
  }
@@ -8,7 +8,7 @@
8
8
 
9
9
 
10
10
 
11
- // Dialog Animations
11
+ // Dialog Animations
12
12
 
13
13
  @keyframes modalFadeIn {
14
14
  from {
@@ -72,7 +72,7 @@
72
72
  border: 0;
73
73
  max-height: calc(100vh - #{$gutter * 2});
74
74
  max-width: calc(100vw - #{$gutter * 2});
75
- overflow: scroll;
75
+ overflow: auto;
76
76
  animation-name: modalFadeIn;
77
77
  animation-duration: $animation-duration;
78
78
  outline: none;
@@ -131,4 +131,4 @@
131
131
  opacity: $opacity_hidden;
132
132
  }
133
133
  }
134
- }
134
+ }
@@ -1,2 +1,2 @@
1
- When shouldCloseOnOverlayClick is explicitly set to `false`, click events on the overlay will not close the modal.
2
- By default, shouldCloseOnOverlayClick is set to true.
1
+ When `shouldCloseOnOverlayClick` is explicitly set to `false`, click events on the overlay will not close the modal.
2
+ By default, `shouldCloseOnOverlayClick` is set to true.
@@ -184,7 +184,6 @@ const Passphrase = (props: PassphraseProps) => {
184
184
  />
185
185
  <span
186
186
  className="show-passphrase-icon"
187
- dark={dark}
188
187
  onClick={toggleShowPassphrase}
189
188
  >
190
189
  <Body
@@ -4,7 +4,7 @@ import React, { forwardRef } from 'react'
4
4
  import classnames from 'classnames'
5
5
 
6
6
  import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
7
- import { globalProps } from '../utilities/globalProps'
7
+ import { globalProps, domSafeProps } from '../utilities/globalProps'
8
8
  import type { InputCallback } from '../types'
9
9
 
10
10
  import Body from '../pb_body/_body'
@@ -112,7 +112,7 @@ const Select = ({
112
112
  {children}
113
113
  <Else />
114
114
  <select
115
- {...props}
115
+ {...domSafeProps(props)}
116
116
  disabled={disabled}
117
117
  id={name}
118
118
  multiple={multiple}
@@ -1 +1,3 @@
1
1
  <%= pb_rails("stat_value", props: { value: 1048 }) %>
2
+
3
+ <%= pb_rails("stat_value", props: { value: 10.48 }) %>
@@ -12,7 +12,7 @@ const StatValueDefault = (props) => {
12
12
  <br />
13
13
  <br />
14
14
  <StatValue
15
- value={0}
15
+ value={10.48}
16
16
  {...props}
17
17
  />
18
18
  </>
@@ -4,10 +4,10 @@ module Playbook
4
4
  module PbStatValue
5
5
  class StatValue < Playbook::KitBase
6
6
  prop :unit
7
- prop :value, type: Playbook::Props::Number
7
+ prop :value, type: Playbook::Props::Numeric
8
8
 
9
9
  def formatted_value
10
- number_with_delimiter(value, delimiter: ",")
10
+ number_with_delimiter(value, delimiter: ",", separator: ".")
11
11
  end
12
12
 
13
13
  def classname
@@ -2,7 +2,7 @@
2
2
  import React, { forwardRef } from 'react'
3
3
  import classnames from 'classnames'
4
4
 
5
- import { globalProps } from '../utilities/globalProps'
5
+ import { globalProps, domSafeProps } from '../utilities/globalProps'
6
6
  import { buildAriaProps, buildDataProps } from '../utilities/props'
7
7
 
8
8
  import Flex from '../pb_flex/_flex'
@@ -37,10 +37,11 @@ type TextInputProps = {
37
37
 
38
38
  const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
39
39
  const {
40
+ addOn = { icon: null, alignment: 'right', border: true },
40
41
  aria = {},
41
42
  className,
42
- data = {},
43
43
  dark = false,
44
+ data = {},
44
45
  disabled,
45
46
  error,
46
47
  id,
@@ -53,7 +54,6 @@ const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
53
54
  type = 'text',
54
55
  value = '',
55
56
  children = null,
56
- addOn = { icon: null, alignment: 'right', border: true },
57
57
  } = props
58
58
 
59
59
  const ariaProps = buildAriaProps(aria)
@@ -85,10 +85,11 @@ const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
85
85
  )
86
86
  const textInput = (
87
87
  <input
88
- {...props}
88
+ {...domSafeProps(props)}
89
89
  className="text_input"
90
90
  disabled={disabled}
91
91
  id={id}
92
+ key={id}
92
93
  name={name}
93
94
  onChange={onChange}
94
95
  placeholder={placeholder}
@@ -107,21 +108,25 @@ const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
107
108
  vertical="center"
108
109
  >
109
110
  <If condition={addOnAlignment == 'left'}>
110
- <Card
111
- className={`${addOnDarkModeCardCss} add-on-card card-left-aligned`}
112
- dark={dark}
113
- >
114
- {addOnIcon}
115
- </Card>
116
- {textInput}
117
- <Else />
118
- {textInput}
119
- <Card
120
- className={`${addOnDarkModeCardCss} add-on-card card-right-aligned`}
121
- dark={dark}
122
- >
123
- {addOnIcon}
124
- </Card>
111
+ <>
112
+ <Card
113
+ className={`${addOnDarkModeCardCss} add-on-card card-left-aligned`}
114
+ dark={dark}
115
+ >
116
+ {addOnIcon}
117
+ </Card>
118
+ {textInput}
119
+ </>
120
+ <Else />
121
+ <>
122
+ {textInput}
123
+ <Card
124
+ className={`${addOnDarkModeCardCss} add-on-card card-right-aligned`}
125
+ dark={dark}
126
+ >
127
+ {addOnIcon}
128
+ </Card>
129
+ </>
125
130
  </If>
126
131
  </Flex>
127
132
  </React.Fragment>
@@ -1,3 +1,5 @@
1
+ import { omit } from 'lodash'
2
+
1
3
  type Sizes = "xs" | "sm" | "md" | "lg" | "xl"
2
4
  type None = "none"
3
5
 
@@ -272,3 +274,24 @@ export const deprecatedProps = (kit: string, props: string[] = []): void => {
272
274
  })
273
275
  }
274
276
  }
277
+
278
+ export const domSafeProps = (props: {[key: string]: string}): {[key: string]: string} => {
279
+ const notSafeProps = [
280
+ 'marginRight',
281
+ 'marginLeft',
282
+ 'marginTop',
283
+ 'marginBottom',
284
+ 'marginX',
285
+ 'marginY',
286
+ 'margin',
287
+ 'paddingRight',
288
+ 'paddingLeft',
289
+ 'paddingTop',
290
+ 'paddingBottom',
291
+ 'paddingX',
292
+ 'paddingY',
293
+ 'padding',
294
+ 'dark',
295
+ ]
296
+ return omit(props, notSafeProps)
297
+ }
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "10.22.1"
5
- VERSION = "10.23.0"
4
+ PREVIOUS_VERSION = "10.24.0"
5
+ VERSION = "10.25.0.pre.treeshaking1"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 10.23.0
4
+ version: 10.25.0.pre.treeshaking1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2022-03-16 00:00:00.000000000 Z
12
+ date: 2022-04-04 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -333,6 +333,9 @@ files:
333
333
  - app/pb_kits/playbook/pb_background/docs/_background_image.md
334
334
  - app/pb_kits/playbook/pb_background/docs/_background_light.html.erb
335
335
  - app/pb_kits/playbook/pb_background/docs/_background_light.jsx
336
+ - app/pb_kits/playbook/pb_background/docs/_background_size.html.erb
337
+ - app/pb_kits/playbook/pb_background/docs/_background_size.jsx
338
+ - app/pb_kits/playbook/pb_background/docs/_background_size.md
336
339
  - app/pb_kits/playbook/pb_background/docs/_background_status.html.erb
337
340
  - app/pb_kits/playbook/pb_background/docs/_background_status.jsx
338
341
  - app/pb_kits/playbook/pb_background/docs/_background_status.md
@@ -2163,9 +2166,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
2163
2166
  version: '0'
2164
2167
  required_rubygems_version: !ruby/object:Gem::Requirement
2165
2168
  requirements:
2166
- - - ">="
2169
+ - - ">"
2167
2170
  - !ruby/object:Gem::Version
2168
- version: '0'
2171
+ version: 1.3.1
2169
2172
  requirements: []
2170
2173
  rubygems_version: 3.1.6
2171
2174
  signing_key: