playbook_ui_docs 14.25.0.pre.alpha.PLAY2423circleiconbuttonaria9795 → 14.25.0.pre.alpha.testingcss9700
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.html.erb +1 -12
- data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx +1 -26
- data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.md +9 -0
- data/dist/playbook-doc.js +67243 -3
- metadata +3 -4
- data/app/pb_kits/playbook/pb_flex/docs/_flex_gap_rails.md +0 -11
- data/app/pb_kits/playbook/pb_flex/docs/_flex_gap_react.md +0 -11
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: ecb2289b05e51254aa62c364e4a543d374a3790ca42c14bb9ed86d65bd1cff47
|
|
4
|
+
data.tar.gz: 147189476726310d62ad857844cbb54e63a99793989eadbf333703bc1311904e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: f92d4ca2af12ca9379faadd91a67852ebcdb6574dde37e8439db1a4f42a4113d99c94b2e7400323e5278dc210e595311dd8e492398bfcb83e5d75065dda2d84e
|
|
7
|
+
data.tar.gz: c73002345301e74ae4ff537ae0ad613ffb0603be5c777724dce1982e8ef4161547afb4a2f3110be2786344e70a315826d06c6c71d9198b0d879d774b806c6003
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<%= pb_rails("title", props: {size: 4, text: "
|
|
1
|
+
<%= pb_rails("title", props: {size: 4, text: "Row"}) %>
|
|
2
2
|
<br/>
|
|
3
3
|
<div class="flex-doc-example">
|
|
4
4
|
<%= pb_rails("flex", props:{ gap: "xxs", wrap:true}) do %>
|
|
@@ -31,14 +31,3 @@
|
|
|
31
31
|
<%= pb_rails("flex/flex_item") do %>4<% end %>
|
|
32
32
|
<% end %>
|
|
33
33
|
</div>
|
|
34
|
-
|
|
35
|
-
<br/><br/>
|
|
36
|
-
<%= pb_rails("title", props: {size: 4, text: "Responsive"}) %>
|
|
37
|
-
<br/>
|
|
38
|
-
<div class="flex-doc-example">
|
|
39
|
-
<%= pb_rails("flex", props: { gap: { xs: "none", sm: "sm", md: "md", lg: "lg", xl: "xl" }, wrap: true }) do %>
|
|
40
|
-
<% 40.times do |i| %>
|
|
41
|
-
<%= pb_rails("flex/flex_item") do %> <%=i%> <% end %>
|
|
42
|
-
<% end %>
|
|
43
|
-
<% end %>
|
|
44
|
-
</div>
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import Flex from '../../pb_flex/_flex'
|
|
3
3
|
import FlexItem from '../../pb_flex/_flex_item'
|
|
4
|
-
import Title from '../../pb_title/_title'
|
|
5
4
|
|
|
6
5
|
const FlexGap = (props) => {
|
|
7
6
|
const count = () => {
|
|
@@ -14,8 +13,6 @@ const FlexGap = (props) => {
|
|
|
14
13
|
|
|
15
14
|
return (
|
|
16
15
|
<>
|
|
17
|
-
<Title size={4}>Gap</Title>
|
|
18
|
-
<br />
|
|
19
16
|
<div className="flex-doc-example">
|
|
20
17
|
<Flex
|
|
21
18
|
gap="xxs"
|
|
@@ -30,10 +27,8 @@ const FlexGap = (props) => {
|
|
|
30
27
|
</Flex>
|
|
31
28
|
</div>
|
|
32
29
|
|
|
33
|
-
<br /><br />
|
|
34
|
-
|
|
35
|
-
<Title size={4}>Column Gap</Title>
|
|
36
30
|
<br />
|
|
31
|
+
|
|
37
32
|
<div className="flex-doc-example">
|
|
38
33
|
<Flex
|
|
39
34
|
columnGap="lg"
|
|
@@ -53,9 +48,6 @@ const FlexGap = (props) => {
|
|
|
53
48
|
</FlexItem>
|
|
54
49
|
</Flex>
|
|
55
50
|
</div>
|
|
56
|
-
<br /><br />
|
|
57
|
-
|
|
58
|
-
<Title size={4}>Row Gap</Title>
|
|
59
51
|
<br />
|
|
60
52
|
<div className="flex-doc-example">
|
|
61
53
|
<Flex
|
|
@@ -77,23 +69,6 @@ const FlexGap = (props) => {
|
|
|
77
69
|
</FlexItem>
|
|
78
70
|
</Flex>
|
|
79
71
|
</div>
|
|
80
|
-
|
|
81
|
-
<br /><br />
|
|
82
|
-
<Title size={4}>Responsive</Title>
|
|
83
|
-
<br />
|
|
84
|
-
<div className="flex-doc-example">
|
|
85
|
-
<Flex
|
|
86
|
-
gap={{ xs: "none", sm: "sm", md: "md", lg: "lg", xl: "xl" }}
|
|
87
|
-
wrap
|
|
88
|
-
{...props}
|
|
89
|
-
>
|
|
90
|
-
{count().map((v, key) => (
|
|
91
|
-
<FlexItem key={key}>
|
|
92
|
-
{v}
|
|
93
|
-
</FlexItem>
|
|
94
|
-
))}
|
|
95
|
-
</Flex>
|
|
96
|
-
</div>
|
|
97
72
|
</>
|
|
98
73
|
)
|
|
99
74
|
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
##### Prop
|
|
2
|
+
|
|
3
|
+
* `gap` | `row_gap` | `rowGap` | `column_gap` | `columnGap` | **Type**: String | **Values**: xxs | xs | sm | md | lg | xl | none
|
|
4
|
+
|
|
5
|
+
- Setting the gap prop sets the row_gap || rowGap and the column_gap || columnGap props to the same size and creates equal space within a flex container.
|
|
6
|
+
|
|
7
|
+
- Setting the row_gap || rowGap prop creates space between rows in a flex container.
|
|
8
|
+
|
|
9
|
+
- Setting the column_gap || columnGap prop creates space between columns in a flex container.
|