playbook_ui_docs 12.26.1.pre.alpha.railsmultilevelimprovements842 → 12.28.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown869

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d94144a9a9f325a5d8b2f055ca2daf634c6eb8ce5888a32fec3b8db19d1763a8
-  data.tar.gz: b11f4d5af9120a1b72eff85368d155a0877191b2a362d74329cd2de23c9b42f4
+  metadata.gz: 516454ff3dab526d31eea1a1cb32966d6c1887b64855e5e1fb11c56feef8b166
+  data.tar.gz: 07c4ec387616e09f4e52f94daf2dcd3396b065c42ef9601de0d0397043252692
 SHA512:
-  metadata.gz: a250d0a6f1cf3346c8865962e9ace18989db39e2362042e6c3da2ce14e936d6cdf3512c3c4c5d44e36d1e7e00945215d84c1e0ae58362351767d6783976dc6f7
-  data.tar.gz: 60b3a234c5d036884a7f14e03d551c4b31e3509b38d422d6f6ff3526e8319502f351823a6f2a5c7b1bd09220ac6813b435f9bf0e65f3f66eb04b71051530cb9d
+  metadata.gz: a22526e9815cb7a1fccb80e549f417c7712d6b60925590146172cbbc2bd25a238eb03024b822e8e8b59935eb0fcaf18a8a4d5d649532e751bd64310e0028fdc4
+  data.tar.gz: 4576681d112c222df5939fd57e6f6e158251f48b91b9dc047ca2b60f23fc9f5ad9bf7e2c66fcb373f549411dec60bc00dd68ee9f8af6d38b720967d32b9742cc

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("date_picker", props: {
+  allow_input: true,
+  end_date_id: "quick-pick-end-date",
+  end_date_name: "quick-pick-end-date",
+  mode: "range",
+  picker_id: "date-picker-quick-pick",
+  placeholder: "mm/dd/yyyy to mm/dd/yyyy",
+  selection_type: "quickpick",
+  start_date_id: "quick-pick-start-date",
+  start_date_name: "quick-pick-start-date"
+}) %>
+

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md

@@ -0,0 +1,3 @@
+This date range variant uses hidden inputs to handle start and end dates. While they are not required props, it is advisable to specify a unique `start_date_id`, `start_date_name`, `end_date_id`, and `end_date_name` for each quick pick instance you place in a form and/or on a page.
+
+Like all other date pickers, the quick pick does require a `picker_id`.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("date_picker", props: {
+  allow_input: true,
+  end_date_id: "range-limit-end-date",
+  end_date_name: "range-limit-end-date",
+  mode: "range",
+  picker_id: "thisRangesEndToday",
+  placeholder: "mm/dd/yyyy to mm/dd/yyyy",
+  selection_type: "quickpick",
+  start_date_id: "range-limit-start-date",
+  start_date_name: "range-limit-start-date",
+  this_ranges_end_today: true
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import DatePicker from '../_date_picker'
+
+const DatePickerQuickPickRangeLimit = (props) => (
+  <>
+    <DatePicker
+        allowInput
+        mode="range"
+        pickerId="thisRangesEndToday"
+        placeholder="mm/dd/yyyy to mm/dd/yyyy"
+        selectionType="quickpick"
+        thisRangesEndToday
+        {...props}
+    />
+  </>
+)
+
+export default DatePickerQuickPickRangeLimit

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md

@@ -0,0 +1 @@
+Applying `this_ranges_end_today` (Rails) or `thisRangesEndToday` (React) causes all “This” preset ranges (i.e., this week, this month, this quarter, this year) to use an endDate of today, instead of their natural end date in the future.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import DatePicker from '../_date_picker'
+
+const DatePickerQuickPickReact = (props) => (
+  <>
+    <DatePicker
+        allowInput
+        mode="range"
+        pickerId="date-picker-quick-pick"
+        placeholder="mm/dd/yyyy to mm/dd/yyyy"
+        selectionType="quickpick"
+        {...props}
+    />
+  </>
+)
+
+export default DatePickerQuickPickReact

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md

@@ -0,0 +1 @@
+Use the `onChange` handler function to access the startDate and endDate values. Check the [`onChange` example](https://playbook.powerapp.cloud/kits/date_picker/react#onchange) for more information.

data/app/pb_kits/playbook/pb_date_picker/docs/example.yml

@@ -8,6 +8,8 @@ examples:
   - date_picker_input: Input Field
   - date_picker_label: Label
   - date_picker_range: Range
+  - date_picker_quick_pick_rails: Range (Quick Pick)
+  - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
@@ -33,6 +35,8 @@ examples:
   - date_picker_on_change: onChange
   - date_picker_on_close: onClose
   - date_picker_range: Range
+  - date_picker_quick_pick_react: Range (Quick Pick)
+  - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

data/app/pb_kits/playbook/pb_date_picker/docs/index.js

@@ -19,4 +19,6 @@ export { default as DatePickerWeek } from './_date_picker_week.jsx'
 export { default as DatePickerPositions } from './_date_picker_positions.jsx'
 export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
 export { default as DatePickerAllowInput } from './_date_picker_allow_input'
-export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
+export { default as DatePickerQuickPickReact } from './_date_picker_quick_pick_react'
+export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_pick_range_limit'
+export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'

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

@@ -12,6 +12,7 @@ const treeData = [
         label: "People",
         value: "People",
         id: "people1",
+        expanded: true,
         children: [
           {
             label: "Talent Acquisition",

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx

@@ -0,0 +1,26 @@
+import React, { useEffect, useRef } from 'react'
+import { Body, PhoneNumberInput } from '../..'
+
+const PhoneNumberInputAccessInputElement = (props) => {
+    // 1. Create a ref - this accesses the kit's input element.
+    const ref = useRef()
+
+    // 2. Add any event listener to ref.current.inputNode() inside a useEffect hook and trigger it once.
+    useEffect(() => {
+        ref.current.inputNode().addEventListener("click", () => alert("Clicked!"))
+    }, [])
+
+    // 3. Pass the ref to the ref prop.
+    return (
+        <>
+            <Body text="Click the input field below:" />
+            <PhoneNumberInput
+                id="access-input-element"
+                ref={ref}
+                {...props}
+            />
+        </>
+    )
+}
+
+export default PhoneNumberInputAccessInputElement

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

@@ -0,0 +1,3 @@
+To access the kit's input element attributes or add event listeners, create a `ref` inside your parent component, pass it to the kit's `ref` prop, and use `ref.current.inputNode()` with your desired attribute or event listener inside a `useEffect` hook. `useEffect` is necessary because the `ref` will be initially `undefined`. Calling `useEffect` with an empty dependency array ensures your event listeners won't be added twice.
+
+`inputNode()` is a custom function inside the kit that returns the input DOM element and its attributes. For example, to get the `name` attribute, use `ref.current.inputNode().name`

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx

@@ -0,0 +1,30 @@
+import React, { useRef } from 'react'
+import { Button, PhoneNumberInput } from '../..'
+
+const PhoneNumberInputClearField = (props) => {
+    // 1. Create a ref - this accesses the kit's input element.
+    const ref = useRef()
+
+    // 2. Use clearField() to clear the field.
+    const handleClick = () => {
+        ref.current.clearField()
+    }
+
+    // 3. Pass the ref to the ref prop.
+    return (
+        <>
+            <PhoneNumberInput
+                id="clear-field"
+                ref={ref}
+                {...props}
+            />
+
+            <Button
+                onClick={handleClick}
+                text="Clear the Input Field"
+            />
+        </>
+    )
+}
+
+export default PhoneNumberInputClearField

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

@@ -0,0 +1,3 @@
+To clear a number inside the input element, create a `ref` inside your parent component, pass it to the kit's `ref` prop, and use `ref.current.clearField()`.
+
+`clearField()` is a custom function inside the kit to clear numbers and the error message while still providing validation.

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

@@ -0,0 +1,14 @@
+<form id="example-form-validation" action="" method="get">
+    <%= pb_rails("phone_number_input", props: { error: "Missing phone number.", id: "validation", initial_country: "af", value: "", required: true }) %>
+    <%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
+</form>
+
+<% content_for(:pb_js) do %>
+    <%= javascript_tag do %>
+        document.addEventListener('DOMContentLoaded', function () {
+            document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
+                if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
+            })
+        })
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from "react";
+import { Button, FixedConfirmationToast, PhoneNumberInput } from "../../";
+
+const PhoneNumberInputValidation = (props) => {
+    const [formErrors, setFormErrors] = useState("");
+    const [showFormErrors, setShowFormErrors] = useState(false);
+    const [phoneNumber, setPhoneNumber] = useState("");
+    const [countryCode, setCountryCode] = useState("af");
+
+    const handleOnValidate = (valid) => {
+        setFormErrors(
+            valid ? "" : "Please correct the fields below and try again."
+        );
+    };
+
+    const handleOnChange = ({ iso2, number }) => {
+        setCountryCode(iso2);
+        setPhoneNumber(number);
+    };
+    
+    const handleOnSubmit = (e) => {
+        if (showFormErrors) e.preventDefault()
+    }
+
+    useEffect(() => {
+        setShowFormErrors(formErrors.length > 0);
+    }, [formErrors]);
+
+    return (
+        <form
+            action=""
+            method="get"
+            onSubmit={handleOnSubmit}
+        >
+            {showFormErrors && (
+                <FixedConfirmationToast
+                    marginBottom="md"
+                    status="error"
+                    text={formErrors}
+                />
+            )}
+            <PhoneNumberInput
+                error="Missing phone number."
+                id="validation"
+                initialCountry={countryCode}
+                onChange={handleOnChange}
+                onValidate={handleOnValidate}
+                required
+                value={phoneNumber}
+                {...props}
+            />
+            <Button
+                htmlType="submit"
+                text="Save Phone Number"
+            />
+        </form>
+    );
+};
+
+export default PhoneNumberInputValidation;

data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml

@@ -5,9 +5,13 @@ examples:
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Limited Countries
+  - phone_number_input_validation: Form Validation
+  - phone_number_input_clear_field: Clearing the Input Field
+  - phone_number_input_access_input_element: Accessing the Input Element
 
   rails:
   - phone_number_input_default: Default
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
-  - phone_number_input_only_countries: Limited Countries
+  - phone_number_input_only_countries: Limited Countries
+  - phone_number_input_validation: Form Validation

data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js

@@ -2,3 +2,6 @@ export { default as PhoneNumberInputDefault } from './_phone_number_input_defaul
 export { default as PhoneNumberInputPreferredCountries } from './_phone_number_input_preferred_countries'
 export { default as PhoneNumberInputInitialCountry } from './_phone_number_input_initial_country'
 export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_only_countries'
+export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'
+export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
+export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_custom.html.erb

@@ -0,0 +1,11 @@
+<div class="pb--doc-demo-row">
+  <% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
+
+  <%= pb_rails("selectable_card_icon", props: {
+    custom_icon: svg_url,
+    title_text: "Customization", 
+    body_text: "Personalize everything",
+    input_id: 1,
+    checked: true,
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_custom.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import SelectableCardIcon from '../_selectable_card_icon'
+
+const svg = {
+  newChat: (
+    <svg
+        ariaHidden="true"
+        focusable="false"
+        role="img"
+        viewBox="0 0 512 512"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+          d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2 16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8 0 16 7.2 16 16v288zM336 184h-56v-56c0-8.8-7.2-16-16-16h-16c-8.8 0-16 7.2-16 16v56h-56c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h56v56c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-56h56c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"
+          fill="currentColor"
+      />
+    </svg>
+  ),
+}
+
+const SelectableCardIconCustom = (props) => {
+  return (
+    <div className="pb--doc-demo-row">
+      <SelectableCardIcon
+          bodyText="Talk to someone you love"
+          checked
+          customIcon={svg.newChat}
+          inputId={1}
+          titleText="New Chat"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default SelectableCardIconCustom

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_custom.md

@@ -0,0 +1,19 @@
+# Tips for Custom Icons
+
+When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
+
+Attributes must be React compatible e.g. <code>xmlns:xlink</code> should be <code>xmlnsXlink</code> and so on. <strong>There should be no hyphenated attributes and no semi-colons!.</strong>
+
+Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with   <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
+
+Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point __when designing instead of trying to retrofit the viewbox afterwards__!
+
+You must source *your own SVG into component/view* you are working on. This can easily be done in programmatic and maintainable ways.
+
+### React
+
+So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
+
+### Rails
+
+Some Rails applications use only webpack(er) which means using `image_url` will be successful over `image_path` in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use `image_path` or `image_url`. Of course, YMMV depending on any custom configurations in your Rails application.

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/example.yml

@@ -5,10 +5,10 @@ examples:
   - selectable_card_icon_checkmark: Checkmark
   - selectable_card_icon_single_select: Single Select
   - selectable_card_icon_options: With Options
-
-
+  - selectable_card_icon_custom: Custom Icon
 
   react:
   - selectable_card_icon_default: Default
   - selectable_card_icon_checkmark: Checkmark
   - selectable_card_icon_single_select: Single Select
+  - selectable_card_icon_custom: Custom Icon

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/index.js

@@ -1,3 +1,4 @@
 export { default as SelectableCardIconDefault } from './_selectable_card_icon_default.jsx'
 export { default as SelectableCardIconCheckmark } from './_selectable_card_icon_checkmark.jsx'
 export { default as SelectableCardIconSingleSelect } from './_selectable_card_icon_single_select.jsx'
+export { default as SelectableCardIconCustom } from './_selectable_card_icon_custom.jsx'

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb

@@ -1,2 +1,3 @@
 <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1, bold: false }) %>
 <%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2, bold: false }) %>
+<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3, bold: false }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx

@@ -17,6 +17,12 @@ const TitleLightWeight = (props) => {
           text='Title 2'
           {...props}
       />
+      <Title bold={false}
+          size={3}
+          tag='h2'
+          text='Title 3'
+          {...props}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md

@@ -1,4 +1,3 @@
 ##### Prop
-Title `size 1` & `size 2` will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
-Title `size 3` uses a light font weight by default and will not accept a bold font weight.
+Title `size 1`, `size 2`, & `size 3` will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
 Title `size 4` uses a heavy font weight by default and will not accept a lighter font weight.