playbook_ui 13.26.0.pre.alpha.jasoncypretpatch12820 → 13.26.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0f58c4cbdc37f2196240ed4beb45f559f749af9855066602ad58a1d35e85fee3
-  data.tar.gz: d34a51429e697f5e1c51fd2ad58771019944926afc4776b3cf7b0fffb6d3e016
+  metadata.gz: 513dedb641f87bf07610bf4bd6234671546cd7dad41022efad3019d85934b45c
+  data.tar.gz: 2ef935c0bfaba7bd80dc47bbaa1b8b4e89aac61c731ec8fbd88440e2557d57fd
 SHA512:
-  metadata.gz: 81b61acc8877f7c9b4de796cfbf2eb8ae95cc7fb1b225db5fbbf5e82ceee3940878d9a64ff6fab776116ce20b00dbfafa637a920bc0823de2ac0cfbd0fe0338c
-  data.tar.gz: 57c56349740deb36705f8698b742951504311afaab29f77aa34727a67170970cc28a98422b9d68cb2491a36d4505ccaaf5483b70daeba90d12be181d9dbd64ea
+  metadata.gz: 1d0e17718945981e3002ebc05b9e9490be10884531df9e1f8ee65515e60d76a6edea5c27e68c50d205c5963047c74786f8d6e3e584b8bc0a76a8373636cb4049
+  data.tar.gz: 1ea1ae2275760805735801a334037a13dc60527fd431a4b985bca64cf85cf1f55ca95f89432c79a5f5593cad4ceed3967d5d1615d71f35daf6dc7d59f79ef991

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -94,20 +94,6 @@
     position: relative;
   }
 
-  .toggle-content {
-    display: none;
-    height: 0;
-    padding-bottom: 0 !important;
-    padding-top: 0 !important;
-    overflow: hidden;
-    transition: height 300ms, padding 300ms ease-in-out;
-  }
-
-  .toggle-content.is-visible {
-    display: contents;
-    height: auto;
-  }
-
   &.dark {
     .bg-white {
       background: $bg_dark_card;

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md

@@ -1,8 +1,3 @@
-**NOTE:** The Advanced Table kit uses the [Tanstack Table v8](https://tanstack.com/table/v8/docs/introduction) under the hood to render advanced tables that allow for complex, nested data structures with expansion and sort options.
-<br />
-<br />
-<br />
-
 The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__: 
 
 ### tableData

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

@@ -0,0 +1 @@
+The AdvancedTable kit uses the [Tanstack Table v8](https://tanstack.com/table/v8/docs/introduction) under the hood to render advanced tables that allow for complex, nested data structures with expansion and sort options. 

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

@@ -1,6 +1,6 @@
 examples:
-  rails:
-  - advanced_table_beta: Default (Required Props)
+  # rails:
+  # - advanced_table_default: Default (Required Props)
   react:
   - advanced_table_default: Default (Required Props)
   - advanced_table_loading: Loading State

data/app/pb_kits/playbook/pb_advanced_table/table_body.rb

@@ -14,10 +14,8 @@ module Playbook
         output << pb_rails("advanced_table/table_row", props: { row: row, column_definitions: column_definitions, depth: current_depth })
 
         if row[:children].present?
-          output << content_tag(:div, class: "toggle-content", data: { advanced_table_content: row.object_id }) do
-            row[:children].map do |child_row|
-              render_row_and_children(child_row, column_definitions, current_depth + 1)
-            end.join.html_safe
+          row[:children].each do |child_row|
+            output << render_row_and_children(child_row, column_definitions, current_depth + 1)
           end
         end
 

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -5,9 +5,8 @@
                     <div style="padding-left: <%= depth * 1.25 %>em">
                         <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
                             <% if index.zero? && object.row[:children].present? %>
-                                <button id="<%= object.row.object_id %>" class="gray-icon expand-toggle-icon" data-advanced-table="true" >
-                                    <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %> 
-                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
+                                <button class="gray-icon expand-toggle-icon">
+                                    <%= pb_rails("icon", props: { icon: "circle-play", cursor: "pointer" }) %>
                                 </button>
                             <% end %>
                             <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && object.row[:children].present? ? "none" : "xs"}) do %>

data/app/pb_kits/playbook/pb_avatar/_avatar.tsx

@@ -3,26 +3,13 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
-import { getPlacementProps } from './Utilities/GetPlacementPropsHelper'
 
-import Image from "../pb_image/_image";
-import OnlineStatus from "../pb_online_status/_online_status";
-import Flex from "../pb_flex/_flex";
-import Badge from "../pb_badge/_badge";
-import IconCircle from "../pb_icon_circle/_icon_circle";
-import Card from "../pb_card/_card";
+import Image from '../pb_image/_image'
+import OnlineStatus from '../pb_online_status/_online_status'
 
 export type AvatarProps = {
   aria?: {[key: string]: string},
   className?: string,
-  componentOverlay?: {
-    component: "badge" | "iconCircle",
-    placement: string,
-    size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
-    text?: string,
-    variant?: string,
-    icon?: string
-  },
   data?: {[key: string]: string},
   dark?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -32,7 +19,7 @@ export type AvatarProps = {
   name?: string,
   size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
   status?: "away" | "offline" | "online",
-  } & GlobalProps
+} & GlobalProps
 
 const firstTwoInitials = (name: string) =>
   name.split(/\s/).map((name) => name[0])
@@ -46,7 +33,6 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
     data = {},
     htmlOptions = {},
     name = undefined,
-    componentOverlay,
     id = '',
     imageAlt = '',
     imageUrl,
@@ -79,75 +65,24 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
         className={classes}
         id={id}
     >
-      {componentOverlay ? (
-        <Flex display="display_inline_block" 
-            position="relative"
-        >
-          <div className="avatar_wrapper" 
-              data-initials={initials}
-          >
-            {canShowImage && (
-              <Image
-                  alt={imageAlt ? imageAlt : name}
-                  onError={handleError}
-                  url={imageUrl}
-              />
-            )}
-          </div>
-
-          {componentOverlay.component === "badge" && (
-             <Card
-                 borderNone
-                 borderRadius="rounded"
-                 padding="none"
-                 position="absolute"
-                 {...getPlacementProps(componentOverlay.placement, size)}
-             >
-    
-            <Badge
-                rounded
-                text={componentOverlay.text}
-                variant={componentOverlay.variant as "error" | "info" | "neutral" | "primary" | "success" | "warning" | "notification"}
-            />
-            </Card>
-          )}
-          {componentOverlay.component === "iconCircle" && (
-            <Card
-                borderNone
-                borderRadius="rounded"
-                htmlOptions={{style: {padding:"2px"}}}
-                position="absolute"
-                {...getPlacementProps(componentOverlay.placement, size)}
-            >
-              <IconCircle
-                  icon={componentOverlay.icon}
-                  size="xxs"
-                  variant={componentOverlay.variant as "default" | "royal" | "blue" | "purple" | "teal" | "red" | "yellow" | "orange" | "green"}
-              />
-            </Card>
-          )}
-        </Flex>
-      ) : (
-        <>
-          <div className="avatar_wrapper" 
-              data-initials={initials}
-          >
-            {canShowImage && (
-              <Image
-                  alt={imageAlt ? imageAlt : name}
-                  onError={handleError}
-                  url={imageUrl}
-              />
-            )}
-          </div>
-          {status && (
-            <OnlineStatus
-                className={`size_${size}`}
-                dark={dark}
-                status={status}
-            />
-          )}
-        </>
+      <div
+          className="avatar_wrapper"
+          data-initials={initials}
+      >
+        { canShowImage && (
+          <Image
+              alt={imageAlt ? imageAlt : name}
+              onError={handleError}
+              url={imageUrl}
+          />
+        )}
+      </div>
+      {status && (
+        <OnlineStatus
+            className={`size_${size}`}
+            dark={dark}
+            status={status}
+        />
       )}
     </div>
   )

data/app/pb_kits/playbook/pb_avatar/avatar.html.erb

@@ -1,29 +1,6 @@
-
 <%= object.pb_content_tag(:div, data: object.data.merge(initials: object.initials)) do %>
-  <% if object.component_overlay && object.component_overlay[:component] == "icon_circle" %>
-    <%= pb_rails("flex", props: {display: "display_inline_block", position: "relative" }) do %>
-      <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
-        <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
-      <% end %>
-      <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", html_options: { style: "padding: 2px" }, position: "absolute" }.merge(specific_placement_style)) do %>
-        
-        <%= pb_rails("icon_circle", props: { size: "xxs", icon: object.component_overlay[:icon] }) %>
-      <% end %>  
-  <% end %>
-  <% elsif object.component_overlay && object.component_overlay[:component] == "badge" %>
-  <%= pb_rails("flex", props: {display: "display_inline_block", position: "relative" }) do %>
-    <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
-      <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
-    <% end %>
-    <%= pb_rails("card", props: { border_none: true, border_radius: "rounded", padding: "none", position: "absolute" }.merge(specific_placement_style)) do %>
-    <%= pb_rails("badge", props: { rounded: true, text: object.component_overlay[:text], variant: object.component_overlay[:variant] }) %>
-    <% end %>
-    <% end %>
-  <% else %>
-    <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
-      <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
-    <% end %>
-    <%= pb_rails("online_status", props: object.online_status_props) if object.status %>
+  <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
+    <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
   <% end %>
+  <%= pb_rails("online_status", props: object.online_status_props) if object.status %>
 <% end %>
-

data/app/pb_kits/playbook/pb_avatar/avatar.rb

@@ -3,7 +3,6 @@
 module Playbook
   module PbAvatar
     class Avatar < Playbook::KitBase
-      prop :component_overlay
       prop :image_url, type: Playbook::Props::String
       prop :image_alt, type: Playbook::Props::String,
                        default: ""
@@ -33,46 +32,6 @@ module Playbook
       def handle_img_error
         "this.style.display = 'none'"
       end
-
-      def overlay_component
-        component_overlay && component_overlay[:component]
-      end
-
-      def specific_placement_style
-        placement = component_overlay[:placement] if component_overlay
-        placement_mapping[size][placement]
-      end
-
-    private
-
-      def placement_mapping
-        xs_styles = placement_styles("xs")
-        {
-          "xxs" => xs_styles,
-          "xs" => xs_styles,
-          "sm" => placement_styles("xs"),
-          "md" => placement_styles("0"),
-          "lg" => placement_styles("0"),
-          "xl" => placement_styles({ value: "xxs", inset: true }),
-        }
-      end
-
-      def placement_styles(offset)
-        top_bottom_offset = if offset == "xs"
-                              "xs"
-                            elsif offset == { value: "xxs", inset: true }
-                              { value: "xxs", inset: true }
-                            else
-                              "0"
-                            end
-
-        {
-          "top-right" => { top: top_bottom_offset, right: offset },
-          "bottom-left" => { bottom: top_bottom_offset, left: offset },
-          "top-left" => { top: top_bottom_offset, left: offset },
-          "bottom-right" => { bottom: top_bottom_offset, right: offset },
-        }
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx

@@ -57,26 +57,6 @@ const AvatarDefault = (props) => {
           status="offline"
           {...props}
       />
-      <br/>
-      <Avatar
-          imageAlt="Terry Johnson Standing"
-          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
-          name="Terry Johnson"
-          overlay={{component:"badge", text: "6", variant: "notification", placement:"top-right"}}
-          size="lg"
-          status="offline"
-          {...props}
-      />
-      <br/>
-      <Avatar
-          imageAlt="Terry Johnson Standing"
-          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
-          name="Terry Johnson"
-          overlay={{component:"icon", icon:"plus", variant:"royal", placement:"bottom-left"}}
-          size="xl"
-          status="offline"
-          {...props}
-      />
     </div>
   )
 }

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

@@ -4,15 +4,11 @@ examples:
     - avatar_monogram: Monogram
     - avatar_no_image: "Bad Image Link"
     - avatar_status: Status
-    - avatar_circle_icon_component_overlay: Circle Icon Component Overlay
-    - avatar_badge_component_overlay: Badge Component Overlay
   react:
     - avatar_default: Default
     - avatar_monogram: Monogram
     - avatar_no_image: "Bad Image Link"
     - avatar_status: Status
-    - avatar_circle_icon_component_overlay: Circle Icon Component Overlay
-    - avatar_badge_component_overlay: Badge Component Overlay
   swift:
     - avatar_default_swift: Default
     - avatar_monogram_swift: Monogram

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

@@ -2,5 +2,3 @@ export { default as AvatarDefault } from './_avatar_default.jsx'
 export { default as AvatarMonogram } from './_avatar_monogram.jsx'
 export { default as AvatarStatus } from './_avatar_status.jsx'
 export { default as AvatarNoImage } from './_avatar_no_image.jsx'
-export { default as AvatarCircleIconComponentOverlay } from './_avatar_circle_icon_component_overlay.jsx'
-export { default as AvatarBadgeComponentOverlay } from './_avatar_badge_component_overlay.jsx'

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -28,7 +28,6 @@ $pb_button_border_width: 0px;
   font-size: $font_small;
   font-weight: $bold;
   text-align: center;
-  text-decoration: none;
   vertical-align: middle;
   text-transform: none;
   border-width: $pb_button_border_width;

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -37,7 +37,7 @@
         }
       }
       &:focus {
-        box-shadow: 0px 0px 0 1px $primary !important;
+        box-shadow: 0px 0px 0 1px $primary;
         outline: unset;
         transition: box-shadow 0.15s ease-in-out;
       }

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md

@@ -1,7 +1,7 @@
 The dropdown comes with the following subcomponents that can be used to achieve various levels of customization:
 
-`Dropdown. Trigger` / `dropdown/dropdown_trigger`
-`Dropdown.Container`/ `dropdown/dropdown_container`
-`Dropdown.Option` / `dropdown/dropdown_option`
+`Dropdown. Trigger`
+`Dropdown.Container`
+`Dropdown.Option`
 
 See the code snippet below for a visual on how to use the kit with subcomponents. Each subcomponent allows for GlobalProps in addition to any subcomponent specfic props. 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx

@@ -16,7 +16,7 @@ const DropdownWithAutocomplete = (props) => {
       label: "Ramon Ruiz",
       value: "Ramon Ruiz",
       territory: "PHL",
-      title: "Senior UX Designer",
+      title: "Senior UX Desinger",
       id: "ramon-ruiz",
       status: "Away"
     },

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx

@@ -17,7 +17,7 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
       label: "Ramon Ruiz",
       value: "Ramon Ruiz",
       territory: "PHL",
-      title: "Senior UX Designer",
+      title: "Senior UX Desinger",
       id: "ramon-ruiz",
       status: "Away"
     },

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx

@@ -17,7 +17,7 @@ const DropdownWithCustomDisplay = (props) => {
       label: "Ramon Ruiz",
       value: "Ramon Ruiz",
       territory: "PHL",
-      title: "Senior UX Designer",
+      title: "Senior UX Desinger",
       id: "ramon-ruiz",
       status: "Away"
     },

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

@@ -1,13 +1,6 @@
 examples:
-  rails:
-  - dropdown_default: Default
-  - dropdown_subcomponent_structure: Subcomponent Structure
-  - dropdown_with_label: With Label
-  - dropdown_with_custom_options: Custom Options
-  - dropdown_with_custom_display: Custom Display
-  - dropdown_with_custom_trigger: Custom Trigger
-  - dropdown_with_custom_padding: Custom Padding for Dropdown Options
-
+  
+  
   react:
   - dropdown_default: Default
   - dropdown_subcomponent_structure: Subcomponent Structure

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx

@@ -14,7 +14,6 @@ type LoadingInlineProps = {
   data?: { [key: string]: string },
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  text?: string,
 }
 
 const LoadingInline = (props: LoadingInlineProps) => {
@@ -25,7 +24,6 @@ const LoadingInline = (props: LoadingInlineProps) => {
     data = {},
     htmlOptions = {},
     id,
-    text = ' Loading',
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -52,7 +50,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
             icon="spinner"
             pulse
         />
-        {text}
+        {' Loading'}
       </Body>
     </div>
   )

data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_default.html.erb → _loading_inline_light.html.erb}

@@ -1,9 +1,9 @@
 <%= pb_rails("loading_inline") %>
 
 <%= pb_rails("loading_inline", props: {
-    align: "center"
+	align: "center"
 }) %>
 
 <%= pb_rails("loading_inline", props: {
-    align: "right"
+	align: "right"
 }) %>

data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_default.jsx → _loading_inline_light.jsx}

@@ -2,7 +2,7 @@ import React from 'react'
 
 import LoadingInline from '../_loading_inline'
 
-const LoadingInlineDefault = (props) => {
+const LoadingInlineLight = (props) => {
   return (
     <div>
       <LoadingInline
@@ -20,4 +20,4 @@ const LoadingInlineDefault = (props) => {
   )
 }
 
-export default LoadingInlineDefault
+export default LoadingInlineLight

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

@@ -1,11 +1,9 @@
 examples:
   
   rails:
-  - loading_inline_default: Default
-  - loading_inline_custom: Custom Text
+  - loading_inline_light: Light
 
   
   
   react:
-  - loading_inline_default: Default
-  - loading_inline_custom: Custom Text
+  - loading_inline_light: Default

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

@@ -1,2 +1 @@
-export { default as LoadingInlineDefault } from './_loading_inline_default.jsx'
-export { default as LoadingInlineCustom } from './_loading_inline_custom.jsx'
+export { default as LoadingInlineLight } from './_loading_inline_light.jsx'

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb

@@ -1,5 +1,5 @@
 <%= pb_content_tag do %>
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
-    <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> <%= object.text %>
+    <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> Loading
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb

@@ -7,7 +7,6 @@ module Playbook
                    values: %w[left center right],
                    default: "left"
       prop :dark, type: Playbook::Props::Boolean, default: false
-      prop :text, type: Playbook::Props::String, default: "Loading"
 
       def classname
         generate_classname("pb_loading_inline_kit", align)

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js

@@ -39,17 +39,3 @@ test('should render aria-label', () => {
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveAttribute('aria-label', testId)
 })
-
-
-test('displays custom text content', () => {
-    render(
-        <LoadingInline
-            aria={{ label: testId }}
-            data={{ testid: testId }}
-            text=' Saving'
-        />
-    )
-  
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveTextContent('Saving')
-})

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -127,7 +127,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
             }
           }}
           role="tooltip_trigger"
-          style={{ display: "inline-block" }}
+          style={{ display: "inline-flex" }}
           {...ariaProps}
           {...dataProps}
           {...htmlProps}

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

@@ -33,12 +33,6 @@ PbTable.start()
 import PbTextarea from './pb_textarea'
 PbTextarea.start()
 
-import PbDropdown from './pb_dropdown'
-PbDropdown.start()
-
-import PbAdvancedTable from './pb_advanced_table'
-PbAdvancedTable.start()
-
 import 'flatpickr'
 
 // React-Rendered Rails Kits =====

data/dist/menu.yml

@@ -53,7 +53,7 @@ kits:
         description: Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data. 
         status: "stable"
       - name: "advanced_table"
-        platforms: *web
+        platforms: *react_only
         description: The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting.
         status: "stable" 
       - name: "list"