playbook_ui 14.16.0.pre.alpha.play1964tablekitheadertextstylefix7091 → 14.16.0.pre.rc.0

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.jsx

@@ -1,97 +0,0 @@
-import React, { useState, useEffect } from "react";
-import MultiLevelSelect from "../_multi_level_select";
-
-const treeData = [
-  {
-    label: "Power Home Remodeling",
-    value: "Power Home Remodeling",
-    id: "powerhome1",
-    expanded: true,
-    children: [
-      {
-        label: "People",
-        value: "People",
-        id: "people1",
-        expanded: true,
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "Talent Acquisition",
-            id: "talent1",
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "business1",
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "initiative1",
-              },
-              {
-                label: "Learning & Development",
-                value: "Learning & Development",
-                id: "development1",
-              },
-            ],
-          },
-          {
-            label: "People Experience",
-            value: "People Experience",
-            id: "experience1",
-          },
-        ],
-      },
-      {
-        label: "Contact Center",
-        value: "Contact Center",
-        id: "contact1",
-        children: [
-          {
-            label: "Appointment Management",
-            value: "Appointment Management",
-            id: "appointment1",
-          },
-          {
-            label: "Customer Service",
-            value: "Customer Service",
-            id: "customer1",
-          },
-          {
-            label: "Energy",
-            value: "Energy",
-            id: "energy1",
-          },
-        ],
-      },
-    ],
-  },
-];
-
-const MultiLevelSelectError = (props) => {
-  const [selectedItems, setSelectedItems] = useState([]);
-  const [errorState, setErrorState] = useState("Please make a valid selection");
-
-  useEffect(() => {
-    if (selectedItems.length === 0) {
-      setErrorState("Please make a valid selection");
-    } else {
-      setErrorState(null);
-    }
-  }, [selectedItems]);
-
-  return (
-    <div>
-      <MultiLevelSelect
-          error={errorState}
-          id="multiselect-error"
-          onSelect={(selectedNodes) => setSelectedItems(selectedNodes)}
-          treeData={treeData}
-          {...props}
-      />
-    </div>
-  );
-};
-
-export default MultiLevelSelectError;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb

@@ -1,71 +0,0 @@
-<% treeData = [{
-    label: "Power Home Remodeling",
-    value: "Power Home Remodeling",
-    id: "100",
-    expanded: true,
-    children: [
-      {
-        label: "People",
-        value: "People",
-        id: "101",
-        expanded: true,
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "Talent Acquisition",
-            id: "102",
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "103",
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "104",
-              },
-              {
-                label: "Learning & Development",
-                value: "Learning & Development",
-                id: "105",
-              },
-            ],
-          },
-          {
-            label: "People Experience",
-            value: "People Experience",
-            id: "106",
-          },
-        ],
-      },
-      {
-        label: "Contact Center",
-        value: "Contact Center",
-        id: "107",
-        children: [
-          {
-            label: "Appointment Management",
-            value: "Appointment Management",
-            id: "108",
-          },
-          {
-            label: "Customer Service",
-            value: "Customer Service",
-            id: "109",
-          },
-          {
-            label: "Energy",
-            value: "Energy",
-            id: "110",
-          },
-        ],
-      },
-    ],
-}] %>
-
-<%= pb_rails("multi_level_select", props: {
-    id: "multi-level-select-label-rails",
-    label: "Select a department",
-    tree_data: treeData
-}) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx

@@ -1,91 +0,0 @@
-import React from "react";
-import MultiLevelSelect from "../_multi_level_select";
-
-const treeData = [
-  {
-    label: "Power Home Remodeling",
-    value: "Power Home Remodeling",
-    id: "powerhome1",
-    expanded: true,
-    children: [
-      {
-        label: "People",
-        value: "People",
-        id: "people1",
-        expanded: true,
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "Talent Acquisition",
-            id: "talent1",
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "business1",
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "initiative1",
-              },
-              {
-                label: "Learning & Development",
-                value: "Learning & Development",
-                id: "development1",
-              },
-            ],
-          },
-          {
-            label: "People Experience",
-            value: "People Experience",
-            id: "experience1",
-          },
-        ],
-      },
-      {
-        label: "Contact Center",
-        value: "Contact Center",
-        id: "contact1",
-        children: [
-          {
-            label: "Appointment Management",
-            value: "Appointment Management",
-            id: "appointment1",
-          },
-          {
-            label: "Customer Service",
-            value: "Customer Service",
-            id: "customer1",
-          },
-          {
-            label: "Energy",
-            value: "Energy",
-            id: "energy1",
-          },
-        ],
-      },
-    ],
-  },
-];
-
-const MultiLevelSelectDefault = (props) => {
-  return (
-    <div>
-      <MultiLevelSelect
-          id='multiselect-label'
-          label="Select a Department"
-          onSelect={(selectedNodes) =>
-          console.log(
-            "Selected Items",
-            selectedNodes
-          )
-        }
-          treeData={treeData}
-          {...props}
-      />
-    </div>
-  )
-};
-
-export default MultiLevelSelectDefault;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx

@@ -1,91 +0,0 @@
-import React from "react"
-import MultiLevelSelect from "../_multi_level_select"
-import { useForm } from "react-hook-form"
-
-const treeData = [
-  {
-    label: "Power Home Remodeling",
-    value: "Power Home Remodeling",
-    id: "powerhome1",
-    expanded: true,
-    children: [
-      {
-        label: "People",
-        value: "People",
-        id: "people1",
-        expanded: true,
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "Talent Acquisition",
-            id: "talent1",
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "business1",
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "initiative1",
-              },
-              {
-                label: "Learning & Development",
-                value: "Learning & Development",
-                id: "development1",
-              },
-            ],
-          },
-          {
-            label: "People Experience",
-            value: "People Experience",
-            id: "experience1",
-          },
-        ],
-      },
-      {
-        label: "Contact Center",
-        value: "Contact Center",
-        id: "contact1",
-        children: [
-          {
-            label: "Appointment Management",
-            value: "Appointment Management",
-            id: "appointment1",
-          },
-          {
-            label: "Customer Service",
-            value: "Customer Service",
-            id: "customer1",
-          },
-          {
-            label: "Energy",
-            value: "Energy",
-            id: "energy1",
-          },
-        ],
-      },
-    ],
-  },
-]
-
-const MultiLevelSelectReactHook = (props) => {
-  const { register, watch } = useForm()
-  const selectedItems = watch("departments")
-  selectedItems && console.log("Selected Items", selectedItems)
-
-  return (
-    <div>
-      <MultiLevelSelect
-          id="multiselect-default"
-          marginBottom="md"
-          treeData={treeData}
-          {...register("departments")}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default MultiLevelSelectReactHook

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md

@@ -1 +0,0 @@
-You can pass `react-hook-form` props to the MultiLevelSelect kit. Check your console to see the full data selected from this example.

data/app/pb_kits/playbook/pb_multi_level_select/index.js

@@ -1,105 +0,0 @@
-import PbEnhancedElement from "../pb_enhanced_element";
-
-const MULTI_LEVEL_SELECT_SELECTOR = "[data-multi_level_select_form]";
-
-export default class PbMultiLevelSelect extends PbEnhancedElement {
-  static get selector() {
-    return MULTI_LEVEL_SELECT_SELECTOR;
-  }
-
-  get target() {
-    return this.element.querySelector(".pb_body_kit_negative");
-  }
-
-  connect() {
-    this.addEventListeners();
-    this.observeHiddenInputs();
-    this.observeRogueErrorInsideInnerContainer();
-  }
-
-  addEventListeners() {
-    const inputElement = this.element.querySelector("input");
-
-    inputElement.addEventListener("invalid", () => {
-      this.handleErrorLabel(300);
-    });
-    inputElement.addEventListener("blur", () => {
-      this.justBlurred = true;
-
-      setTimeout(() => {
-        this.justBlurred = false;
-      }, 300);
-    });
-  }
-
-  handleErrorLabel(delay) {
-    setTimeout(() => {
-      const errorLabelElement = this.target;
-      const wrapper = this.element.querySelector(".wrapper");
-
-      if (errorLabelElement) {
-        errorLabelElement.remove();
-        if (wrapper) {
-          if (wrapper.querySelector(".pb_body_kit_negative")) {
-            wrapper.querySelector(".pb_body_kit_negative").remove();
-          }
-          wrapper.appendChild(errorLabelElement);
-        }
-        this.element.classList.add("error");
-      } else {
-        this.handleErrorLabel(100);
-      }
-    }, delay);
-  }
-
-  observeHiddenInputs() {
-    const container = this.element.querySelector(".input_inner_container");
-    if (!container) return;
-
-    this.mutationObserver = new MutationObserver(() => {
-      const hiddenInputs = container.querySelectorAll('input[type="hidden"]');
-      if (hiddenInputs.length > 0) {
-        // At least one hidden input exists, so clear the error
-        this.clearError();
-      }
-    });
-
-    this.mutationObserver.observe(container, {
-      childList: true,
-    });
-  }
-
-  observeRogueErrorInsideInnerContainer() {
-    const container = this.element.querySelector(".input_inner_container");
-
-    this.rogueErrorObserver = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        for (const node of mutation.addedNodes) {
-          if (
-            node.nodeType === Node.ELEMENT_NODE &&
-            node.classList.contains("pb_body_kit_negative")
-          ) {
-            if (this.justBlurred) {
-              node.remove();
-            }
-          }
-        }
-      }
-    });
-
-    this.rogueErrorObserver.observe(container, {
-      childList: true,
-      subtree: true,
-    });
-  }
-
-  clearError(e) {
-    const errorLabelElement = this.target;
-
-    if (errorLabelElement) {
-      errorLabelElement.remove();
-      this.element.classList.remove("error");
-      this.element.querySelector("input").value = e.detail.value;
-    }
-  }
-}

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.html.erb

@@ -1,5 +0,0 @@
-<%= pb_rails("phone_number_input", props: {
-    hidden_inputs: true,
-    id: "hidden_inputs",
-    name: "hidden_inputs",
-}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.md

@@ -1 +0,0 @@
-The `hidden_inputs` boolean prop generates two hidden input fields, {field_name}_full and {field_name}_country_code. The value passed when the form is submitted contains the full phone number including the country code. Because it requires the submission of a form to function, only use this prop on Rails phone number elements within html form tags `<form>/<form>` or [pb_forms](https://playbook.powerapp.cloud/kits/form). Read the [intl-tel-input](https://intl-tel-input.com/examples/hidden-input.html) docs for more information.

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.md

@@ -1 +0,0 @@
-To guarantee the vertical section separator displays properly, please add the `vertical: "stretch"`/`vertical="stretch"` property to the parent container (which is commonly a Flex container). This will stretch the container’s child elements vertically and ensure the section separator appears as expected.

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.jsx

@@ -1,50 +0,0 @@
-import React from 'react'
-
-import Table from '../../pb_table/_table'
-
-const TableWithHeaderStyleBorderless = (props) => {
-  return (
-    <>
-        <Table
-            headerStyle="borderless"
-            size="sm"
-            {...props}
-        >
-          <thead>
-              <tr>
-                  <th>{'Column 1'}</th>
-                  <th>{'Column 2'}</th>
-                  <th>{'Column 3'}</th>
-                  <th>{'Column 4'}</th>
-                  <th>{'Column 5'}</th>
-              </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>{'Value 1'}</td>
-              <td>{'Value 2'}</td>
-              <td>{'Value 3'}</td>
-              <td>{'Value 4'}</td>
-              <td>{'Value 5'}</td>
-            </tr>
-            <tr>
-              <td>{'Value 1'}</td>
-              <td>{'Value 2'}</td>
-              <td>{'Value 3'}</td>
-              <td>{'Value 4'}</td>
-              <td>{'Value 5'}</td>
-            </tr>
-            <tr>
-              <td>{'Value 1'}</td>
-              <td>{'Value 2'}</td>
-              <td>{'Value 3'}</td>
-              <td>{'Value 4'}</td>
-              <td>{'Value 5'}</td>
-            </tr>
-          </tbody>
-        </Table>
-    </>
-  )
-}
-
-export default TableWithHeaderStyleBorderless

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_react.md

@@ -1 +0,0 @@
-Customize your header by removing the header borders with the `headerStyle="borderless"` prop.

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.jsx

@@ -1,59 +0,0 @@
-import React from 'react'
-
-import Background from '../../pb_background/_background'
-import Card from '../../pb_card/_card'
-import Table from '../../pb_table/_table'
-
-const TableWithHeaderStyleFloating = (props) => {
-  return (
-    <>
-        <Card background="light" 
-            {...props}
-        >
-            <Table
-                headerStyle="floating"
-                size="sm"
-                {...props}
-            >
-              <Table.Head>
-                  <Background backgroundColor="light" 
-                      tag="tr"
-                      {...props}
-                  >
-                      <Table.Header>{'Column 1'}</Table.Header>
-                      <Table.Header>{'Column 2'}</Table.Header>
-                      <Table.Header>{'Column 3'}</Table.Header>
-                      <Table.Header>{'Column 4'}</Table.Header>
-                      <Table.Header>{'Column 5'}</Table.Header>
-                  </Background>
-              </Table.Head>
-              <Table.Body>
-                <Table.Row>
-                  <Table.Cell>{'Value 1'}</Table.Cell>
-                  <Table.Cell>{'Value 2'}</Table.Cell>
-                  <Table.Cell>{'Value 3'}</Table.Cell>
-                  <Table.Cell>{'Value 4'}</Table.Cell>
-                  <Table.Cell>{'Value 5'}</Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell>{'Value 1'}</Table.Cell>
-                  <Table.Cell>{'Value 2'}</Table.Cell>
-                  <Table.Cell>{'Value 3'}</Table.Cell>
-                  <Table.Cell>{'Value 4'}</Table.Cell>
-                  <Table.Cell>{'Value 5'}</Table.Cell>
-                </Table.Row>
-                <Table.Row>
-                  <Table.Cell>{'Value 1'}</Table.Cell>
-                  <Table.Cell>{'Value 2'}</Table.Cell>
-                  <Table.Cell>{'Value 3'}</Table.Cell>
-                  <Table.Cell>{'Value 4'}</Table.Cell>
-                  <Table.Cell>{'Value 5'}</Table.Cell>
-                </Table.Row>
-              </Table.Body>
-            </Table>
-        </Card>
-    </>
-  )
-}
-
-export default TableWithHeaderStyleFloating

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md

@@ -1 +0,0 @@
-Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/react#table-with-background-kit) logic to give your table header a custom background color. Use the `headerStyle="floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `backgroundColor` passed to Background kit should match the `backgroundColor` for the element in which it is nested).

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon_rails.html.erb

@@ -1,22 +0,0 @@
-<%= pb_rails "flex", props: { flex_direction: "row", gap: "md", wrap: true } do %>
-  <%= pb_rails "button", props: { id: "tool-tip-with-icon-1", text: "Tooltip With Icon" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-1", tooltip_id: "tool-tip-with-icon-1", position: "top" } do %>
-    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
-    Send Email
-  <% end %>
-  <%= pb_rails "button", props: { id: "tool-tip-with-icon-2", text: "Tooltip With Icon" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-2", tooltip_id: "tool-tip-with-icon-2", position: "bottom" } do %>
-    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
-    Send Email
-  <% end %>
-  <%= pb_rails "button", props: { id: "tool-tip-with-icon-3", text: "Tooltip With Icon" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-3", tooltip_id: "tool-tip-with-icon-3", position: "left" } do %>
-    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
-    Send Email
-  <% end %>
-  <%= pb_rails "button", props: { id: "tool-tip-with-icon-4", text: "Tooltip With Icon" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-4", tooltip_id: "tool-tip-with-icon-4", position: "right" } do %>
-    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
-    Send Email
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.html.erb

@@ -1,22 +0,0 @@
-<%= pb_rails "flex", props: { flex_direction: "row", gap: "md", wrap: true } do %>
-  <%= pb_rails "button", props: { id: "tool-tip-sizing-1", text: "Height and Width" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-1", tooltip_id: "tool-tip-sizing-1", position: "top", height: "150px", width: "100px" } do %>
-    I'm 150px high and 100px wide!
-  <% end %>
-  <%= pb_rails "button", props: { id: "tool-tip-sizing-2", text: "max_height" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-2", tooltip_id: "tool-tip-sizing-2", position: "top", width: "250px", max_height: "100px" } do %>
-    I have a max_height of 100px! Lorem ipsum dolor sit amet consectetur adipisicing elit.
-  <% end %>
-  <%= pb_rails "button", props: { id: "tool-tip-sizing-3", text: "max_width" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-3", tooltip_id: "tool-tip-sizing-3", position: "top", max_width: "150px" } do %>
-    I have a max_width of 150px! Lorem ipsum dolor sit amet consectetur adipisicing elit.
-  <% end %>
-  <%= pb_rails "button", props: { id: "tool-tip-sizing-4", text: "min_width" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-4", tooltip_id: "tool-tip-sizing-4", position: "top", min_width: "300px" } do %>
-    I have a min_width of 300px!
-  <% end %>
-  <%= pb_rails "button", props: { id: "tool-tip-sizing-5", text: "min_height" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-5", tooltip_id: "tool-tip-sizing-5", position: "top", min_height: "300px", height: "200px"  } do %>
-    I have a min_height of 300px!
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_disabled.html.erb

@@ -1,19 +0,0 @@
-<%
-  options = [
-    { label: 'Orange', value: '#FFA500' },
-    { label: 'Red', value: '#FF0000' },
-    { label: 'Green', value: '#00FF00' },
-    { label: 'Blue', value: '#0000FF' },
-  ]
-%>
-
-<%= pb_rails("typeahead", props: {
-    id: "typeahead-disabled",
-    disabled: true,
-    placeholder: "All Colors",
-    options: options,
-    label: "Colors",
-    name: :foo,
-    is_multi: false
-  })
-%>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_disabled.jsx

@@ -1,23 +0,0 @@
-import React from 'react'
-
-import Typeahead from '../_typeahead'
-
-const options = [
-  { label: 'Orange', value: '#FFA500' },
-  { label: 'Red', value: '#FF0000' },
-  { label: 'Green', value: '#00FF00' },
-  { label: 'Blue', value: '#0000FF' },
-]
-
-const TypeaheadDisabled = (props) => {
-  return (
-    <Typeahead
-        disabled
-        label="Colors"
-        options={options}
-        {...props}
-    />
-  )
-}
-
-export default TypeaheadDisabled