playbook_ui_docs 14.18.0.pre.alpha.PLAY20397473 → 14.18.0.pre.alpha.PLAY20787400

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d04d890d023d5b5d8f0a5b4936dc6a07c600d3f37fcc89a50e06448dfc604b87
-  data.tar.gz: b592431b6a1472e075ed04f31f596286ae5c8b17ff5d8ae4d1dcf14bf0dee815
+  metadata.gz: b3e7d47a9299088d750906643acac266d30471dfea3e97e02d840a8cc7707f03
+  data.tar.gz: ebcc74afbe19ac073c894c1d73545ab932e36f9f10d850eec84431c20ec4fb24
 SHA512:
-  metadata.gz: 2a56d0e706215ce38261a76d02158313f3ac55a99744232bd6d6cb0cc670b9e5731543419e8c37aac382cbe09faa824a60b6720cafb3e82a59a90db5e483255b
-  data.tar.gz: 81474b64ae663d1ef381a795415a48bb83ca8b44e28114e9bc382cebbc49948e22eaeacf951aac00a65768fef7249cefb4f75819dda49f0dfae77c81cfbc6bea
+  metadata.gz: caaa753b1c2df935c91ed8576f78af9c52f1f30dd64095ab88cb1447b69a576d6f1984ba2a98ce7563d2b095ead8a247b0f6fdbe51795d8f12b00b6fb4a1e7a5
+  data.tar.gz: b933dc82f82e408a2de8abe712cb3bb9b415db080126748c53cacbd31252394b8951104c77ea1e68ad2ce3c039eefa933bac40ef7ff7139558f338b7060e96d2

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md

@@ -1,3 +1,9 @@
+**BETA VERSION**
+This kit's Rails version is currently under development. Some features may not work as expected, and breaking changes may still occur; use with caution.
+<br />
+<br />
+<br />
+
 The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__: 
 
 ### table_data

data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_no_subrows_react.jsx → _advanced_table_selectable_rows_no_subrows.jsx}

@@ -2,7 +2,7 @@ import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data_no_subrows.json"
 
-const AdvancedTableSelectableRowsNoSubrowsReact = (props) => {
+const AdvancedTableSelectableRowsNoSubrows = (props) => {
   const columnDefinitions = [
     {
       accessor: "year",
@@ -49,4 +49,4 @@ const AdvancedTableSelectableRowsNoSubrowsReact = (props) => {
   )
 }
 
-export default AdvancedTableSelectableRowsNoSubrowsReact
+export default AdvancedTableSelectableRowsNoSubrows

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.md

@@ -1,5 +1 @@
-`selectable_rows` can also be used with tables without nested row data. Set `enable_toggle_expansion: none` to adjust the Advanced Table styling to fit a table without subrows.
-
-The data attribute `data-selected-rows` on the parent `pb_advanced_table` div will update dynamically with each selection to show an array of ids corresponding to the current selection. 
-
-__NOTE__: Each object within the `table_data` Array must contain a unique id in order to attach an id to all Rows for this to function. 
+`selectable_rows` can also be used with tables without nested row data. Set `enable_toggle_expansion: none` to adjust the Advanced Table styling to fit a table without subrows.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md

@@ -2,6 +2,5 @@
 
 When a parent row is clicked, it will check all nested children rows, Children rows can be manually checked or unchecked as well. 
 
-The data attribute `data-selected-rows` on the parent `pb_advanced_table` div will update dynamically with each selection to show an array of ids corresponding to the current selection. 
-
-__NOTE__: Each object within the `table_data` Array must contain a unique id in order to attach an id to all Rows for this to function. 
+__ALERT TO DEVS__: UPDATE THIS PARAGRAPH IN THE FOLLOW UP STORY WHEN CHECKBOX FUNCTIONALITY IS SET PLEASE
+The `onRowSelectionChange` prop returns an array of ids of all Rows that have been selected. Open the console on this example and check and uncheck checkboxes to see this is action! __NOTE__: Each object within the `tableData`Array must contain a unique id in order to attach an id to all Rows for this to function. 

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

@@ -12,8 +12,8 @@ examples:
   - advanced_table_custom_cell_rails: Custom Components for Cells
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
-  - advanced_table_selectable_rows_rails: Selectable Rows
-  - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
+  # - advanced_table_selectable_rows: Selectable Rows
+  # - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
 
 
   react:
@@ -41,7 +41,7 @@ examples:
   - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
   # - advanced_table_no_subrows: Table with No Subrows
   - advanced_table_selectable_rows: Selectable Rows
-  - advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
+  - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
   - advanced_table_inline_editing: Inline Cell Editing

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

@@ -15,7 +15,7 @@ export { default as AdvancedTablePaginationWithProps } from './_advanced_table_p
 export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
 export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
 export { default as AdvancedTableSelectableRows } from './_advanced_table_selectable_rows.jsx'
-export { default as AdvancedTableSelectableRowsNoSubrowsReact } from './_advanced_table_selectable_rows_no_subrows_react.jsx'
+export { default as AdvancedTableSelectableRowsNoSubrows } from './_advanced_table_selectable_rows_no_subrows.jsx'
 export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.jsx'
 export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_selectable_rows_header.jsx'
 export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'

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

@@ -1,14 +1,11 @@
 import React from 'react'
 
 import DatePicker from '../_date_picker'
-import Icon from '../../pb_icon/_icon'
 
 const DatePickerError = (props) => (
   <div>
     <DatePicker
-        error={<>
-          <Icon icon="warning" /> Invalid date. Please pick a valid date.
-        </>}
+        error="Invalid date. Please pick a valid date."
         pickerId="date-picker-error"
         {...props}
     />

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

@@ -17,6 +17,5 @@ examples:
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
   - draggable_multiple_containers: Dragging Across Multiple Containers
-  - draggable_drop_zones: Draggable Drop Zones
-  - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_event_listeners: Draggable Event Listeners
+

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

@@ -1,12 +1,9 @@
 import React, { useState } from 'react'
 import Dropdown from '../../pb_dropdown/_dropdown'
-import Icon from '../../pb_icon/_icon'
 
 const DropdownError = (props) => {
     const [selectedOption, setSelectedOption] = useState()
-    const error = selectedOption?.value ? null : (<>
-        <Icon icon="warning" /> Please make a valid selection
-    </>)
+    const error = selectedOption?.value ? null : "Please make a valid selection"
     const options = [
         {
             label: "United States",

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

@@ -11,7 +11,6 @@ examples:
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
   - filter_popover_props: Popover Props
-  - filter_within_turbo_frames: Within Turbo Frames
 
   react:
   - filter_default: Default

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

@@ -11,7 +11,6 @@ examples:
 
   react:
   - line_graph_default: Default
-  - line_graph_pb_styles: Playbook Styles
   - line_graph_legend: Legend
   - line_graph_legend_position: Legend Position
   - line_graph_legend_nonclickable: Legend Nonclickable

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

@@ -4,4 +4,3 @@ export { default as LineGraphLegendPosition } from './_line_graph_legend_positio
 export { default as LineGraphLegendNonclickable } from './_line_graph_legend_nonclickable.jsx'
 export { default as LineGraphHeight } from './_line_graph_height.jsx'
 export { default as LineGraphColors } from './_line_graph_colors.jsx'
-export { default as LineGraphPbStyles } from './_line_graph_pb_styles.jsx'

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

@@ -3,7 +3,6 @@ import React, { useEffect, useState } from "react";
 import Button from '../../pb_button/_button'
 import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
 import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
-import Icon from '../../pb_icon/_icon'
 
 const PhoneNumberInputValidation = (props) => {
     const [formErrors, setFormErrors] = useState("");
@@ -30,12 +29,6 @@ const PhoneNumberInputValidation = (props) => {
         setShowFormErrors(formErrors.length > 0);
     }, [formErrors]);
 
-    const error = (
-        <>
-            <Icon icon="warning" /> Missing phone number.
-        </>
-    )
-
     return (
         <form
             action=""
@@ -50,7 +43,7 @@ const PhoneNumberInputValidation = (props) => {
                 />
             )}
             <PhoneNumberInput
-                error={error}
+                error="Missing phone number."
                 id="validation"
                 initialCountry={countryCode}
                 onChange={handleOnChange}

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

@@ -9,7 +9,6 @@ examples:
   - phone_number_input_clear_field: Clearing the Input Field
   - phone_number_input_access_input_element: Accessing the Input Element
   - phone_number_input_format: Format as You Type
-  - phone_number_input_country_search: Country Search
 
   rails:
   - phone_number_input_default: Default
@@ -19,5 +18,4 @@ examples:
   - phone_number_input_validation: Form Validation
   - phone_number_input_format: Format as You Type
   - phone_number_input_hidden_inputs: Hidden Inputs
-  - phone_number_input_country_search: Country Search
   

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

@@ -6,4 +6,3 @@ export { default as PhoneNumberInputValidation } from './_phone_number_input_val
 export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
 export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
 export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
-export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'

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

@@ -6,7 +6,6 @@ examples:
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
     - popover_actionable_content: With Actionable Content
-    - popover_append_to: Append To
 
   react:
     - popover_default: Default

data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import Body from '../../pb_body/_body'
 import Select from '../../pb_select/_select'
-import Icon from '../../pb_icon/_icon'
 
 const SelectError = (props) => {
   const options = [
@@ -19,14 +18,10 @@ const SelectError = (props) => {
     },
   ]
 
-  const error = (<>
-    <Icon icon="warning" /> Please make a valid selection
-  </>)
-
   return (
     <div>
       <Select
-          error={error}
+          error="Please make a valid selection"
           label="Favorite Food"
           name="food"
           options={options}
@@ -34,7 +29,7 @@ const SelectError = (props) => {
           {...props}
       />
       <Body
-          error={error}
+          error="Please make a valid selection"
           status="negative"
           {...props}
       />

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 
 import TextInput from '../_text_input'
-import Icon from '../../pb_icon/_icon'
 
 const TextInputError = (props) => {
   const [email, setEmail] = useState('')
@@ -9,18 +8,11 @@ const TextInputError = (props) => {
   const handleUpdateEmail = ({ target }) => {
     setEmail(target.value)
   }
-
-  const error = (
-    <>
-      <Icon icon="warning" /> Please enter a valid email address
-    </>
-  )
-  
   return (
     <div>
       <TextInput
           addOn={{ icon: 'user', alignment: 'left', border: true }}
-          error={error}
+          error="Please enter a valid email address"
           label="Email Address"
           onChange={handleUpdateEmail}
           placeholder="Enter email address"

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx

@@ -1,21 +1,15 @@
 import React, {useState} from 'react'
 import Textarea from '../../pb_textarea/_textarea'
-import Icon from '../../pb_icon/_icon'
 
 const TextareaError = (props) => {
   const [value, setValue] = useState('default value text')
   const handleChange = (event) => {
     setValue(event.target.value)
   }
-  const error = (
-    <>
-        <Icon icon="warning" /> This field has an error!
-    </>
-  )
   return (
     <div>
       <Textarea
-          error={error}
+          error="This field has an error!"
           label="Label"
           name="comment"
           onChange={(e)=> handleChange(e)}

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

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react'
 
 import Typeahead from '../_typeahead'
-import Icon from '../../pb_icon/_icon'
 
 const options = [
   { label: 'Orange', value: '#FFA500' },
@@ -11,10 +10,7 @@ const options = [
 ]
 
 const TypeaheadErrorState = (props) => {
-  const error = (<>
-    <Icon icon="warning" /> Please make a valid selection
-  </>)
-  const [errorState, setErrorState] = useState(error);
+  const [errorState, setErrorState] = useState("Please make a valid selection");
   const [searchValue, setSearchValue] = useState(null);
   
   const handleOnChange = (value) => setSearchValue(value)
@@ -23,7 +19,7 @@ const TypeaheadErrorState = (props) => {
       if(searchValue) {
         setErrorState("")
       } else {
-        setErrorState(error)
+        setErrorState("Please make a valid selection")
       }
     }, [searchValue])