playbook_ui 13.27.0.pre.alpha.testingcollapsible2917 → 13.27.0

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "13.27.0"
-  VERSION = "13.27.0.pre.alpha.testingcollapsible2917"
+  PREVIOUS_VERSION = "13.26.0"
+  VERSION = "13.27.0"
 end

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 13.27.0.pre.alpha.testingcollapsible2917
+  version: 13.27.0
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-05-16 00:00:00.000000000 Z
+date: 2024-05-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -305,10 +305,8 @@ files:
 - app/pb_kits/playbook/pb_avatar/avatar.test.js
 - app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb
 - app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx
-- app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.md
 - app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb
 - app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx
-- app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.md
 - app/pb_kits/playbook/pb_avatar/docs/_avatar_default.html.erb
 - app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx
 - app/pb_kits/playbook/pb_avatar/docs/_avatar_default_swift.md
@@ -673,15 +671,12 @@ files:
 - app/pb_kits/playbook/pb_collapsible/_collapsible.tsx
 - app/pb_kits/playbook/pb_collapsible/_helper_functions.ts
 - app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx
-- app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleIcon.tsx
 - app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx
 - app/pb_kits/playbook/pb_collapsible/collapsible.html.erb
 - app/pb_kits/playbook/pb_collapsible/collapsible.rb
 - app/pb_kits/playbook/pb_collapsible/collapsible.test.js
 - app/pb_kits/playbook/pb_collapsible/collapsible_content.html.erb
 - app/pb_kits/playbook/pb_collapsible/collapsible_content.rb
-- app/pb_kits/playbook/pb_collapsible/collapsible_icon.html.erb
-- app/pb_kits/playbook/pb_collapsible/collapsible_icon.rb
 - app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb
 - app/pb_kits/playbook/pb_collapsible/collapsible_main.rb
 - app/pb_kits/playbook/pb_collapsible/context.ts
@@ -689,10 +684,6 @@ files:
 - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx
 - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.md
 - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_colors_swift.md
-- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx
-- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.md
-- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb
-- app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.md
 - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.html.erb
 - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx
 - app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default_swift.md
@@ -1056,29 +1047,25 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb
@@ -2957,7 +2944,7 @@ homepage: https://playbook.powerapp.cloud/
 licenses:
 - ISC
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -2973,7 +2960,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubygems_version: 3.5.3
-signing_key: 
+signing_key:
 specification_version: 4
 summary: Playbook Design System
 test_files: []

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.md

@@ -1,3 +0,0 @@
-NOTE: All `componentOverlay` implementations require a `placement` prop, that accepts any of the following values: `top-right`, `top-left`, `bottom-right`, `bottom-left`, `top-center`, `bottom-center`, `left-center`, and `right-center`.
-
-When passing the `badge` component as an overlay, you must also specify its text content,and you may optionally control the color by passing an [approved value](https://playbook.powerapp.cloud/kits/badge#colors) as a `variant`.

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.md

@@ -1,3 +0,0 @@
-NOTE: All `componentOverlay` implementations require a `placement` prop, that accepts any of the following values: `top-right`, `top-left`, `bottom-right`, `bottom-left`, `top-center`, `bottom-center`, `left-center`, and `right-center`.
-
-When passing the `iconCircle` component as an overlay, you must also specify an `icon`, and you may optionally control the color by passing an [approved value](https://playbook.powerapp.cloud/kits/icon_circle/rails#color) as a `variant`.

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleIcon.tsx

@@ -1,92 +0,0 @@
-import React from "react";
-import Icon, { IconSizes } from "../../pb_icon/_icon";
-
-type IconColors =
-  | "default"
-  | "light"
-  | "lighter"
-  | "link"
-  | "error"
-  | "success";
-
-type IconProps = {
-  collapsed: boolean | (() => void);
-  icon?: string[] | string;
-  iconColor?: IconColors;
-  iconSize?: IconSizes;
-  onIconClick?: () => void;
-};
-
-type colorMap = {
-  default: string;
-  light: string;
-  lighter: string;
-  link: string;
-  error: string;
-  success: string;
-};
-
-const colorMap = {
-  default: "#242B42",
-  light: "#687887",
-  lighter: "#C1CDD6",
-  link: "#0056CF",
-  error: "#FF2229",
-  success: "#00CA74",
-};
-
-const CollapsibleIcon = ({
-  collapsed,
-  icon,
-  iconSize,
-  iconColor,
-  onIconClick,
-}: IconProps) => {
-  const color = colorMap[iconColor];
-
-  const showIcon = (icon: string | string[]) => {
-    if (typeof icon === "string") {
-      return [icon, icon];
-    }
-    return icon;
-  };
-
-  const handleIconClick = (e: React.MouseEvent<HTMLElement>) => {
-    if (onIconClick) {
-      e.stopPropagation();
-      onIconClick();
-    }
-  };
-
-  return (
-    <>
-      {collapsed ? (
-        <div
-            className="icon_wrapper"
-            key={icon ? showIcon(icon)[0] : "chevron-down"}
-            onClick={(e) => handleIconClick(e)}
-            style={{ verticalAlign: "middle", color: color }}
-        >
-          <Icon
-              icon={icon ? showIcon(icon)[0] : "chevron-down"}
-              size={iconSize}
-          />
-        </div>
-      ) : (
-        <div
-            className="icon_wrapper"
-            key={icon ? showIcon(icon)[1] : "chevron-up"}
-            onClick={(e) => handleIconClick(e)}
-            style={{ verticalAlign: "middle", color: color }}
-        >
-          <Icon
-              icon={icon ? showIcon(icon)[1] : "chevron-up"}
-              size={iconSize}
-          />
-        </div>
-      )}
-    </>
-  );
-};
-
-export default CollapsibleIcon;

data/app/pb_kits/playbook/pb_collapsible/collapsible_icon.html.erb

@@ -1,15 +0,0 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria,
-    style: "color: #{object.icon_color};",
-    **combined_html_options) do %>
-        <% if object.icon.present? %>
-          <%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[0], id:"collapsible_open_icon", size: object.size }) %>
-          <%= pb_rails("icon", props: { icon: object.show_icon(object.icon)[1], id:"collapsible_close_icon", size: object.size }) %>
-        <% else %>
-          <%= pb_rails("icon", props: { icon: "chevron-down", id:"collapsible_open_icon", size: object.size }) %>
-          <%= pb_rails("icon", props: { icon: "chevron-up", id:"collapsible_close_icon", size: object.size }) %>
-        <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_collapsible/collapsible_icon.rb

@@ -1,37 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbCollapsible
-    class CollapsibleIcon < Playbook::KitBase
-      prop :collapsed, type: Playbook::Props::Boolean,
-                       default: true
-      prop :color, type: Playbook::Props::Enum,
-                   values: %w[default light lighter link success error],
-                   default: "default"
-      prop :icon
-      prop :size, type: Playbook::Props::Enum,
-                  values: ["lg", "xs", "sm", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x", nil],
-                  default: nil
-
-      def classname
-        generate_classname("pb_collapsible_icon_kit", separator: " ")
-      end
-
-      def show_icon(icon)
-        case icon
-        when ::String
-          [icon, icon]
-        when ::Array
-          icon
-        end
-      end
-
-      def icon_color
-        return "" if color.nil?
-
-        color_object = { light: "#687887", lighter: "#C1CDD6", link: "#0056CF", success: "#00CA74", error: "#FF2229", default: "#242B42" }
-        color_object[color.to_sym]
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx

@@ -1,73 +0,0 @@
-import React from 'react'
-import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from '../..'
-
-const CollapsibleCustomMain = () => {
-  const [isCollapsed, setIsCollapsed] = useCollapsible(true)
-
-  return (
-  <>
-    <Collapsible
-        collapsed={isCollapsed}
-    >
-          <Background 
-              backgroundColor="white" 
-              cursor="pointer"
-              htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
-              position="sticky" 
-              top="0" 
-          >
-              <Flex 
-                  align="center" 
-                  gap="sm"
-                  justify="between" 
-              >
-                <Title 
-                    size={4} 
-                    text="Custom Main Section" 
-                />
-                <Collapsible.Icon collapsed={isCollapsed}/>
-              </Flex>
-          </Background>
-      <Collapsible.Content padding="none">
-          <div>
-          <List>
-              <ListItem 
-                  align="stretch"
-                  flexDirection="column" 
-              >
-                Checklist item
-              </ListItem>
-              <ListItem 
-                  align="stretch"
-                  flexDirection="column" 
-              >
-                Checklist item
-              </ListItem>
-              <ListItem 
-                  align="stretch"
-                  flexDirection="column" 
-              >
-                Checklist item
-              </ListItem>
-              <ListItem 
-                  align="stretch"
-                  flexDirection="column" 
-              >
-                Checklist item
-              </ListItem>
-              <ListItem 
-                  align="stretch"
-                  flexDirection="column" 
-              >
-                Checklist item
-              </ListItem>
-            </List>
-          </div>
-      </Collapsible.Content>
-    </Collapsible>
-   
-  </>
-  )
-}
-
-export default CollapsibleCustomMain

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.md

@@ -1,5 +0,0 @@
-A custom Main section can also be used in place of the provided `Collapsible.Main`. This gives devs full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
-
-If a custom component is used in place of the default, devs must handle collapsible toggling themselves via the useCollapsible hook as seen in this example.
-
-The default Collapsible icon can also be used as part of the custom Main as shown, you will need to pass the Collapsible state to the `collapsed` prop on the optional `Collapsible.Icon`.

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb

@@ -1,20 +0,0 @@
-<%= pb_rails("collapsible", props: { name: "default-example" }) do %>
-    <%= pb_rails("background", props: { background_color: "white", position: "sticky", top: "0", cursor:"pointer", data: {"collapsible-main": "true"} }) do %>
-      <%= pb_rails("flex", props: {align:"center", gap:"sm", justify:"between"}) do %>
-        <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
-    <%= pb_rails("collapsible/collapsible_icon") %>
-     <% end %>
-      <% end %>
-     <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
-    <% end %>
-      <%= pb_rails("collapsible/collapsible_content", props: { padding: "none"  }) do %>
-        <%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
-            <%= pb_rails("list/item") do %> Checklist Item <% end %>
-            <%= pb_rails("list/item") do %> Checklist Item <% end %>
-            <%= pb_rails("list/item") do %> Checklist Item <% end %>
-            <%= pb_rails("list/item") do %> Checklist Item <% end %>
-            <%= pb_rails("list/item") do %> Checklist Item <% end %>
-            <% end %>
-      <% end %>
-    <% end %>
-    

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.md

@@ -1,5 +0,0 @@
-A custom Main section can also be used in place of the provided `collapsible/collapsible_main`. This gives devs full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.
-
-If a custom component is used in place of the default, devs must add `data: {"collapsible-main": "true"}` to the custom Main for toggling of the collapsible to work correctly.
-
-The default Collapsible icon can also be used as part of the custom Main as shown with the optional  `collapsible/collapsible_icon`. This optional subcomponent accepts all icon related props `color`, `icon` and `size`.

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

@@ -1,6 +0,0 @@
-The dropdown is built using all of the following required subcomponents:
-
-`dropdown/dropdown_trigger` is the UI component that users interact with to toggle the dropdown. 
-`dropdown/dropdown_container` is the floating container that wraps the list of dropdown options.
-`dropdown/dropdown_option` renders options that are passed to the container. 
-Each of these subcomponents can be altered using global props and/or their respective props. See doc examples below for more information on each.

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

@@ -1,5 +0,0 @@
-Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. The component passed to custom_display will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
-
-The `placeholder` prop can also be used to customize the placeholder text for the default `dropdown/dropdown_trigger`. 
-
-The dropdown follows the typical rails pattern of utilizing hidden inputs for form submission. The hidden input value is the selected options' id.

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

@@ -1 +0,0 @@
-`dropdown/dropdown_option` subcomponent accepts any child components to customize the options' contents and display. By default, options are Body kit text that is set by the `label` value from the `option` object.

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

@@ -1 +0,0 @@
-Optionally replace the default trigger's select element by passing child components directly to the `dropdown/dropdown_trigger`.