playbook_ui 10.14.1.pre.alpha2 → 10.16.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_background/_background.jsx +1 -1
- data/app/pb_kits/playbook/pb_background/_background.scss +4 -1
- data/app/pb_kits/playbook/pb_background/background.rb +1 -1
- data/app/pb_kits/playbook/pb_background/docs/_background_category.html.erb +23 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_category.jsx +119 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_category.md +1 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_status.html.erb +13 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_status.jsx +44 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_status.md +1 -0
- data/app/pb_kits/playbook/pb_background/docs/_description.md +1 -1
- data/app/pb_kits/playbook/pb_background/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_background/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_card/_card.jsx +5 -6
- data/app/pb_kits/playbook/pb_card/_card_mixin.scss +5 -1
- data/app/pb_kits/playbook/pb_card/card.rb +7 -7
- data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +2 -2
- data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +0 -2
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx +3 -0
- data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +2 -0
- data/app/pb_kits/playbook/pb_dialog/_dialog.scss +1 -0
- data/app/pb_kits/playbook/pb_flex/docs/_description.md +0 -6
- data/app/pb_kits/playbook/pb_flex/docs/_flex_align.md +1 -5
- data/app/pb_kits/playbook/pb_flex/docs/_flex_justify.md +1 -5
- data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.md +1 -5
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx +3 -0
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +7 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.html.erb +1 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.jsx +17 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.md +1 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb +1 -4
- data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +10 -17
- data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +6 -2
- data/app/pb_kits/playbook/pb_pill/_pill.jsx +3 -1
- data/app/pb_kits/playbook/pb_pill/_pill.scss +8 -0
- data/app/pb_kits/playbook/pb_pill/docs/_pill_default.html.erb +1 -45
- data/app/pb_kits/playbook/pb_pill/docs/_pill_default.jsx +3 -48
- data/app/pb_kits/playbook/pb_pill/docs/_pill_example.html.erb +1 -0
- data/app/pb_kits/playbook/pb_pill/docs/_pill_example.jsx +17 -0
- data/app/pb_kits/playbook/pb_pill/docs/_pill_example.md +1 -0
- data/app/pb_kits/playbook/pb_pill/docs/_pill_variants.html.erb +6 -0
- data/app/pb_kits/playbook/pb_pill/docs/_pill_variants.jsx +45 -0
- data/app/pb_kits/playbook/pb_pill/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_pill/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_pill/pill.rb +5 -2
- data/app/pb_kits/playbook/pb_popover/_popover.scss +2 -0
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +1 -0
- data/app/pb_kits/playbook/plugins/pb_chart.js +1 -1
- data/app/pb_kits/playbook/utilities/_max_width.scss +10 -0
- data/lib/playbook/spacing.rb +1 -1
- data/lib/playbook/version.rb +2 -2
- metadata +41 -27
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 8cb62e7e4c4ce0582f7c7af3baec2eb4b35cb022ca13dc4b373e768f69bbbd32
|
4
|
+
data.tar.gz: 94a24d2c6cc426fcde35a23e33dafe44aec865a0913acba42fa716590eaaedb2
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 9629982686a67ac50d4a4687ab2cb8194e5796982ba91459842efb615b2167fd92342cb3e60e645da24dc6291e944059248d38a50f85a8b746bd820b6f8d53ea
|
7
|
+
data.tar.gz: 05e31457c3ace5f05fa663d5031cc5d3367e0eb3b58f61c00df6b9d5df495ed91254335f74e10eaee5f807f611e70c3c408fb14248d60e2777dc93975ce3eb68
|
@@ -7,7 +7,7 @@ import { globalProps } from '../utilities/globalProps.js'
|
|
7
7
|
|
8
8
|
type BackgroundProps = {
|
9
9
|
aria?: object,
|
10
|
-
backgroundColor?: 'gradient' | 'dark' | 'light' | 'white',
|
10
|
+
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',
|
11
11
|
children?: array<React.ReactNode> | React.ReactNode,
|
12
12
|
className?: string,
|
13
13
|
data?: object,
|
@@ -1,12 +1,15 @@
|
|
1
1
|
@import "../tokens/colors";
|
2
2
|
|
3
|
-
$
|
3
|
+
$additional_colors: (
|
4
4
|
"gradient": linear-gradient(135deg, $gradient_start 0%, $gradient_end 100%),
|
5
5
|
"dark": $bg_dark,
|
6
6
|
"light": $bg_light,
|
7
7
|
"white": $white,
|
8
8
|
);
|
9
9
|
|
10
|
+
$merge_kits1: map-merge($status_colors, $category_colors);
|
11
|
+
$merge_kits2: map-merge($merge_kits1, $product_colors);
|
12
|
+
$background_colors: map-merge($additional_colors, $merge_kits2);
|
10
13
|
|
11
14
|
[class^=pb_background_kit] {
|
12
15
|
max-width: 100%;
|
@@ -4,7 +4,7 @@ module Playbook
|
|
4
4
|
module PbBackground
|
5
5
|
class Background < Playbook::KitBase
|
6
6
|
prop :background_color, type: Playbook::Props::Enum,
|
7
|
-
values: %w[gradient dark light white],
|
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
9
|
prop :image_url
|
10
10
|
|
@@ -0,0 +1,23 @@
|
|
1
|
+
<%= pb_rails("flex", props: {gap: "md", justify: "center", wrap: true}) do %>
|
2
|
+
<%= pb_rails("background", props: { background_color: "category_1", padding: "xl" }) do %> <% end %>
|
3
|
+
<%= pb_rails("background", props: { background_color: "category_2", padding: "xl" }) do %> <% end %>
|
4
|
+
<%= pb_rails("background", props: { background_color: "category_3", padding: "xl" }) do %> <% end %>
|
5
|
+
<%= pb_rails("background", props: { background_color: "category_4", padding: "xl" }) do %> <% end %>
|
6
|
+
<%= pb_rails("background", props: { background_color: "category_5", padding: "xl" }) do %> <% end %>
|
7
|
+
<%= pb_rails("background", props: { background_color: "category_6", padding: "xl" }) do %> <% end %>
|
8
|
+
<%= pb_rails("background", props: { background_color: "category_7", padding: "xl" }) do %> <% end %>
|
9
|
+
<%= pb_rails("background", props: { background_color: "category_8", padding: "xl" }) do %> <% end %>
|
10
|
+
<%= pb_rails("background", props: { background_color: "category_9", padding: "xl" }) do %> <% end %>
|
11
|
+
<%= pb_rails("background", props: { background_color: "category_10", padding: "xl" }) do %> <% end %>
|
12
|
+
<%= pb_rails("background", props: { background_color: "category_11", padding: "xl" }) do %> <% end %>
|
13
|
+
<%= pb_rails("background", props: { background_color: "category_12", padding: "xl" }) do %> <% end %>
|
14
|
+
<%= pb_rails("background", props: { background_color: "category_13", padding: "xl" }) do %> <% end %>
|
15
|
+
<%= pb_rails("background", props: { background_color: "category_14", padding: "xl" }) do %> <% end %>
|
16
|
+
<%= pb_rails("background", props: { background_color: "category_15", padding: "xl" }) do %> <% end %>
|
17
|
+
<%= pb_rails("background", props: { background_color: "category_16", padding: "xl" }) do %> <% end %>
|
18
|
+
<%= pb_rails("background", props: { background_color: "category_17", padding: "xl" }) do %> <% end %>
|
19
|
+
<%= pb_rails("background", props: { background_color: "category_18", padding: "xl" }) do %> <% end %>
|
20
|
+
<%= pb_rails("background", props: { background_color: "category_19", padding: "xl" }) do %> <% end %>
|
21
|
+
<%= pb_rails("background", props: { background_color: "category_20", padding: "xl" }) do %> <% end %>
|
22
|
+
<%= pb_rails("background", props: { background_color: "category_21", padding: "xl" }) do %> <% end %>
|
23
|
+
<%end%>
|
@@ -0,0 +1,119 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Background } from '../..'
|
3
|
+
import { Flex } from '../..'
|
4
|
+
|
5
|
+
const BackgroundCategory = (props) => (
|
6
|
+
<Flex
|
7
|
+
gap="md"
|
8
|
+
justify="center"
|
9
|
+
wrap
|
10
|
+
>
|
11
|
+
<Background
|
12
|
+
backgroundColor="category_1"
|
13
|
+
padding="xl"
|
14
|
+
{...props}
|
15
|
+
/>
|
16
|
+
<Background
|
17
|
+
backgroundColor="category_2"
|
18
|
+
padding="xl"
|
19
|
+
{...props}
|
20
|
+
/>
|
21
|
+
<Background
|
22
|
+
backgroundColor="category_3"
|
23
|
+
padding="xl"
|
24
|
+
{...props}
|
25
|
+
/>
|
26
|
+
<Background
|
27
|
+
backgroundColor="category_4"
|
28
|
+
padding="xl"
|
29
|
+
{...props}
|
30
|
+
/>
|
31
|
+
<Background
|
32
|
+
backgroundColor="category_5"
|
33
|
+
padding="xl"
|
34
|
+
{...props}
|
35
|
+
/>
|
36
|
+
<Background
|
37
|
+
backgroundColor="category_6"
|
38
|
+
padding="xl"
|
39
|
+
{...props}
|
40
|
+
/>
|
41
|
+
<Background
|
42
|
+
backgroundColor="category_7"
|
43
|
+
padding="xl"
|
44
|
+
{...props}
|
45
|
+
/>
|
46
|
+
<Background
|
47
|
+
backgroundColor="category_8"
|
48
|
+
padding="xl"
|
49
|
+
{...props}
|
50
|
+
/>
|
51
|
+
<Background
|
52
|
+
backgroundColor="category_9"
|
53
|
+
padding="xl"
|
54
|
+
{...props}
|
55
|
+
/>
|
56
|
+
<Background
|
57
|
+
backgroundColor="category_10"
|
58
|
+
padding="xl"
|
59
|
+
{...props}
|
60
|
+
/>
|
61
|
+
<Background
|
62
|
+
backgroundColor="category_11"
|
63
|
+
padding="xl"
|
64
|
+
{...props}
|
65
|
+
/>
|
66
|
+
<Background
|
67
|
+
backgroundColor="category_12"
|
68
|
+
padding="xl"
|
69
|
+
{...props}
|
70
|
+
/>
|
71
|
+
<Background
|
72
|
+
backgroundColor="category_13"
|
73
|
+
padding="xl"
|
74
|
+
{...props}
|
75
|
+
/>
|
76
|
+
<Background
|
77
|
+
backgroundColor="category_14"
|
78
|
+
padding="xl"
|
79
|
+
{...props}
|
80
|
+
/>
|
81
|
+
<Background
|
82
|
+
backgroundColor="category_15"
|
83
|
+
padding="xl"
|
84
|
+
{...props}
|
85
|
+
/>
|
86
|
+
<Background
|
87
|
+
backgroundColor="category_16"
|
88
|
+
padding="xl"
|
89
|
+
{...props}
|
90
|
+
/>
|
91
|
+
<Background
|
92
|
+
backgroundColor="category_17"
|
93
|
+
padding="xl"
|
94
|
+
{...props}
|
95
|
+
/>
|
96
|
+
<Background
|
97
|
+
backgroundColor="category_18"
|
98
|
+
padding="xl"
|
99
|
+
{...props}
|
100
|
+
/>
|
101
|
+
<Background
|
102
|
+
backgroundColor="category_19"
|
103
|
+
padding="xl"
|
104
|
+
{...props}
|
105
|
+
/>
|
106
|
+
<Background
|
107
|
+
backgroundColor="category_20"
|
108
|
+
padding="xl"
|
109
|
+
{...props}
|
110
|
+
/>
|
111
|
+
<Background
|
112
|
+
backgroundColor="category_21"
|
113
|
+
padding="xl"
|
114
|
+
{...props}
|
115
|
+
/>
|
116
|
+
</Flex>
|
117
|
+
)
|
118
|
+
|
119
|
+
export default BackgroundCategory
|
@@ -0,0 +1 @@
|
|
1
|
+
Category colors can be passed into the background kit. Values `category_1` to `category_21` are accepted. List of all category and status colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a>.
|
@@ -0,0 +1,13 @@
|
|
1
|
+
<div class="pb--doc-demo-row">
|
2
|
+
<%= pb_rails("background", props: { background_color: "success", padding: "xl" }) do %> <% end %>
|
3
|
+
<br>
|
4
|
+
<%= pb_rails("background", props: { background_color: "warning", padding: "xl" }) do %> <% end %>
|
5
|
+
<br>
|
6
|
+
<%= pb_rails("background", props: { background_color: "error", padding: "xl" }) do %> <% end %>
|
7
|
+
<br>
|
8
|
+
<%= pb_rails("background", props: { background_color: "info", padding: "xl" }) do %> <% end %>
|
9
|
+
<br>
|
10
|
+
<%= pb_rails("background", props: { background_color: "neutral", padding: "xl" }) do %> <% end %>
|
11
|
+
<br>
|
12
|
+
<%= pb_rails("background", props: { background_color: "primary", padding: "xl" }) do %> <% end %>
|
13
|
+
</div>
|
@@ -0,0 +1,44 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Background } from '../..'
|
3
|
+
|
4
|
+
const BackgroundStatus = (props) => (
|
5
|
+
<div className="pb--doc-demo-row">
|
6
|
+
<Background
|
7
|
+
backgroundColor="success"
|
8
|
+
padding="xl"
|
9
|
+
{...props}
|
10
|
+
/>
|
11
|
+
<br />
|
12
|
+
<Background
|
13
|
+
backgroundColor="warning"
|
14
|
+
padding="xl"
|
15
|
+
{...props}
|
16
|
+
/>
|
17
|
+
<br />
|
18
|
+
<Background
|
19
|
+
backgroundColor="error"
|
20
|
+
padding="xl"
|
21
|
+
{...props}
|
22
|
+
/>
|
23
|
+
<br />
|
24
|
+
<Background
|
25
|
+
backgroundColor="info"
|
26
|
+
padding="xl"
|
27
|
+
{...props}
|
28
|
+
/>
|
29
|
+
<br />
|
30
|
+
<Background
|
31
|
+
backgroundColor="neutral"
|
32
|
+
padding="xl"
|
33
|
+
{...props}
|
34
|
+
/>
|
35
|
+
<br />
|
36
|
+
<Background
|
37
|
+
backgroundColor="primary"
|
38
|
+
padding="xl"
|
39
|
+
{...props}
|
40
|
+
/>
|
41
|
+
</div>
|
42
|
+
)
|
43
|
+
|
44
|
+
export default BackgroundStatus
|
@@ -0,0 +1 @@
|
|
1
|
+
Status colors can be passed into the background kit. `success`, `warning`, `error`, `info`, `neutral`, and `primary`
|
@@ -1 +1 @@
|
|
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, and
|
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.
|
@@ -5,9 +5,13 @@ examples:
|
|
5
5
|
- background_white: White
|
6
6
|
- background_gradient: Gradient
|
7
7
|
- background_image: Image
|
8
|
+
- background_status: Status
|
9
|
+
- background_category: Category
|
8
10
|
|
9
11
|
react:
|
10
12
|
- background_light: Light
|
11
13
|
- background_white: White
|
12
14
|
- background_gradient: Gradient
|
13
15
|
- background_image: Image
|
16
|
+
- background_status: Status
|
17
|
+
- background_category: Category
|
@@ -2,4 +2,5 @@ export { default as BackgroundLight } from './_background_light.jsx'
|
|
2
2
|
export { default as BackgroundWhite } from './_background_white.jsx'
|
3
3
|
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
|
+
export { default as BackgroundCategory } from './_background_category.jsx'
|
@@ -8,7 +8,7 @@ import { globalProps } from '../utilities/globalProps.js'
|
|
8
8
|
|
9
9
|
type CardPropTypes = {
|
10
10
|
aria?: object,
|
11
|
-
background?: "white" | "dark" | "light" | "windows" | "siding" | "doors" | "solar" | "roofing" | "gutters" | "insulation",
|
11
|
+
background?: "white" | "dark" | "light" | "windows" | "siding" | "doors" | "solar" | "roofing" | "gutters" | "insulation" | "none",
|
12
12
|
borderNone?: boolean,
|
13
13
|
borderRadius?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | "rounded",
|
14
14
|
children: array<React.ReactNode> | React.ReactNode,
|
@@ -67,7 +67,7 @@ const Body = (props: CardBodyProps) => {
|
|
67
67
|
const Card = (props: CardPropTypes) => {
|
68
68
|
const {
|
69
69
|
aria = {},
|
70
|
-
background = '
|
70
|
+
background = 'none',
|
71
71
|
borderNone = false,
|
72
72
|
borderRadius = 'md',
|
73
73
|
children,
|
@@ -80,10 +80,9 @@ const Card = (props: CardPropTypes) => {
|
|
80
80
|
padding = 'md',
|
81
81
|
} = props
|
82
82
|
const borderCSS = borderNone == true ? 'border_none' : ''
|
83
|
-
const
|
84
|
-
|
85
|
-
|
86
|
-
[`background_${background}`]: background,
|
83
|
+
const selectedCSS = selected == true ? 'selected' : 'deselected'
|
84
|
+
const backgroundCSS = background == 'none' ? '' : `background_${background}`
|
85
|
+
const cardCss = buildCss('pb_card_kit', selectedCSS, `shadow_${shadow}`, borderCSS, `border_radius_${borderRadius}`, backgroundCSS, {
|
87
86
|
[`highlight_${highlight.position}`]: highlight.position,
|
88
87
|
[`highlight_${highlight.color}`]: highlight.color,
|
89
88
|
})
|
@@ -23,6 +23,7 @@ $additional_colors: (
|
|
23
23
|
"dark": $bg_dark,
|
24
24
|
"light": $bg_light,
|
25
25
|
"white": $white,
|
26
|
+
"none": none,
|
26
27
|
);
|
27
28
|
$background_colors: map-merge($product_colors, $additional_colors);
|
28
29
|
|
@@ -49,10 +50,11 @@ $background_colors: map-merge($product_colors, $additional_colors);
|
|
49
50
|
transition-property: all;
|
50
51
|
transition-duration: $transition_short;
|
51
52
|
transition-timing-function: $easeIn;
|
53
|
+
background-color: $white;
|
52
54
|
|
53
55
|
@each $name, $color in $background_colors {
|
54
56
|
&[class*=background_#{$name}] {
|
55
|
-
background: $color;
|
57
|
+
background-color: $color;
|
56
58
|
}
|
57
59
|
};
|
58
60
|
|
@@ -72,6 +74,8 @@ $background_colors: map-merge($product_colors, $additional_colors);
|
|
72
74
|
@mixin pb_card_dark {
|
73
75
|
color: $white;
|
74
76
|
@include pb_card($card_dark, $border_dark);
|
77
|
+
background-color: $card_dark;
|
78
|
+
border-color: $border_dark;
|
75
79
|
}
|
76
80
|
|
77
81
|
@mixin pb_card_highlight($width, $height, $background){
|
@@ -18,18 +18,18 @@ module Playbook
|
|
18
18
|
values: %w[xs sm md lg xl none rounded],
|
19
19
|
default: "md"
|
20
20
|
prop :background, type: Playbook::Props::Enum,
|
21
|
-
values: %w[white light dark windows siding doors solar roofing gutters insulation],
|
22
|
-
default: "
|
21
|
+
values: %w[white light dark windows siding doors solar roofing gutters insulation none],
|
22
|
+
default: "none"
|
23
23
|
|
24
24
|
def classname
|
25
25
|
generate_classname("pb_card_kit",
|
26
26
|
selected_class,
|
27
27
|
shadow_class,
|
28
|
-
highlight_position_class,
|
29
|
-
highlight_color_class,
|
30
|
-
background_class,
|
31
28
|
border_class,
|
32
|
-
border_radius_class
|
29
|
+
border_radius_class,
|
30
|
+
background_class,
|
31
|
+
highlight_position_class,
|
32
|
+
highlight_color_class)
|
33
33
|
end
|
34
34
|
|
35
35
|
def body_padding
|
@@ -59,7 +59,7 @@ module Playbook
|
|
59
59
|
end
|
60
60
|
|
61
61
|
def background_class
|
62
|
-
background
|
62
|
+
background == "none" ? nil : "background_#{background}"
|
63
63
|
end
|
64
64
|
|
65
65
|
def border_class
|
@@ -19,7 +19,7 @@
|
|
19
19
|
|
20
20
|
<br>
|
21
21
|
|
22
|
-
<%= pb_rails("card", props: { background: "light"
|
22
|
+
<%= pb_rails("card", props: { background: "light"}) do %>
|
23
23
|
<%= pb_rails("body", props: {
|
24
24
|
text: "Light"
|
25
25
|
}) %>
|
@@ -54,4 +54,4 @@
|
|
54
54
|
}) %>
|
55
55
|
<% end %>
|
56
56
|
|
57
|
-
<br>
|
57
|
+
<br>
|
@@ -18,6 +18,7 @@ type CircleChartProps = {
|
|
18
18
|
dataLabelHtml: string,
|
19
19
|
dataLabels: boolean,
|
20
20
|
headerFormat: string,
|
21
|
+
height?: string,
|
21
22
|
id?: string,
|
22
23
|
innerSize: "sm" | "md" | "lg" | "none",
|
23
24
|
legend: boolean,
|
@@ -43,6 +44,7 @@ const CircleChart = (props: CircleChartProps) => {
|
|
43
44
|
dataLabelHtml = '<div>{point.name}</div>',
|
44
45
|
dataLabels = false,
|
45
46
|
headerFormat = null,
|
47
|
+
height,
|
46
48
|
id,
|
47
49
|
innerSize = 'md',
|
48
50
|
legend = false,
|
@@ -85,6 +87,7 @@ const CircleChart = (props: CircleChartProps) => {
|
|
85
87
|
dataLabelHtml,
|
86
88
|
dataLabels,
|
87
89
|
headerFormat,
|
90
|
+
height: height,
|
88
91
|
tooltipHtml,
|
89
92
|
useHTML: useHtml,
|
90
93
|
minPointSize,
|
@@ -25,6 +25,7 @@ module Playbook
|
|
25
25
|
prop :use_html, type: Playbook::Props::Boolean, default: false
|
26
26
|
prop :legend, type: Playbook::Props::Boolean, default: false
|
27
27
|
prop :title, default: ""
|
28
|
+
prop :height
|
28
29
|
prop :rounded, type: Playbook::Props::Boolean, default: false
|
29
30
|
prop :colors, type: Playbook::Props::Array,
|
30
31
|
default: []
|
@@ -67,6 +68,7 @@ module Playbook
|
|
67
68
|
borderWidth: rounded_border_width,
|
68
69
|
chartData: chart_data_formatted,
|
69
70
|
title: title,
|
71
|
+
height: height,
|
70
72
|
type: chart_type,
|
71
73
|
showInLegend: legend,
|
72
74
|
dataLabelHtml: data_label_html,
|
@@ -1,7 +1 @@
|
|
1
1
|
This kit is used to build most of the complex interfaces. The Flex Kit is used the same way flex box is used.
|
2
|
-
|
3
|
-
##### !!!Attention these props will be deprecated in the future please use new props in their place
|
4
|
-
|
5
|
-
* `horizontal` - Will be replaced with `justify`
|
6
|
-
* `vertical` - Will be replaced with `align`
|
7
|
-
* `spacing` - Will be removed. Use `justify`
|
@@ -1,7 +1,3 @@
|
|
1
1
|
##### Prop
|
2
2
|
|
3
|
-
|
4
|
-
|
5
|
-
* **Deprecated Prop**: `vertical` | **Type**: String | **Values**: top | center | bottom | stretch | baseline | none
|
6
|
-
|
7
|
-
* **New Prop**: `align` | **Type**: String | **Values**: start | center | end | stretch | baseline | none
|
3
|
+
`align` | **Type**: String | **Values**: start | center | end | stretch | baseline | none
|
@@ -1,7 +1,3 @@
|
|
1
1
|
##### Prop
|
2
2
|
|
3
|
-
|
4
|
-
|
5
|
-
* **Deprecated Prop**: `horizontal` | **Type**: String | **Values**: left | center | right | stretch | none
|
6
|
-
|
7
|
-
* **New Prop**: `justify` | **Type**: String | **Values**: start | center | end | | none
|
3
|
+
`justify` | **Type**: String | **Values**: start | center | end | | none
|
@@ -1,7 +1,3 @@
|
|
1
1
|
##### Prop
|
2
2
|
|
3
|
-
|
4
|
-
|
5
|
-
* **Deprecated Prop**: `spacing` | **Type**: String | **Values**: none | around | evenly | between
|
6
|
-
|
7
|
-
* **New Prop**: `justify` | **Type**: String | **Values**: none | around | evenly | between
|
3
|
+
`justify` | **Type**: String | **Values**: none | around | evenly | between
|
@@ -15,6 +15,7 @@ type FormPillProps = {
|
|
15
15
|
avatar?: boolean,
|
16
16
|
avatarUrl?: string,
|
17
17
|
size?: string,
|
18
|
+
textTransform?: "none" | "lowercase",
|
18
19
|
closeProps?: {
|
19
20
|
onClick?: EventHandler,
|
20
21
|
onMouseDown?: EventHandler,
|
@@ -30,12 +31,14 @@ const FormPill = (props: FormPillProps) => {
|
|
30
31
|
avatarUrl,
|
31
32
|
closeProps = {},
|
32
33
|
size = '',
|
34
|
+
textTransform = 'none',
|
33
35
|
} = props
|
34
36
|
const css = classnames(
|
35
37
|
`pb_form_pill_kit_${'primary'}`,
|
36
38
|
globalProps(props),
|
37
39
|
className,
|
38
40
|
size === 'small' ? 'small' : null,
|
41
|
+
textTransform,
|
39
42
|
)
|
40
43
|
return (
|
41
44
|
<div className={css}>
|
@@ -0,0 +1 @@
|
|
1
|
+
<%= pb_rails("form_pill", props: { text_transform: "lowercase" , text: "THIS IS A TAG" }) %>
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import FormPill from '../_form_pill.jsx'
|
3
|
+
|
4
|
+
const FormPillExample = (props) => {
|
5
|
+
return (
|
6
|
+
<div>
|
7
|
+
<FormPill
|
8
|
+
onClick={() => alert('Click!')}
|
9
|
+
text="THIS IS A TAG"
|
10
|
+
textTransform="lowercase"
|
11
|
+
{...props}
|
12
|
+
/>
|
13
|
+
</div>
|
14
|
+
)
|
15
|
+
}
|
16
|
+
|
17
|
+
export default FormPillExample
|
@@ -0,0 +1 @@
|
|
1
|
+
By default `textTransform = "none"`. If there is a need to enforce `lowercase`, please pass the `textTransform = "lowercase` prop.
|
@@ -4,9 +4,11 @@ examples:
|
|
4
4
|
- form_pill_user: Form Pill User
|
5
5
|
- form_pill_size: Form Pill Size
|
6
6
|
- form_pill_tag: Form Pill Tag
|
7
|
+
- form_pill_example: Example
|
7
8
|
|
8
9
|
|
9
10
|
react:
|
10
11
|
- form_pill_user: Form Pill User
|
11
12
|
- form_pill_size: Form Pill Size
|
12
13
|
- form_pill_tag: Form Pill Tag
|
14
|
+
- form_pill_example: Example
|
@@ -1,19 +1,12 @@
|
|
1
|
-
<%= content_tag(:div,
|
2
|
-
|
3
|
-
|
4
|
-
class: object.classname + object.size_class) do %>
|
5
|
-
<% if object.name.present? %>
|
6
|
-
<%= pb_rails("avatar", props: {
|
7
|
-
name: object.name,
|
8
|
-
image_url: object.avatar_url,
|
9
|
-
size: "xs"
|
10
|
-
}) %>
|
1
|
+
<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class) do %>
|
2
|
+
<% if object.name.present? %>
|
3
|
+
<%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xs" }) %>
|
11
4
|
<%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
|
12
|
-
|
13
|
-
|
14
|
-
|
5
|
+
<% elsif object.text.present? %>
|
6
|
+
<%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
|
7
|
+
<% end %>
|
15
8
|
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
<% end %>
|
9
|
+
<%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
|
10
|
+
<%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %>
|
11
|
+
<% end %>
|
12
|
+
<% end %>
|
@@ -8,12 +8,16 @@ module Playbook
|
|
8
8
|
prop :text
|
9
9
|
prop :size
|
10
10
|
|
11
|
+
prop :text_transform, type: Playbook::Props::Enum,
|
12
|
+
values: %w[none lowercase],
|
13
|
+
default: "none"
|
14
|
+
|
11
15
|
def classname
|
12
|
-
generate_classname("pb_form_pill_kit", "primary", name, text)
|
16
|
+
generate_classname("pb_form_pill_kit", "primary", name, text, text_transform)
|
13
17
|
end
|
14
18
|
|
15
19
|
def display_text
|
16
|
-
|
20
|
+
object.text
|
17
21
|
end
|
18
22
|
|
19
23
|
def size_class
|
@@ -14,6 +14,7 @@ type PillProps = {
|
|
14
14
|
id?: string,
|
15
15
|
text: string,
|
16
16
|
variant?: "success" | "warning" | "error" | "info" | "neutral",
|
17
|
+
textTransform?: "none" | "lowercase"
|
17
18
|
}
|
18
19
|
|
19
20
|
const Pill = (props: PillProps) => {
|
@@ -24,11 +25,12 @@ const Pill = (props: PillProps) => {
|
|
24
25
|
id,
|
25
26
|
text,
|
26
27
|
variant = 'neutral',
|
28
|
+
textTransform = 'lowercase',
|
27
29
|
} = props
|
28
30
|
|
29
31
|
const ariaProps = buildAriaProps(aria)
|
30
32
|
const dataProps = buildDataProps(data)
|
31
|
-
const classes = classnames(buildCss('pb_pill_kit', variant), globalProps(props), className)
|
33
|
+
const classes = classnames(buildCss('pb_pill_kit', variant, textTransform), globalProps(props), className)
|
32
34
|
|
33
35
|
return (
|
34
36
|
<div
|
@@ -14,6 +14,14 @@ $pb_pill_height: 22px;
|
|
14
14
|
border-radius: $pb_pill_height/2;
|
15
15
|
white-space: nowrap;
|
16
16
|
|
17
|
+
&[class*=lowercase] {
|
18
|
+
text-transform: lowercase;
|
19
|
+
}
|
20
|
+
|
21
|
+
&[class*=none] {
|
22
|
+
text-transform: none;
|
23
|
+
}
|
24
|
+
|
17
25
|
@each $color_name, $color_value in $status_color_text {
|
18
26
|
&[class*=_#{$color_name}] {
|
19
27
|
background: rgba($color_value, $opacity-1);
|
@@ -1,45 +1 @@
|
|
1
|
-
<%= pb_rails("pill", props: {
|
2
|
-
text: "Default"
|
3
|
-
}) %>
|
4
|
-
|
5
|
-
<br><br>
|
6
|
-
|
7
|
-
<%= pb_rails("pill", props: {
|
8
|
-
text: "success",
|
9
|
-
variant: "success"
|
10
|
-
}) %>
|
11
|
-
|
12
|
-
<br><br>
|
13
|
-
|
14
|
-
<%= pb_rails("pill", props: {
|
15
|
-
text: "error",
|
16
|
-
variant: "error"
|
17
|
-
}) %>
|
18
|
-
|
19
|
-
<br><br>
|
20
|
-
|
21
|
-
<%= pb_rails("pill", props: {
|
22
|
-
text: "warning",
|
23
|
-
variant: "warning"
|
24
|
-
}) %>
|
25
|
-
|
26
|
-
<br><br>
|
27
|
-
|
28
|
-
<%= pb_rails("pill", props: {
|
29
|
-
text: "info",
|
30
|
-
variant: "info"
|
31
|
-
}) %>
|
32
|
-
|
33
|
-
<br><br>
|
34
|
-
|
35
|
-
<%= pb_rails("pill", props: {
|
36
|
-
text: "neutral",
|
37
|
-
variant: "neutral"
|
38
|
-
}) %>
|
39
|
-
|
40
|
-
<br><br>
|
41
|
-
|
42
|
-
<%= pb_rails("pill", props: {
|
43
|
-
text: "primary",
|
44
|
-
variant: "primary"
|
45
|
-
}) %>
|
1
|
+
<%= pb_rails("pill", props: { text: "Default" }) %>
|
@@ -1,57 +1,12 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import Pill from '../_pill.jsx'
|
3
3
|
|
4
|
-
const PillDefault = () => {
|
4
|
+
const PillDefault = (props) => {
|
5
5
|
return (
|
6
6
|
<div>
|
7
|
-
<Pill text="default" />
|
8
|
-
|
9
|
-
<br />
|
10
|
-
<br />
|
11
|
-
|
12
|
-
<Pill
|
13
|
-
text="success"
|
14
|
-
variant="success"
|
15
|
-
/>
|
16
|
-
|
17
|
-
<br />
|
18
|
-
<br />
|
19
|
-
|
20
|
-
<Pill
|
21
|
-
text="error"
|
22
|
-
variant="error"
|
23
|
-
/>
|
24
|
-
|
25
|
-
<br />
|
26
|
-
<br />
|
27
|
-
|
28
|
-
<Pill
|
29
|
-
text="warning"
|
30
|
-
variant="warning"
|
31
|
-
/>
|
32
|
-
|
33
|
-
<br />
|
34
|
-
<br />
|
35
|
-
|
36
|
-
<Pill
|
37
|
-
text="info"
|
38
|
-
variant="info"
|
39
|
-
/>
|
40
|
-
|
41
|
-
<br />
|
42
|
-
<br />
|
43
|
-
|
44
|
-
<Pill
|
45
|
-
text="neutral"
|
46
|
-
variant="neutral"
|
47
|
-
/>
|
48
|
-
|
49
|
-
<br />
|
50
|
-
<br />
|
51
|
-
|
52
7
|
<Pill
|
53
|
-
text="
|
54
|
-
|
8
|
+
text="default"
|
9
|
+
{...props}
|
55
10
|
/>
|
56
11
|
</div>
|
57
12
|
)
|
@@ -0,0 +1 @@
|
|
1
|
+
<%= pb_rails("pill", props: { text_transform: "none" , text: "Success" , variant: "success" }) %>
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import Pill from '../_pill'
|
3
|
+
|
4
|
+
const PillExample = (props) => {
|
5
|
+
return (
|
6
|
+
<div>
|
7
|
+
<Pill
|
8
|
+
text="Success"
|
9
|
+
textTransform="none"
|
10
|
+
variant="success"
|
11
|
+
{...props}
|
12
|
+
/>
|
13
|
+
</div>
|
14
|
+
)
|
15
|
+
}
|
16
|
+
|
17
|
+
export default PillExample
|
@@ -0,0 +1 @@
|
|
1
|
+
Pass `textTransform = "none"` prop and the text will remain without modification.
|
@@ -0,0 +1,6 @@
|
|
1
|
+
<%= pb_rails("pill", props: { text: "success" , variant: "success" }) %>
|
2
|
+
<%= pb_rails("pill", props: { text: "error" , variant: "error" }) %>
|
3
|
+
<%= pb_rails("pill", props: { text: "warning" , variant: "warning" }) %>
|
4
|
+
<%= pb_rails("pill", props: { text: "info" , variant: "info" }) %>
|
5
|
+
<%= pb_rails("pill", props: { text: "neutral" , variant: "neutral" }) %>
|
6
|
+
<%= pb_rails("pill", props: { text: "primary" , variant: "primary" }) %>
|
@@ -0,0 +1,45 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import Pill from '../_pill.jsx'
|
3
|
+
|
4
|
+
const PillVariants = (props) => {
|
5
|
+
return (
|
6
|
+
<div>
|
7
|
+
<Pill
|
8
|
+
text="success"
|
9
|
+
variant="success"
|
10
|
+
{...props}
|
11
|
+
/>
|
12
|
+
|
13
|
+
<Pill
|
14
|
+
text="error"
|
15
|
+
variant="error"
|
16
|
+
{...props}
|
17
|
+
/>
|
18
|
+
|
19
|
+
<Pill
|
20
|
+
text="warning"
|
21
|
+
variant="warning"
|
22
|
+
{...props}
|
23
|
+
/>
|
24
|
+
|
25
|
+
<Pill
|
26
|
+
text="info"
|
27
|
+
variant="info"
|
28
|
+
{...props}
|
29
|
+
/>
|
30
|
+
|
31
|
+
<Pill
|
32
|
+
text="neutral"
|
33
|
+
variant="neutral"
|
34
|
+
/>
|
35
|
+
|
36
|
+
<Pill
|
37
|
+
text="primary"
|
38
|
+
variant="primary"
|
39
|
+
{...props}
|
40
|
+
/>
|
41
|
+
</div>
|
42
|
+
)
|
43
|
+
}
|
44
|
+
|
45
|
+
export default PillVariants
|
@@ -7,13 +7,16 @@ module Playbook
|
|
7
7
|
prop :variant, type: Playbook::Props::Enum,
|
8
8
|
values: %w[success warning error info neutral primary],
|
9
9
|
default: "neutral"
|
10
|
+
prop :text_transform, type: Playbook::Props::Enum,
|
11
|
+
values: %w[none lowercase],
|
12
|
+
default: "lowercase"
|
10
13
|
|
11
14
|
def classname
|
12
|
-
generate_classname("pb_pill_kit", variant)
|
15
|
+
generate_classname("pb_pill_kit", variant, text_transform)
|
13
16
|
end
|
14
17
|
|
15
18
|
def display_text
|
16
|
-
text
|
19
|
+
object.text
|
17
20
|
end
|
18
21
|
end
|
19
22
|
end
|
@@ -1,4 +1,5 @@
|
|
1
1
|
@import "../tokens/positioning";
|
2
|
+
@import "../tokens/colors";
|
2
3
|
@import "../pb_card/card_mixin";
|
3
4
|
@import "../tokens/shadows";
|
4
5
|
|
@@ -43,6 +44,7 @@
|
|
43
44
|
}
|
44
45
|
.pb_popover_body {
|
45
46
|
@include pb_card;
|
47
|
+
background-color: $white;
|
46
48
|
border: 0;
|
47
49
|
box-shadow: $shadow_deeper;
|
48
50
|
}
|
@@ -155,6 +155,7 @@ class pbChart {
|
|
155
155
|
text: this.defaults.title,
|
156
156
|
},
|
157
157
|
chart: {
|
158
|
+
height: this.defaults.height,
|
158
159
|
type: this.defaults.type,
|
159
160
|
events: {
|
160
161
|
render: (event) => alignBlockElement(event),
|
@@ -172,7 +173,6 @@ class pbChart {
|
|
172
173
|
format: this.defaults.dataLabelHtml,
|
173
174
|
},
|
174
175
|
showInLegend: this.defaults.showInLegend,
|
175
|
-
|
176
176
|
},
|
177
177
|
},
|
178
178
|
|
data/lib/playbook/spacing.rb
CHANGED
data/lib/playbook/version.rb
CHANGED
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.
|
4
|
+
version: 10.16.0
|
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: 2021-11-
|
12
|
+
date: 2021-11-30 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -95,20 +95,6 @@ dependencies:
|
|
95
95
|
- - "~>"
|
96
96
|
- !ruby/object:Gem::Version
|
97
97
|
version: '3.15'
|
98
|
-
- !ruby/object:Gem::Dependency
|
99
|
-
name: rubocop-performance
|
100
|
-
requirement: !ruby/object:Gem::Requirement
|
101
|
-
requirements:
|
102
|
-
- - '='
|
103
|
-
- !ruby/object:Gem::Version
|
104
|
-
version: 1.11.5
|
105
|
-
type: :runtime
|
106
|
-
prerelease: false
|
107
|
-
version_requirements: !ruby/object:Gem::Requirement
|
108
|
-
requirements:
|
109
|
-
- - '='
|
110
|
-
- !ruby/object:Gem::Version
|
111
|
-
version: 1.11.5
|
112
98
|
- !ruby/object:Gem::Dependency
|
113
99
|
name: view_component
|
114
100
|
requirement: !ruby/object:Gem::Requirement
|
@@ -197,36 +183,50 @@ dependencies:
|
|
197
183
|
name: rspec-rails
|
198
184
|
requirement: !ruby/object:Gem::Requirement
|
199
185
|
requirements:
|
200
|
-
- - "~>"
|
201
|
-
- !ruby/object:Gem::Version
|
202
|
-
version: '3.8'
|
203
186
|
- - ">="
|
204
187
|
- !ruby/object:Gem::Version
|
205
188
|
version: 3.8.0
|
189
|
+
- - "~>"
|
190
|
+
- !ruby/object:Gem::Version
|
191
|
+
version: '3.8'
|
206
192
|
type: :development
|
207
193
|
prerelease: false
|
208
194
|
version_requirements: !ruby/object:Gem::Requirement
|
209
195
|
requirements:
|
210
|
-
- - "~>"
|
211
|
-
- !ruby/object:Gem::Version
|
212
|
-
version: '3.8'
|
213
196
|
- - ">="
|
214
197
|
- !ruby/object:Gem::Version
|
215
198
|
version: 3.8.0
|
199
|
+
- - "~>"
|
200
|
+
- !ruby/object:Gem::Version
|
201
|
+
version: '3.8'
|
216
202
|
- !ruby/object:Gem::Dependency
|
217
203
|
name: rubocop
|
218
204
|
requirement: !ruby/object:Gem::Requirement
|
219
205
|
requirements:
|
220
206
|
- - '='
|
221
207
|
- !ruby/object:Gem::Version
|
222
|
-
version:
|
208
|
+
version: 0.93.1
|
223
209
|
type: :development
|
224
210
|
prerelease: false
|
225
211
|
version_requirements: !ruby/object:Gem::Requirement
|
226
212
|
requirements:
|
227
213
|
- - '='
|
228
214
|
- !ruby/object:Gem::Version
|
229
|
-
version:
|
215
|
+
version: 0.93.1
|
216
|
+
- !ruby/object:Gem::Dependency
|
217
|
+
name: rubocop-performance
|
218
|
+
requirement: !ruby/object:Gem::Requirement
|
219
|
+
requirements:
|
220
|
+
- - "~>"
|
221
|
+
- !ruby/object:Gem::Version
|
222
|
+
version: 1.9.2
|
223
|
+
type: :development
|
224
|
+
prerelease: false
|
225
|
+
version_requirements: !ruby/object:Gem::Requirement
|
226
|
+
requirements:
|
227
|
+
- - "~>"
|
228
|
+
- !ruby/object:Gem::Version
|
229
|
+
version: 1.9.2
|
230
230
|
- !ruby/object:Gem::Dependency
|
231
231
|
name: spring
|
232
232
|
requirement: !ruby/object:Gem::Requirement
|
@@ -322,12 +322,18 @@ files:
|
|
322
322
|
- app/pb_kits/playbook/pb_background/_background.scss
|
323
323
|
- app/pb_kits/playbook/pb_background/background.html.erb
|
324
324
|
- app/pb_kits/playbook/pb_background/background.rb
|
325
|
+
- app/pb_kits/playbook/pb_background/docs/_background_category.html.erb
|
326
|
+
- app/pb_kits/playbook/pb_background/docs/_background_category.jsx
|
327
|
+
- app/pb_kits/playbook/pb_background/docs/_background_category.md
|
325
328
|
- app/pb_kits/playbook/pb_background/docs/_background_gradient.html.erb
|
326
329
|
- app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx
|
327
330
|
- app/pb_kits/playbook/pb_background/docs/_background_image.html.erb
|
328
331
|
- app/pb_kits/playbook/pb_background/docs/_background_image.jsx
|
329
332
|
- app/pb_kits/playbook/pb_background/docs/_background_light.html.erb
|
330
333
|
- app/pb_kits/playbook/pb_background/docs/_background_light.jsx
|
334
|
+
- app/pb_kits/playbook/pb_background/docs/_background_status.html.erb
|
335
|
+
- app/pb_kits/playbook/pb_background/docs/_background_status.jsx
|
336
|
+
- app/pb_kits/playbook/pb_background/docs/_background_status.md
|
331
337
|
- app/pb_kits/playbook/pb_background/docs/_background_white.html.erb
|
332
338
|
- app/pb_kits/playbook/pb_background/docs/_background_white.jsx
|
333
339
|
- app/pb_kits/playbook/pb_background/docs/_description.md
|
@@ -909,6 +915,9 @@ files:
|
|
909
915
|
- app/pb_kits/playbook/pb_form_group/form_group.rb
|
910
916
|
- app/pb_kits/playbook/pb_form_pill/_form_pill.jsx
|
911
917
|
- app/pb_kits/playbook/pb_form_pill/_form_pill.scss
|
918
|
+
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.html.erb
|
919
|
+
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.jsx
|
920
|
+
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.md
|
912
921
|
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.html.erb
|
913
922
|
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx
|
914
923
|
- app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb
|
@@ -1339,6 +1348,11 @@ files:
|
|
1339
1348
|
- app/pb_kits/playbook/pb_pill/docs/_description.md
|
1340
1349
|
- app/pb_kits/playbook/pb_pill/docs/_pill_default.html.erb
|
1341
1350
|
- app/pb_kits/playbook/pb_pill/docs/_pill_default.jsx
|
1351
|
+
- app/pb_kits/playbook/pb_pill/docs/_pill_example.html.erb
|
1352
|
+
- app/pb_kits/playbook/pb_pill/docs/_pill_example.jsx
|
1353
|
+
- app/pb_kits/playbook/pb_pill/docs/_pill_example.md
|
1354
|
+
- app/pb_kits/playbook/pb_pill/docs/_pill_variants.html.erb
|
1355
|
+
- app/pb_kits/playbook/pb_pill/docs/_pill_variants.jsx
|
1342
1356
|
- app/pb_kits/playbook/pb_pill/docs/example.yml
|
1343
1357
|
- app/pb_kits/playbook/pb_pill/docs/index.js
|
1344
1358
|
- app/pb_kits/playbook/pb_pill/pill.html.erb
|
@@ -2072,11 +2086,11 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
2072
2086
|
version: '0'
|
2073
2087
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
2074
2088
|
requirements:
|
2075
|
-
- - "
|
2089
|
+
- - ">="
|
2076
2090
|
- !ruby/object:Gem::Version
|
2077
|
-
version:
|
2091
|
+
version: '0'
|
2078
2092
|
requirements: []
|
2079
|
-
rubygems_version: 3.
|
2093
|
+
rubygems_version: 3.0.3
|
2080
2094
|
signing_key:
|
2081
2095
|
specification_version: 4
|
2082
2096
|
summary: Playbook Design System
|