playbook_ui_docs 14.21.2.pre.alpha.PLAY2112tablestylingwithonecell8417 → 14.21.2.pre.alpha.PLAY2179playbookiconsupdate8389

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.21.2.pre.alpha.PLAY2112tablestylingwithonecell8417
+  version: 14.21.2.pre.alpha.PLAY2179playbookiconsupdate8389
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-06-16 00:00:00.000000000 Z
+date: 2025-06-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -878,10 +878,6 @@ files:
 - 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_icon_options.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_rails.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_react.md
 - 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
@@ -889,10 +885,6 @@ files:
 - 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_radio_options.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_rails.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_react.md
 - 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

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options.html.erb

@@ -1,52 +0,0 @@
-<%
-  options = [
-    { label: "Item 1", value: "item-1", id: "1" },
-    { label: "Item 2", value: "item-2", id: "2" },
-    { label: "Item 3", value: "item-3", id: "3" }
-  ]
-%>
-
-<%= pb_rails("dropdown", props: { label: "Multiple Icons", options: options }) do %>
-  <%= pb_rails("dropdown/dropdown_trigger") %>
-  <%= pb_rails("dropdown/dropdown_container") do %>
-    <% options.each do |option| %>
-      <%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
-        <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
-          <%= pb_rails("flex") do %>
-            <%= pb_rails("icon", props: { icon: "calendar", padding_right: "xs" }) %>
-            <%= pb_rails("body", props: { color: "default", text: option[:label] }) %>
-          <% end %>
-          <%= pb_rails("icon", props: { icon: "check" }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>
-
-<%= pb_rails("dropdown", props: { label: "Icon on Left", options: options, padding_y: "md" }) do %>
-  <%= pb_rails("dropdown/dropdown_trigger") %>
-  <%= pb_rails("dropdown/dropdown_container") do %>
-    <% options.each do |option| %>
-      <%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
-        <%= pb_rails("flex", props: { align: "center" }) do %>
-          <%= pb_rails("icon", props: { icon: "calendar", padding_right: "xs" }) %>
-          <%= pb_rails("body", props: { color: "default", text: option[:label] }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>
-
-<%= pb_rails("dropdown", props: { label: "Icon on Right", options: options }) do %>
-  <%= pb_rails("dropdown/dropdown_trigger") %>
-  <%= pb_rails("dropdown/dropdown_container") do %>
-    <% options.each do |option| %>
-      <%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
-        <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
-          <%= pb_rails("body", props: { color: "default", text: option[:label] }) %>
-          <%= pb_rails("icon", props: { icon: "check" }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

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

@@ -1,99 +0,0 @@
-import React from 'react'
-import Dropdown from '../_dropdown'
-
-import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
-import Icon from '../../pb_icon/_icon'
-
-const DropdownCustomIconOptions = (props) => {
-
-  const options = [
-    { label: "Item 1", value: "item-1", id: "1" },
-    { label: "Item 2", value: "item-2", id: "2" },
-    { label: "Item 3", value: "item-3", id: "3" },
-  ]
-
-
-  return (
-  <div>
-      <Dropdown label="Multiple Icons"
-          options={options}
-          {...props}
-      >
-        {options.map((option) => (
-          <Dropdown.Option key={option.id} 
-              option={option}
-          >
-            <Flex align="center" 
-                justify="between"
-            >
-                <Flex align="center">
-                  <Icon icon="calendar" 
-                      paddingRight="xs"
-                      {...props}    
-                  />
-                  <Body color="default" 
-                      text={option.label}
-                      {...props}
-                  />
-                </Flex>
-                <Icon icon="check" 
-                    {...props}    
-                />
-            </Flex>
-          </Dropdown.Option>
-        ))}
-      </Dropdown>
-
-      <Dropdown label="Icon on Left"
-          options={options} 
-          paddingY="md"
-          {...props}
-      >
-        {options.map((option) => (
-          <Dropdown.Option key={option.id}
-              option={option}
-          >
-            <Flex align="center">
-              <Icon icon="calendar" 
-                  paddingRight="xs"
-                  {...props}
-              />
-              <Body color="default" 
-                  text={option.label}
-                  {...props}
-              />
-            </Flex>
-          </Dropdown.Option>
-        ))}
-      </Dropdown>
-
-      <Dropdown label="Icon on Right"
-          options={options}
-          {...props}
-      >
-        {options.map((option) => (
-          <Dropdown.Option key={option.id}
-              option={option}
-          >
-            <Flex align="center"
-                justify="between"
-            >
-              <Flex align="center">
-                <Body color="default" 
-                    text={option.label}
-                    {...props}
-                />
-              </Flex>
-              <Icon icon="check"
-                  {...props}
-              />
-            </Flex>
-          </Dropdown.Option>
-        ))}
-      </Dropdown>
-  </div>
-  )
-}
-
-export default  DropdownCustomIconOptions

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

@@ -1 +0,0 @@
-Use the `dropdown/dropdown_option` subcomponent structure to include custom layouts inside dropdown menus. Icons can be placed alongside the Body label text.

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

@@ -1 +0,0 @@
-Use the `Dropdown.Option` subcomponent structure to include custom layouts inside dropdown menus. Icons can be placed alongside the Body label text.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.html.erb

@@ -1,28 +0,0 @@
-<%
-  options = [
-    { label: "Item 1", value: "item-1", id: "1" },
-    { label: "Item 2", value: "item-2", id: "2" },
-    { label: "Item 3", value: "item-3", id: "3" }
-  ]
-
-  selected_value = params[:selected_value]
-%>
-
-<%= pb_rails("dropdown", props: { label: "Choose Item", options: options }) do %>
-  <%= pb_rails("dropdown/dropdown_trigger") %>
-  <%= pb_rails("dropdown/dropdown_container") do %>
-    <% options.each do |option| %>
-      <% checked = (option[:value] == selected_value) %>
-      <%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
-        <%= pb_rails("flex", props: { align: "center" }) do %>
-          <%= pb_rails("radio", props: {
-            text: option[:label],
-            name: "dropdown_radio",
-            value: option[:value],
-            checked: checked,
-          }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

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

@@ -1,47 +0,0 @@
-import React, { useState } from 'react'
-import Dropdown from '../_dropdown'
-
-import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
-import Radio from '../../pb_radio/_radio'
-
-const DropdownCustomRadioOptions = (props) => {
-  const [selectedValue, setSelectedValue] = useState(null)
-
-  const options = [
-    { label: "Item 1", value: "item-1", id: "1" },
-    { label: "Item 2", value: "item-2", id: "2" },
-    { label: "Item 3", value: "item-3", id: "3" },
-  ]
-
-
-  return (
-  <div>
-      <Dropdown
-          label="Select Item"
-          onSelect={(selectedItem) => setSelectedValue(selectedItem?.value)}
-          options={options}
-          {...props}
-      >
-        {options.map((option) => {
-          return (
-            <Dropdown.Option key={option.id}
-                option={option}
-            >
-              <Flex align="center">
-                <Radio
-                    checked={selectedValue === option.value}
-                    name="dropdown_radio"
-                    value={option.value}
-                />
-                <Body text={option.label} />
-              </Flex>
-            </Dropdown.Option>
-          )
-        })}
-      </Dropdown>
-  </div>
-  )
-}
-
-export default  DropdownCustomRadioOptions

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

@@ -1 +0,0 @@
-Radio inputs can be used inside `dropdown/dropdown_option` for a custom layout that mimics form-like selection within a dropdown.

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

@@ -1 +0,0 @@
-Radio inputs can be used inside `Dropdown.Option` for a custom layout that mimics form-like selection within a dropdown.