playbook_ui_docs 13.28.0.pre.alpha.pbntr312tableheaderflexremoval3019 → 13.28.0.pre.alpha.play829selectablecardalignment2978

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 13.28.0.pre.alpha.pbntr312tableheaderflexremoval3019
+  version: 13.28.0.pre.alpha.play829selectablecardalignment2978
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-06-04 00:00:00.000000000 Z
+date: 2024-05-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -625,11 +625,6 @@ files:
 - app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_default.jsx
 - app/pb_kits/playbook/pb_distribution_bar/docs/example.yml
 - app/pb_kits/playbook/pb_distribution_bar/docs/index.js
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx
-- app/pb_kits/playbook/pb_draggable/docs/example.yml
-- app/pb_kits/playbook/pb_draggable/docs/index.js
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
@@ -1526,22 +1521,17 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_action_middle.md
+- app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.md
+- app/pb_kits/playbook/pb_table/docs/_table_alignment_row.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_alignment_row.md
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.md
+- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.md
+- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.md
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.md
 - app/pb_kits/playbook/pb_table/docs/_table_container.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_container.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_data_table.html.erb
@@ -1567,9 +1557,6 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_one_action.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_one_action.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_one_action.md
-- app/pb_kits/playbook/pb_table/docs/_table_outer_padding.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_outer_padding.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_outer_padding.md
 - app/pb_kits/playbook/pb_table/docs/_table_responsive_table.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_responsive_table.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_side_highlight.html.erb

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx

@@ -1,53 +0,0 @@
-import React, { useState } from "react";
-import { SelectableList, Draggable, DraggableProvider } from "../../";
-
-// Initial items to be dragged
-const data = [
-  {
-    id: "1",
-    text: "Task 1",
-  },
-  {
-    id: "2",
-    text: "Task 2",
-  },
-  {
-    id: "3",
-    text: "Task 3",
-  },
-  {
-    id: "4",
-    text: "Task 4",
-  },
-];
-
-const DraggableDefault = (props) => {
-  const [initialState, setInitialState] = useState(data);
-
-  return (
-    <DraggableProvider initialItems={data}
-        onChange={(items) => setInitialState(items)}
-    >
-      <Draggable
-          {...props}
-      >
-        <Draggable.Container>
-          <SelectableList variant="checkbox">
-            {initialState.map(({ id, text }) => (
-              <Draggable.Item id={id} 
-                  key={id}
-              >
-                <SelectableList.Item label={text} 
-                    name={id} 
-                    value={id} 
-                />
-              </Draggable.Item>
-            ))}
-          </SelectableList>
-        </Draggable.Container>
-      </Draggable>
-    </DraggableProvider>
-  );
-};
-
-export default DraggableDefault;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx

@@ -1,159 +0,0 @@
-import React, { useState } from "react";
-import {
-  Flex,
-  Caption,
-  Card,
-  FlexItem,
-  Badge,
-  Avatar,
-  Title,
-  Body,
-  Draggable,
-  DraggableProvider,
-} from "../../";
-
-// Initial groups to drag between
-const containers = ["To Do", "In Progress", "Done"];
-
-// Initial items to be dragged
-const data = [
-  {
-    id: "1",
-    container: "To Do",
-    title: "Task 1",
-    description: "Bug fixes",
-    assignee_name: "Terry Miles",
-    assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
-  },
-  {
-    id: "2",
-    container: "To Do",
-    title: "Task 2",
-    description: "Documentation",
-    assignee_name: "Sophia Miles",
-    assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
-  },
-  {
-    id: "3",
-    container: "In Progress",
-    title: "Task 3",
-    description: "Add a variant",
-    assignee_name: "Alice Jones",
-    assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
-  },
-  {
-    id: "4",
-    container: "To Do",
-    title: "Task 4",
-    description: "Add jest tests",
-    assignee_name: "Mike James",
-    assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
-  },
-  {
-    id: "5",
-    container: "Done",
-    title: "Task 5",
-    description: "Alpha testing",
-    assignee_name: "James Guy",
-    assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
-  },
-  {
-    id: "6",
-    container: "In Progress",
-    title: "Task 6",
-    description: "Release",
-    assignee_name: "Sally Jones",
-    assignee_img: "https://randomuser.me/api/portraits/women/28.jpg",
-  },
-];
-
-const DraggableMultipleContainer = (props) => {
-  const [initialState, setInitialState] = useState(data);
-
-  const badgeProperties = (container) => {
-    switch (container) {
-      case "To Do":
-        return { text: "queue", color: "warning" };
-      case "In Progress":
-        return { text: "progress", color: "primary" };
-      default:
-        return { text: "done", color: "success" };
-    }
-  };
-
-  return (
-    <DraggableProvider initialItems={data}
-        onChange={(items) => setInitialState(items)}
-    >
-      <Draggable
-          display="flex"
-          justifyContent="center"
-          {...props}
-      >
-          {containers?.map((container) => (
-            <Draggable.Container 
-                container={container}
-                key={container} 
-                padding="sm"
-            >
-                <Caption textAlign="center">{container}</Caption>
-                <Flex 
-                    alignItems="stretch"
-                    orientation="column" 
-                >
-                  {initialState
-                    .filter((item) => item.container === container)
-                    .map(
-                      ({
-                        assignee_img,
-                        assignee_name,
-                        description,
-                        id,
-                        title,
-                      }) => (
-                        <Draggable.Item 
-                            container={container}
-                            id={id} 
-                            key={id}
-                        >
-                          <Card
-                              marginBottom="sm"
-                              padding="sm"
-                          >
-                            <Flex justify="between">
-                              <FlexItem>
-                                <Flex>
-                                  <Avatar
-                                      imageUrl={assignee_img}
-                                      name={assignee_name}
-                                      size="xxs"
-                                  />
-                                  <Title paddingLeft="xs" 
-                                      size={4}
-                                      text={title}
-                                  />
-                                </Flex>
-                              </FlexItem>
-                              <Badge
-                                  marginLeft="sm"
-                                  rounded
-                                  text={badgeProperties(container).text}
-                                  variant={badgeProperties(container).color}
-                              />
-                            </Flex>
-                            <Body paddingTop="xs"
-                                text={description} 
-                            />
-                          </Card>
-                        </Draggable.Item>
-                      )
-                    )}
-                </Flex>
-            </Draggable.Container>
-          ))}
-      </Draggable>
-    </DraggableProvider>
-  );
-};
-
-export default DraggableMultipleContainer;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx

@@ -1,121 +0,0 @@
-import React, { useState } from "react";
-import {
-  Flex,
-  Badge,
-  Title,
-  Icon,
-  Draggable,
-  DraggableProvider,
-  Card,
-  Caption,
-} from "../../";
-
-// Initial items to be dragged
-const data = [
-  {
-    id: "1",
-    text: "Joe Black",
-  },
-  {
-    id: "2",
-    text: "Nancy White",
-  },
-  {
-    id: "3",
-    text: "Bill Green",
-  },
-];
-
-const DraggableWithCards = (props) => {
-  const [initialState, setInitialState] = useState(data);
-
-  return (
-    <DraggableProvider
-        initialItems={data}
-        onChange={(items) => setInitialState(items)}
-    >
-      <Draggable {...props}>
-        <Draggable.Container>
-          {initialState.map(({ id, text }) => (
-            <Draggable.Item id={id} 
-                key={id}
-			>
-              <Card
-                  highlight={{ position: "side", color: "primary" }}
-                  marginBottom="xs"
-              >
-                <Flex alignItems="stretch" 
-                    flexDirection="column"
-				>
-                  <Flex gap="xs">
-                    <Title size={4} 
-                        text={text} 
-					/>
-                    <Badge 
-                        text="35-12345" 
-                        variant="primary" 
-					/>
-                  </Flex>
-
-                  <Flex 
-                      gap="sm" 
-                      spacing="between"
-                  >
-                    <Caption 
-                        size="xs" 
-                        text="8:00A" 
-					/>
-                    <Flex gap="xxs">
-                      <Caption 
-                          size="xs" 
-                          text="Township Name" 
-                      />
-                      <Caption size="xs" 
-                          text="•" 
-                      />
-                      <Caption size="xs" 
-                          text="90210" 
-                      />
-                    </Flex>
-                  </Flex>
-
-                  <Flex gap="xxs" 
-                      spacing="between"
-                  >
-                    <Flex gap="xxs">
-                      <Caption color="error" 
-                          size="xs"
-                      >
-                        <Icon icon="house-circle-exclamation" />
-                      </Caption>
-                      <Caption color="success" 
-                          size="xs">
-                        <Icon icon="file-circle-check" />
-                      </Caption>
-                    </Flex>
-                    <Flex>
-                      <Badge rounded 
-                          text="Schedule QA" 
-                          variant="warning" 
-                       />
-                      <Badge rounded 
-                          text="Flex" 
-                          variant="primary" 
-                      />
-                      <Badge rounded 
-                          text="R99" 
-                          variant="primary" 
-                      />
-                    </Flex>
-                  </Flex>
-                </Flex>
-              </Card>
-            </Draggable.Item>
-          ))}
-        </Draggable.Container>
-      </Draggable>
-    </DraggableProvider>
-  );
-};
-
-export default DraggableWithCards;

data/app/pb_kits/playbook/pb_draggable/docs/example.yml

@@ -1,9 +0,0 @@
-examples:
-  
-  
-  react:
-  - draggable_default: Default
-  - draggable_with_cards: Draggable with Cards
-  - draggable_multiple_containers: Dragging Across Multiple Containers
-  
-  

data/app/pb_kits/playbook/pb_draggable/docs/index.js

@@ -1,3 +0,0 @@
-export { default as DraggableDefault } from './_draggable_default.jsx'
-export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
-export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.html.erb

@@ -1,33 +0,0 @@
-<%= 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" }) %>
-          <%= pb_rails("table/table_header", props: { text: "Money", text_align: "right" }) %>
-       <% 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 %>
-<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.md

@@ -1,2 +0,0 @@
-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.

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.html.erb

@@ -1,34 +0,0 @@
-<%= 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 %>

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.md

@@ -1,2 +0,0 @@
-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.

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.html.erb

@@ -1,54 +0,0 @@
-<%= pb_rails("table") do %>
-  <%= pb_rails("table/table_head") do %>
-    <%= pb_rails("table/table_row") do %>
-      <%= pb_rails("table/table_header", props: { text: "&nbsp;" }) %>
-      <%= 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", vertical_align: "bottom" }) %>
-      <%= pb_rails("table/table_cell") do %>
-        $12<br/>
-        $46<br/>
-        $25<br/>
-        -------<br/>
-        $83
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>
-<br/>
-<%= 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", vertical_align: "top" }) %>
-      <%= pb_rails("table/table_cell") do %>
-        Espresso<br/>
-        Steamed Milk<br/>
-        Milk Foam
-      <% end %>
-    <% end %>
-    <%= pb_rails("table/table_row") do %>
-      <%= pb_rails("table/table_cell", props: { text: "Macchiato", vertical_align: "top" }) %>
-      <%= pb_rails("table/table_cell") do %>
-        Espresso<br/>
-        Steamed Milk
-      <% end %>
-    <% end %>
-    <%= pb_rails("table/table_row") do %>
-      <%= pb_rails("table/table_cell", props: { text: "Mocha", vertical_align: "top" }) %>
-      <%= pb_rails("table/table_cell") do %>
-        Espresso<br/>
-        Hot Chocolate<br/>
-        Steamed Milk
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.md

@@ -1,2 +0,0 @@
-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.

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.md

@@ -1 +0,0 @@
-Pass our `verticalAlign` global prop to any `table.row` subcomponent to change the vertical alignment of all cells within that row.

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.html.erb

@@ -1,53 +0,0 @@
-<%= 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") do %>
-          Value 1a
-          <br />
-          Value 1a
-          <br />
-          Value 1a
-        <% end %>
-        <%= 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
-          <br />
-          Value 1b
-          <br />
-          Value 1b
-        <% end %>
-        <%= 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
-          <br />
-          Value 1c
-          <br />
-          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 %>
-  

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.md

@@ -1 +0,0 @@
-Pass our `vertical_align` global prop to any `table/table_row` subcomponent to change the vertical alignment of all cells within that row.