playbook_ui 13.29.0 → 13.30.0.pre.alpha.PBNTR353draggablev53136

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -24,8 +24,13 @@ $flag-min-resolution: 192dpi;
     transition: $transition_default;
   }
 
+  .iti__divider {
+    border-bottom: 1px solid $border_light !important;  
+  }
+
   .iti__selected-flag {
     padding: 0 $space_xxs 0 $space_sm;
+    border-radius: $space_xxs; 
 
     &[aria-expanded="true"] {
       color: $primary_action;
@@ -33,7 +38,6 @@ $flag-min-resolution: 192dpi;
 
     &:focus-visible {
       outline-style: solid;
-      border-radius: $space_xxs 0px 0px $space_xxs;
       outline-color: $primary;
     }
   }
@@ -55,7 +59,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__flag {
-    background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/img/flags.png");
+    background-image: url("https://intl-tel-input.com/intl-tel-input/img/flags.png");
     border-radius: 1px;
   }
 
@@ -101,28 +105,36 @@ $flag-min-resolution: 192dpi;
     color: $primary_action;
   }
 
-  .iti__active::after {
-    float: right;
+  .iti__country-list .iti__country {
+    display: flex;
+    align-items: center;
+  }
+
+  .iti__flag-box,
+  .iti__country-name,
+  .iti__dial-code {
+    flex-grow: 0;
+  }
+
+  .iti__dial-code {
+    margin-right: $space_sm;
+  }
+
+
+  .iti__country-list .iti__country.iti__active::after {
     content: "";
-    margin-top: $space_xxs + 1px;
-    transform: rotate($transform-rotate-deg/3);
-    height: $space_xs + 4px;
-    width: $space_xxs + 2px;
+    margin-left: auto;
+    transform: rotate(45deg);
+    height: 12px;
+    width: 6px;
     border-bottom: 2px solid;
     border-right: 2px solid;
     border-radius: 1px;
   }
 
-  .iti__country-list {
-    min-width: $dropdown-min-width;
-    border-radius: $border_radius_md;
-    border: 1px solid $border_light;
-    box-shadow: $shadow_deep;
-    margin-top: 1px;
-  }
-
-  .iti__divider {
-    border-bottom: 1px solid $border_light;
+  .iti__dropdown-content {
+    border-radius: $space_xs; 
+    border: 1px solid $border_light !important;
   }
 
   &.dark {
@@ -147,6 +159,15 @@ $flag-min-resolution: 192dpi;
       color: $white;
     }
 
+    .iti__dropdown-content {
+      border-radius: $space_xs; 
+      border: 1px solid $border_dark !important;
+    }
+
+    .iti__divider {
+      border-bottom: 1px solid $border_dark !important;  
+    }
+
     .iti__country-list {
       background-color: $bg_dark;
       border: 1px solid $border_dark;
@@ -157,17 +178,14 @@ $flag-min-resolution: 192dpi;
         .iti__country-name {
           color: $text_dk_default;
         }
-  
+
         .iti__dial-code {
           color: $text_lt_lighter;
+          margin-right: $space_sm;
         }
       }
     }
 
-    .iti__divider {
-      border-bottom: 1px solid $border_dark;
-    }
-
     .iti__arrow.iti__arrow--up::before {
       color: $slate;
     }
@@ -178,10 +196,10 @@ $flag-min-resolution: 192dpi;
       }
     }
   }
-  
+
   @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
     .iti__flag {
-      background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/img/flags@2x.png");
+      background-image: url("https://intl-tel-input.com/intl-tel-input/img/flags.png");
     }
   }
 }

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

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import classnames from "classnames";
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { globalProps } from "../utilities/globalProps";
+import { globalProps, domSafeProps } from "../utilities/globalProps";
 
 import Checkbox from "../pb_checkbox/_checkbox";
 import ListItem from "../pb_list/_list_item";
@@ -16,6 +16,7 @@ export type SelectableListItemProps = {
   className?: string;
   data?: GenericObject;
   defaultChecked?: boolean;
+  dragId?: string;
   dragHandle?: boolean;
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
@@ -33,6 +34,7 @@ const SelectableListItem = ({
   children,
   className,
   data = {},
+  dragId,
   dragHandle = true,
   defaultChecked,
   htmlOptions = {},
@@ -67,7 +69,7 @@ const SelectableListItem = ({
         {...props}
         className={classnames(checkedState ? "checked_item" : "", className)}
         dragHandle={dragHandle}
-        id={id}
+        dragId={dragId}
     >
       <div 
           {...ariaProps} 
@@ -106,7 +108,9 @@ const SelectableListItem = ({
                 text={label}
                 type="radio"
                 value={value}
-                {...props}
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                //@ts-ignore
+                {...domSafeProps(props)}
             />
             {children}
           </>

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

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

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

@@ -1,34 +1,33 @@
-<%= 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>
+<%= 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/table_header.html.erb

@@ -7,9 +7,7 @@
       id: "pb-th#{object.id}",
       **combined_html_options) do %>
     <% unless sorting_style? %>
-      <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_nolink" }) do %>
         <%= content.presence || object.text %>
-      <% end %>
     <% else %>
       <%= link_to next_link, style: link_style do %>
         <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_link" }) do %>

data/app/pb_kits/playbook/pb_timeline/_item.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildCss, buildHtmlProps } from '../utilities/props'
+import { globalProps, GlobalProps } from "../utilities/globalProps";
 
 import DateStacked from '../pb_date_stacked/_date_stacked'
 import IconCircle from '../pb_icon_circle/_icon_circle'
@@ -14,7 +15,7 @@ type ItemProps = {
   icon?: string,
   iconColor?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
   lineStyle?: 'solid' | 'dotted',
-}
+} & GlobalProps
 
 const TimelineItem = ({
   className,
@@ -24,7 +25,7 @@ const TimelineItem = ({
   icon = 'user',
   iconColor = 'default',
   lineStyle = 'solid',
-
+  ...props
 }: ItemProps) => {
   const timelineItemCss = buildCss('pb_timeline_item_kit', lineStyle)
 
@@ -32,23 +33,23 @@ const TimelineItem = ({
 
   return (
     <div 
-      {...htmlProps}
-      className={classnames(timelineItemCss, className)}
+        {...htmlProps}
+        className={classnames(timelineItemCss, globalProps(props), className)}
     >
       <div className="pb_timeline_item_left_block">
         {date &&
           <DateStacked
-            align="center"
-            date={date}
-            size="sm"
+              align="center"
+              date={date}
+              size="sm"
           />
         }
       </div>
       <div className="pb_timeline_item_step">
         <IconCircle
-          icon={icon}
-          size="xs"
-          variant={iconColor}
+            icon={icon}
+            size="xs"
+            variant={iconColor}
         />
         <div className="pb_timeline_item_connector" />
       </div>

data/app/pb_kits/playbook/pb_timeline/_timeline.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { GlobalProps, globalProps } from '../utilities/globalProps'
 
 import TimelineItem from './_item'
 
@@ -14,7 +15,7 @@ type TimelineProps = {
   id?: string,
   orientation?: string,
   showDate?: boolean,
-}
+} & GlobalProps
 
 const Timeline = ({
   aria = {},
@@ -25,6 +26,7 @@ const Timeline = ({
   id,
   orientation = 'horizontal',
   showDate = false,
+  ...props
 }: TimelineProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
@@ -33,11 +35,11 @@ const Timeline = ({
   const timelineCss = buildCss('pb_timeline_kit', `_${orientation}`, dateStyle)
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classnames(timelineCss, className)}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classnames(timelineCss, globalProps(props), className)}
+        id={id}
     >
       {children}
     </div>

data/app/pb_kits/playbook/playbook-doc.js

@@ -66,6 +66,7 @@ import * as MultipleUsers from 'pb_multiple_users/docs'
 import * as MultipleUsersStacked from 'pb_multiple_users_stacked/docs'
 import * as Nav from 'pb_nav/docs'
 import * as OnlineStatus from 'pb_online_status/docs'
+import * as Overlay from 'pb_overlay/docs'
 import * as Passphrase from 'pb_passphrase/docs'
 import * as PbReactPopover from 'pb_popover/docs'
 import * as Person from 'pb_person/docs'
@@ -170,6 +171,7 @@ WebpackerReact.registerComponents({
   ...MultipleUsersStacked,
   ...Nav,
   ...OnlineStatus,
+  ...Overlay,
   ...Passphrase,
   ...PbReactPopover,
   ...Person,

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -520,6 +520,7 @@ export const domSafeProps = (props: {[key: string]: string}): {[key: string]: st
     'paddingY',
     'padding',
     'dark',
+    'enableDrag',
   ]
   return omit(props, notSafeProps)
 }

data/dist/menu.yml

@@ -352,6 +352,9 @@ kits:
         platforms: *web
         description: 
         status: "stable"
+      - name: "overlay"
+        platforms: *web
+        status: "stable"
       - name: "draggable"
         platforms: *react_only
         description:
@@ -467,4 +470,5 @@ kits:
         status: "stable"
       - name: "user"
         platforms: *web
-        description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
+        description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
+        status: "stable"