playbook_ui 10.15.1 → 10.18.1
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/_playbook.scss +3 -0
- data/app/pb_kits/playbook/pb_background/background.test.js +22 -0
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx +3 -0
- data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +3 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.html.erb +26 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +37 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.md +2 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_button/_button.jsx +3 -3
- data/app/pb_kits/playbook/pb_button/_button.scss +17 -0
- data/app/pb_kits/playbook/pb_button/button.rb +6 -3
- data/app/pb_kits/playbook/pb_button/button.test.js +13 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_size.html.erb +3 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx +26 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_size.md +1 -0
- data/app/pb_kits/playbook/pb_button/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_button/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_caption/_caption.jsx +17 -4
- data/app/pb_kits/playbook/pb_caption/_caption.scss +25 -8
- data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +17 -0
- data/app/pb_kits/playbook/pb_caption/caption.rb +5 -1
- data/app/pb_kits/playbook/pb_caption/docs/_caption_example.html.erb +3 -0
- data/app/pb_kits/playbook/pb_caption/docs/_caption_example.jsx +27 -0
- data/app/pb_kits/playbook/pb_caption/docs/_caption_example.md +1 -0
- data/app/pb_kits/playbook/pb_caption/docs/example.yml +7 -4
- data/app/pb_kits/playbook/pb_caption/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_card/_card.jsx +1 -3
- data/app/pb_kits/playbook/pb_card/_card.scss +0 -6
- data/app/pb_kits/playbook/pb_card/_card_mixin.scss +1 -8
- data/app/pb_kits/playbook/pb_card/card.html.erb +2 -0
- data/app/pb_kits/playbook/pb_card/card.rb +0 -8
- data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +1 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_content.html.erb +3 -1
- data/app/pb_kits/playbook/pb_card/docs/_card_content.jsx +9 -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 +6 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.md +2 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +3 -1
- data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js +13 -4
- data/app/pb_kits/playbook/pb_docs/kit_example.rb +4 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +4 -0
- data/app/pb_kits/playbook/pb_flex/_flex.jsx +4 -0
- data/app/pb_kits/playbook/pb_flex/_flex.scss +17 -1
- data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +6 -2
- data/app/pb_kits/playbook/pb_flex/_flex_item.scss +22 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item.html.erb +12 -1
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item.md +2 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.html.erb +89 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.jsx +210 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.md +5 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx +27 -0
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.md +2 -0
- data/app/pb_kits/playbook/pb_flex/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_flex/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_flex/flex.rb +14 -1
- data/app/pb_kits/playbook/pb_flex/flex_item.rb +16 -1
- data/app/pb_kits/playbook/pb_gauge/_gauge.jsx +3 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb +12 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx +19 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.md +2 -0
- data/app/pb_kits/playbook/pb_gauge/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_gauge/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_gauge/gauge.rb +2 -0
- data/app/pb_kits/playbook/pb_icon/icon.rb +4 -0
- data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss +2 -2
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.html.erb +1 -1
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.jsx +1 -1
- data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.md +1 -0
- data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb +1 -1
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb +2 -0
- data/app/pb_kits/playbook/pb_image/_image.jsx +4 -1
- data/app/pb_kits/playbook/pb_image/_image.scss +24 -8
- data/app/pb_kits/playbook/pb_image/docs/_transition_image.html.erb +54 -0
- data/app/pb_kits/playbook/pb_image/docs/_transition_image.jsx +77 -0
- data/app/pb_kits/playbook/pb_image/docs/_transition_image.md +1 -0
- data/app/pb_kits/playbook/pb_image/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_image/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_image/image.html.erb +1 -1
- data/app/pb_kits/playbook/pb_image/image.rb +8 -1
- data/app/pb_kits/playbook/pb_image/image.test.js +9 -4
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx +4 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.html.erb +26 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.jsx +37 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.md +2 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +3 -0
- data/app/pb_kits/playbook/pb_list/list.rb +2 -0
- data/app/pb_kits/playbook/pb_select/select.rb +3 -0
- data/app/pb_kits/playbook/pb_source/source.rb +3 -0
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_light.html.erb +4 -1
- data/app/pb_kits/playbook/pb_title/title.html.erb +4 -2
- data/app/pb_kits/playbook/plugins/pb_chart.js +17 -25
- data/app/pb_kits/playbook/tokens/_colors.scss +3 -1
- data/app/pb_kits/playbook/utilities/_cursor.scss +3 -0
- data/app/pb_kits/playbook/utilities/_display.scss +23 -0
- data/app/pb_kits/playbook/utilities/_shadow.scss +11 -0
- data/app/pb_kits/playbook/utilities/globalProps.js +19 -1
- data/lib/playbook/classnames.rb +3 -0
- data/lib/playbook/cursor.rb +29 -0
- data/lib/playbook/display.rb +29 -0
- data/lib/playbook/engine.rb +0 -1
- data/lib/playbook/kit_base.rb +6 -0
- data/lib/playbook/markdown/helper.rb +2 -2
- data/lib/playbook/pb_doc_helper.rb +4 -0
- data/lib/playbook/props/base.rb +2 -2
- data/lib/playbook/shadow.rb +29 -0
- data/lib/playbook/version.rb +2 -2
- data/lib/playbook.rb +3 -0
- metadata +45 -15
@@ -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,
|
@@ -1,5 +1,7 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
|
+
# rubocop:disable Style/HashLikeCase
|
4
|
+
|
3
5
|
module Playbook
|
4
6
|
module PbCircleChart
|
5
7
|
class CircleChart < Playbook::KitBase
|
@@ -25,6 +27,7 @@ module Playbook
|
|
25
27
|
prop :use_html, type: Playbook::Props::Boolean, default: false
|
26
28
|
prop :legend, type: Playbook::Props::Boolean, default: false
|
27
29
|
prop :title, default: ""
|
30
|
+
prop :height
|
28
31
|
prop :rounded, type: Playbook::Props::Boolean, default: false
|
29
32
|
prop :colors, type: Playbook::Props::Array,
|
30
33
|
default: []
|
@@ -67,6 +70,7 @@ module Playbook
|
|
67
70
|
borderWidth: rounded_border_width,
|
68
71
|
chartData: chart_data_formatted,
|
69
72
|
title: title,
|
73
|
+
height: height,
|
70
74
|
type: chart_type,
|
71
75
|
showInLegend: legend,
|
72
76
|
dataLabelHtml: data_label_html,
|
@@ -88,3 +92,5 @@ module Playbook
|
|
88
92
|
end
|
89
93
|
end
|
90
94
|
end
|
95
|
+
|
96
|
+
# rubocop:enable Style/HashLikeCase
|
@@ -1,3 +1,5 @@
|
|
1
1
|
The `defaultDate`/`default_date` prop has a null or empty string value by default. You can pass an ISO date string (preferred rails method) or date object (preferred JS method) if you want a default value on page load. Use Ruby UTC DateTime objects and convert them to ISO date strings with `DateTime.now.utc.iso8601`.
|
2
2
|
|
3
|
-
If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor). See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.
|
3
|
+
If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor). See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.
|
4
|
+
|
5
|
+
|
@@ -2,10 +2,19 @@ import { ensureAccessible, renderKit } from '../utilities/test-utils'
|
|
2
2
|
import { DateTimeStacked } from '../'
|
3
3
|
|
4
4
|
/* eslint-disable jsx-control-statements/jsx-jcs-no-undef */
|
5
|
+
const currentDate = new Date()
|
6
|
+
|
7
|
+
const datetime = new Date('Wed Mar 31 2021 12:00:00 GMT-0500'),
|
8
|
+
monthName = datetime.toLocaleString('en-US', { month: 'short' }),
|
9
|
+
day = datetime.getDate(),
|
10
|
+
fullYear = datetime.getFullYear(),
|
11
|
+
optionalYear = currentDate.getFullYear() !== fullYear ? fullYear : ''
|
12
|
+
|
13
|
+
const monthDayYear = `${monthName}${day}${optionalYear}`
|
5
14
|
|
6
15
|
const props = {
|
7
16
|
data: { testid: 'datetimestacked' },
|
8
|
-
datetime
|
17
|
+
datetime,
|
9
18
|
}
|
10
19
|
|
11
20
|
test('Kit renders date time', () => {
|
@@ -19,17 +28,17 @@ it('Should be accessible', async () => {
|
|
19
28
|
|
20
29
|
test('renders time in default timezone', () => {
|
21
30
|
const kit = renderKit(DateTimeStacked, props)
|
22
|
-
expect(kit).toHaveTextContent(
|
31
|
+
expect(kit).toHaveTextContent(`${monthDayYear}1:00pEDT`)
|
23
32
|
})
|
24
33
|
|
25
34
|
test('renders time in timezone', () => {
|
26
35
|
props.timeZone = 'Asia/Tokyo'
|
27
36
|
const kit = renderKit(DateTimeStacked, props)
|
28
|
-
expect(kit).toHaveTextContent(
|
37
|
+
expect(kit).toHaveTextContent(`${monthDayYear}2:00aJST`)
|
29
38
|
})
|
30
39
|
|
31
40
|
test('renders time in timezone', () => {
|
32
41
|
props.timeZone = 'America/Denver'
|
33
42
|
const kit = renderKit(DateTimeStacked, props)
|
34
|
-
expect(kit).toHaveTextContent(
|
43
|
+
expect(kit).toHaveTextContent(`${monthDayYear}11:00aMDT`)
|
35
44
|
})
|
@@ -1,5 +1,7 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
|
+
# rubocop:disable Style/HashLikeCase
|
4
|
+
|
3
5
|
module Playbook
|
4
6
|
module PbFixedConfirmationToast
|
5
7
|
class FixedConfirmationToast < Playbook::KitBase
|
@@ -53,3 +55,5 @@ module Playbook
|
|
53
55
|
end
|
54
56
|
end
|
55
57
|
end
|
58
|
+
|
59
|
+
# rubocop:enable Style/HashLikeCase
|
@@ -21,6 +21,7 @@ type FlexProps = {
|
|
21
21
|
rowGap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
|
22
22
|
columnGap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
|
23
23
|
wrap?: boolean,
|
24
|
+
alignSelf?: "start" | "end" | "center" | "stretch" | "none"
|
24
25
|
}
|
25
26
|
|
26
27
|
const Flex = (props: FlexProps) => {
|
@@ -40,6 +41,7 @@ const Flex = (props: FlexProps) => {
|
|
40
41
|
reverse = false,
|
41
42
|
vertical = 'top',
|
42
43
|
wrap = false,
|
44
|
+
alignSelf = 'none',
|
43
45
|
} = props
|
44
46
|
const orientationClass =
|
45
47
|
orientation !== undefined ? `orientation_${orientation}` : ''
|
@@ -53,6 +55,7 @@ const Flex = (props: FlexProps) => {
|
|
53
55
|
const columnGapClass = columnGap !== 'none' ? `columnGap_${columnGap}` : ''
|
54
56
|
const wrapClass = wrap === true ? 'wrap' : ''
|
55
57
|
const reverseClass = reverse === true ? 'reverse' : ''
|
58
|
+
const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''
|
56
59
|
const dataProps = buildDataProps(data)
|
57
60
|
|
58
61
|
return (
|
@@ -70,6 +73,7 @@ const Flex = (props: FlexProps) => {
|
|
70
73
|
gapClass,
|
71
74
|
rowGapClass,
|
72
75
|
columnGapClass,
|
76
|
+
alignSelfClass
|
73
77
|
),
|
74
78
|
globalProps(props),
|
75
79
|
className
|
@@ -77,7 +77,6 @@ $gapTypes: (
|
|
77
77
|
align-items: flex-start;
|
78
78
|
}
|
79
79
|
|
80
|
-
|
81
80
|
&[class*=align_items_right],
|
82
81
|
&[class*=align_items_bottom],
|
83
82
|
&[class*=align_items_end] {
|
@@ -96,6 +95,23 @@ $gapTypes: (
|
|
96
95
|
align-items: baseline;
|
97
96
|
}
|
98
97
|
|
98
|
+
// Alignment: Align Self - Rails & React
|
99
|
+
&[class*=align_self_start] {
|
100
|
+
align-self: flex-start;
|
101
|
+
}
|
102
|
+
|
103
|
+
&[class*=align_self_end] {
|
104
|
+
align-self: flex-end;
|
105
|
+
}
|
106
|
+
|
107
|
+
&[class*=align_self_center] {
|
108
|
+
align-self: center;
|
109
|
+
}
|
110
|
+
|
111
|
+
&[class*=align_self_stretch] {
|
112
|
+
align-self: stretch;
|
113
|
+
}
|
114
|
+
|
99
115
|
// Spacing
|
100
116
|
&[class*=spacing_around],
|
101
117
|
&[class*=justify_content_around] {
|
@@ -12,21 +12,25 @@ type FlexItemPropTypes = {
|
|
12
12
|
className: string,
|
13
13
|
overflow?: "auto" | "hidden" | "initial" | "inherit" | "scroll" | "visible",
|
14
14
|
order?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
|
15
|
+
alignSelf?: "start" | "end" | "center" | "stretch",
|
16
|
+
displayFlex: boolean
|
15
17
|
}
|
16
18
|
|
17
19
|
const FlexItem = (props: FlexItemPropTypes) => {
|
18
|
-
const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none', order = 'none' } = props
|
20
|
+
const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none', order = 'none', alignSelf = null, displayFlex } = props
|
19
21
|
const growClass = grow === true ? 'grow' : ''
|
22
|
+
const displayFlexClass = displayFlex === true ? `display_flex_${displayFlex}` : ''
|
20
23
|
const flexClass = flex !== 'none' ? `flex_${flex}` : ''
|
21
24
|
const overflowClass = overflow ? `overflow_${overflow}` : ''
|
22
25
|
const shrinkClass = shrink === true ? 'shrink' : ''
|
26
|
+
const alignSelfClass = alignSelf ? `align_self_${alignSelf}` : ''
|
23
27
|
const fixedStyle =
|
24
28
|
fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
|
25
29
|
const orderClass = order !== 'none' ? `order_${order}` : null
|
26
30
|
|
27
31
|
return (
|
28
32
|
<div
|
29
|
-
className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass), overflowClass, orderClass, globalProps(props), className)}
|
33
|
+
className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), overflowClass, orderClass, alignSelfClass, globalProps(props), className)}
|
30
34
|
style={fixedStyle}
|
31
35
|
>
|
32
36
|
{children}
|
@@ -12,6 +12,28 @@
|
|
12
12
|
flex-shrink: 1;
|
13
13
|
}
|
14
14
|
|
15
|
+
// Display Flex - Rails & React
|
16
|
+
&[class*=display_flex] {
|
17
|
+
display: flex;
|
18
|
+
}
|
19
|
+
|
20
|
+
// Alignment: Align Self - Rails & React
|
21
|
+
&[class*=align_self_start] {
|
22
|
+
align-self: flex-start;
|
23
|
+
}
|
24
|
+
|
25
|
+
&[class*=align_self_end] {
|
26
|
+
align-self: flex-end;
|
27
|
+
}
|
28
|
+
|
29
|
+
&[class*=align_self_center] {
|
30
|
+
align-self: center;
|
31
|
+
}
|
32
|
+
|
33
|
+
&[class*=align_self_stretch] {
|
34
|
+
align-self: stretch;
|
35
|
+
}
|
36
|
+
|
15
37
|
//Order Items
|
16
38
|
@for $i from 0 through 12 {
|
17
39
|
&[class*=order_#{$i}]{
|
@@ -1,5 +1,16 @@
|
|
1
|
-
<%= pb_rails("title", props: {size: 4, text: "
|
1
|
+
<%= pb_rails("title", props: {size: 4, text: "Display Flex"}) %>
|
2
2
|
<br/>
|
3
|
+
<div class="flex-doc-example">
|
4
|
+
<%= pb_rails("flex/flex_item",props: { gap:"sm", display_flex: true }) do %>
|
5
|
+
<%= pb_rails("flex/flex_item") do %>We<% end %>
|
6
|
+
<%= pb_rails("flex/flex_item") do %>Are<% end %>
|
7
|
+
<%= pb_rails("flex/flex_item") do %>Being<% end %>
|
8
|
+
<%= pb_rails("flex/flex_item") do %>Flexed<% end %>
|
9
|
+
<% end %>
|
10
|
+
</div>
|
11
|
+
|
12
|
+
<br/><br/>
|
13
|
+
|
3
14
|
<div class="flex-doc-example">
|
4
15
|
<%= pb_rails("flex",props: { gap:"sm" }) do %>
|
5
16
|
<%= pb_rails("flex/flex_item", props: { grow: true }) do %>I'm growing<% end %>
|
@@ -1,5 +1,6 @@
|
|
1
1
|
##### Props
|
2
2
|
|
3
|
+
* `display_flex` | **Type**: Boolean
|
3
4
|
* `flex` | **Type**: String | **Values**: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
4
5
|
* `fixed_size` | **Type**: String | **Values**: Any CSS px or % value
|
5
6
|
* `grow` | **Type**: Boolean
|
@@ -10,3 +11,4 @@
|
|
10
11
|
- Setting Flex to 1 is equal to setting the grow & shrink prop to true
|
11
12
|
- Setting Flex to 0 is equal to setting the grow & shrink prop to false
|
12
13
|
- 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
|
14
|
+
- display_flex will either be true or false. If true, then the class will be applied to the kit
|
@@ -0,0 +1,89 @@
|
|
1
|
+
<%= pb_rails("title", props: {size: 4, text: "Row"}) %>
|
2
|
+
<br/>
|
3
|
+
<div class="flex-doc-example">
|
4
|
+
<%= pb_rails("flex") do %>
|
5
|
+
<%= pb_rails("flex/flex_item", props: {padding:"sm", align_self:"start"}) do %>1<% end %>
|
6
|
+
<%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>2<% end %>
|
7
|
+
<%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>3<% end %>
|
8
|
+
<%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>4<% end %>
|
9
|
+
<% end %>
|
10
|
+
</div>
|
11
|
+
|
12
|
+
<br/><br/>
|
13
|
+
|
14
|
+
<div class="flex-doc-example">
|
15
|
+
<%= pb_rails("flex") do %>
|
16
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm", align_self:"end"}) do %>1<% end %>
|
17
|
+
<%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>2<% end %>
|
18
|
+
<%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>3<% end %>
|
19
|
+
<%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>4<% end %>
|
20
|
+
<% end %>
|
21
|
+
</div>
|
22
|
+
|
23
|
+
<br/><br/>
|
24
|
+
|
25
|
+
<div class="flex-doc-example">
|
26
|
+
<%= pb_rails("flex") do %>
|
27
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm", align_self: "center"}) do %>1<% end %>
|
28
|
+
<%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>2<% end %>
|
29
|
+
<%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>3<% end %>
|
30
|
+
<%= pb_rails("flex/flex_item", props:{padding:"lg"}) do %>4<% end %>
|
31
|
+
<% end %>
|
32
|
+
</div>
|
33
|
+
|
34
|
+
<br/><br/>
|
35
|
+
|
36
|
+
<div class="flex-doc-example">
|
37
|
+
<%= pb_rails("flex") do %>
|
38
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm", align_self:"stretch"}) do %>1<% end %>
|
39
|
+
<%= pb_rails("flex/flex_item", props:{padding:"md"}) do %>2<% end %>
|
40
|
+
<%= pb_rails("flex/flex_item", props:{padding:"md"}) do %>3<% end %>
|
41
|
+
<%= pb_rails("flex/flex_item", props:{padding:"md"}) do %>4<% end %>
|
42
|
+
<% end %>
|
43
|
+
</div>
|
44
|
+
|
45
|
+
<br/><br/>
|
46
|
+
|
47
|
+
<%= pb_rails("title", props: {size: 4, text: "Column"}) %>
|
48
|
+
<br/>
|
49
|
+
<div class="flex-doc-example">
|
50
|
+
<%= pb_rails("flex", props: {orientation: "column"}) do %>
|
51
|
+
<%= pb_rails("flex/flex_item", props: {padding:"sm", align_self:"start"}) do %>1<% end %>
|
52
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>2<% end %>
|
53
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>3<% end %>
|
54
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
|
55
|
+
<% end %>
|
56
|
+
</div>
|
57
|
+
|
58
|
+
<br/><br/>
|
59
|
+
|
60
|
+
<div class="flex-doc-example">
|
61
|
+
<%= pb_rails("flex", props: {orientation: "column"}) do %>
|
62
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm", align_self: "end"}) do %>1<% end %>
|
63
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>2<% end %>
|
64
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>3<% end %>
|
65
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
|
66
|
+
<% end %>
|
67
|
+
</div>
|
68
|
+
|
69
|
+
<br/><br/>
|
70
|
+
|
71
|
+
<div class="flex-doc-example">
|
72
|
+
<%= pb_rails("flex", props: {orientation: "column"}) do %>
|
73
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm", align_self:"center"}) do %>1<% end %>
|
74
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>2<% end %>
|
75
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>3<% end %>
|
76
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
|
77
|
+
<% end %>
|
78
|
+
</div>
|
79
|
+
|
80
|
+
<br/><br/>
|
81
|
+
|
82
|
+
<div class="flex-doc-example">
|
83
|
+
<%= pb_rails("flex", props: {orientation: "column"}) do %>
|
84
|
+
<%= pb_rails("flex/flex_item", props:{padding: "sm", align_self:"stretch"}) do %>1<% end %>
|
85
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>2<% end %>
|
86
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>3<% end %>
|
87
|
+
<%= pb_rails("flex/flex_item", props:{padding:"sm"}) do %>4<% end %>
|
88
|
+
<% end %>
|
89
|
+
</div>
|
@@ -0,0 +1,210 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Flex, FlexItem, Title } from '../..'
|
3
|
+
|
4
|
+
const FlexItemAlignSelf = (props) => {
|
5
|
+
return (
|
6
|
+
<>
|
7
|
+
<Title
|
8
|
+
size={4}
|
9
|
+
text="Row"
|
10
|
+
{...props}
|
11
|
+
/>
|
12
|
+
|
13
|
+
<br />
|
14
|
+
|
15
|
+
<div className="flex-doc-example ">
|
16
|
+
<Flex
|
17
|
+
{...props}
|
18
|
+
>
|
19
|
+
<FlexItem alignSelf="start">
|
20
|
+
{'1'}
|
21
|
+
</FlexItem>
|
22
|
+
<FlexItem padding="md">
|
23
|
+
{'2'}
|
24
|
+
</FlexItem>
|
25
|
+
<FlexItem padding="md">
|
26
|
+
{'3'}
|
27
|
+
</FlexItem>
|
28
|
+
<FlexItem padding="md">
|
29
|
+
{'4'}
|
30
|
+
</FlexItem>
|
31
|
+
</Flex>
|
32
|
+
</div>
|
33
|
+
|
34
|
+
<br />
|
35
|
+
|
36
|
+
<div className="flex-doc-example ">
|
37
|
+
<Flex
|
38
|
+
{...props}
|
39
|
+
>
|
40
|
+
<FlexItem alignSelf="end">
|
41
|
+
{'1'}
|
42
|
+
</FlexItem>
|
43
|
+
<FlexItem padding="md">
|
44
|
+
{'2'}
|
45
|
+
</FlexItem>
|
46
|
+
<FlexItem padding="md">
|
47
|
+
{'3'}
|
48
|
+
</FlexItem>
|
49
|
+
<FlexItem padding="md">
|
50
|
+
{'4'}
|
51
|
+
</FlexItem>
|
52
|
+
</Flex>
|
53
|
+
</div>
|
54
|
+
|
55
|
+
<br />
|
56
|
+
|
57
|
+
<div className="flex-doc-example ">
|
58
|
+
<Flex
|
59
|
+
{...props}
|
60
|
+
>
|
61
|
+
<FlexItem alignSelf="center">
|
62
|
+
{'1'}
|
63
|
+
</FlexItem>
|
64
|
+
<FlexItem padding="md">
|
65
|
+
{'2'}
|
66
|
+
</FlexItem>
|
67
|
+
<FlexItem padding="md">
|
68
|
+
{'3'}
|
69
|
+
</FlexItem>
|
70
|
+
<FlexItem padding="md">
|
71
|
+
{'4'}
|
72
|
+
</FlexItem>
|
73
|
+
</Flex>
|
74
|
+
</div>
|
75
|
+
|
76
|
+
<br />
|
77
|
+
|
78
|
+
<div className="flex-doc-example ">
|
79
|
+
<Flex
|
80
|
+
{...props}
|
81
|
+
>
|
82
|
+
<FlexItem alignSelf="stretch">
|
83
|
+
{'1'}
|
84
|
+
</FlexItem>
|
85
|
+
<FlexItem padding="md">
|
86
|
+
{'2'}
|
87
|
+
</FlexItem>
|
88
|
+
<FlexItem padding="md">
|
89
|
+
{'3'}
|
90
|
+
</FlexItem>
|
91
|
+
<FlexItem padding="md">
|
92
|
+
{'4'}
|
93
|
+
</FlexItem>
|
94
|
+
</Flex>
|
95
|
+
</div>
|
96
|
+
|
97
|
+
<br />
|
98
|
+
<br />
|
99
|
+
|
100
|
+
<Title
|
101
|
+
size={4}
|
102
|
+
text="Column"
|
103
|
+
{...props}
|
104
|
+
/>
|
105
|
+
|
106
|
+
<br />
|
107
|
+
|
108
|
+
<div className="flex-doc-example ">
|
109
|
+
<Flex
|
110
|
+
orientation="column"
|
111
|
+
{...props}
|
112
|
+
>
|
113
|
+
<FlexItem
|
114
|
+
alignSelf="start"
|
115
|
+
padding="sm"
|
116
|
+
>
|
117
|
+
{'1'}
|
118
|
+
</FlexItem>
|
119
|
+
<FlexItem padding="sm">
|
120
|
+
{'2'}
|
121
|
+
</FlexItem>
|
122
|
+
<FlexItem padding="sm">
|
123
|
+
{'3'}
|
124
|
+
</FlexItem>
|
125
|
+
<FlexItem padding="sm">
|
126
|
+
{'4'}
|
127
|
+
</FlexItem>
|
128
|
+
</Flex>
|
129
|
+
</div>
|
130
|
+
|
131
|
+
<br />
|
132
|
+
|
133
|
+
<div className="flex-doc-example ">
|
134
|
+
<Flex
|
135
|
+
orientation="column"
|
136
|
+
{...props}
|
137
|
+
>
|
138
|
+
<FlexItem
|
139
|
+
alignSelf="end"
|
140
|
+
padding="sm"
|
141
|
+
>
|
142
|
+
{'1'}
|
143
|
+
</FlexItem>
|
144
|
+
<FlexItem padding="sm">
|
145
|
+
{'2'}
|
146
|
+
</FlexItem>
|
147
|
+
<FlexItem padding="sm">
|
148
|
+
{'3'}
|
149
|
+
</FlexItem>
|
150
|
+
<FlexItem padding="sm">
|
151
|
+
{'4'}
|
152
|
+
</FlexItem>
|
153
|
+
</Flex>
|
154
|
+
</div>
|
155
|
+
|
156
|
+
<br />
|
157
|
+
|
158
|
+
<div className="flex-doc-example ">
|
159
|
+
<Flex
|
160
|
+
orientation="column"
|
161
|
+
{...props}
|
162
|
+
>
|
163
|
+
<FlexItem
|
164
|
+
alignSelf="center"
|
165
|
+
padding="sm"
|
166
|
+
>
|
167
|
+
{'1'}
|
168
|
+
</FlexItem>
|
169
|
+
<FlexItem padding="sm">
|
170
|
+
{'2'}
|
171
|
+
</FlexItem>
|
172
|
+
<FlexItem padding="sm">
|
173
|
+
{'3'}
|
174
|
+
</FlexItem>
|
175
|
+
<FlexItem padding="sm">
|
176
|
+
{'4'}
|
177
|
+
</FlexItem>
|
178
|
+
</Flex>
|
179
|
+
</div>
|
180
|
+
|
181
|
+
<br />
|
182
|
+
|
183
|
+
<div className="flex-doc-example ">
|
184
|
+
<Flex
|
185
|
+
orientation="column"
|
186
|
+
{...props}
|
187
|
+
>
|
188
|
+
<FlexItem
|
189
|
+
alignSelf="stretch"
|
190
|
+
padding="sm"
|
191
|
+
>
|
192
|
+
{'1'}
|
193
|
+
</FlexItem>
|
194
|
+
<FlexItem padding="sm">
|
195
|
+
{'2'}
|
196
|
+
</FlexItem>
|
197
|
+
<FlexItem padding="sm">
|
198
|
+
{'3'}
|
199
|
+
</FlexItem>
|
200
|
+
<FlexItem padding="sm">
|
201
|
+
{'4'}
|
202
|
+
</FlexItem>
|
203
|
+
</Flex>
|
204
|
+
</div>
|
205
|
+
|
206
|
+
</>
|
207
|
+
)
|
208
|
+
}
|
209
|
+
|
210
|
+
export default FlexItemAlignSelf
|
@@ -4,6 +4,33 @@ import { Flex, FlexItem, Title } from '../..'
|
|
4
4
|
const FlexItemExample = (props) => {
|
5
5
|
return (
|
6
6
|
<>
|
7
|
+
<Title
|
8
|
+
size={4}
|
9
|
+
text="Display Flex"
|
10
|
+
/>
|
11
|
+
<br />
|
12
|
+
<div className="flex-doc-example">
|
13
|
+
<FlexItem
|
14
|
+
displayFlex
|
15
|
+
gap="xs"
|
16
|
+
{...props}
|
17
|
+
>
|
18
|
+
<FlexItem>
|
19
|
+
{'We'}
|
20
|
+
</FlexItem>
|
21
|
+
<FlexItem>
|
22
|
+
{'Are'}
|
23
|
+
</FlexItem>
|
24
|
+
<FlexItem>
|
25
|
+
{'Being'}
|
26
|
+
</FlexItem>
|
27
|
+
<FlexItem>
|
28
|
+
{'Flexed'}
|
29
|
+
</FlexItem>
|
30
|
+
</FlexItem>
|
31
|
+
</div>
|
32
|
+
|
33
|
+
<br />
|
7
34
|
<Title
|
8
35
|
size={4}
|
9
36
|
text="Grow"
|
@@ -1,5 +1,6 @@
|
|
1
1
|
##### Props
|
2
2
|
|
3
|
+
* `display_flex` | **Type**: Boolean
|
3
4
|
* `flex` | **Type**: String | **Values**: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
4
5
|
* `fixed_size` | **Type**: String | **Values**: Any CSS px or % value
|
5
6
|
* `grow` | **Type**: Boolean
|
@@ -10,3 +11,4 @@
|
|
10
11
|
- Setting Flex to 1 is equal to setting the grow & shrink prop to true
|
11
12
|
- Setting Flex to 0 is equal to setting the grow & shrink prop to false
|
12
13
|
- 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
|
14
|
+
- display_flex will either be true or false. If true, then the class will be applied to the kit
|
@@ -10,6 +10,7 @@ examples:
|
|
10
10
|
- flex_align: Align
|
11
11
|
- flex_gap: Gap
|
12
12
|
- flex_item: Flex Item
|
13
|
+
- flex_item_align_self: Flex Item - Align Self
|
13
14
|
|
14
15
|
|
15
16
|
|
@@ -24,3 +25,4 @@ examples:
|
|
24
25
|
- flex_align: Align
|
25
26
|
- flex_gap: Gap
|
26
27
|
- flex_item_example: Flex Item
|
28
|
+
- flex_item_align_self: Flex Item - Align Self
|
@@ -7,3 +7,4 @@ export { default as FlexJustify } from './_flex_justify.jsx'
|
|
7
7
|
export { default as FlexAlign } from './_flex_align.jsx'
|
8
8
|
export { default as FlexGap } from './_flex_gap.jsx'
|
9
9
|
export { default as FlexItemExample } from './_flex_item_example.jsx'
|
10
|
+
export { default as FlexItemAlignSelf } from './_flex_item_align_self.jsx'
|