From 34c862805010fbe980737d9b1753abcfda647fa2 Mon Sep 17 00:00:00 2001 From: nickamantia Date: Fri, 17 May 2024 13:49:07 -0400 Subject: [PATCH 01/18] converted docs --- .../app/pb_kits/playbook/pb_table/_table.scss | 42 ++++++- .../docs/_table_alignment_column.html.erb | 64 +++++------ .../docs/_table_alignment_row.html.erb | 66 +++++------ .../pb_table/docs/_table_alignment_row.jsx | 67 +++++------ .../docs/_table_alignment_shift_data.html.erb | 105 ++++++++---------- .../docs/_table_alignment_shift_data.jsx | 102 ++++++++--------- .../docs/_table_alignment_shift_row.html.erb | 84 ++++++-------- .../docs/_table_alignment_shift_row.jsx | 84 ++++++-------- .../pb_table/subcomponents/_table_cell.tsx | 5 +- .../pb_table/subcomponents/_table_header.tsx | 5 +- .../pb_table/subcomponents/_table_row.tsx | 8 ++ 11 files changed, 322 insertions(+), 310 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_table/_table.scss b/playbook/app/pb_kits/playbook/pb_table/_table.scss index 39a0493374..9aef8fcb44 100755 --- a/playbook/app/pb_kits/playbook/pb_table/_table.scss +++ b/playbook/app/pb_kits/playbook/pb_table/_table.scss @@ -1 +1,41 @@ -@import "styles/all"; \ No newline at end of file +@import "styles/all"; + +[class^="pb_table"] { + .pb_table_tr.align_center > * { + text-align: center; + } + + .pb_table_tr.align_right { + text-align: right; + } + + .pb_table_td.align_center { + + } + + .pb_table_td.align_right { + + } + + .pb_table_th.align_center { + + } + + .pb_table_th.align_right { + + } + + .shift_middle { + + } + + .shift_down { + + } + + .shift_up { + + } + + +} diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb index 7d137b2f5d..f6cc28b2df 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb @@ -1,34 +1,34 @@ <%= pb_rails("table") do %> - - - Column 1 - Column 2 - Column 3 - Rating - Money - - - - - Value 1 - Value 2 - Value 3 - 3 - $57.32 - - - Value 1 - Value 2 - Value 3 - 2 - $5,657.08 - - - Value 1 - Value 2 - Value 3 - 4 - $358.77 - - + <%= pb_rails("table/table_head") do %> + <%= pb_rails("table/table_row") do %> + <%= pb_rails("table/table_header", props: { text: "Column 1" }) %> + <%= pb_rails("table/table_header", props: { text: "Column 2" }) %> + <%= pb_rails("table/table_header", props: { text: "Column 3" }) %> + <%= pb_rails("table/table_header", props: { text: "Rating" }) %> + <%= pb_rails("table/table_header", props: { text: "Money" }) %> + <% end %> + <% end %> + <%= pb_rails("table/table_body") do %> + <%= pb_rails("table/table_row") do %> + <%= pb_rails("table/table_cell", props: { text: "Value 1" }) %> + <%= pb_rails("table/table_cell", props: { text: "Value 2" }) %> + <%= pb_rails("table/table_cell", props: { text: "Value 3" }) %> + <%= pb_rails("table/table_cell", props: { text: "3" }) %> + <%= pb_rails("table/table_cell", props: { text: "$57.32" }) %> + <% end %> + <%= pb_rails("table/table_row") do %> + <%= pb_rails("table/table_cell", props: { text: "Value 1" }) %> + <%= pb_rails("table/table_cell", props: { text: "Value 2" }) %> + <%= pb_rails("table/table_cell", props: { text: "Value 3" }) %> + <%= pb_rails("table/table_cell", props: { text: "2" }) %> + <%= pb_rails("table/table_cell", props: { text: "$5,657.08" }) %> + <% end %> + <%= pb_rails("table/table_row") do %> + <%= pb_rails("table/table_cell", props: { text: "Value 1" }) %> + <%= pb_rails("table/table_cell", props: { text: "Value 2" }) %> + <%= pb_rails("table/table_cell", props: { text: "Value 3" }) %> + <%= pb_rails("table/table_cell", props: { text: "4" }) %> + <%= pb_rails("table/table_cell", props: { text: "$358.77" }) %> + <% end %> + <% end %> <% end %> diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.html.erb b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.html.erb index 9c980aacb9..413346c444 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.html.erb +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.html.erb @@ -1,34 +1,34 @@ -<%= pb_rails("table") do %> - - - Column 1 - Column 2 - Column 3 - Column 4 - Column 5 - - - - - Value 1 - Value 2 - Value 3 - Value 4 - Value 5 - - - Value 1 - Value 2 - Value 3 - Value 4 - Value 5 - - - Value 1 - Value 2 - Value 3 - Value 4 - Value 5 - - +<%= pb_rails("table", props: { size: "sm" }) do %> + <%= pb_rails("table/table_head") do %> + <%= pb_rails("table/table_row") do %> + <%= pb_rails("table/table_header", props: { text: "Column 1"}) %> + <%= pb_rails("table/table_header", props: { text: "Column 2"}) %> + <%= pb_rails("table/table_header", props: { text: "Column 3"}) %> + <%= pb_rails("table/table_header", props: { text: "Column 4"}) %> + <%= pb_rails("table/table_header", props: { text: "Column 5"}) %> + <% end %> + <% end %> + <%= pb_rails("table/table_body") do %> + <%= pb_rails("table/table_row") do %> + <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %> + <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %> + <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %> + <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %> + <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %> + <% end %> + <%= pb_rails("table/table_row", props: { align: "center" }) do %> + <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %> + <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %> + <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %> + <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %> + <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %> + <% end %> + <%= pb_rails("table/table_row", props: { align: "right" }) do %> + <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %> + <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %> + <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %> + <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %> + <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %> + <% end %> + <% end %> <% end %> diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx index 208977f8ca..4c78b8a1cb 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx @@ -5,41 +5,42 @@ import Table from '../_table' const TableAlignmentRow = (props) => { return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{'Column 1'}{'Column 2'}{'Column 3'}{'Column 4'}{'Column 5'}
{'Value 1'}{'Value 2'}{'Value 3'}{'Value 4'}{'Value 5'}
{'Value 1'}{'Value 2'}{'Value 3'}{'Value 4'}{'Value 5'}
{'Value 1'}{'Value 2'}{'Value 3'}{'Value 4'}{'Value 5'}
+ + + {'Column 1'} + {'Column 2'} + {'Column 3'} + {'Column 4'} + {'Column 5'} + + + + + {'Value 1'} + {'Value 2'} + {'Value 3'} + {'Value 4'} + {'Value 5'} + + + {'Value 1'} + {'Value 2'} + {'Value 3'} + {'Value 4'} + {'Value 5'} + + + {'Value 1'} + {'Value 2'} + {'Value 3'} + {'Value 4'} + {'Value 5'} + + + ) } diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb index 66e7b5b3b3..126c1f59f5 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb @@ -1,63 +1,54 @@ -<%= pb_rails("table") do %> - - -   - Price - - - - - Total - - $12 -
- $46 -
- $25 -
- ------- -
+<%= pb_rails("table", props: { size: "sm" }) do %> + <%= pb_rails("table/table_head") do %> + <%= pb_rails("table/table_row") do %> + <%= pb_rails("table/table_header", props: { text: " " }) %> + <%= pb_rails("table/table_header", props: { text: "Price" }) %> + <% end %> + <% end %> + <%= pb_rails("table/table_body") do %> + <%= pb_rails("table/table_row") do %> + <%= pb_rails("table/table_cell", props: { text: "Total", shift: "down" }) %> + <%= pb_rails("table/table_cell") do %> + $12
+ $46
+ $25
+ -------
$83 - - - + <% end %> + <% end %> + <% end %> <% end %>
-<%= pb_rails("table") do %> - - - Espresso Drinks - Ingredients - - - - - Cappuccino - - Espresso -
- Steamed Milk -
+<%= pb_rails("table", props: { size: "sm" }) do %> + <%= pb_rails("table/table_head") do %> + <%= pb_rails("table/table_row") do %> + <%= pb_rails("table/table_header", props: { text: "Espresso Drinks" }) %> + <%= pb_rails("table/table_header", props: { text: "Ingredients" }) %> + <% end %> + <% end %> + <%= pb_rails("table/table_body") do %> + <%= pb_rails("table/table_row") do %> + <%= pb_rails("table/table_cell", props: { text: "Cappuccino", shift: "up" }) %> + <%= pb_rails("table/table_cell") do %> + Espresso
+ Steamed Milk
Milk Foam - - - - Macchiato - - Espresso -
+ <% end %> + <% end %> + <%= pb_rails("table/table_row") do %> + <%= pb_rails("table/table_cell", props: { text: "Macchiato", shift: "up" }) %> + <%= pb_rails("table/table_cell") do %> + Espresso
Steamed Milk - - - - Mocha - - Espresso -
- Hot Chocolate -
+ <% end %> + <% end %> + <%= pb_rails("table/table_row") do %> + <%= pb_rails("table/table_cell", props: { text: "Mocha", shift: "up" }) %> + <%= pb_rails("table/table_cell") do %> + Espresso
+ Hot Chocolate
Steamed Milk - - - -<% end %> + <% end %> + <% end %> + <% end %> +<% end %> \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx index b04023d28c..8adc08b26d 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx @@ -9,16 +9,16 @@ const TableAlignmentShiftData = (props) => { marginBottom="md" {...props} > - - -   - {'Price'} - - - - - {'Total'} - + + +   + {'Price'} + + + + + {'Total'} + {'$12'}
{'$46'} @@ -28,50 +28,52 @@ const TableAlignmentShiftData = (props) => { {'-------'}
{'$83'} - - - + + + + - - - - - - - - - - - - - - - - - - - - -
{'Espresso Drinks'}{'Ingredients'}
{'Cappuccino'} - {'Espresso'} -
- {'Steamed Milk'} -
- {'Milk Foam'} -
{'Macchiato'} - {'Espresso'} -
- {'Steamed Milk'} -
{'Mocha'} - {'Espresso'} -
- {'Hot Chocolate'} -
- {'Steamed Milk'} -
+ + + {'Espresso Drinks'} + {'Ingredients'} + + + + + {'Cappuccino'} + + + {'Steamed Milk'} +
+ {'Milk Foam'} + + + + + {'Macchiato'} + + + {'Espresso'} +
+ {'Steamed Milk'} + + + + + {'Mocha'} + + + {'Hot Chocolate'} +
+ {'Steamed Milk'} + + + + ) } diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb index a03f33c3cf..5286f6ef7f 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb @@ -1,52 +1,34 @@ -<%= pb_rails("table") do %> - - - Column 1 - Column 2 - Column 3 - Column 4 - Column 5 - - - - - - Value 1a -
- Value 1a -
- Value 1a - - Value 2a - Value 3a - Value 4a - Value 5a - - - - Value 1b -
- Value 1b -
- Value 1b - - Value 2b - Value 3b - Value 4b - Value 5b - - - - Value 1c -
- Value 1c -
- Value 1c - - Value 2c - Value 3c - Value 4c - Value 5c - - + <%= pb_rails("table") do %> + <%= pb_rails("table/table_head") do %> + <%= pb_rails("table/table_row") do %> + <%= pb_rails("table/table_header", props: { text: "Column 1"}) %> + <%= pb_rails("table/table_header", props: { text: "Column 2"}) %> + <%= pb_rails("table/table_header", props: { text: "Column 3"}) %> + <%= pb_rails("table/table_header", props: { text: "Column 4"}) %> + <%= pb_rails("table/table_header", props: { text: "Column 5"}) %> + <% end %> + <% end %> + <%= pb_rails("table/table_body") do %> + <%= pb_rails("table/table_row") do %> + <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %> + <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %> + <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %> + <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %> + <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %> + <% end %> + <%= pb_rails("table/table_row", props: { shift: "middle" }) do %> + <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %> + <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %> + <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %> + <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %> + <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %> + <% end %> + <%= pb_rails("table/table_row", props: { shift: "down" }) do %> + <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %> + <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %> + <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %> + <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %> + <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %> + <% end %> + <% end %> <% end %> diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx index e31fc14177..df646ab2f0 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx @@ -7,57 +7,39 @@ const TableAlignmentShiftRow = (props) => { - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{'Column 1'}{'Column 2'}{'Column 3'}{'Column 4'}{'Column 5'}
- {'Value 1a'} -
- {'Value 1a'} -
- {'Value 1a'} - 		{'Value 2a'}{'Value 3a'}{'Value 4a'}{'Value 5a'}
- {'Value 1b'} -
- {'Value 1b'} -
- {'Value 1b'} - 		{'Value 2b'}{'Value 3b'}{'Value 4b'}{'Value 5b'}
- {'Value 1c'} -
- {'Value 1c'} -
- {'Value 1c'} - 		{'Value 2c'}{'Value 3c'}{'Value 4c'}{'Value 5c'}
+ + + {'Column 1'} + {'Column 2'} + {'Column 3'} + {'Column 4'} + {'Column 5'} + + + + + {'Value 1'} + {'Value 2'} + {'Value 3'} + {'Value 4'} + {'Value 5'} + + + {'Value 1'} + {'Value 2'} + {'Value 3'} + {'Value 4'} + {'Value 5'} + + + {'Value 1'} + {'Value 2'} + {'Value 3'} + {'Value 4'} + {'Value 5'} + + + ) } diff --git a/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx b/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx index 4d75ed8d15..e020124212 100644 --- a/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx +++ b/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx @@ -8,6 +8,7 @@ import { import { globalProps } from "../../utilities/globalProps"; type TableCellPropTypes = { + align?: "center" | "right"; aria?: { [key: string]: string }; children: React.ReactNode[] | React.ReactNode; className: string; @@ -20,6 +21,7 @@ type TableCellPropTypes = { const TableCell = (props: TableCellPropTypes) => { const { + align, aria = {}, children, className, @@ -33,7 +35,8 @@ const TableCell = (props: TableCellPropTypes) => { const ariaProps = buildAriaProps(aria); const dataProps = buildDataProps(data); const htmlProps = buildHtmlProps(htmlOptions); - const classes = classnames("pb_table_td", globalProps(props), className); + const alignProp = align ? `align_${align}` : null; + const classes = classnames("pb_table_td", alignProp, globalProps(props), className); const isTableTag = tag === "table"; return ( diff --git a/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx b/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx index 1d6609f0ea..962602b4c9 100644 --- a/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx +++ b/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx @@ -8,6 +8,7 @@ import { import { globalProps } from "../../utilities/globalProps"; type TableHeaderPropTypes = { + align?: "center" | "right"; aria?: { [key: string]: string }; children: React.ReactNode[] | React.ReactNode; className: string; @@ -20,6 +21,7 @@ type TableHeaderPropTypes = { const TableHeader = (props: TableHeaderPropTypes) => { const { + align, aria = {}, children, className, @@ -33,7 +35,8 @@ const TableHeader = (props: TableHeaderPropTypes) => { const ariaProps = buildAriaProps(aria); const dataProps = buildDataProps(data); const htmlProps = buildHtmlProps(htmlOptions); - const classes = classnames("pb_table_th", globalProps(props), className); + const alignProp = align ? `align_${align}` : null; + const classes = classnames("pb_table_th", alignProp, globalProps(props), className); const isTableTag = tag === "table"; return ( diff --git a/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx b/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx index 0869719dee..46fb652083 100644 --- a/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +++ b/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx @@ -9,24 +9,28 @@ import { import { globalProps } from "../../utilities/globalProps"; type TableRowPropTypes = { + align?: "center" | "right"; aria?: { [key: string]: string }; children: React.ReactNode[] | React.ReactNode; className: string; data?: { [key: string]: string }; htmlOptions?: { [key: string]: string | number | boolean | (() => void) }; id?: string; + shift?: "middle" | "down" | "up"; sideHighlightColor: string; tag?: "table" | "div"; }; const TableRow = (props: TableRowPropTypes) => { const { + align, aria = {}, children, className, data = {}, htmlOptions = {}, id, + shift, sideHighlightColor = "none", tag = "table", } = props; @@ -34,11 +38,15 @@ const TableRow = (props: TableRowPropTypes) => { const ariaProps = buildAriaProps(aria); const dataProps = buildDataProps(data); const htmlProps = buildHtmlProps(htmlOptions); + const alignProp = align ? `align_${align}` : null; + const shiftProp = shift ? `shift_${shift}` : null; const sideHighlightClass = sideHighlightColor != "" ? `side_highlight_${sideHighlightColor}` : null; const classes = classnames( buildCss("pb_table_row_kit", sideHighlightClass), "pb_table_tr", + alignProp, + shiftProp, globalProps(props), className ); From 604360670bf3ca203889b9d3dc93562b743fcb09 Mon Sep 17 00:00:00 2001 From: nickamantia Date: Wed, 22 May 2024 13:17:26 -0400 Subject: [PATCH 02/18] added vertical align global prop --- playbook/app/pb_kits/playbook/_playbook.scss | 1 + .../docs/_table_alignment_column.html.erb | 18 ++--- .../pb_table/docs/_table_alignment_column.jsx | 66 ++++++++++--------- .../docs/_table_alignment_row.html.erb | 4 +- .../pb_table/docs/_table_alignment_row.jsx | 8 +-- .../docs/_table_alignment_shift_data.html.erb | 6 +- ..._table_with_subcomponents_as_divs.html.erb | 2 +- .../playbook/tokens/_vertical_align.scss | 18 +++++ .../playbook/utilities/_vertical_align.scss | 16 +++++ .../pb_kits/playbook/utilities/globalProps.ts | 13 +++- playbook/lib/playbook/classnames.rb | 1 + playbook/lib/playbook/kit_base.rb | 2 + playbook/lib/playbook/vertical_align.rb | 37 +++++++++++ 13 files changed, 140 insertions(+), 52 deletions(-) create mode 100644 playbook/app/pb_kits/playbook/tokens/_vertical_align.scss create mode 100644 playbook/app/pb_kits/playbook/utilities/_vertical_align.scss create mode 100644 playbook/lib/playbook/vertical_align.rb diff --git a/playbook/app/pb_kits/playbook/_playbook.scss b/playbook/app/pb_kits/playbook/_playbook.scss index 3c9265b854..1b796f0c12 100755 --- a/playbook/app/pb_kits/playbook/_playbook.scss +++ b/playbook/app/pb_kits/playbook/_playbook.scss @@ -121,3 +121,4 @@ @import './utilities/text_align'; @import './utilities/overflow'; @import './utilities/truncate'; +@import './utilities/vertical_align'; diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb index f6cc28b2df..8d68c7bde5 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb @@ -1,11 +1,11 @@ -<%= pb_rails("table") do %> +<%= pb_rails("table", props: {tag: "div"}) do %> <%= pb_rails("table/table_head") do %> <%= pb_rails("table/table_row") do %> <%= pb_rails("table/table_header", props: { text: "Column 1" }) %> <%= pb_rails("table/table_header", props: { text: "Column 2" }) %> <%= pb_rails("table/table_header", props: { text: "Column 3" }) %> - <%= pb_rails("table/table_header", props: { text: "Rating" }) %> - <%= pb_rails("table/table_header", props: { text: "Money" }) %> + <%= pb_rails("table/table_header", props: { text: "Rating", text_align: "center", tag: "div" }) %> + <%= pb_rails("table/table_header", props: { text: "Money", text_align: "right", tag: "div" }) %> <% end %> <% end %> <%= pb_rails("table/table_body") do %> @@ -13,22 +13,22 @@ <%= pb_rails("table/table_cell", props: { text: "Value 1" }) %> <%= pb_rails("table/table_cell", props: { text: "Value 2" }) %> <%= pb_rails("table/table_cell", props: { text: "Value 3" }) %> - <%= pb_rails("table/table_cell", props: { text: "3" }) %> - <%= pb_rails("table/table_cell", props: { text: "$57.32" }) %> + <%= pb_rails("table/table_cell", props: { text: "3", text_align: "center" }) %> + <%= pb_rails("table/table_cell", props: { text: "$57.32", text_align: "right" }) %> <% end %> <%= pb_rails("table/table_row") do %> <%= pb_rails("table/table_cell", props: { text: "Value 1" }) %> <%= pb_rails("table/table_cell", props: { text: "Value 2" }) %> <%= pb_rails("table/table_cell", props: { text: "Value 3" }) %> - <%= pb_rails("table/table_cell", props: { text: "2" }) %> - <%= pb_rails("table/table_cell", props: { text: "$5,657.08" }) %> + <%= pb_rails("table/table_cell", props: { text: "2", text_align: "center" }) %> + <%= pb_rails("table/table_cell", props: { text: "$5,657.08", text_align: "right" }) %> <% end %> <%= pb_rails("table/table_row") do %> <%= pb_rails("table/table_cell", props: { text: "Value 1" }) %> <%= pb_rails("table/table_cell", props: { text: "Value 2" }) %> <%= pb_rails("table/table_cell", props: { text: "Value 3" }) %> - <%= pb_rails("table/table_cell", props: { text: "4" }) %> - <%= pb_rails("table/table_cell", props: { text: "$358.77" }) %> + <%= pb_rails("table/table_cell", props: { text: "4", text_align: "center" }) %> + <%= pb_rails("table/table_cell", props: { text: "$358.77", text_align: "right" }) %> <% end %> <% end %> <% end %> diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx index 54b3b7ffaa..b2b11247ab 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx @@ -5,41 +5,43 @@ import Table from '../_table' const TableAlignmentColumn = (props) => { return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + {'Column 1'} + {'Column 2'} + {'Column 3'} + {'Rating'} + {'Money'} + + + + + {'Value 1'} + {'Value 2'} + {'Value 3'} + {'3'} + {'$57.32'} + + + {'Value 1'} + {'Value 2'} + {'Value 3'} + {'2'} + {'$5,657.08'} + + + {'Value 1'} + {'Value 2'} + {'Value 3'} + {'4'} + {'$358.77'} + +
{'Column 1'}{'Column 2'}{'Column 3'}{'Rating'}{'Money'}
{'Value 1'}{'Value 2'}{'Value 3'}{'3'}{'$57.32'}
{'Value 1'}{'Value 2'}{'Value 3'}{'2'}{'$5,657.08'}
{'Value 1'}{'Value 2'}{'Value 3'}{'4'}{'$358.77'}
+ ) } diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.html.erb b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.html.erb index 413346c444..6fdb901754 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.html.erb +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.html.erb @@ -16,14 +16,14 @@ <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %> <% end %> - <%= pb_rails("table/table_row", props: { align: "center" }) do %> + <%= pb_rails("table/table_row", props: { text_align: "center" }) do %> <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %> <% end %> - <%= pb_rails("table/table_row", props: { align: "right" }) do %> + <%= pb_rails("table/table_row", props: { text_align: "right" }) do %> <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %> <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %> diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx index 4c78b8a1cb..e4d99d2475 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx @@ -10,7 +10,7 @@ const TableAlignmentRow = (props) => { > - {'Column 1'} + {'Column 1'} {'Column 2'} {'Column 3'} {'Column 4'} @@ -19,20 +19,20 @@ const TableAlignmentRow = (props) => { - {'Value 1'} + {'Value 1'} {'Value 2'} {'Value 3'} {'Value 4'} {'Value 5'} - + {'Value 1'} {'Value 2'} {'Value 3'} {'Value 4'} {'Value 5'} - + {'Value 1'} {'Value 2'} {'Value 3'} diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb index 126c1f59f5..07f425b86c 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb @@ -28,7 +28,7 @@ <% end %> <%= pb_rails("table/table_body") do %> <%= pb_rails("table/table_row") do %> - <%= pb_rails("table/table_cell", props: { text: "Cappuccino", shift: "up" }) %> + <%= pb_rails("table/table_cell", props: { text: "Cappuccino", vertical_align: "top" }) %> <%= pb_rails("table/table_cell") do %> Espresso
Steamed Milk
@@ -36,14 +36,14 @@ <% end %> <% end %> <%= pb_rails("table/table_row") do %> - <%= pb_rails("table/table_cell", props: { text: "Macchiato", shift: "up" }) %> + <%= pb_rails("table/table_cell", props: { text: "Macchiato", vertical_align: "top" }) %> <%= pb_rails("table/table_cell") do %> Espresso
Steamed Milk <% end %> <% end %> <%= pb_rails("table/table_row") do %> - <%= pb_rails("table/table_cell", props: { text: "Mocha", shift: "up" }) %> + <%= pb_rails("table/table_cell", props: { text: "Mocha", vertical_align: "top" }) %> <%= pb_rails("table/table_cell") do %> Espresso
Hot Chocolate
diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb b/playbook/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb index 67bbe053ad..b21d21e019 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb @@ -5,7 +5,7 @@ <%= pb_rails("table/table_header", props: { text: "Column 2", tag:"div"}) %> <%= pb_rails("table/table_header", props: { text: "Column 3", tag:"div"}) %> <%= pb_rails("table/table_header", props: { text: "Column 4", tag:"div"}) %> - <%= pb_rails("table/table_header", props: { text: "Column 5", tag:"div"}) %> + <%= pb_rails("table/table_header", props: { text: "Column 5", tag:"div", text_align: "right"}) %> <% end %> <% end %> <%= pb_rails("table/table_body", props: {tag:"div"}) do %> diff --git a/playbook/app/pb_kits/playbook/tokens/_vertical_align.scss b/playbook/app/pb_kits/playbook/tokens/_vertical_align.scss new file mode 100644 index 0000000000..918a9d4e31 --- /dev/null +++ b/playbook/app/pb_kits/playbook/tokens/_vertical_align.scss @@ -0,0 +1,18 @@ +$vertical_align_baseline: baseline !default; +$vertical_align_sub: sub !default; +$vertical_align_super: super !default; +$vertical_align_text_top: text-top !default; +$vertical_align_text_bottom: text-bottom !default; +$vertical_align_middle: middle !default; +$vertical_align_top: top !default; +$vertical_align_bottom: bottom !default; +$vertical_align: ( + baseline: $vertical_align_baseline, + sub: $vertical_align_sub, + super: $vertical_align_super, + text_top: $vertical_align_text_top, + text_bottom: $vertical_align_text_bottom, + middle: $vertical_align_middle, + top: $vertical_align_top, + bottom: $vertical_align_bottom +); diff --git a/playbook/app/pb_kits/playbook/utilities/_vertical_align.scss b/playbook/app/pb_kits/playbook/utilities/_vertical_align.scss new file mode 100644 index 0000000000..28bb59df31 --- /dev/null +++ b/playbook/app/pb_kits/playbook/utilities/_vertical_align.scss @@ -0,0 +1,16 @@ +@import "../tokens/vertical_align"; + + +$vertical_align_classes: ( + vertical_align_baseline: $vertical_align_baseline, + vertical_align_sub: $vertical_align_sub, + vertical_align_super: $vertical_align_super, + vertical_align_text_top: $vertical_align_text_top, + vertical_align_text_bottom: $vertical_align_text_bottom, + vertical_align_middle: $vertical_align_middle, + vertical_align_top: $vertical_align_top, + vertical_align_bottom: $vertical_align_bottom, +); + + +@include global_props_responsive_css($vertical_align, 'vertical_align', 'vertical-align'); \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/utilities/globalProps.ts b/playbook/app/pb_kits/playbook/utilities/globalProps.ts index 374e954239..40ee3a6af1 100644 --- a/playbook/app/pb_kits/playbook/utilities/globalProps.ts +++ b/playbook/app/pb_kits/playbook/utilities/globalProps.ts @@ -156,6 +156,10 @@ type Truncate = { truncate?: TruncateType } +type VerticalAlign = { + verticalAlign?: "baseline" | "super" | "top" | "middle" | "bottom" | "sub" | "text-top" | "text-bottom" +} + type ZIndexType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 type ZIndexResponsiveType = {[key: string]: ZIndexType} type ZIndex = { @@ -167,7 +171,7 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf & BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection & FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf & LineHeight & Margin & MaxWidth & NumberSpacing & Order & Overflow & Padding & - Position & Shadow & TextAlign & Truncate & ZIndex & { hover?: string } & Top & Right & Bottom & Left; + Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left; const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => { const keys: string[] = Object.keys(prop) @@ -470,6 +474,13 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} = } else { return textAlign ? `text_align_${textAlign} ` : '' } + }, + verticalAlignProps: ({ verticalAlign }: VerticalAlign) => { + if (typeof verticalAlign === 'object') { + return getResponsivePropClasses(verticalAlign, 'vertical_align') + } else { + return verticalAlign ? `vertical_align_${verticalAlign} ` : '' + } } } diff --git a/playbook/lib/playbook/classnames.rb b/playbook/lib/playbook/classnames.rb index 0865e9c8af..7e93c71da6 100644 --- a/playbook/lib/playbook/classnames.rb +++ b/playbook/lib/playbook/classnames.rb @@ -41,6 +41,7 @@ def generate_classname(*name_parts, separator: "_") top_props, right_props, bottom_props, + vertical_align_props, ].compact.join(" ") end diff --git a/playbook/lib/playbook/kit_base.rb b/playbook/lib/playbook/kit_base.rb index e1aa0d6fdd..4b0f27edcd 100644 --- a/playbook/lib/playbook/kit_base.rb +++ b/playbook/lib/playbook/kit_base.rb @@ -29,6 +29,7 @@ require "playbook/top" require "playbook/right" require "playbook/bottom" +require "playbook/vertical_align" module Playbook include ActionView::Helpers @@ -65,6 +66,7 @@ class KitBase < ViewComponent::Base include Playbook::Top include Playbook::Right include Playbook::Bottom + include Playbook::VerticalAlign prop :id prop :data, type: Playbook::Props::HashProp, default: {} diff --git a/playbook/lib/playbook/vertical_align.rb b/playbook/lib/playbook/vertical_align.rb new file mode 100644 index 0000000000..6684993892 --- /dev/null +++ b/playbook/lib/playbook/vertical_align.rb @@ -0,0 +1,37 @@ +# frozen_string_literal: true + +module Playbook + module VerticalAlign + def self.included(base) + base.prop :vertical_align + end + + # rubocop:disable Style/IfInsideElse + def vertical_align_props + selected_props = vertical_align_options.keys.select { |sk| try(sk) } + return nil unless selected_props.present? + + selected_props.map do |k| + vertical_align_value = send(k) + if vertical_align_value.is_a?(Hash) + vertical_align_value.map do |media_size, flex_value| + "vertical_align_#{media_size}_#{flex_value.underscore}" if vertical_align_values.include? flex_value + end + else + "vertical_align_#{vertical_align_value.underscore}" if vertical_align_values.include? vertical_align_value + end + end.compact.join(" ") + end + # rubocop:enable Style/IfInsideElse + + def vertical_align_options + { + vertical_align: "vertical_align", + } + end + + def vertical_align_values + %w[baseline super top middle bottom sub text-top text-bottom] + end + end +end From b46ef86b300f90070b4b5d27e7da328e7ae7cae8 Mon Sep 17 00:00:00 2001 From: nickamantia Date: Wed, 22 May 2024 13:50:00 -0400 Subject: [PATCH 03/18] upadted docs --- .../docs/_table_alignment_column.html.erb | 6 +- .../docs/_table_alignment_shift_data.html.erb | 2 +- .../docs/_table_alignment_shift_data.jsx | 9 +-- .../docs/_table_alignment_shift_row.html.erb | 73 ++++++++++++------- .../docs/_table_alignment_shift_row.jsx | 57 ++++++++++----- 5 files changed, 91 insertions(+), 56 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb index 8d68c7bde5..11cb03c32a 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb @@ -1,11 +1,11 @@ -<%= pb_rails("table", props: {tag: "div"}) do %> +<%= pb_rails("table") do %> <%= pb_rails("table/table_head") do %> <%= pb_rails("table/table_row") do %> <%= pb_rails("table/table_header", props: { text: "Column 1" }) %> <%= pb_rails("table/table_header", props: { text: "Column 2" }) %> <%= pb_rails("table/table_header", props: { text: "Column 3" }) %> - <%= pb_rails("table/table_header", props: { text: "Rating", text_align: "center", tag: "div" }) %> - <%= pb_rails("table/table_header", props: { text: "Money", text_align: "right", tag: "div" }) %> + <%= pb_rails("table/table_header", props: { text: "Rating" }) %> + <%= pb_rails("table/table_header", props: { text: "Money" }) %> <% end %> <% end %> <%= pb_rails("table/table_body") do %> diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb index 07f425b86c..82105761fd 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb @@ -7,7 +7,7 @@ <% end %> <%= pb_rails("table/table_body") do %> <%= pb_rails("table/table_row") do %> - <%= pb_rails("table/table_cell", props: { text: "Total", shift: "down" }) %> + <%= pb_rails("table/table_cell", props: { text: "Total", vertical_align: "bottom" }) %> <%= pb_rails("table/table_cell") do %> $12
$46
diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx index 8adc08b26d..03666b244a 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx @@ -17,7 +17,7 @@ const TableAlignmentShiftData = (props) => { - {'Total'} + {'Total'} {'$12'}
@@ -44,8 +44,7 @@ const TableAlignmentShiftData = (props) => { - {'Cappuccino'} - + {'Cappuccino'} {'Steamed Milk'}
@@ -53,10 +52,10 @@ const TableAlignmentShiftData = (props) => { - + {'Macchiato'} - + {'Espresso'}
{'Steamed Milk'} diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb index 5286f6ef7f..b491969603 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb @@ -1,34 +1,53 @@ - <%= pb_rails("table") do %> +<%= pb_rails("table") do %> <%= pb_rails("table/table_head") do %> - <%= pb_rails("table/table_row") do %> - <%= pb_rails("table/table_header", props: { text: "Column 1"}) %> - <%= pb_rails("table/table_header", props: { text: "Column 2"}) %> - <%= pb_rails("table/table_header", props: { text: "Column 3"}) %> - <%= pb_rails("table/table_header", props: { text: "Column 4"}) %> - <%= pb_rails("table/table_header", props: { text: "Column 5"}) %> - <% end %> + <%= pb_rails("table/table_row") do %> + <%= pb_rails("table/table_header", props: { text: "Column 1" }) %> + <%= pb_rails("table/table_header", props: { text: "Column 2" }) %> + <%= pb_rails("table/table_header", props: { text: "Column 3" }) %> + <%= pb_rails("table/table_header", props: { text: "Column 4" }) %> + <%= pb_rails("table/table_header", props: { text: "Column 5" }) %> + <% end %> <% end %> <%= pb_rails("table/table_body") do %> - <%= pb_rails("table/table_row") do %> - <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %> - <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %> - <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %> - <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %> - <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %> + <%= pb_rails("table/table_row") do %> + <%= pb_rails("table/table_cell") do %> + Value 1a +
+ Value 1a +
+ Value 1a <% end %> - <%= pb_rails("table/table_row", props: { shift: "middle" }) do %> - <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %> - <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %> - <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %> - <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %> - <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %> + <%= pb_rails("table/table_cell", props: { text: "Value 2a" }) %> + <%= pb_rails("table/table_cell", props: { text: "Value 3a" }) %> + <%= pb_rails("table/table_cell", props: { text: "Value 4a" }) %> + <%= pb_rails("table/table_cell", props: { text: "Value 5a" }) %> + <% end %> + <%= pb_rails("table/table_row", props: { vertical_align: "middle" }) do %> + <%= pb_rails("table/table_cell") do %> + Value 1b +
+ Value 1b +
+ Value 1b <% end %> - <%= pb_rails("table/table_row", props: { shift: "down" }) do %> - <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %> - <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %> - <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %> - <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %> - <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %> + <%= pb_rails("table/table_cell", props: { text: "Value 2b" }) %> + <%= pb_rails("table/table_cell", props: { text: "Value 3b" }) %> + <%= pb_rails("table/table_cell", props: { text: "Value 4b" }) %> + <%= pb_rails("table/table_cell", props: { text: "Value 5b" }) %> + <% end %> + <%= pb_rails("table/table_row", props: { vertical_align: "bottom" }) do %> + <%= pb_rails("table/table_cell") do %> + Value 1c +
+ Value 1c +
+ Value 1c <% end %> + <%= pb_rails("table/table_cell", props: { text: "Value 2c" }) %> + <%= pb_rails("table/table_cell", props: { text: "Value 3c" }) %> + <%= pb_rails("table/table_cell", props: { text: "Value 4c" }) %> + <%= pb_rails("table/table_cell", props: { text: "Value 5c" }) %> + <% end %> <% end %> -<% end %> + <% end %> + \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx index df646ab2f0..2ae613176b 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx @@ -4,9 +4,7 @@ import Table from '../_table' const TableAlignmentShiftRow = (props) => { return ( - +
{'Column 1'} @@ -18,28 +16,47 @@ const TableAlignmentShiftRow = (props) => { - {'Value 1'} - {'Value 2'} - {'Value 3'} - {'Value 4'} - {'Value 5'} + + {'Value 1a'} +
+ {'Value 1a'} +
+ {'Value 1a'} + + {'Value 2a'} + {'Value 3a'} + {'Value 4a'} + {'Value 5a'} - - {'Value 1'} - {'Value 2'} - {'Value 3'} - {'Value 4'} - {'Value 5'} + + + {'Value 1b'} +
+ {'Value 1b'} +
+ {'Value 1b'} + + {'Value 2b'} + {'Value 3b'} + {'Value 4b'} + {'Value 5b'} - - {'Value 1'} - {'Value 2'} - {'Value 3'} - {'Value 4'} - {'Value 5'} + + + {'Value 1c'} +
+ {'Value 1c'} +
+ {'Value 1c'} + + {'Value 2c'} + {'Value 3c'} + {'Value 4c'} + {'Value 5c'}
+ ) } From 10253e56390b5e6039f907831e7fe3ae621bfcc7 Mon Sep 17 00:00:00 2001 From: nickamantia Date: Wed, 22 May 2024 14:07:26 -0400 Subject: [PATCH 04/18] code clean up --- .../app/pb_kits/playbook/pb_table/_table.scss | 40 ------------ .../docs/_table_alignment_column.html.erb | 64 +++++++++---------- .../pb_table/docs/_table_alignment_row.jsx | 2 +- ..._table_with_subcomponents_as_divs.html.erb | 2 +- .../pb_table/subcomponents/_table_cell.tsx | 5 +- .../pb_table/subcomponents/_table_header.tsx | 5 +- .../pb_table/subcomponents/_table_row.tsx | 7 -- 7 files changed, 36 insertions(+), 89 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_table/_table.scss b/playbook/app/pb_kits/playbook/pb_table/_table.scss index 9aef8fcb44..e64d7676ff 100755 --- a/playbook/app/pb_kits/playbook/pb_table/_table.scss +++ b/playbook/app/pb_kits/playbook/pb_table/_table.scss @@ -1,41 +1 @@ @import "styles/all"; - -[class^="pb_table"] { - .pb_table_tr.align_center > * { - text-align: center; - } - - .pb_table_tr.align_right { - text-align: right; - } - - .pb_table_td.align_center { - - } - - .pb_table_td.align_right { - - } - - .pb_table_th.align_center { - - } - - .pb_table_th.align_right { - - } - - .shift_middle { - - } - - .shift_down { - - } - - .shift_up { - - } - - -} diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb index 11cb03c32a..7d137b2f5d 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb @@ -1,34 +1,34 @@ <%= pb_rails("table") do %> - <%= pb_rails("table/table_head") do %> - <%= pb_rails("table/table_row") do %> - <%= pb_rails("table/table_header", props: { text: "Column 1" }) %> - <%= pb_rails("table/table_header", props: { text: "Column 2" }) %> - <%= pb_rails("table/table_header", props: { text: "Column 3" }) %> - <%= pb_rails("table/table_header", props: { text: "Rating" }) %> - <%= pb_rails("table/table_header", props: { text: "Money" }) %> - <% end %> - <% end %> - <%= pb_rails("table/table_body") do %> - <%= pb_rails("table/table_row") do %> - <%= pb_rails("table/table_cell", props: { text: "Value 1" }) %> - <%= pb_rails("table/table_cell", props: { text: "Value 2" }) %> - <%= pb_rails("table/table_cell", props: { text: "Value 3" }) %> - <%= pb_rails("table/table_cell", props: { text: "3", text_align: "center" }) %> - <%= pb_rails("table/table_cell", props: { text: "$57.32", text_align: "right" }) %> - <% end %> - <%= pb_rails("table/table_row") do %> - <%= pb_rails("table/table_cell", props: { text: "Value 1" }) %> - <%= pb_rails("table/table_cell", props: { text: "Value 2" }) %> - <%= pb_rails("table/table_cell", props: { text: "Value 3" }) %> - <%= pb_rails("table/table_cell", props: { text: "2", text_align: "center" }) %> - <%= pb_rails("table/table_cell", props: { text: "$5,657.08", text_align: "right" }) %> - <% end %> - <%= pb_rails("table/table_row") do %> - <%= pb_rails("table/table_cell", props: { text: "Value 1" }) %> - <%= pb_rails("table/table_cell", props: { text: "Value 2" }) %> - <%= pb_rails("table/table_cell", props: { text: "Value 3" }) %> - <%= pb_rails("table/table_cell", props: { text: "4", text_align: "center" }) %> - <%= pb_rails("table/table_cell", props: { text: "$358.77", text_align: "right" }) %> - <% end %> - <% end %> + + + Column 1 + Column 2 + Column 3 + Rating + Money + + + + + Value 1 + Value 2 + Value 3 + 3 + $57.32 + + + Value 1 + Value 2 + Value 3 + 2 + $5,657.08 + + + Value 1 + Value 2 + Value 3 + 4 + $358.77 + + <% end %> diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx index e4d99d2475..d6bbff8db2 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx @@ -32,7 +32,7 @@ const TableAlignmentRow = (props) => { {'Value 4'} {'Value 5'} - + {'Value 1'} {'Value 2'} {'Value 3'} diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb b/playbook/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb index b21d21e019..67bbe053ad 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb @@ -5,7 +5,7 @@ <%= pb_rails("table/table_header", props: { text: "Column 2", tag:"div"}) %> <%= pb_rails("table/table_header", props: { text: "Column 3", tag:"div"}) %> <%= pb_rails("table/table_header", props: { text: "Column 4", tag:"div"}) %> - <%= pb_rails("table/table_header", props: { text: "Column 5", tag:"div", text_align: "right"}) %> + <%= pb_rails("table/table_header", props: { text: "Column 5", tag:"div"}) %> <% end %> <% end %> <%= pb_rails("table/table_body", props: {tag:"div"}) do %> diff --git a/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx b/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx index e020124212..4d75ed8d15 100644 --- a/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx +++ b/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx @@ -8,7 +8,6 @@ import { import { globalProps } from "../../utilities/globalProps"; type TableCellPropTypes = { - align?: "center" | "right"; aria?: { [key: string]: string }; children: React.ReactNode[] | React.ReactNode; className: string; @@ -21,7 +20,6 @@ type TableCellPropTypes = { const TableCell = (props: TableCellPropTypes) => { const { - align, aria = {}, children, className, @@ -35,8 +33,7 @@ const TableCell = (props: TableCellPropTypes) => { const ariaProps = buildAriaProps(aria); const dataProps = buildDataProps(data); const htmlProps = buildHtmlProps(htmlOptions); - const alignProp = align ? `align_${align}` : null; - const classes = classnames("pb_table_td", alignProp, globalProps(props), className); + const classes = classnames("pb_table_td", globalProps(props), className); const isTableTag = tag === "table"; return ( diff --git a/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx b/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx index 962602b4c9..1d6609f0ea 100644 --- a/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx +++ b/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx @@ -8,7 +8,6 @@ import { import { globalProps } from "../../utilities/globalProps"; type TableHeaderPropTypes = { - align?: "center" | "right"; aria?: { [key: string]: string }; children: React.ReactNode[] | React.ReactNode; className: string; @@ -21,7 +20,6 @@ type TableHeaderPropTypes = { const TableHeader = (props: TableHeaderPropTypes) => { const { - align, aria = {}, children, className, @@ -35,8 +33,7 @@ const TableHeader = (props: TableHeaderPropTypes) => { const ariaProps = buildAriaProps(aria); const dataProps = buildDataProps(data); const htmlProps = buildHtmlProps(htmlOptions); - const alignProp = align ? `align_${align}` : null; - const classes = classnames("pb_table_th", alignProp, globalProps(props), className); + const classes = classnames("pb_table_th", globalProps(props), className); const isTableTag = tag === "table"; return ( diff --git a/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx b/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx index 46fb652083..9bdb2d797c 100644 --- a/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +++ b/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx @@ -9,7 +9,6 @@ import { import { globalProps } from "../../utilities/globalProps"; type TableRowPropTypes = { - align?: "center" | "right"; aria?: { [key: string]: string }; children: React.ReactNode[] | React.ReactNode; className: string; @@ -23,14 +22,12 @@ type TableRowPropTypes = { const TableRow = (props: TableRowPropTypes) => { const { - align, aria = {}, children, className, data = {}, htmlOptions = {}, id, - shift, sideHighlightColor = "none", tag = "table", } = props; @@ -38,15 +35,11 @@ const TableRow = (props: TableRowPropTypes) => { const ariaProps = buildAriaProps(aria); const dataProps = buildDataProps(data); const htmlProps = buildHtmlProps(htmlOptions); - const alignProp = align ? `align_${align}` : null; - const shiftProp = shift ? `shift_${shift}` : null; const sideHighlightClass = sideHighlightColor != "" ? `side_highlight_${sideHighlightColor}` : null; const classes = classnames( buildCss("pb_table_row_kit", sideHighlightClass), "pb_table_tr", - alignProp, - shiftProp, globalProps(props), className ); From 5ca12ae0cec42e0372e10df3a520688ef4e5865d Mon Sep 17 00:00:00 2001 From: nickamantia Date: Wed, 22 May 2024 14:49:36 -0400 Subject: [PATCH 05/18] additional clean up --- .../app/pb_kits/playbook/pb_table/_table.scss | 2 +- .../pb_table/docs/_table_alignment_column.jsx | 1 - .../docs/_table_alignment_row.html.erb | 4 +- .../pb_table/docs/_table_alignment_row.jsx | 1 - .../docs/_table_alignment_shift_data.html.erb | 2 +- .../docs/_table_alignment_shift_row.jsx | 102 +++++++++--------- .../playbook/utilities/_vertical_align.scss | 2 +- 7 files changed, 56 insertions(+), 58 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_table/_table.scss b/playbook/app/pb_kits/playbook/pb_table/_table.scss index e64d7676ff..39a0493374 100755 --- a/playbook/app/pb_kits/playbook/pb_table/_table.scss +++ b/playbook/app/pb_kits/playbook/pb_table/_table.scss @@ -1 +1 @@ -@import "styles/all"; +@import "styles/all"; \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx index b2b11247ab..aa7ec1f796 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx @@ -5,7 +5,6 @@ import Table from '../_table' const TableAlignmentColumn = (props) => { return ( diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.html.erb b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.html.erb index 6fdb901754..257d1578ff 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.html.erb +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.html.erb @@ -1,11 +1,11 @@ -<%= pb_rails("table", props: { size: "sm" }) do %> +<%= pb_rails("table") do %> <%= pb_rails("table/table_head") do %> <%= pb_rails("table/table_row") do %> <%= pb_rails("table/table_header", props: { text: "Column 1"}) %> <%= pb_rails("table/table_header", props: { text: "Column 2"}) %> <%= pb_rails("table/table_header", props: { text: "Column 3"}) %> <%= pb_rails("table/table_header", props: { text: "Column 4"}) %> - <%= pb_rails("table/table_header", props: { text: "Column 5"}) %> + <%= pb_rails("table/table_header", props: { text: "Column 5"}) %> <% end %> <% end %> <%= pb_rails("table/table_body") do %> diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx index d6bbff8db2..25c67ed134 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx @@ -5,7 +5,6 @@ import Table from '../_table' const TableAlignmentRow = (props) => { return (
diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb index 82105761fd..5b9adb73c3 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb @@ -1,4 +1,4 @@ -<%= pb_rails("table", props: { size: "sm" }) do %> +<%= pb_rails("table") do %> <%= pb_rails("table/table_head") do %> <%= pb_rails("table/table_row") do %> <%= pb_rails("table/table_header", props: { text: " " }) %> diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx index 2ae613176b..6e39758ffa 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx @@ -5,57 +5,57 @@ import Table from '../_table' const TableAlignmentShiftRow = (props) => { return (
- - - {'Column 1'} - {'Column 2'} - {'Column 3'} - {'Column 4'} - {'Column 5'} - - - - - - {'Value 1a'} -
- {'Value 1a'} -
- {'Value 1a'} - - {'Value 2a'} - {'Value 3a'} - {'Value 4a'} - {'Value 5a'} - - - - {'Value 1b'} -
- {'Value 1b'} -
- {'Value 1b'} - - {'Value 2b'} - {'Value 3b'} - {'Value 4b'} - {'Value 5b'} - - - - {'Value 1c'} -
- {'Value 1c'} -
- {'Value 1c'} - - {'Value 2c'} - {'Value 3c'} - {'Value 4c'} - {'Value 5c'} - - -
+ + + {'Column 1'} + {'Column 2'} + {'Column 3'} + {'Column 4'} + {'Column 5'} + + + + + + {'Value 1a'} +
+ {'Value 1a'} +
+ {'Value 1a'} + + {'Value 2a'} + {'Value 3a'} + {'Value 4a'} + {'Value 5a'} + + + + {'Value 1b'} +
+ {'Value 1b'} +
+ {'Value 1b'} + + {'Value 2b'} + {'Value 3b'} + {'Value 4b'} + {'Value 5b'} + + + + {'Value 1c'} +
+ {'Value 1c'} +
+ {'Value 1c'} + + {'Value 2c'} + {'Value 3c'} + {'Value 4c'} + {'Value 5c'} + + + ) } diff --git a/playbook/app/pb_kits/playbook/utilities/_vertical_align.scss b/playbook/app/pb_kits/playbook/utilities/_vertical_align.scss index 28bb59df31..615647c68d 100644 --- a/playbook/app/pb_kits/playbook/utilities/_vertical_align.scss +++ b/playbook/app/pb_kits/playbook/utilities/_vertical_align.scss @@ -13,4 +13,4 @@ $vertical_align_classes: ( ); -@include global_props_responsive_css($vertical_align, 'vertical_align', 'vertical-align'); \ No newline at end of file +@include global_props_responsive_css($vertical_align, 'vertical_align', 'vertical-align'); From 1713218e7a814a2994fe7845061cb57b94606ec5 Mon Sep 17 00:00:00 2001 From: nickamantia Date: Wed, 22 May 2024 14:53:07 -0400 Subject: [PATCH 06/18] removed old shift prop --- .../app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx b/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx index 9bdb2d797c..0869719dee 100644 --- a/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +++ b/playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx @@ -15,7 +15,6 @@ type TableRowPropTypes = { data?: { [key: string]: string }; htmlOptions?: { [key: string]: string | number | boolean | (() => void) }; id?: string; - shift?: "middle" | "down" | "up"; sideHighlightColor: string; tag?: "table" | "div"; }; From 57c6c54d0da8e75d1d78fadb8cc3779ba492c2ba Mon Sep 17 00:00:00 2001 From: nickamantia Date: Thu, 23 May 2024 11:11:45 -0400 Subject: [PATCH 07/18] fixing verticalAlign conflict --- playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx | 8 +++++++- .../pb_kits/playbook/pb_circle_chart/_circle_chart.tsx | 7 +++++-- .../app/pb_kits/playbook/pb_line_graph/_line_graph.tsx | 5 ++++- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx b/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx index b31e1e3aff..10427d816a 100644 --- a/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +++ b/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx @@ -159,10 +159,16 @@ if (Array.isArray(axisTitle) && axisTitle.length > 1 && axisTitle[1].name) { }); } + + + if (!toggleLegendClick) { staticOptions.plotOptions.series.events = { legendItemClick: () => false }; } + const filteredProps: any = {...props}; + delete filteredProps.verticalAlign; + const [options, setOptions] = useState({}); useEffect(() => { @@ -172,7 +178,7 @@ if (Array.isArray(axisTitle) && axisTitle.length > 1 && axisTitle[1].name) { return ( { @@ -181,7 +184,7 @@ const CircleChart = ({
false }; } + const filteredProps: any = {...props}; + delete filteredProps.verticalAlign; + const [options, setOptions] = useState({}); useEffect(() => { @@ -139,7 +142,7 @@ const LineGraph = ({ return ( Date: Thu, 23 May 2024 16:54:38 -0400 Subject: [PATCH 08/18] rails conflict --- .../pb_kits/playbook/pb_bar_graph/bar_graph.rb | 16 ++++++++++++++++ .../playbook/pb_circle_chart/circle_chart.rb | 16 ++++++++++++++++ .../pb_kits/playbook/pb_line_graph/line_graph.rb | 16 ++++++++++++++++ 3 files changed, 48 insertions(+) diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb b/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb index c7e0f4c7cd..d19d405a61 100644 --- a/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +++ b/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb @@ -74,6 +74,22 @@ def chart_options standard_options.deep_merge(custom_options) end + def vertical_align_props + if vertical_align + if object.vertical_align + original_result = super + class_to_remove = "vertical_align_#{object.vertical_align}" + + original_result.gsub!(class_to_remove, "") + original_result.strip + else + super + end + else + super + end + end + def classname generate_classname("pb_bar_graph") end diff --git a/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb b/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb index 67b02f10f2..fa43454555 100644 --- a/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +++ b/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb @@ -68,6 +68,22 @@ def chart_options } end + def vertical_align_props + if vertical_align + if object.vertical_align + original_result = super + class_to_remove = "vertical_align_#{object.vertical_align}" + + original_result.gsub!(class_to_remove, "") + original_result.strip + else + super + end + else + super + end + end + def classname generate_classname("pb_circle_chart") end diff --git a/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb b/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb index 1c8eb74caa..a0846a78e0 100644 --- a/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb +++ b/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb @@ -64,6 +64,22 @@ def chart_options } end + def vertical_align_props + if vertical_align + if object.vertical_align + original_result = super + class_to_remove = "vertical_align_#{object.vertical_align}" + + original_result.gsub!(class_to_remove, "") + original_result.strip + else + super + end + else + super + end + end + def classname generate_classname("pb_line_graph") end From 2a813b77dd11b4f08096d73215c147c6ae80d8de Mon Sep 17 00:00:00 2001 From: nickamantia Date: Fri, 24 May 2024 09:09:55 -0400 Subject: [PATCH 09/18] removes etra space on class --- playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb | 2 +- playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb | 2 +- playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb b/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb index d19d405a61..febdecbb41 100644 --- a/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +++ b/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb @@ -78,7 +78,7 @@ def vertical_align_props if vertical_align if object.vertical_align original_result = super - class_to_remove = "vertical_align_#{object.vertical_align}" + class_to_remove = " vertical_align_#{object.vertical_align}" original_result.gsub!(class_to_remove, "") original_result.strip diff --git a/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb b/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb index fa43454555..6d88ac245b 100644 --- a/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +++ b/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb @@ -72,7 +72,7 @@ def vertical_align_props if vertical_align if object.vertical_align original_result = super - class_to_remove = "vertical_align_#{object.vertical_align}" + class_to_remove = " vertical_align_#{object.vertical_align}" original_result.gsub!(class_to_remove, "") original_result.strip diff --git a/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb b/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb index a0846a78e0..5dfde0da3e 100644 --- a/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb +++ b/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb @@ -68,7 +68,7 @@ def vertical_align_props if vertical_align if object.vertical_align original_result = super - class_to_remove = "vertical_align_#{object.vertical_align}" + class_to_remove = " vertical_align_#{object.vertical_align}" original_result.gsub!(class_to_remove, "") original_result.strip From 8f3d28b5f195580535be4fb49dc72483f153ea62 Mon Sep 17 00:00:00 2001 From: nickamantia Date: Fri, 24 May 2024 09:35:05 -0400 Subject: [PATCH 10/18] fixing CI --- playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb | 2 +- playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb | 2 +- playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb b/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb index febdecbb41..d19d405a61 100644 --- a/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +++ b/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb @@ -78,7 +78,7 @@ def vertical_align_props if vertical_align if object.vertical_align original_result = super - class_to_remove = " vertical_align_#{object.vertical_align}" + class_to_remove = "vertical_align_#{object.vertical_align}" original_result.gsub!(class_to_remove, "") original_result.strip diff --git a/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb b/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb index 6d88ac245b..fa43454555 100644 --- a/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +++ b/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb @@ -72,7 +72,7 @@ def vertical_align_props if vertical_align if object.vertical_align original_result = super - class_to_remove = " vertical_align_#{object.vertical_align}" + class_to_remove = "vertical_align_#{object.vertical_align}" original_result.gsub!(class_to_remove, "") original_result.strip diff --git a/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb b/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb index 5dfde0da3e..a0846a78e0 100644 --- a/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb +++ b/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb @@ -68,7 +68,7 @@ def vertical_align_props if vertical_align if object.vertical_align original_result = super - class_to_remove = " vertical_align_#{object.vertical_align}" + class_to_remove = "vertical_align_#{object.vertical_align}" original_result.gsub!(class_to_remove, "") original_result.strip From edc83ffdfc4f97697b55aa39fbef13fab07ae32e Mon Sep 17 00:00:00 2001 From: nickamantia Date: Fri, 24 May 2024 09:52:29 -0400 Subject: [PATCH 11/18] added strip --- playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb | 7 +++---- .../app/pb_kits/playbook/pb_circle_chart/circle_chart.rb | 7 +++---- playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb | 7 +++---- 3 files changed, 9 insertions(+), 12 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb b/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb index d19d405a61..b64706c3d1 100644 --- a/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +++ b/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb @@ -80,13 +80,12 @@ def vertical_align_props original_result = super class_to_remove = "vertical_align_#{object.vertical_align}" - original_result.gsub!(class_to_remove, "") - original_result.strip + original_result.gsub!(class_to_remove, "").strip else - super + super.strip end else - super + super.strip end end diff --git a/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb b/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb index fa43454555..b58ffab93a 100644 --- a/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +++ b/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb @@ -74,13 +74,12 @@ def vertical_align_props original_result = super class_to_remove = "vertical_align_#{object.vertical_align}" - original_result.gsub!(class_to_remove, "") - original_result.strip + original_result.gsub!(class_to_remove, "").strip else - super + super.strip end else - super + super.strip end end diff --git a/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb b/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb index a0846a78e0..d80d3da5e4 100644 --- a/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb +++ b/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb @@ -70,13 +70,12 @@ def vertical_align_props original_result = super class_to_remove = "vertical_align_#{object.vertical_align}" - original_result.gsub!(class_to_remove, "") - original_result.strip + original_result.gsub!(class_to_remove, "").strip else - super + super.strip end else - super + super.strip end end From 9c10c76b666e3e67f115981650504d05ddb102e3 Mon Sep 17 00:00:00 2001 From: nickamantia Date: Fri, 24 May 2024 10:47:52 -0400 Subject: [PATCH 12/18] fixing rb file --- playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb | 4 ++-- playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb | 4 ++-- playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb b/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb index b64706c3d1..b8ba109702 100644 --- a/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +++ b/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb @@ -79,8 +79,8 @@ def vertical_align_props if object.vertical_align original_result = super class_to_remove = "vertical_align_#{object.vertical_align}" - - original_result.gsub!(class_to_remove, "").strip + original_result = original_result.gsub(/\b#{class_to_remove}\b\s*/, "") + original_result.strip else super.strip end diff --git a/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb b/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb index b58ffab93a..1002265cf3 100644 --- a/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +++ b/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb @@ -73,8 +73,8 @@ def vertical_align_props if object.vertical_align original_result = super class_to_remove = "vertical_align_#{object.vertical_align}" - - original_result.gsub!(class_to_remove, "").strip + original_result = original_result.gsub(/\b#{class_to_remove}\b\s*/, "") + original_result.strip else super.strip end diff --git a/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb b/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb index d80d3da5e4..6c61339ac0 100644 --- a/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb +++ b/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb @@ -69,8 +69,8 @@ def vertical_align_props if object.vertical_align original_result = super class_to_remove = "vertical_align_#{object.vertical_align}" - - original_result.gsub!(class_to_remove, "").strip + original_result = original_result.gsub(/\b#{class_to_remove}\b\s*/, "") + original_result.strip else super.strip end From 9d61466730d515996a0d267e9c7bf5a0f9e01ada Mon Sep 17 00:00:00 2001 From: nickamantia Date: Fri, 24 May 2024 11:32:10 -0400 Subject: [PATCH 13/18] another try --- playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb | 2 +- playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb | 2 +- playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb b/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb index b8ba109702..dde843b74c 100644 --- a/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +++ b/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb @@ -79,7 +79,7 @@ def vertical_align_props if object.vertical_align original_result = super class_to_remove = "vertical_align_#{object.vertical_align}" - original_result = original_result.gsub(/\b#{class_to_remove}\b\s*/, "") + original_result = original_result.gsub(/(\s*#{class_to_remove}\s*)/, " ").strip original_result.strip else super.strip diff --git a/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb b/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb index 1002265cf3..d2ec037fb8 100644 --- a/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +++ b/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb @@ -73,7 +73,7 @@ def vertical_align_props if object.vertical_align original_result = super class_to_remove = "vertical_align_#{object.vertical_align}" - original_result = original_result.gsub(/\b#{class_to_remove}\b\s*/, "") + original_result = original_result.gsub(/(\s*#{class_to_remove}\s*)/, " ").strip original_result.strip else super.strip diff --git a/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb b/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb index 6c61339ac0..83e78d623a 100644 --- a/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb +++ b/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb @@ -69,7 +69,7 @@ def vertical_align_props if object.vertical_align original_result = super class_to_remove = "vertical_align_#{object.vertical_align}" - original_result = original_result.gsub(/\b#{class_to_remove}\b\s*/, "") + original_result = original_result.gsub(/(\s*#{class_to_remove}\s*)/, " ").strip original_result.strip else super.strip From 8baadfcc5b230696c4e5d4a517874126d5cb1947 Mon Sep 17 00:00:00 2001 From: nickamantia Date: Fri, 24 May 2024 12:06:56 -0400 Subject: [PATCH 14/18] fix --- playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb | 9 +++++---- .../app/pb_kits/playbook/pb_circle_chart/circle_chart.rb | 9 +++++---- .../app/pb_kits/playbook/pb_line_graph/line_graph.rb | 9 +++++---- 3 files changed, 15 insertions(+), 12 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb b/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb index dde843b74c..c58eef4e3e 100644 --- a/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +++ b/playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb @@ -79,13 +79,14 @@ def vertical_align_props if object.vertical_align original_result = super class_to_remove = "vertical_align_#{object.vertical_align}" - original_result = original_result.gsub(/(\s*#{class_to_remove}\s*)/, " ").strip - original_result.strip + + modified_result = original_result.gsub(class_to_remove, "").strip + modified_result.empty? ? nil : modified_result else - super.strip + super end else - super.strip + super end end diff --git a/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb b/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb index d2ec037fb8..3949e1a977 100644 --- a/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +++ b/playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb @@ -73,13 +73,14 @@ def vertical_align_props if object.vertical_align original_result = super class_to_remove = "vertical_align_#{object.vertical_align}" - original_result = original_result.gsub(/(\s*#{class_to_remove}\s*)/, " ").strip - original_result.strip + + modified_result = original_result.gsub(class_to_remove, "").strip + modified_result.empty? ? nil : modified_result else - super.strip + super end else - super.strip + super end end diff --git a/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb b/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb index 83e78d623a..24a667b2aa 100644 --- a/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb +++ b/playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb @@ -69,13 +69,14 @@ def vertical_align_props if object.vertical_align original_result = super class_to_remove = "vertical_align_#{object.vertical_align}" - original_result = original_result.gsub(/(\s*#{class_to_remove}\s*)/, " ").strip - original_result.strip + + modified_result = original_result.gsub(class_to_remove, "").strip + modified_result.empty? ? nil : modified_result else - super.strip + super end else - super.strip + super end end From 4d35a5ec4180f880ee313c50bac3c2923e400012 Mon Sep 17 00:00:00 2001 From: nickamantia Date: Fri, 24 May 2024 13:03:42 -0400 Subject: [PATCH 15/18] cleanup --- playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx b/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx index 10427d816a..ed623cfef6 100644 --- a/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +++ b/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx @@ -159,9 +159,6 @@ if (Array.isArray(axisTitle) && axisTitle.length > 1 && axisTitle[1].name) { }); } - - - if (!toggleLegendClick) { staticOptions.plotOptions.series.events = { legendItemClick: () => false }; } From 36a525a22e2a8096ea6b86ee637c684f36f66c13 Mon Sep 17 00:00:00 2001 From: nickamantia Date: Wed, 29 May 2024 10:28:09 -0400 Subject: [PATCH 16/18] updated docs --- .../playbook/pb_table/docs/_table_alignment_column.md | 2 +- .../playbook/pb_table/docs/_table_alignment_row.md | 2 +- .../pb_table/docs/_table_alignment_shift_data.md | 2 +- .../pb_table/docs/_table_alignment_shift_row.md | 1 + .../app/pb_kits/playbook/pb_table/docs/example.yml | 10 +++++----- 5 files changed, 9 insertions(+), 8 deletions(-) create mode 100644 playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.md diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md index e6035db0eb..071d4e82c5 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md @@ -1,2 +1,2 @@ -You can individually align a piece of table data, but a more practical use would be applied to align a column. +Pass our `textAlign` / `text_align` global prop to any `table.cell` / `table/table_cell` subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns. In the table above the "Rating" column contents is centered and the "Money" column contents is right aligned. diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.md b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.md index 61a68ee5b9..fe97a6e063 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.md +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.md @@ -1,2 +1,2 @@ -This is to be used to shift the whole row. +Pass our `textAlign` / `text_align` global prop to any `table.row` / `table/table_row` subcomponent to change the text alignment of all cells within that row. The header/ first row is the default, followed by the second row being centered, and then the last row shifted to the right. diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md index 7761034428..1be0fbc0e3 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md @@ -1,2 +1,2 @@ -You can individually shift a piece of table data, or shift an entire column. +Pass our `verticalAlign` / `vertical_align` global prop to any `table.cell` / `table/table_cell` subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns. The first table shifts "Total" down, whereas the second table shifts the "Espresso Drinks" column contents up. diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.md b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.md new file mode 100644 index 0000000000..e983f4911a --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.md @@ -0,0 +1 @@ +Pass our `verticalAlign` / `vertical_align` global prop to any `table.row` / `table/table_row` subcomponent to change the vertical alignment of all cells within that row. \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/example.yml b/playbook/app/pb_kits/playbook/pb_table/docs/example.yml index 90e21fd884..49d4951642 100755 --- a/playbook/app/pb_kits/playbook/pb_table/docs/example.yml +++ b/playbook/app/pb_kits/playbook/pb_table/docs/example.yml @@ -7,8 +7,8 @@ examples: - table_header: Table Header - table_alignment_row: Row Alignment - table_alignment_column: Column Alignment - - table_alignment_shift_row: Shift Row - - table_alignment_shift_data: Shift Column Data + - table_alignment_shift_row: Row Shift + - table_alignment_shift_data: Cell Shift - table_side_highlight: Side Highlight - table_container: Table Container Off - table_disable_hover: Disable Hover @@ -34,9 +34,9 @@ examples: - table_lg: Large - table_sticky: Sticky Header - table_alignment_row: Row Alignment - - table_alignment_column: Column Alignment - - table_alignment_shift_row: Shift Row - - table_alignment_shift_data: Shift Column Data + - table_alignment_column: Cell Alignment + - table_alignment_shift_row: Row Shift + - table_alignment_shift_data: Cell Shift - table_side_highlight: Side Highlight - table_container: Table Container Off - table_disable_hover: Disable Hover From 143893b7303483de46f317b657403d1bbe24a883 Mon Sep 17 00:00:00 2001 From: nickamantia Date: Wed, 29 May 2024 10:30:22 -0400 Subject: [PATCH 17/18] updated example file --- playbook/app/pb_kits/playbook/pb_table/docs/example.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/example.yml b/playbook/app/pb_kits/playbook/pb_table/docs/example.yml index 49d4951642..c473ce0205 100755 --- a/playbook/app/pb_kits/playbook/pb_table/docs/example.yml +++ b/playbook/app/pb_kits/playbook/pb_table/docs/example.yml @@ -6,7 +6,7 @@ examples: - table_sticky: Sticky Header - table_header: Table Header - table_alignment_row: Row Alignment - - table_alignment_column: Column Alignment + - table_alignment_column: Cell Alignment - table_alignment_shift_row: Row Shift - table_alignment_shift_data: Cell Shift - table_side_highlight: Side Highlight From ee3b231ca156d89d5ecce5d56db71a11c10dea9c Mon Sep 17 00:00:00 2001 From: nickamantia Date: Thu, 30 May 2024 17:00:01 -0400 Subject: [PATCH 18/18] updated docs --- .../playbook/pb_table/docs/_table_alignment_column.md | 2 +- ...mn.html.erb => _table_alignment_column_rails.html.erb} | 0 .../pb_table/docs/_table_alignment_column_rails.md | 2 ++ .../playbook/pb_table/docs/_table_alignment_row.md | 2 +- ...t_row.html.erb => _table_alignment_row_rails.html.erb} | 0 .../playbook/pb_table/docs/_table_alignment_row_rails.md | 2 ++ .../playbook/pb_table/docs/_table_alignment_shift_data.md | 2 +- ...tml.erb => _table_alignment_shift_data_rails.html.erb} | 0 .../pb_table/docs/_table_alignment_shift_data_rails.md | 2 ++ .../playbook/pb_table/docs/_table_alignment_shift_row.md | 2 +- ...html.erb => _table_alignment_shift_row_rails.html.erb} | 0 .../pb_table/docs/_table_alignment_shift_row_rails.md | 1 + playbook/app/pb_kits/playbook/pb_table/docs/example.yml | 8 ++++---- 13 files changed, 15 insertions(+), 8 deletions(-) rename playbook/app/pb_kits/playbook/pb_table/docs/{_table_alignment_column.html.erb => _table_alignment_column_rails.html.erb} (100%) create mode 100644 playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.md rename playbook/app/pb_kits/playbook/pb_table/docs/{_table_alignment_row.html.erb => _table_alignment_row_rails.html.erb} (100%) create mode 100644 playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.md rename playbook/app/pb_kits/playbook/pb_table/docs/{_table_alignment_shift_data.html.erb => _table_alignment_shift_data_rails.html.erb} (100%) create mode 100644 playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.md rename playbook/app/pb_kits/playbook/pb_table/docs/{_table_alignment_shift_row.html.erb => _table_alignment_shift_row_rails.html.erb} (100%) create mode 100644 playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.md diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md index 071d4e82c5..2b3cac79c9 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md @@ -1,2 +1,2 @@ -Pass our `textAlign` / `text_align` global prop to any `table.cell` / `table/table_cell` subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns. +Pass our `textAlign` global prop to any `table.cell` subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns. In the table above the "Rating" column contents is centered and the "Money" column contents is right aligned. diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.html.erb similarity index 100% rename from playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb rename to playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.html.erb diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.md b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.md new file mode 100644 index 0000000000..39eda93336 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.md @@ -0,0 +1,2 @@ +Pass our `text_align` global prop to any `table/table_cell` subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns. +In the table above the "Rating" column contents is centered and the "Money" column contents is right aligned. diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.md b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.md index fe97a6e063..f263627474 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.md +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.md @@ -1,2 +1,2 @@ -Pass our `textAlign` / `text_align` global prop to any `table.row` / `table/table_row` subcomponent to change the text alignment of all cells within that row. +Pass our `textAlign` global prop to any `table.row` subcomponent to change the text alignment of all cells within that row. The header/ first row is the default, followed by the second row being centered, and then the last row shifted to the right. diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.html.erb b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.html.erb similarity index 100% rename from playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.html.erb rename to playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.html.erb diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.md b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.md new file mode 100644 index 0000000000..4b1ff65d2f --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.md @@ -0,0 +1,2 @@ +Pass our `text_align` global prop to any `table/table_row` subcomponent to change the text alignment of all cells within that row. +The header/ first row is the default, followed by the second row being centered, and then the last row shifted to the right. diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md index 1be0fbc0e3..785c5c5147 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md @@ -1,2 +1,2 @@ -Pass our `verticalAlign` / `vertical_align` global prop to any `table.cell` / `table/table_cell` subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns. +Pass our `verticalAlign` global prop to any `table.cell` subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns. The first table shifts "Total" down, whereas the second table shifts the "Espresso Drinks" column contents up. diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.html.erb similarity index 100% rename from playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb rename to playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.html.erb diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.md b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.md new file mode 100644 index 0000000000..ba824a67f8 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.md @@ -0,0 +1,2 @@ +Pass our `vertical_align` global prop to any `table/table_cell` subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns. +The first table shifts "Total" down, whereas the second table shifts the "Espresso Drinks" column contents up. diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.md b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.md index e983f4911a..0beb554e63 100644 --- a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.md +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.md @@ -1 +1 @@ -Pass our `verticalAlign` / `vertical_align` global prop to any `table.row` / `table/table_row` subcomponent to change the vertical alignment of all cells within that row. \ No newline at end of file +Pass our `verticalAlign` global prop to any `table.row` subcomponent to change the vertical alignment of all cells within that row. \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.html.erb similarity index 100% rename from playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb rename to playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.html.erb diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.md b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.md new file mode 100644 index 0000000000..e421dc295f --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.md @@ -0,0 +1 @@ +Pass our `vertical_align` global prop to any `table/table_row` subcomponent to change the vertical alignment of all cells within that row. \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_table/docs/example.yml b/playbook/app/pb_kits/playbook/pb_table/docs/example.yml index c473ce0205..0c60f4b885 100755 --- a/playbook/app/pb_kits/playbook/pb_table/docs/example.yml +++ b/playbook/app/pb_kits/playbook/pb_table/docs/example.yml @@ -5,10 +5,10 @@ examples: - table_lg: Large - table_sticky: Sticky Header - table_header: Table Header - - table_alignment_row: Row Alignment - - table_alignment_column: Cell Alignment - - table_alignment_shift_row: Row Shift - - table_alignment_shift_data: Cell Shift + - table_alignment_row_rails: Row Alignment + - table_alignment_column_rails: Cell Alignment + - table_alignment_shift_row_rails: Row Shift + - table_alignment_shift_data_rails: Cell Shift - table_side_highlight: Side Highlight - table_container: Table Container Off - table_disable_hover: Disable Hover