playbook_ui 13.28.0.pre.alpha.PBNTR297gradientoverlay3029 → 13.28.0.pre.alpha.PLAY888Cardkithighlightoverflowtooltiperror2937

data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx

@@ -8,7 +8,6 @@ import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
-import { merge } from 'lodash'
 
 type LineGraphProps = {
   align?: "left" | "right" | "center";
@@ -22,7 +21,6 @@ type LineGraphProps = {
     name: string;
     data: number[];
   }[];
-  customOptions?: Partial<Highcharts.Options>;
   gradient?: boolean;
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id: string;
@@ -47,7 +45,6 @@ const LineGraph = ({
   data = {},
   align = "center",
   className = "pb_bar_graph",
-  customOptions = {},
   dark = false,
   gradient = false,
   type = "line",
@@ -133,19 +130,16 @@ const LineGraph = ({
     staticOptions.plotOptions.series.events = { legendItemClick: () => false };
   }
 
-  const filteredProps: any = {...props};
- delete filteredProps.verticalAlign;
-
   const [options, setOptions] = useState({});
 
   useEffect(() => {
-    setOptions(merge(staticOptions, customOptions));
+    setOptions({ ...staticOptions });
   }, [chartData]);
 
   return (
     <HighchartsReact
         containerProps={{
-        className: classnames(globalProps(filteredProps), className),
+        className: classnames(globalProps(props), className),
         id: id,
         ...ariaProps,
         ...dataProps,

data/app/pb_kits/playbook/pb_line_graph/line_graph.rb

@@ -9,7 +9,6 @@ module Playbook
       prop :axis_title
       prop :chart_data, type: Playbook::Props::Array,
                         default: []
-      prop :custom_options, default: {}
       prop :gradient, type: Playbook::Props::Boolean,
                       default: false
       prop :point_start, type: Playbook::Props::Numeric
@@ -39,7 +38,7 @@ module Playbook
         gradient ? "area" : "line"
       end
 
-      def standard_options
+      def chart_options
         {
           align: align,
           id: id,
@@ -65,26 +64,6 @@ module Playbook
         }
       end
 
-      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_line_graph")
       end

data/app/pb_kits/playbook/pb_pill/docs/_description.md

@@ -1 +1 @@
-A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
+A pill uses both a keyword and a specific color to categorize an item. Each pill directly corresponds to a data color here: https://playbook.powerapp.cloud/utilities

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -28,7 +28,6 @@ $pb_selectable_card_border: 2px;
     padding: $space_sm;
     margin-bottom: $space_sm;
     cursor: pointer;
-    outline: 1px solid transparent; 
 
     @media (hover:hover) {
       &:hover {

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx

@@ -131,41 +131,43 @@ const SelectableCard = (props: SelectableCardProps) => {
           className={globalProps(labelProps)}
           htmlFor={inputIdPresent}
       >
-          {variant === 'displayInput' ? 
-            <Flex vertical="center">
-              <Flex
-                  orientation="column"
-                  padding="sm"
-                  paddingRight="xs"
-                  vertical="center"
-              >
-                <Input
+        <div className="buffer">
+              {variant === 'displayInput' ? 
+              <Flex vertical="center">
+                <Flex
+                    orientation="column"
+                    padding="sm"
+                    paddingRight="xs"
+                    vertical="center"
+                >
+                  <Input
+                      dark={dark}
+                  >
+                    <input
+                        checked={checked}
+                        disabled={disabled}
+                        onClick={handleClick}
+                        readOnly
+                        type={inputType}
+                    />
+                  </Input>
+                </Flex>
+                <div className="separator" />
+                <div className="psuedo_separator"/>
+                <Card
+                    borderNone
                     dark={dark}
+                    padding="sm"
+                    status={error ? 'negative' : null}
                 >
-                  <input
-                      checked={checked}
-                      disabled={disabled}
-                      onClick={handleClick}
-                      readOnly
-                      type={inputType}
-                  />
-                </Input>
+                  {text ||props.children}
+                </Card>
               </Flex>
-              <div className="separator" />
-              <div className="psuedo_separator"/>
-              <Card
-                  borderNone
-                  dark={dark}
-                  padding="sm"
-                  status={error ? 'negative' : null}
-              >
-                {text ||props.children}
-              </Card>
-            </Flex>
-          :
+              :
             text || props.children
-             }
+              }
           {displayIcon()}
+        </div>
       </label>
     </div>
   )

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb

@@ -11,6 +11,7 @@
   <% end %>
 
   <label class="<%= object.label_class %>" for="<%= object.input_id_present %>">
+    <div class="buffer">
       <% if object.variant == "display_input" %>
         <%= pb_rails("flex", props: { vertical: "center" }) do %>
           <%= pb_rails("flex", props: {
@@ -45,6 +46,7 @@
           </div>
         <% end %>
       <% end %>
+    </div>
   </label>
 
   <% if object.variant == "display_input" %>

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -23,7 +23,6 @@ type TableProps = {
     disableHover?: boolean,
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string,
-    outerPadding?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
     responsive?: "collapse" | "scroll" | "none",
     singleLine?: boolean,
     size?: "sm" | "md" | "lg",
@@ -46,7 +45,6 @@ const Table = (props: TableProps) => {
         disableHover = false,
         htmlOptions = {},
         id,
-        outerPadding = '',
         responsive = 'collapse',
         singleLine = false,
         size = 'sm',
@@ -61,8 +59,6 @@ const Table = (props: TableProps) => {
     const htmlProps = buildHtmlProps(htmlOptions)
     const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
     const verticalBorderCss = verticalBorder ? 'vertical-border' : ''
-    const spaceCssName = outerPadding !== 'none' ? 'space_' : ''
-    const outerPaddingCss = outerPadding ? `outer_padding_${spaceCssName}${outerPadding}` : ''
     const isTableTag = tag === 'table'
 
     const classNames = classnames(
@@ -77,7 +73,6 @@ const Table = (props: TableProps) => {
             'no-hover': disableHover,
             'sticky-header': sticky,
             'striped': striped,
-            [outerPaddingCss]: outerPadding !== '',
         },
         globalProps(props),
         tableCollapseCss,

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx

@@ -7,40 +7,39 @@ const TableAlignmentColumn = (props) => {
     <Table
         {...props}
     >
-        <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>
+      <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>
-
   )
 }
 

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

@@ -1,2 +1,2 @@
-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.
+You can individually align a piece of table data, but a more practical use would be applied to align a column.
 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_outer_padding.html.erb → _table_alignment_row.html.erb}

@@ -1,11 +1,11 @@
-<%= pb_rails("table", props: { outer_padding: "sm", size: "sm" }) do %>
+<%= pb_rails("table") do %>
   <thead>
     <tr>
       <th>Column 1</th>
       <th>Column 2</th>
       <th>Column 3</th>
       <th>Column 4</th>
-      <th></th>
+      <th>Column 5</th>
     </tr>
   </thead>
   <tbody>
@@ -14,21 +14,21 @@
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
-      <td align="right"><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
+      <td>Value 5</td>
     </tr>
-    <tr>
+    <tr align="center">
       <td>Value 1</td>
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
-      <td align="right"><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
+      <td>Value 5</td>
     </tr>
-    <tr>
+    <tr align="right">
       <td>Value 1</td>
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
-      <td align="right"><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
+      <td>Value 5</td>
     </tr>
   </tbody>
 <% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx

@@ -7,39 +7,39 @@ const TableAlignmentRow = (props) => {
     <Table
         {...props}
     >
-    <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>
+      <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>
   )
 }
 

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

@@ -1,2 +1,2 @@
-Pass our `textAlign` global prop to any `table.row` subcomponent to change the text alignment of all cells within that row.
+This is to be used to shift the whole 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.html.erb

@@ -0,0 +1,63 @@
+<%= pb_rails("table") do %>
+  <thead>
+    <tr>
+      <th>&nbsp;</th>
+      <th>Price</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td shift="down">Total</td>
+      <td>
+        $12
+        <br/>
+        $46
+        <br/>
+        $25
+        <br/>
+        -------
+        <br/>
+        $83
+      </td>
+    </tr>
+  </tbody>
+<% end %>
+<br/>
+<%= pb_rails("table") do %>
+  <thead>
+    <tr>
+      <th>Espresso Drinks</th>
+      <th>Ingredients</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td shift="up">Cappuccino</td>
+      <td>
+        Espresso
+        <br/>
+        Steamed Milk
+        <br/>
+        Milk Foam
+      </td>
+    </tr>
+    <tr>
+      <td shift="up">Macchiato</td>
+      <td>
+        Espresso
+        <br/>
+        Steamed Milk
+      </td>
+    </tr>
+    <tr>
+      <td shift="up">Mocha</td>
+      <td>
+        Espresso
+        <br/>
+        Hot Chocolate
+        <br/>
+        Steamed Milk
+      </td>
+    </tr>
+  </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx

@@ -9,16 +9,16 @@ const TableAlignmentShiftData = (props) => {
           marginBottom="md"
           {...props}
       >
-        <Table.Head>
-          <Table.Row>
-            <Table.Header>&nbsp;</Table.Header>
-            <Table.Header>{'Price'}</Table.Header>
-          </Table.Row>
-        </Table.Head>
-        <Table.Body>
-          <Table.Row>
-            <Table.Cell verticalAlign="bottom">{'Total'}</Table.Cell>
-            <Table.Cell>
+        <thead>
+          <tr>
+            <th>&nbsp;</th>
+            <th>{'Price'}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td shift="down">{'Total'}</td>
+            <td>
               {'$12'}
               <br />
               {'$46'}
@@ -28,51 +28,50 @@ const TableAlignmentShiftData = (props) => {
               {'-------'}
               <br />
               {'$83'}
-            </Table.Cell>
-          </Table.Row>
-        </Table.Body>
+            </td>
+          </tr>
+        </tbody>
       </Table>
-
       <Table
           {...props}
       >
-      <Table.Head>
-        <Table.Row>
-          <Table.Header>{'Espresso Drinks'}</Table.Header>
-          <Table.Header>{'Ingredients'}</Table.Header>
-        </Table.Row>
-      </Table.Head>
-      <Table.Body>
-        <Table.Row>
-          <Table.Cell verticalAlign="top">{'Cappuccino'} </Table.Cell>
-          <Table.Cell>
-          {'Steamed Milk'}
-          <br />
-          {'Milk Foam'}
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell verticalAlign="top">
-            {'Macchiato'}
-            </Table.Cell>
-            <Table.Cell verticalAlign="top">
-            {'Espresso'}
-            <br />
-            {'Steamed Milk'}
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>
-            {'Mocha'}
-            </Table.Cell>
-          <Table.Cell>
-            {'Hot Chocolate'}
-            <br />
-            {'Steamed Milk'}
-          </Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
+        <thead>
+          <tr>
+            <th>{'Espresso Drinks'}</th>
+            <th>{'Ingredients'}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td shift="up">{'Cappuccino'}</td>
+            <td>
+              {'Espresso'}
+              <br />
+              {'Steamed Milk'}
+              <br />
+              {'Milk Foam'}
+            </td>
+          </tr>
+          <tr>
+            <td shift="up">{'Macchiato'}</td>
+            <td>
+              {'Espresso'}
+              <br />
+              {'Steamed Milk'}
+            </td>
+          </tr>
+          <tr>
+            <td shift="up">{'Mocha'}</td>
+            <td>
+              {'Espresso'}
+              <br />
+              {'Hot Chocolate'}
+              <br />
+              {'Steamed Milk'}
+            </td>
+          </tr>
+        </tbody>
+      </Table>
     </div>
   )
 }

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

@@ -1,2 +1,2 @@
-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.
+You can individually shift a piece of table data, or shift an entire column.
 The first table shifts "Total" down, whereas the second table shifts the "Espresso Drinks" column contents up.