playbook_ui 13.28.0.pre.alpha.pbntr312tableheaderflexremoval3019 → 13.28.0.pre.alpha.play829selectablecardalignment2978

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d9c78fc4581891bf1187d4a38fb387d210e9994ccc37993b6f6c2ff10124b895
-  data.tar.gz: '03539fc54dbbb2809c7899e1d452b5578159f6725cae9a1638365c88b2b6c29c'
+  metadata.gz: c2ea0b161920a1666fef468539f56e8185b902f0fe7b31969a8ee2d761a64b59
+  data.tar.gz: 2a85f19f34fea779816b46739f34f643fa2def667bce1194e678a32f0eb67e0d
 SHA512:
-  metadata.gz: 96950131978879d4e45dbd5e8cd204f7a45a0f57d6d69034ab40732958fa4460bb9464fa99aa54ff8ed51e79d15d988f19653d16f7125a4b477500987969e7dd
-  data.tar.gz: 7cffbe91d7528dda2964fd5f10625949a96ffcf71cbda60dcf1f632e8842bdedf5f1f602fd3ebe3deea391be4a6e107b597bded8119729aa06893cb6961f0c92
+  metadata.gz: f383ffb93e9d97358349b13cc4f3a282b140ecc628fba9c097dd652ba6c0a824efaa1f796b932b165cd38b326899d0c6875d96b6f731858824bbdf42687d956f
+  data.tar.gz: ea09734e0f9abbc10a328f6b5e5b0c8248f1df495dc33abf14ea96cfb2f90e97aeb92f6e6ec0512fe2ffa3212fb4c8543cf9a187afd3e84c383a0f0b93a87f41

data/app/pb_kits/playbook/_playbook.scss

@@ -1,3 +1,6 @@
+
+
+
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_avatar_action_button/avatar_action_button';
@@ -28,7 +31,6 @@
 @import 'pb_detail/detail';
 @import 'pb_dialog/dialog';
 @import 'pb_distribution_bar/distribution_bar';
-@import 'pb_draggable/draggable';
 @import 'pb_dropdown/dropdown';
 @import 'pb_file_upload/file_upload';
 @import 'pb_filter/filter';
@@ -119,4 +121,3 @@
 @import './utilities/text_align';
 @import './utilities/overflow';
 @import './utilities/truncate';
-@import './utilities/vertical_align';

data/app/pb_kits/playbook/index.js

@@ -35,8 +35,6 @@ export { default as DateYearStacked } from './pb_date_year_stacked/_date_year_st
 export { default as Detail} from './pb_detail/_detail'
 export { default as Dialog } from './pb_dialog/_dialog'
 export { default as DistributionBar } from './pb_distribution_bar/_distribution_bar'
-export { default as Draggable} from './pb_draggable/_draggable'
-export { DraggableProvider} from './pb_draggable/context'
 export { default as Dropdown} from './pb_dropdown/_dropdown'
 export { default as FileUpload } from './pb_file_upload/_file_upload'
 export { default as Filter } from './pb_filter/_filter'

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -163,9 +163,6 @@ 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(() => {
@@ -175,7 +172,7 @@ if (Array.isArray(axisTitle) && axisTitle.length > 1 && axisTitle[1].name) {
   return (
     <HighchartsReact
         containerProps={{
-          className: classnames(globalProps(filteredProps), className),
+          className: classnames(globalProps(props), className),
           id: id,
           ...ariaProps,
           ...dataProps,

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -74,22 +74,6 @@ module Playbook
         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

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -28,7 +28,8 @@ $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors)
 
 @mixin pb_card_selected($border_color: $primary) {
   border-color: $border_color;
-  border-width: $pb_card_border_width * 2;
+  border-width: $pb_card_border_width;
+  outline: 1px solid $border_color;
 }
 
 @mixin pb_card_selected_dark {

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -115,9 +115,6 @@ const CircleChart = ({
     innerSizes[size];
 
 
-  const filteredProps: any = {...props};
-  delete filteredProps.verticalAlign;
-
   const [options, setOptions] = useState({});
 
   useEffect(() => {
@@ -184,7 +181,7 @@ const CircleChart = ({
         <div id={`wrapper-circle-chart-${id}`}>
           <HighchartsReact
               containerProps={{
-              className: classnames("pb_circle_chart", globalProps(filteredProps)),
+              className: classnames("pb_circle_chart", globalProps(props)),
               id: id,
               ...ariaProps,
               ...dataProps,
@@ -198,7 +195,7 @@ const CircleChart = ({
       ) : (
         <HighchartsReact
             containerProps={{
-            className: classnames("pb_circle_chart", globalProps(filteredProps)),
+            className: classnames("pb_circle_chart", globalProps(props)),
             id: id,
             ...ariaProps,
             ...dataProps,

data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb

@@ -68,22 +68,6 @@ module Playbook
         }
       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

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, ReactElement } from 'react'
+import React, { useEffect } from 'react'
 import classnames from 'classnames'
 import  useCollapsible from './useCollapsible'
 
@@ -11,16 +11,9 @@ import CollapsibleContext from './context'
 import { IconSizes } from "../pb_icon/_icon"
 import CollapsibleIcon from './child_kits/CollapsibleIcon'
 
-type CollapsibleMainProps = {
-  children: React.ReactNode
-}
-
-type CollapsibleContentProps = {
-  children: React.ReactNode
-}
 
 type CollapsibleProps = {
-  children?: [ReactElement<CollapsibleMainProps>, ReactElement<CollapsibleContentProps>],
+  children?: React.ReactElement | [] | any,
   aria?: {[key: string]: string},
   className?: string,
   collapsed?: boolean,
@@ -37,7 +30,7 @@ type CollapsibleProps = {
 const Collapsible = ({
   aria = {},
   className,
-  children,
+  children = [],
   collapsed = true,
   data = {},
   htmlOptions = {},
@@ -55,12 +48,13 @@ const Collapsible = ({
    setIsCollapsed(collapsed)
   },[collapsed])
 
-  if (children.length !== 2) {
+  const CollapsibleParent = React.Children.toArray(children) as React.ReactElement[]
+
+  if (CollapsibleParent.length !== 2) {
     throw new Error('Collapsible requires <CollapsibleMain> and <CollapsibleContent> to function properly.')
   }
-
-  const FirstChild = children[0]
-  const SecondChild = children[1]
+  const FirstChild = CollapsibleParent[0]
+  const SecondChild = CollapsibleParent[1]
 
   const Main = FirstChild.type === CollapsibleMain ? FirstChild : null
   const Content = SecondChild.type === CollapsibleContent ? SecondChild : null

data/app/pb_kits/playbook/pb_collapsible/collapsible.test.js

@@ -48,27 +48,3 @@ test('returns namespaced additional_class class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} additional_class`)
 })
-
-test('html structure is correct', () => {
-  const { container } = render(
-    <Collapsible
-        className="additional_class"
-        data={{ testid: testId }}
-        iconColor='lighter'
-        iconSize="lg"
-    >
-      <Collapsible.Main>
-        <div>{'Main Section'}</div>
-      </Collapsible.Main>
-      <Collapsible.Content>
-        <div>
-          {
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
-          }
-        </div>
-      </Collapsible.Content>
-    </Collapsible>
-  )
-
-  expect(container).toMatchSnapshot()
-})

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts

@@ -3,12 +3,6 @@ import typography from '../tokens/exports/_typography.scss'
 
 import { ThemeProps } from './themeTypes'
 
-interface CustomTreemapOptions extends Highcharts.SeriesTreemapOptions {
-  traverseUpButton?: {
-    position: { y: number };
-  };
-}
-
 const highchartsDarkTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -206,7 +200,7 @@ const highchartsDarkTheme: ThemeProps = {
       traverseUpButton: {
         position: { y: -50 },
       },
-    } as CustomTreemapOptions,
+    },
   },
   credits: {
     enabled: false

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts

@@ -3,13 +3,6 @@ import typography from '../tokens/exports/_typography.scss'
 
 import { ThemeProps } from './themeTypes'
 
-interface CustomTreemapOptions extends Highcharts.SeriesTreemapOptions {
-  traverseUpButton?: {
-    position: { y: number };
-  };
-}
-
-
 const highchartsTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -157,7 +150,6 @@ const highchartsTheme: ThemeProps = {
           fontSize: typography.text_smaller,
           color: colors.text_lt_light,
           fontWeight: typography.regular,
-          textOutline: '2px $white',
         },
       },
     },
@@ -206,7 +198,7 @@ const highchartsTheme: ThemeProps = {
       traverseUpButton: {
         position: { y: -50 },
       },
-    } as CustomTreemapOptions,
+    },
   },
   credits: {
     enabled: false

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -107,7 +107,7 @@
   }
 
   & > [class^=pb_date_picker_kit]:not(:last-child) {
-    .input_wrapper input, [class^=pb_text_input_kit] .date_picker_input_wrapper .flatpickr-wrapper {
+    .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .flatpickr-wrapper {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-width: 0;
@@ -115,7 +115,7 @@
   }
 
   & > [class^=pb_date_picker_kit]:not(:first-child) {
-    .input_wrapper input, [class^=pb_text_input_kit] .date_picker_input_wrapper .flatpickr-wrapper {
+    .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .flatpickr-wrapper {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
     }

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

@@ -130,9 +130,6 @@ const LineGraph = ({
     staticOptions.plotOptions.series.events = { legendItemClick: () => false };
   }
 
-  const filteredProps: any = {...props};
- delete filteredProps.verticalAlign;
-
   const [options, setOptions] = useState({});
 
   useEffect(() => {
@@ -142,7 +139,7 @@ const LineGraph = ({
   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

@@ -64,22 +64,6 @@ module Playbook
         }
       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_selectable_card/_selectable_card.scss

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

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

@@ -131,43 +131,41 @@ const SelectableCard = (props: SelectableCardProps) => {
           className={globalProps(labelProps)}
           htmlFor={inputIdPresent}
       >
-        <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
+          {variant === 'displayInput' ? 
+            <Flex vertical="center">
+              <Flex
+                  orientation="column"
+                  padding="sm"
+                  paddingRight="xs"
+                  vertical="center"
+              >
+                <Input
                     dark={dark}
-                    padding="sm"
-                    status={error ? 'negative' : null}
                 >
-                  {text ||props.children}
-                </Card>
+                  <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}
+              >
+                {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,7 +11,6 @@
   <% 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: {
@@ -46,7 +45,6 @@
           </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.html.erb

@@ -0,0 +1,34 @@
+<%= pb_rails("table") do %>
+  <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>
+<% end %>

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 %>