Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[PBNTR-288] Table kit subcomponent alignment + shift #3426

Merged
merged 19 commits into from
May 31, 2024
Merged

[PBNTR-288] Table kit subcomponent alignment + shift #3426

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
34c8628
converted docs
nickamantia May 17, 2024
6043606
added vertical align global prop
nickamantia May 22, 2024
b46ef86
upadted docs
nickamantia May 22, 2024
10253e5
code clean up
nickamantia May 22, 2024
5ca12ae
additional clean up
nickamantia May 22, 2024
1713218
removed old shift prop
nickamantia May 22, 2024
57c6c54
fixing verticalAlign conflict
nickamantia May 23, 2024
73e8310
rails conflict
nickamantia May 23, 2024
2a813b7
removes etra space on class
nickamantia May 24, 2024
8f3d28b
fixing CI
nickamantia May 24, 2024
edc83ff
added strip
nickamantia May 24, 2024
9c10c76
fixing rb file
nickamantia May 24, 2024
9d61466
another try
nickamantia May 24, 2024
8baadfc
fix
nickamantia May 24, 2024
4d35a5e
cleanup
nickamantia May 24, 2024
36a525a
updated docs
nickamantia May 29, 2024
143893b
updated example file
nickamantia May 29, 2024
4974cae
Merge branch 'master' into pbntr-288-table-kit-subcomponenet-alignmen…
nickamantia May 29, 2024
ee3b231
updated docs
nickamantia May 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions playbook/app/pb_kits/playbook/_playbook.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,3 +121,4 @@
@import './utilities/text_align';
@import './utilities/overflow';
@import './utilities/truncate';
@import './utilities/vertical_align';
5 changes: 4 additions & 1 deletion playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,9 @@ if (Array.isArray(axisTitle) && axisTitle.length > 1 && axisTitle[1].name) {
staticOptions.plotOptions.series.events = { legendItemClick: () => false };
}

const filteredProps: any = {...props};
delete filteredProps.verticalAlign;

const [options, setOptions] = useState({});

useEffect(() => {
Expand All @@ -172,7 +175,7 @@ if (Array.isArray(axisTitle) && axisTitle.length > 1 && axisTitle[1].name) {
return (
<HighchartsReact
containerProps={{
className: classnames(globalProps(props), className),
className: classnames(globalProps(filteredProps), className),
id: id,
...ariaProps,
...dataProps,
Expand Down
16 changes: 16 additions & 0 deletions playbook/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}"

modified_result = original_result.gsub(class_to_remove, "").strip
modified_result.empty? ? nil : modified_result
else
super
end
else
super
end
end

def classname
generate_classname("pb_bar_graph")
end
Expand Down
7 changes: 5 additions & 2 deletions playbook/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,9 @@ const CircleChart = ({
innerSizes[size];


const filteredProps: any = {...props};
delete filteredProps.verticalAlign;

const [options, setOptions] = useState({});

useEffect(() => {
Expand Down Expand Up @@ -181,7 +184,7 @@ const CircleChart = ({
<div id={`wrapper-circle-chart-${id}`}>
<HighchartsReact
containerProps={{
className: classnames("pb_circle_chart", globalProps(props)),
className: classnames("pb_circle_chart", globalProps(filteredProps)),
id: id,
...ariaProps,
...dataProps,
Expand All @@ -195,7 +198,7 @@ const CircleChart = ({
) : (
<HighchartsReact
containerProps={{
className: classnames("pb_circle_chart", globalProps(props)),
className: classnames("pb_circle_chart", globalProps(filteredProps)),
id: id,
...ariaProps,
...dataProps,
Expand Down
16 changes: 16 additions & 0 deletions playbook/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}"

modified_result = original_result.gsub(class_to_remove, "").strip
modified_result.empty? ? nil : modified_result
else
super
end
else
super
end
end

def classname
generate_classname("pb_circle_chart")
end
Expand Down
5 changes: 4 additions & 1 deletion playbook/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,9 @@ const LineGraph = ({
staticOptions.plotOptions.series.events = { legendItemClick: () => false };
}

const filteredProps: any = {...props};
delete filteredProps.verticalAlign;

const [options, setOptions] = useState({});

useEffect(() => {
Expand All @@ -139,7 +142,7 @@ const LineGraph = ({
return (
<HighchartsReact
containerProps={{
className: classnames(globalProps(props), className),
className: classnames(globalProps(filteredProps), className),
id: id,
...ariaProps,
...dataProps,
Expand Down
16 changes: 16 additions & 0 deletions playbook/app/pb_kits/playbook/pb_line_graph/line_graph.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}"

modified_result = original_result.gsub(class_to_remove, "").strip
modified_result.empty? ? nil : modified_result
else
super
end
else
super
end
end

def classname
generate_classname("pb_line_graph")
end
Expand Down
65 changes: 33 additions & 32 deletions playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,39 +7,40 @@ const TableAlignmentColumn = (props) => {
<Table
{...props}
>
<thead>
<tr>
<th>{'Column 1'}</th>
<th>{'Column 2'}</th>
<th>{'Column 3'}</th>
<th align="center">{'Rating'}</th>
<th align="right">{'Money'}</th>
</tr>
</thead>
<tbody>
<tr>
<td>{'Value 1'}</td>
<td>{'Value 2'}</td>
<td>{'Value 3'}</td>
<td align="center">{'3'}</td>
<td align="right">{'$57.32'}</td>
</tr>
<tr>
<td>{'Value 1'}</td>
<td>{'Value 2'}</td>
<td>{'Value 3'}</td>
<td align="center">{'2'}</td>
<td align="right">{'$5,657.08'}</td>
</tr>
<tr>
<td>{'Value 1'}</td>
<td>{'Value 2'}</td>
<td>{'Value 3'}</td>
<td align="center">{'4'}</td>
<td align="right">{'$358.77'}</td>
</tr>
</tbody>
<Table.Head>
<Table.Row>
<Table.Header>{'Column 1'}</Table.Header>
<Table.Header>{'Column 2'}</Table.Header>
<Table.Header>{'Column 3'}</Table.Header>
<Table.Header textAlign="center">{'Rating'}</Table.Header>
<Table.Header textAlign="right">{'Money'}</Table.Header>
</Table.Row>
</Table.Head>
<Table.Body>
<Table.Row>
<Table.Cell>{'Value 1'}</Table.Cell>
<Table.Cell>{'Value 2'}</Table.Cell>
<Table.Cell>{'Value 3'}</Table.Cell>
<Table.Cell textAlign="center">{'3'}</Table.Cell>
<Table.Cell textAlign="right">{'$57.32'}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>{'Value 1'}</Table.Cell>
<Table.Cell>{'Value 2'}</Table.Cell>
<Table.Cell>{'Value 3'}</Table.Cell>
<Table.Cell textAlign="center">{'2'}</Table.Cell>
<Table.Cell textAlign="right">{'$5,657.08'}</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>{'Value 1'}</Table.Cell>
<Table.Cell>{'Value 2'}</Table.Cell>
<Table.Cell>{'Value 3'}</Table.Cell>
<Table.Cell textAlign="center">{'4'}</Table.Cell>
<Table.Cell textAlign="right">{'$358.77'}</Table.Cell>
</Table.Row>
</Table.Body>
</Table>

)
}

Expand Down
2 changes: 1 addition & 1 deletion playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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` 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.
0 ...ble/docs/_table_alignment_column.html.erb → ...cs/_table_alignment_column_rails.html.erb
View file
Open in desktop
File renamed without changes.
2 changes: 2 additions & 0 deletions playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
34 changes: 0 additions & 34 deletions playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.html.erb
View file
Open in desktop

This file was deleted.

66 changes: 33 additions & 33 deletions playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,39 +7,39 @@ const TableAlignmentRow = (props) => {
<Table
{...props}
>
<thead>
<tr>
<th>{'Column 1'}</th>
<th>{'Column 2'}</th>
<th>{'Column 3'}</th>
<th>{'Column 4'}</th>
<th>{'Column 5'}</th>
</tr>
</thead>
<tbody>
<tr>
<td>{'Value 1'}</td>
<td>{'Value 2'}</td>
<td>{'Value 3'}</td>
<td>{'Value 4'}</td>
<td>{'Value 5'}</td>
</tr>
<tr align="center">
<td>{'Value 1'}</td>
<td>{'Value 2'}</td>
<td>{'Value 3'}</td>
<td>{'Value 4'}</td>
<td>{'Value 5'}</td>
</tr>
<tr align="right">
<td>{'Value 1'}</td>
<td>{'Value 2'}</td>
<td>{'Value 3'}</td>
<td>{'Value 4'}</td>
<td>{'Value 5'}</td>
</tr>
</tbody>
</Table>
<Table.Head>
<Table.Row>
<Table.Header>{'Column 1'}</Table.Header>
<Table.Header>{'Column 2'}</Table.Header>
<Table.Header>{'Column 3'}</Table.Header>
<Table.Header>{'Column 4'}</Table.Header>
<Table.Header>{'Column 5'}</Table.Header>
</Table.Row>
</Table.Head>
<Table.Body>
<Table.Row>
<Table.Cell>{'Value 1'}</Table.Cell>
<Table.Cell>{'Value 2'}</Table.Cell>
<Table.Cell>{'Value 3'}</Table.Cell>
<Table.Cell>{'Value 4'}</Table.Cell>
<Table.Cell>{'Value 5'}</Table.Cell>
</Table.Row>
<Table.Row textAlign="center">
<Table.Cell>{'Value 1'}</Table.Cell>
<Table.Cell>{'Value 2'}</Table.Cell>
<Table.Cell>{'Value 3'}</Table.Cell>
<Table.Cell>{'Value 4'}</Table.Cell>
<Table.Cell>{'Value 5'}</Table.Cell>
</Table.Row>
<Table.Row textAlign="right">
<Table.Cell>{'Value 1'}</Table.Cell>
<Table.Cell>{'Value 2'}</Table.Cell>
<Table.Cell>{'Value 3'}</Table.Cell>
<Table.Cell>{'Value 4'}</Table.Cell>
<Table.Cell>{'Value 5'}</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
)
}

Expand Down
2 changes: 1 addition & 1 deletion playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
This is to be used to shift the whole 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.
34 changes: 34 additions & 0 deletions playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +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: "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: { 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: { 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"}) %>
<%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
<%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
<% end %>
<% end %>
<% end %>
2 changes: 2 additions & 0 deletions playbook/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
Loading
Loading