playbook_ui 10.14.0 → 10.15.1.pre.alpha.rubocop.deps
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 +4 -3
- data/app/pb_kits/playbook/pb_background/_background.scss +4 -4
- 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_bar_graph/_bar_graph.scss +4 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.html.erb +20 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx +30 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.md +2 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_card/_card.jsx +5 -3
- data/app/pb_kits/playbook/pb_card/_card_mixin.scss +16 -1
- data/app/pb_kits/playbook/pb_card/card.rb +11 -3
- data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +57 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +100 -0
- data/app/pb_kits/playbook/pb_card/docs/_card_background.md +1 -0
- data/app/pb_kits/playbook/pb_card/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_card/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_dialog/_dialog.scss +1 -0
- data/app/pb_kits/playbook/pb_flex/_flex.jsx +1 -1
- data/app/pb_kits/playbook/pb_flex/_flex.scss +4 -2
- data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +4 -2
- data/app/pb_kits/playbook/pb_flex/_flex_item.scss +9 -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_item.html.erb +13 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item.md +5 -4
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx +27 -1
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.md +12 -0
- 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_flex/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_flex/flex_item.rb +13 -1
- 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_gauge/_gauge.scss +5 -1
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.scss +3 -0
- 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/tokens/_border_radius.scss +0 -1
- data/app/pb_kits/playbook/utilities/_max_width.scss +10 -0
- data/dist/reset.css +60 -1
- data/lib/playbook/spacing.rb +1 -1
- data/lib/playbook/version.rb +2 -2
- metadata +41 -6
@@ -0,0 +1,100 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import Title from '../../pb_title/_title'
|
3
|
+
import { Body } from '../../'
|
4
|
+
import Card from '../_card.jsx'
|
5
|
+
|
6
|
+
const CardBackground = (props) => {
|
7
|
+
return (
|
8
|
+
<div>
|
9
|
+
<Title
|
10
|
+
{...props}
|
11
|
+
size={4}
|
12
|
+
tag="h4"
|
13
|
+
text="Card Colors"
|
14
|
+
/>
|
15
|
+
|
16
|
+
<br />
|
17
|
+
|
18
|
+
<Card
|
19
|
+
background="dark"
|
20
|
+
dark
|
21
|
+
{...props}
|
22
|
+
>
|
23
|
+
<Body
|
24
|
+
color="lighter"
|
25
|
+
text="Dark"
|
26
|
+
{...props}
|
27
|
+
/>
|
28
|
+
</Card>
|
29
|
+
|
30
|
+
<br />
|
31
|
+
|
32
|
+
<Card>
|
33
|
+
<Body
|
34
|
+
text="White"
|
35
|
+
/>
|
36
|
+
</Card>
|
37
|
+
|
38
|
+
<br />
|
39
|
+
|
40
|
+
<Card
|
41
|
+
background="light"
|
42
|
+
{...props}
|
43
|
+
>
|
44
|
+
<Body
|
45
|
+
text="Light"
|
46
|
+
/>
|
47
|
+
</Card>
|
48
|
+
|
49
|
+
<br />
|
50
|
+
|
51
|
+
<Title
|
52
|
+
{...props}
|
53
|
+
size={4}
|
54
|
+
tag="h4"
|
55
|
+
text="Product Colors"
|
56
|
+
/>
|
57
|
+
|
58
|
+
<br />
|
59
|
+
|
60
|
+
<Card
|
61
|
+
background="windows"
|
62
|
+
{...props}
|
63
|
+
>
|
64
|
+
<Body
|
65
|
+
color="lighter"
|
66
|
+
text="Windows"
|
67
|
+
{...props}
|
68
|
+
/>
|
69
|
+
</Card>
|
70
|
+
|
71
|
+
<br />
|
72
|
+
|
73
|
+
<Card
|
74
|
+
background="siding"
|
75
|
+
{...props}
|
76
|
+
>
|
77
|
+
<Body
|
78
|
+
text="Siding"
|
79
|
+
{...props}
|
80
|
+
/>
|
81
|
+
</Card>
|
82
|
+
|
83
|
+
<br />
|
84
|
+
|
85
|
+
<Card
|
86
|
+
background="doors"
|
87
|
+
{...props}
|
88
|
+
>
|
89
|
+
<Body
|
90
|
+
text="Doors"
|
91
|
+
{...props}
|
92
|
+
/>
|
93
|
+
</Card>
|
94
|
+
|
95
|
+
<br />
|
96
|
+
</div>
|
97
|
+
)
|
98
|
+
}
|
99
|
+
|
100
|
+
export default CardBackground
|
@@ -0,0 +1 @@
|
|
1
|
+
Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors.
|
@@ -1,6 +1,7 @@
|
|
1
1
|
examples:
|
2
2
|
rails:
|
3
3
|
- card_light: Default
|
4
|
+
- card_background: Card Backgrounds
|
4
5
|
- card_highlight: Highlight Cards
|
5
6
|
- card_header: Header Cards
|
6
7
|
- card_selected: Selected
|
@@ -13,6 +14,7 @@ examples:
|
|
13
14
|
- card_border_radius: Border Radius
|
14
15
|
react:
|
15
16
|
- card_light: Default
|
17
|
+
- card_background: Card Backgrounds
|
16
18
|
- card_highlight: Highlight Cards
|
17
19
|
- card_header: Header Cards
|
18
20
|
- card_selected: Selected
|
@@ -1,4 +1,5 @@
|
|
1
1
|
export { default as CardLight } from './_card_light.jsx'
|
2
|
+
export { default as CardBackground } from './_card_background.jsx'
|
2
3
|
export { default as CardHighlight } from './_card_highlight.jsx'
|
3
4
|
export { default as CardHeader } from './_card_header.jsx'
|
4
5
|
export { default as CardSelected } from './_card_selected.jsx'
|
@@ -10,8 +10,8 @@ $gapSpaces:(
|
|
10
10
|
);
|
11
11
|
|
12
12
|
$gapTypes: (
|
13
|
-
gap: gap,
|
14
|
-
columnGap: column-gap,
|
13
|
+
gap: gap,
|
14
|
+
columnGap: column-gap,
|
15
15
|
rowGap: row-gap
|
16
16
|
);
|
17
17
|
|
@@ -69,6 +69,7 @@ $gapTypes: (
|
|
69
69
|
justify-content: center;
|
70
70
|
}
|
71
71
|
|
72
|
+
|
72
73
|
// Alignment: Align Items
|
73
74
|
&[class*=align_items_left],
|
74
75
|
&[class*=align_items_top],
|
@@ -76,6 +77,7 @@ $gapTypes: (
|
|
76
77
|
align-items: flex-start;
|
77
78
|
}
|
78
79
|
|
80
|
+
|
79
81
|
&[class*=align_items_right],
|
80
82
|
&[class*=align_items_bottom],
|
81
83
|
&[class*=align_items_end] {
|
@@ -11,20 +11,22 @@ type FlexItemPropTypes = {
|
|
11
11
|
flex: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none',
|
12
12
|
className: string,
|
13
13
|
overflow?: "auto" | "hidden" | "initial" | "inherit" | "scroll" | "visible",
|
14
|
+
order?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
|
14
15
|
}
|
15
16
|
|
16
17
|
const FlexItem = (props: FlexItemPropTypes) => {
|
17
|
-
const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none' } = props
|
18
|
+
const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none', order = 'none' } = props
|
18
19
|
const growClass = grow === true ? 'grow' : ''
|
19
20
|
const flexClass = flex !== 'none' ? `flex_${flex}` : ''
|
20
21
|
const overflowClass = overflow ? `overflow_${overflow}` : ''
|
21
22
|
const shrinkClass = shrink === true ? 'shrink' : ''
|
22
23
|
const fixedStyle =
|
23
24
|
fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
|
25
|
+
const orderClass = order !== 'none' ? `order_${order}` : null
|
24
26
|
|
25
27
|
return (
|
26
28
|
<div
|
27
|
-
className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass), overflowClass, globalProps(props), className)}
|
29
|
+
className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass), overflowClass, orderClass, globalProps(props), className)}
|
28
30
|
style={fixedStyle}
|
29
31
|
>
|
30
32
|
{children}
|
@@ -12,6 +12,15 @@
|
|
12
12
|
flex-shrink: 1;
|
13
13
|
}
|
14
14
|
|
15
|
+
//Order Items
|
16
|
+
@for $i from 0 through 12 {
|
17
|
+
&[class*=order_#{$i}]{
|
18
|
+
order: $i;
|
19
|
+
}
|
20
|
+
}
|
21
|
+
&[class*=order_first]{
|
22
|
+
order: -1;
|
23
|
+
}
|
15
24
|
|
16
25
|
$overflow_values: auto, hidden, inherit, initial, scroll, visible;
|
17
26
|
|
@@ -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
|
@@ -47,3 +47,16 @@
|
|
47
47
|
<%= pb_rails("flex/flex_item", props: {flex: "2"}) do %>4<% end %>
|
48
48
|
<% end %>
|
49
49
|
</div>
|
50
|
+
|
51
|
+
<br/><br/>
|
52
|
+
|
53
|
+
<%= pb_rails("title", props: {size: 4, text: "Order"}) %>
|
54
|
+
<br/>
|
55
|
+
<div class="flex-doc-example">
|
56
|
+
<%= pb_rails("flex", props: { gap: "sm"}) do %>
|
57
|
+
<%= pb_rails("flex/flex_item", props: {order: "4"}) do %>1<% end %>
|
58
|
+
<%= pb_rails("flex/flex_item", props: {order: "2"}) do %>2<% end %>
|
59
|
+
<%= pb_rails("flex/flex_item", props: {order: "1"}) do %>3<% end %>
|
60
|
+
<%= pb_rails("flex/flex_item", props: {order: "3"}) do %>4<% end %>
|
61
|
+
<% end %>
|
62
|
+
</div>
|
@@ -1,11 +1,12 @@
|
|
1
1
|
##### Props
|
2
2
|
|
3
3
|
* `flex` | **Type**: String | **Values**: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
4
|
-
* `fixed_size` | **Type**: String | **Values**: Any CSS px or % value
|
5
|
-
* `grow` | **Type**: Boolean
|
6
|
-
* `shrink` | **Type**: Boolean
|
4
|
+
* `fixed_size` | **Type**: String | **Values**: Any CSS px or % value
|
5
|
+
* `grow` | **Type**: Boolean
|
6
|
+
* `shrink` | **Type**: Boolean
|
7
|
+
* `order` | **Type**: String | **Values**: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | first
|
7
8
|
|
8
9
|
- Flex is a short hand to set the flex item to take up (x) amount of available space
|
9
|
-
- Setting Flex to 1 is equal to setting the grow & shrink prop to true
|
10
|
+
- Setting Flex to 1 is equal to setting the grow & shrink prop to true
|
10
11
|
- Setting Flex to 0 is equal to setting the grow & shrink prop to false
|
11
12
|
- If grow & shrink are true, grow will take precedence an the flex item will take up as much space as possible, then if other elements are added shrink would allow other items to squish inside the flex container
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from 'react'
|
2
|
-
import { Flex, FlexItem, Title } from '
|
2
|
+
import { Flex, FlexItem, Title } from '../..'
|
3
3
|
|
4
4
|
const FlexItemExample = (props) => {
|
5
5
|
return (
|
@@ -106,6 +106,32 @@ const FlexItemExample = (props) => {
|
|
106
106
|
</FlexItem>
|
107
107
|
</Flex>
|
108
108
|
</div>
|
109
|
+
|
110
|
+
<br />
|
111
|
+
<Title
|
112
|
+
size={4}
|
113
|
+
text="Order"
|
114
|
+
/>
|
115
|
+
<br />
|
116
|
+
<div className="flex-doc-example">
|
117
|
+
<Flex
|
118
|
+
gap="xs"
|
119
|
+
{...props}
|
120
|
+
>
|
121
|
+
<FlexItem order={4}>
|
122
|
+
{'1'}
|
123
|
+
</FlexItem>
|
124
|
+
<FlexItem order={2}>
|
125
|
+
{'2'}
|
126
|
+
</FlexItem>
|
127
|
+
<FlexItem order={1}>
|
128
|
+
{'3'}
|
129
|
+
</FlexItem>
|
130
|
+
<FlexItem order={3}>
|
131
|
+
{'4'}
|
132
|
+
</FlexItem>
|
133
|
+
</Flex>
|
134
|
+
</div>
|
109
135
|
</>
|
110
136
|
)
|
111
137
|
}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
##### Props
|
2
|
+
|
3
|
+
* `flex` | **Type**: String | **Values**: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
4
|
+
* `fixed_size` | **Type**: String | **Values**: Any CSS px or % value
|
5
|
+
* `grow` | **Type**: Boolean
|
6
|
+
* `shrink` | **Type**: Boolean
|
7
|
+
* `order` | **Type**: String | **Values**: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | first
|
8
|
+
|
9
|
+
- Flex is a short hand to set the flex item to take up (x) amount of available space
|
10
|
+
- Setting Flex to 1 is equal to setting the grow & shrink prop to true
|
11
|
+
- Setting Flex to 0 is equal to setting the grow & shrink prop to false
|
12
|
+
- If grow & shrink are true, grow will take precedence an the flex item will take up as much space as possible, then if other elements are added shrink would allow other items to squish inside the flex container
|
@@ -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,8 +15,12 @@ module Playbook
|
|
15
15
|
values: %w[auto hidden inherit initial scroll visible] + [nil],
|
16
16
|
default: nil
|
17
17
|
|
18
|
+
prop :order, type: Playbook::Props::Enum,
|
19
|
+
values: %w[1 2 3 4 5 6 7 8 9 10 11 12 first none],
|
20
|
+
default: "none"
|
21
|
+
|
18
22
|
def classname
|
19
|
-
generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, flex_class) + overflow_class
|
23
|
+
generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, flex_class) + overflow_class + order_class
|
20
24
|
end
|
21
25
|
|
22
26
|
def style_value
|
@@ -48,6 +52,14 @@ module Playbook
|
|
48
52
|
"flex_#{flex}"
|
49
53
|
end
|
50
54
|
end
|
55
|
+
|
56
|
+
def order_class
|
57
|
+
if order == "none"
|
58
|
+
""
|
59
|
+
else
|
60
|
+
"order_#{order}"
|
61
|
+
end
|
62
|
+
end
|
51
63
|
end
|
52
64
|
end
|
53
65
|
end
|
@@ -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" }) %>
|