playbook_ui 13.28.0 → 13.29.0.pre.alpha.PBNTR329draggablev33059

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

@@ -9,6 +9,7 @@ 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
@@ -38,7 +39,7 @@ module Playbook
         gradient ? "area" : "line"
       end
 
-      def chart_options
+      def standard_options
         {
           align: align,
           id: id,
@@ -64,6 +65,26 @@ 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_list/_list.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import classnames from "classnames";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
+import Draggable from "../pb_draggable/_draggable";
 
 type ListProps = {
   aria?: { [key: string]: string };
@@ -9,6 +10,7 @@ type ListProps = {
   className?: string;
   children: React.ReactNode[] | React.ReactNode;
   dark?: boolean;
+  draggable?: boolean;
   data?: Record<string, unknown>;
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
@@ -30,6 +32,7 @@ const List = (props: ListProps) => {
     className,
     dark = false,
     data = {},
+    draggable = false,
     htmlOptions = {},
     id,
     layout = "",
@@ -51,7 +54,7 @@ const List = (props: ListProps) => {
   const childrenWithProps = React.Children.map(
     children,
     (child: React.ReactElement) => {
-      return React.cloneElement(child, { text, variant });
+      return React.cloneElement(child, { text, variant, draggable });
     }
   );
   const ariaProps = buildAriaProps(aria);
@@ -69,7 +72,11 @@ const List = (props: ListProps) => {
   );
 
   return (
-    <div className={classes}>
+    <>
+    {
+      draggable ? (
+        <Draggable.Container>
+     <div className={classes}>
       {ordered ? (
         <ol
             {...ariaProps}
@@ -96,6 +103,40 @@ const List = (props: ListProps) => {
         </ul>
       )}
     </div>
+        </Draggable.Container>
+      ) :
+      (
+<div className={classes}>
+      {ordered ? (
+        <ol
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={className}
+            id={id}
+            role={role}
+            tabIndex={tabIndex}
+        >
+          {childrenWithProps}
+        </ol>
+      ) : (
+        <ul
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={className}
+            id={id}
+            role={role}
+            tabIndex={tabIndex}
+        >
+          {childrenWithProps}
+        </ul>
+      )}
+    </div>
+      )
+    }
+    
+    </>
   );
 };
 

data/app/pb_kits/playbook/pb_list/_list_item.tsx

@@ -2,12 +2,16 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
+import Icon from '../pb_icon/_icon'
+import Body from '../pb_body/_body'
+import Draggable from '../pb_draggable/_draggable'
 
 type ListItemProps = {
   aria?: { [key: string]: string },
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
   data?: Record<string, unknown>,
+  dragHandle?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   tabIndex?: number,
@@ -19,6 +23,8 @@ const ListItem = (props: ListItemProps) => {
     children,
     className,
     data = {},
+    draggable = false,
+    dragHandle = true,
     htmlOptions = {},
     id,
     tabIndex,
@@ -35,16 +41,46 @@ const ListItem = (props: ListItemProps) => {
 
   return (
     <>
-      <li
-          {...ariaProps}
-          {...dataProps}
-          {...htmlProps}
-          className={classes}
-          id={id}
-          tabIndex={tabIndex}
-      >
-        {children}
-      </li>
+    {
+      draggable ? (
+        <Draggable.Item id={id}>
+        <li
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            id={id}
+            tabIndex={tabIndex}
+        >
+          {
+            dragHandle && (
+              <span style={{verticalAlign: 'middle'}}>
+                <Body color="light">
+                <Icon 
+                    icon="grip-dots-vertical"
+                    verticalAlign="middle" 
+                />
+                </Body>
+              </span>
+            )
+          }
+          {children}
+        </li>
+        </Draggable.Item>
+        ) : (
+        <li
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            id={id}
+            tabIndex={tabIndex}
+        >
+          {children}
+        </li>
+      )
+    }
+      
     </>
   )
 }

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 here: https://playbook.powerapp.cloud/utilities
+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>.

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 transparent; 
 
     @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_selectable_list/_item.tsx

@@ -7,14 +7,16 @@ import { globalProps } from "../utilities/globalProps";
 import Checkbox from "../pb_checkbox/_checkbox";
 import ListItem from "../pb_list/_list_item";
 import Radio from "../pb_radio/_radio";
+import { GenericObject } from "../types";
 
 export type SelectableListItemProps = {
   aria?: { [key: string]: string };
   children: React.ReactNode[] | React.ReactNode;
   checked?: boolean;
   className?: string;
-  data?: object;
+  data?: GenericObject;
   defaultChecked?: boolean;
+  dragHandle?: boolean;
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   label?: string;
@@ -31,6 +33,7 @@ const SelectableListItem = ({
   children,
   className,
   data = {},
+  dragHandle = true,
   defaultChecked,
   htmlOptions = {},
   id,
@@ -39,7 +42,7 @@ const SelectableListItem = ({
   name = "",
   value = "",
   variant = "checkbox",
-  onChange = () => {},
+  onChange = () => {void 0},
   ...props
 }: SelectableListItemProps) => {
   const ariaProps = buildAriaProps(aria);
@@ -61,28 +64,31 @@ const SelectableListItem = ({
 
   return (
     <ListItem
-      {...props}
-      className={classnames(checkedState ? "checked_item" : "", className)}
+        {...props}
+        className={classnames(checkedState ? "checked_item" : "", className)}
+        dragHandle={dragHandle}
+        id={id}
     >
       <div 
-        {...ariaProps} 
-        {...dataProps}
-        {...htmlProps} 
-        className={classes}
+          {...ariaProps} 
+          {...dataProps}
+          {...htmlProps} 
+          className={classes}
       >
         {variant == "checkbox" && (
           <>
             <Checkbox
-              checked={checkedState}
-              id={id}
-              name={name}
-              onChange={handleChecked}
-              // eslint suppressor, text is needed to display on screen
-              //@ts-ignore
-              text={label || (text && false)}
-              type="checkbox"
-              value={value}
-              {...props}
+                checked={checkedState}
+                id={id}
+                name={name}
+                onChange={handleChecked}
+                // eslint suppressor, text is needed to display on screen
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                //@ts-ignore
+                text={label || (text && false)}
+                type="checkbox"
+                value={value}
+                {...props}
             />
             {children}
           </>
@@ -90,16 +96,17 @@ const SelectableListItem = ({
         {variant == "radio" && (
           <>
             <Radio
-              defaultChecked={defaultChecked}
-              id={id}
-              label={label}
-              name={name}
-              onChange={onChange}
-              //@ts-ignore
-              text={label}
-              type="radio"
-              value={value}
-              {...props}
+                defaultChecked={defaultChecked}
+                id={id}
+                label={label}
+                name={name}
+                onChange={onChange}
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                //@ts-ignore
+                text={label}
+                type="radio"
+                value={value}
+                {...props}
             />
             {children}
           </>

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx

@@ -14,6 +14,7 @@ type SelectableListProps = {
   children?: React.ReactElement[],
   className?: string,
   data?: GenericObject,
+  draggable?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   variant?: 'checkbox' | 'radio',
@@ -25,6 +26,7 @@ const SelectableList = (props: SelectableListProps) => {
     children,
     className,
     data = {},
+    draggable = false,
     htmlOptions = {},
     id,
   } = props
@@ -66,7 +68,9 @@ const SelectableList = (props: SelectableListProps) => {
         className={classes}
         id={id}
     >
-      <List variant={props.variant}>
+      <List draggable={draggable}
+          variant={props.variant}
+      >
         {selectableListItems}
       </List>
     </div>

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

@@ -23,6 +23,7 @@ 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",
@@ -45,6 +46,7 @@ const Table = (props: TableProps) => {
         disableHover = false,
         htmlOptions = {},
         id,
+        outerPadding = '',
         responsive = 'collapse',
         singleLine = false,
         size = 'sm',
@@ -59,6 +61,8 @@ 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(
@@ -73,6 +77,7 @@ 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,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>
+
   )
 }
 

data/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` 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.

data/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.

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

@@ -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>
   )
 }
 

data/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` 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.