playbook_ui 13.24.0 → 13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812

data/app/pb_kits/playbook/pb_dropdown/utilities/index.ts

@@ -0,0 +1,2 @@
+export { separateChildComponents, prepareSubcomponents } from './subComponentHelper';
+export { handleClickOutside } from './clickOutsideHelper';

data/app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx

@@ -0,0 +1,61 @@
+import React, { ReactElement } from "react";
+import DropdownTrigger from "../subcomponents/DropdownTrigger";
+import DropdownContainer from "../subcomponents/DropdownContainer";
+
+type PrepareComponentsProps = {
+  children: React.ReactChild[] | React.ReactChild;
+  container: React.ReactChild;
+  dark?: boolean;
+  hasContainerSubcomponent: boolean;
+  hasTriggerSubcomponent: boolean;
+  otherChildren: React.ReactChild[];
+  trigger: React.ReactChild;
+};
+
+export const separateChildComponents = (children: React.ReactChild[] | React.ReactChild | ReactElement[]) => {
+  let trigger: React.ReactChild = null;
+  let container: React.ReactChild = null;
+  const otherChildren: React.ReactChild[] = [];
+
+  React.Children.forEach(children, (child) => {
+    if (child && (child as ReactElement).type === DropdownTrigger) {
+      trigger = child;
+    } else if (child && (child as ReactElement).type === DropdownContainer) {
+      container = child;
+    } else {
+      otherChildren.push(child);
+    }
+  });
+
+  return { trigger, container, otherChildren };
+};
+
+export const prepareSubcomponents = ({
+  children,
+  hasTriggerSubcomponent,
+  hasContainerSubcomponent,
+  trigger,
+  container,
+  otherChildren,
+  dark
+}: PrepareComponentsProps) => {
+  const componentsToRender = [];
+
+  if (!hasTriggerSubcomponent && !hasContainerSubcomponent) {
+    componentsToRender.push(<DropdownTrigger dark={dark}/>);
+    componentsToRender.push(<DropdownContainer dark={dark}>{children}</DropdownContainer>);
+  } else if (!hasTriggerSubcomponent && hasContainerSubcomponent) {
+    componentsToRender.push(<DropdownTrigger dark={dark}/>);
+    componentsToRender.push(children);
+  } else if (hasTriggerSubcomponent && !hasContainerSubcomponent) {
+    componentsToRender.push(trigger);
+    componentsToRender.push(
+      <DropdownContainer dark={dark}>{otherChildren}</DropdownContainer>
+    );
+  } else {
+    componentsToRender.push(trigger);
+    componentsToRender.push(container);
+  }
+
+  return componentsToRender;
+};

data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag("div",
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
       <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
         <label for="upload-<%= object.id %>" class="pb_button_kit_secondary_inline_enabled"><%= "#{object.label}" %></label>
         <%= pb_rails("text_input", props: {

data/app/pb_kits/playbook/pb_filter/filter.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <%= object.wrapper do %>
       <%= pb_rails("flex", props: { orientation: "row", padding_right: "lg", vertical: "center" }) do %>
         <% if (object.template != "sort_only") %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
 
     <% if content %>

data/app/pb_kits/playbook/pb_flex/flex.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_flex/flex_item.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    style: object.style_value,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div,
+    style: object.style_value) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_form_group/form_group.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,4 +1,4 @@
-<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, **combined_html_options) do %>
+<%= pb_content_tag(:div, class: object.classname + object.size_class) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xs" }) %>
       <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>

data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:span,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(:span) do %>
   <%= link_to object.url, target: object.link_option do %>
     <%= pb_rails("badge", props: { dark: object.dark, variant: "primary", text: object.hashtag_text }) %>
   <% end %>

data/app/pb_kits/playbook/pb_highlight/highlight.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:span,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag(:span) do %>
     <mark>
       <%= content.presence || object.text %>
     </mark>

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("home_address_street/#{emphasis}_emphasis", props: object.send("#{emphasis}_emphasis_props")) %>
 <% end %>
 

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss

@@ -51,7 +51,7 @@ $pb_icon_circle_sizes: (
   }
 
   @each $name, $size in $pb_icon_circle_sizes {
-    &[class*=_#{$name}] {
+    &[class*=_size_#{$name}] {
       width: $size;
       height: $size;
       border-radius: $size/2;

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx

@@ -43,7 +43,7 @@ const IconCircle = (props: IconCircleProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  const classes = classnames(buildCss('pb_icon_circle_kit', size, variant), globalProps(props), className)
+  const classes = classnames(buildCss('pb_icon_circle_kit', `size_${size}`, variant), globalProps(props), className)
 
 
   return (

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
-    <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
+<%= pb_content_tag do %>
+  <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
 <% end %>

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb

@@ -14,7 +14,7 @@ module Playbook
                      default: "default"
 
       def classname
-        generate_classname("pb_icon_circle_kit", size, variant)
+        generate_classname("pb_icon_circle_kit", "size_#{size}", variant)
       end
     end
   end

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js

@@ -16,7 +16,7 @@ describe("IconCircle Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("pb_icon_circle_kit_md_default")
+        expect(kit).toHaveClass("pb_icon_circle_kit_size_md_default")
     })
 
     test("renders icon", () => {
@@ -66,7 +66,7 @@ describe("IconCircle Kit", () => {
             />
           )
           const kit = screen.getByTestId(testId)
-          expect(kit).toHaveClass(`pb_icon_circle_kit_sm_${colorVariant}`)
+          expect(kit).toHaveClass(`pb_icon_circle_kit_size_sm_${colorVariant}`)
       
           cleanup()
         })
@@ -89,7 +89,7 @@ describe("IconCircle Kit", () => {
             />
           )
           const kit = screen.getByTestId(testId)
-          expect(kit).toHaveClass(`pb_icon_circle_kit_${sizeVariant}_default`)
+          expect(kit).toHaveClass(`pb_icon_circle_kit_size_${sizeVariant}_default`)
       
           cleanup()
         })

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
 
     <%= pb_rails("icon_circle", props: {
         dark: object.dark,

data/app/pb_kits/playbook/pb_icon_value/icon_value.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-  aria: object.aria,
-  class: object.classname,
-  data: object.data,
-  id: object.id,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
     <%= pb_rails("icon", props: { icon: object.icon, fixed_width: true }) %>
     <%= object.text %>

data/app/pb_kits/playbook/pb_label_pill/label_pill.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
       <%= pb_rails("caption", props: { text: object.label, classname: "pb_label_pill_label"}) %>
       <%= pb_rails("pill", props: { text: object.pill_value, variant: object.variant, classname: "pb_label_pill_pill" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_label_value/label_value.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
     <% if object.variant == "details" %>
         <%= pb_rails("flex", props: {inline: true, vertical: "center"}) do %>

data/app/pb_kits/playbook/pb_layout/body.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(object.tag,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag(object.tag) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/footer.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(object.tag,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag(object.tag) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/header.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(object.tag,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag(object.tag) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/item.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/layout.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/sidebar.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content.presence %>
 <% end %>

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 type ListItemProps = {
   aria?: { [key: string]: string },
@@ -11,7 +11,7 @@ type ListItemProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   tabIndex?: number,
-}
+} & GlobalProps
 
 const ListItem = (props: ListItemProps) => {
   const {

data/app/pb_kits/playbook/pb_list/item.html.erb

@@ -1,10 +1,4 @@
-<%= content_tag(:li,
-                aria: object.aria,
-                class: object.classname,
-                data: object.data,
-                id: object.id,
-                tabindex: object.tabindex,
-                **combined_html_options
-  ) do %>
+<%= pb_content_tag(:li,
+                   tabindex: object.tabindex) do %>
     <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_list/list.html.erb

@@ -1,13 +1,7 @@
 <%= content_tag(:div, class: object.list_classname) do %>
-  <%= content_tag(:"#{object.ordered_class}",
-                  aria: object.aria,
-                  class: object.classname,
-                  data: object.data,
-                  id: object.id,
+  <%= pb_content_tag(:"#{object.ordered_class}",
                   role: object.role,
-                  tabindex: object.tabindex,
-                  **combined_html_options
-    ) do %>
+                  tabindex: object.tabindex) do %>
       <%= content.presence %>
   <% end %>
 <% end %>

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

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
-
+<%= 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 }) %> Loading
   <% end %>

data/app/pb_kits/playbook/pb_message/message.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <% if object.valid? %>
       <%= pb_rails("avatar", props: {
         name: object.avatar_name,

data/app/pb_kits/playbook/pb_message/message_mention.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  aria: object.aria,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
     <%= content %>
 <% end %>

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-      aria: object.aria,
-      data: object.data,
-      id: object.id,
-      class: object.classname,
-      **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= react_component("MultiLevelSelect", object.multi_level_select_options)  %>
 <% end %>

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <% object.users.take(object.display_count).each do |user| %>
       <%= pb_rails("avatar", props: user.merge({size: object.size, classname: "pb_multiple_users_item", dark: object.dark}) ) %>
     <% end %>

data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-  aria: object.aria,
-  class: object.classname,
-  data: object.data,
-  id: object.id,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("avatar", props: object.users[0].merge({size: "xs", classname: "pb_multiple_users_stacked_item", dark: object.dark}) ) %>
 
   <% unless object.only_one %>

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -1,16 +1,11 @@
   <% if object.collapsible %>
     <%= pb_rails("collapsible", props: { name: "collapsible-nav-example", classname: object.collapsible_nav_classname }) do %>
       <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark, classname:object.margin_classes }) do %>
-        <%= content_tag(object.tag,
-          aria: object.aria,
-          class: object.classname,
-          data: object.data,
+        <%= pb_content_tag(object.tag,
           dark: object.dark,
-          id: object.id,
           href: object.link && object.link,
           target: object.link && object.target,
-          **combined_html_options
-          ) do %>
+         ) do %>
           <% if object.image_url %>
             <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
           <% end %>
@@ -27,13 +22,7 @@
       <% end %>
     <% end %>
   <% else %>
-    <%= content_tag(object.tag,
-      aria: object.aria,
-      class: object.classname,
-      **combined_html_options,
-      data: object.data,
-      dark: object.dark,
-      id: object.id,
+    <%= pb_content_tag(object.tag,
       href: object.link && object.link,
       target: object.link && object.target
       ) do %>

data/app/pb_kits/playbook/pb_nav/nav.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:nav,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(:nav) do %>
   <% if object.title %>
     <%= content_tag(:div, class: "pb_nav_list_title") do %>
       <%= content_tag(:a, class: "pb_nav_list_item_link_text", href: object.link) do %>

data/app/pb_kits/playbook/pb_online_status/online_status.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(:div,
-    aria: object.aria.merge!(label: object.status),
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div,
+    aria: object.aria.merge!(label: object.status)) do %>
 <% end %>

data/app/pb_kits/playbook/pb_pagination/pagination.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
      <%= will_paginate object.model, renderer: Playbook::Pagination::Rails %>
 <% end %>

data/app/pb_kits/playbook/pb_passphrase/passphrase.html.erb

@@ -1 +1 @@
-  <%= react_component('Passphrase', object.passphrase_options, class: object.classname, **combined_html_options) %>
+  <%= react_component('Passphrase', object.passphrase_options, class: object.classname) %>

data/app/pb_kits/playbook/pb_person/person.html.erb

@@ -1,13 +1,8 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
-      <%= pb_rails("body", props: {
-        tag: "span",
-        classname: "pb_person_first" }) { object.first_name } %>
-      <%= pb_rails("title", props: {
-        text: object.last_name,
-        size: 4 }) if object.last_name %>
+<%= pb_content_tag do %>
+  <%= pb_rails("body", props: {
+    tag: "span",
+    classname: "pb_person_first" }) { object.first_name } %>
+  <%= pb_rails("title", props: {
+    text: object.last_name,
+    size: 4 }) if object.last_name %>
 <% end %>

data/app/pb_kits/playbook/pb_person_contact/person_contact.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-  aria: object.aria,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("person", props: {
       first_name: object.first_name,
       last_name: object.last_name,

data/app/pb_kits/playbook/pb_pill/pill.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("title", props: { text: object.display_text, tag: "div", size: 4, classname: "pb_pill_text" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_popover/popover.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-  aria: object.aria,
-  class: object.classname,
-  data: object.data,
-  id: object.id,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
   <div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
     <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
       <%= content.presence %>

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb

@@ -1,9 +1,5 @@
-<%= content_tag(:div,
-    aria: object.aria_attributes,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div,
+    aria: object.aria_attributes) do %>
 
     <div class="progress_pills_status">
       <% object.with_status do |status| %>

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("flex") do %>
+ <%= pb_rails("progress_simple", props: { flex: "1", percent: 50 }) %>
+<% end %>

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Flex, ProgressSimple } from '../..'
+
+const ProgressSimpleFlex = () => {
+  return (
+    <Flex>
+      <ProgressSimple
+          align="left"
+          flex="1"
+          percent={68}
+      />
+    </Flex>
+  )
+}
+
+export default ProgressSimpleFlex

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.md

@@ -0,0 +1 @@
+When rendering a Progress Simple through within a Flex container, you must pass `flex="1"` to the kit itself so that it fills the available space