RubyGems - playbook_ui_docs - Versions diffs - 14.21.2.pre.alpha.PLAY2046advancedtableinfinitescroll8311 → 14.21.2.pre.alpha.PLAY2112tablestylingwithonecell8417 - Mend

playbook_ui_docs 14.21.2.pre.alpha.PLAY2046advancedtableinfinitescroll8311 → 14.21.2.pre.alpha.PLAY2112tablestylingwithonecell8417

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

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

@@ -0,0 +1,28 @@
+<%
+  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 ADDED Viewed

@@ -0,0 +1,47 @@
+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 ADDED Viewed

	@@ -0,0 +1 @@
1	+ 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 ADDED Viewed

	@@ -0,0 +1 @@
1	+ Radio inputs can be used inside `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_trigger.jsx CHANGED Viewed

@@ -14,21 +14,21 @@ const [selectedOption, setSelectedOption] = useState();
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
       areaCode: "+1",
       icon: "🇺🇸",
       id: "United-states"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
       areaCode: "+1",
       icon: "🇨🇦",
       id: "canada"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
       id: "pakistan"

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.html.erb CHANGED Viewed

@@ -2,21 +2,21 @@
   options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
       areaCode: "+1",
       icon: "🇺🇸",
       id: "us"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
       areaCode: "+1",
       icon: "🇨🇦",
       id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
       id: "pk"

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx CHANGED Viewed

@@ -11,21 +11,21 @@ const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
       areaCode: "+1",
       icon: "🇺🇸",
       id: "United-states"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
       areaCode: "+1",
       icon: "🇨🇦",
       id: "canada"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
       id: "pakistan"

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb CHANGED Viewed

@@ -1,8 +1,8 @@
 <%
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
   ]
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx CHANGED Viewed

@@ -6,15 +6,18 @@ const DropdownDefault = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
+      id: "us"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
+      id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
+      id: "pk"
     }
   ];

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx CHANGED Viewed

@@ -8,20 +8,20 @@ const [selectedOption, setSelectedOption] = useState();
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
       icon: "🇺🇸",
       id: "United-states"
     },
     {
       label: "United Kingdom",
-      value: "United Kingdom",
+      value: "unitedKingdom",
       icon: "🇬🇧",
       id: "united-kingdom"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
       icon: "🇵🇰",
       id: "pakistan"
     }

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb CHANGED Viewed

@@ -2,21 +2,21 @@
   options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
       areaCode: "+1",
       icon: "🇺🇸",
       id: "us"
     },
     {
       label: "United Kingdom",
-      value: "United Kingdom",
+      value: "unitedKingdom",
       areaCode: "+44",
       icon: "🇬🇧",
       id: "gb"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
       id: "pk"

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

@@ -15,6 +15,8 @@ examples:
   - dropdown_with_custom_trigger_rails: Custom Trigger
   - dropdown_with_search_rails: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
+  - dropdown_with_custom_icon_options: Custom Icon Options
+  # - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
@@ -37,6 +39,8 @@ examples:
   - dropdown_with_custom_trigger: Custom Trigger
   - dropdown_with_search: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
+  - dropdown_with_custom_icon_options: Custom Icon Options
+  # - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value

data/app/pb_kits/playbook/pb_dropdown/docs/index.js CHANGED Viewed

@@ -19,4 +19,6 @@ export { default as DropdownMultiSelect } from './_dropdown_multi_select.jsx'
 export { default as DropdownMultiSelectDisplay } from './_dropdown_multi_select_display.jsx'
 export { default as DropdownMultiSelectWithAutocomplete } from './_dropdown_multi_select_with_autocomplete.jsx'
 export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_select_with_default.jsx'
-export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
+export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
+export {default as DropdownWithCustomIconOptions} from './_dropdown_with_custom_icon_options.jsx'
+export {default as DropdownWithCustomRadioOptions} from './_dropdown_with_custom_radio_options.jsx'

data/app/pb_kits/playbook/pb_filter/docs/_filter_sidebar.jsx ADDED Viewed

@@ -0,0 +1,224 @@
+import React, { useState } from 'react'
+import Filter from '../../pb_filter/_filter'
+import Select from '../../pb_select/_select'
+import TextInput from '../../pb_text_input/_text_input'
+import useCollapsible from '../../pb_collapsible/useCollapsible'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
+import Checkbox from '../../pb_checkbox/_checkbox'
+import Flex from '../../pb_flex/_flex'
+import Table from '../../pb_table/_table'
+import Caption from '../../pb_caption/_caption'
+import Icon from '../../pb_icon/_icon'
+const people = [
+  { name: 'Hera Syndulla', territory: 'A galaxy far far away, like really far away...', products: ['Insulation'] },
+  { name: 'Kanan Jarrus', territory: 'USA', products: ['Siding', 'Roofing', 'Gutters'] },
+  { name: 'C1-10P', territory: 'USA', products: ['Roofing'] },
+  { name: 'Anakin Skywalker', territory: 'A galaxy far far away, like really far away...', products: ['Doors', 'Windows', 'Solar'] },
+  { name: 'Leia Organa', territory: 'Canada', products: ['Windows', 'Doors'] },
+  { name: 'Luke Skywalker', territory: 'Brazil', products: ['Solar', 'Roofing'] },
+  { name: 'Padmé Amidala', territory: 'Philippines', products: ['Siding', 'Gutters'] },
+  { name: 'Obi-Wan Kenobi', territory: 'USA', products: ['Windows', 'Siding'] },
+  { name: 'Ahsoka Tano', territory: 'Canada', products: ['Insulation', 'Solar'] },
+  { name: 'Boba Fett', territory: 'Brazil', products: ['Roofing', 'Gutters'] },
+  { name: 'Mace Windu', territory: 'Philippines', products: ['Doors', 'Siding'] },
+  { name: 'Grogu', territory: 'A galaxy far far away, like really far away...', products: ['Insulation'] },
+  { name: 'Sabine Wren', territory: 'Canada', products: ['Solar', 'Doors'] },
+  { name: 'C-3PO', territory: 'Brazil', products: ['Windows'] },
+  { name: 'R2-D2', territory: 'Philippines', products: ['Doors', 'Gutters'] },
+]
+const FilterSidebar = (props) => {
+  const [name, setName] = useState('')
+  const [ territory, setTerritory ] = useState('')
+  const [ products, setProducts ] = useState({})
+  const handleUpdateName = ({ target }) => {
+    setName(target.value)
+  }
+  const handleUpdateTerritory = ({ target }) => {
+    setTerritory(target.value)
+  }
+  const handleCheckboxChange = ({ target }) => {
+    setProducts(prev => ({
+      ...prev,
+      [target.name]: !prev[target.name],
+    }))
+  }
+  const [isCollapsed, setIsCollapsed] = useCollapsible(true)
+  const [isProductsCollapsed, setIsProductsCollapsed] = useCollapsible(true)
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+    { value: 'A galaxy far far away, like really far away...' },
+  ]
+  const filteredPeople = people.filter((person) => {
+    const matchesName = person.name.toLowerCase().includes(name.toLowerCase())
+    const matchesTerritory = territory === '' ? true : person.territory === territory
+    const matchesProducts = Object.values(products).every((product) => !product) ? true : person.products.some(product => products[product])
+    return matchesName && matchesTerritory && matchesProducts
+  })
+  return (
+    <>
+      <Flex>
+        <Filter
+            isCollapsed={isCollapsed}
+            marginRight="xs"
+            onCollapse={() => setIsCollapsed(!isCollapsed)}
+            results={filteredPeople.length}
+            sortOptions={{
+              popularity: 'Popularity',
+              // eslint-disable-next-line
+              manager_title: 'Manager\'s Title',
+              // eslint-disable-next-line
+              manager_name: 'Manager\'s Name',
+            }}
+            sortValue={[{ name: 'popularity', dir: 'desc' }]}
+            variant="sidebar"
+            width="xs"
+            {...props}
+        >
+          <Filter.Section
+              collapsed={isCollapsed}
+              headerText="Full Name"
+          >
+            <TextInput
+                onChange={handleUpdateName}
+                placeholder="Enter name"
+                value={name}
+                {...props}
+            />
+          </Filter.Section>
+          <SectionSeparator />
+          <Filter.Section
+              collapsed={isCollapsed}
+              collapsible
+              headerText="Territory"
+          >
+            <Select
+                blankSelection="Select One..."
+                name="location"
+                onChange={handleUpdateTerritory}
+                options={options}
+                {...props}
+            />
+          </Filter.Section>
+          <SectionSeparator />
+          <Filter.Section
+              collapsed={isCollapsed}
+              collapsible
+              headerText="Products"
+          >
+            <div>
+              <Checkbox
+                  marginBottom="sm"
+                  name="Doors"
+                  onChange={handleCheckboxChange}
+                  text="Doors"
+              />
+            </div>
+            <div>
+              <Checkbox
+                  marginBottom="sm"
+                  name="Windows"
+                  onChange={handleCheckboxChange}
+                  text="Windows"
+              />
+            </div>
+            <div>
+              <Checkbox
+                  marginBottom="sm"
+                  name="Siding"
+                  onChange={handleCheckboxChange}
+                  text="Siding"
+              />
+            </div>
+            {!isProductsCollapsed &&
+              <>
+                <div>
+                  <Checkbox
+                      checked={products["Roofing"]}
+                      marginBottom="sm"
+                      name="Roofing"
+                      onChange={handleCheckboxChange}
+                      text="Roofing"
+                  />
+                </div>
+                <div>
+                  <Checkbox
+                      checked={products["Gutters"]}
+                      marginBottom="sm"
+                      name="Gutters"
+                      onChange={handleCheckboxChange}
+                      text="Gutters"
+                  />
+                </div>
+                <div>
+                  <Checkbox
+                      checked={products["Solar"]}
+                      marginBottom="sm"
+                      name="Solar"
+                      onChange={handleCheckboxChange}
+                      text="Solar"
+                  />
+                </div>
+                <div>
+                  <Checkbox
+                      checked={products["Insulation"]}
+                      marginBottom="sm"
+                      name="Insulation"
+                      onChange={handleCheckboxChange}
+                      text="Insulation"
+                  />
+                </div>
+              </>
+            }
+            <div onClick={() => setIsProductsCollapsed(!isProductsCollapsed)}>
+              <Flex
+                  cursor="pointer"
+                  marginBottom="sm"
+              >
+                <Caption
+                    color="link"
+                    marginRight="xxs"
+                    size="xs"
+                    text={isProductsCollapsed ? "Show More" : "Show Less"}
+                />
+                <Icon
+                    icon={isProductsCollapsed ? "chevron-down" : "chevron-up"}
+                />
+              </Flex>
+            </div>
+          </Filter.Section>
+        </Filter>
+        <Table
+            size="sm"
+        >
+          <thead>
+            <tr>
+              <th>{'Name'}</th>
+              <th>{'Territory'}</th>
+              <th>{'Products'}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {filteredPeople.map((person) => (<tr key={person.name}>
+              <td>{ person.name }</td>
+              <td>{ person.territory }</td>
+              <td>{ person.products.join(", ") }</td>
+            </tr>))}
+          </tbody>
+        </Table>
+      </Flex>
+    </>
+  )
+}
+export default FilterSidebar

data/app/pb_kits/playbook/pb_filter/docs/example.yml CHANGED Viewed

@@ -24,4 +24,5 @@ examples:
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
   - filter_popover_props: Popover Props
+  - filter_sidebar: Sidebar

data/app/pb_kits/playbook/pb_filter/docs/index.js CHANGED Viewed

@@ -8,3 +8,4 @@ export { default as FilterMaxWidth } from './_filter_max_width.jsx'
 export { default as FilterMaxHeight } from './_filter_max_height.jsx'
 export { default as FilterPlacement } from './_filter_placement.jsx'
 export { default as FilterPopoverProps } from './_filter_popover_props.jsx'
+export { default as FilterSidebar } from './_filter_sidebar.jsx'

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.html.erb CHANGED Viewed

@@ -1,7 +1,7 @@
 <%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["a"], sticky_right_column: ["b"] }) do %>
   <thead>
     <tr>
-      <th id="a">Column 1</th>
+      <th data-sticky-id="a">Column 1</th>
       <th>Column 2</th>
       <th>Column 3</th>
       <th>Column 4</th>
@@ -15,12 +15,12 @@
       <th>Column 12</th>
       <th>Column 13</th>
       <th>Column 14</th>
-      <th id="b">Column 15</th>
+      <th data-sticky-id="b">Column 15</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <td id="a">Value 1</td>
+      <td data-sticky-id="a">Value 1</td>
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
@@ -34,10 +34,10 @@
       <td>Value 12</td>
       <td>Value 13</td>
       <td>Value 14</td>
-      <td id="b">Value 15</td>
+      <td data-sticky-id="b">Value 15</td>
     </tr>
     <tr>
-      <td id="a">Value 1</td>
+      <td data-sticky-id="a">Value 1</td>
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
@@ -51,10 +51,10 @@
       <td>Value 12</td>
       <td>Value 13</td>
       <td>Value 14</td>
-      <td id="b">Value 15</td>
+      <td data-sticky-id="b">Value 15</td>
     </tr>
     <tr>
-      <td id="a">Value 1</td>
+      <td data-sticky-id="a">Value 1</td>
       <td>Value 2</td>
       <td>Value 3</td>
       <td>Value 4</td>
@@ -68,7 +68,7 @@
       <td>Value 12</td>
       <td>Value 13</td>
       <td>Value 14</td>
-      <td id="b">Value 15</td>
+      <td data-sticky-id="b">Value 15</td>
     </tr>
   </tbody>
 <% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_rails.md CHANGED Viewed

@@ -1,3 +1,3 @@
 The `sticky_left_column` and `sticky_right_column` props can be used together on the same table as needed.
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.
+Please ensure that unique `data-sticky-id`s are used for all columns across multiple tables. Using the same columns `data-sticky-id`s on multiple tables can lead to issues when using props.

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb CHANGED Viewed

@@ -1,9 +1,9 @@
 <%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["1", "2", "3"] }) do %>
   <thead>
     <tr>
-      <th id="1">Column 1</th>
-      <th id="2">Column 2</th>
-      <th id="3">Column 3</th>
+      <th data-sticky-id="1">Column 1</th>
+      <th data-sticky-id="2">Column 2</th>
+      <th data-sticky-id="3">Column 3</th>
       <th>Column 4</th>
       <th>Column 5</th>
       <th>Column 6</th>
@@ -20,9 +20,9 @@
   </thead>
   <tbody>
     <tr>
-      <td id="1">Value 1</td>
-      <td id="2">Value 2</td>
-      <td id="3">Value 3</td>
+      <td data-sticky-id="1">Value 1</td>
+      <td data-sticky-id="2">Value 2</td>
+      <td data-sticky-id="3">Value 3</td>
       <td>Value 4</td>
       <td>Value 5</td>
       <td>Value 6</td>
@@ -38,9 +38,9 @@
     </tr>
     <tr>
-      <td id="1">Value 1</td>
-      <td id="2">Value 2</td>
-      <td id="3">Value 3</td>
+      <td data-sticky-id="1">Value 1</td>
+      <td data-sticky-id="2">Value 2</td>
+      <td data-sticky-id="3">Value 3</td>
       <td>Value 4</td>
       <td>Value 5</td>
       <td>Value 6</td>
@@ -56,9 +56,9 @@
     </tr>
     <tr>
-      <td id="1">Value 1</td>
-      <td id="2">Value 2</td>
-      <td id="3">Value 3</td>
+      <td data-sticky-id="1">Value 1</td>
+      <td data-sticky-id="2">Value 2</td>
+      <td data-sticky-id="3">Value 3</td>
       <td>Value 4</td>
       <td>Value 5</td>
       <td>Value 6</td>

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md CHANGED Viewed

@@ -1,3 +1,3 @@
-The `sticky_left_column` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
+The `sticky_left_column` prop expects an array of the column `data-sticky-id`s you want to be sticky. Make sure to add the corresponding `data-sticky-id` to the `<th>` and `<td>`.
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `sticky_left_column`.
+Please ensure that unique `data-sticky-id`s are used for all columns across multiple tables. Using the same columns `data-sticky-id`s on multiple tables can lead to issues when using the `sticky_left_column`.