playbook_ui_docs 14.18.0.pre.rc.0 → 14.18.0.pre.rc.2

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md

@@ -0,0 +1,5 @@
+The optional `layout` prop accepts the `position` and `size` of the overlay as a key:value pair.
+
+The `position` key accepts `bottom` (default), `top`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
+
+The `size` value is `full` (100%) by default, but accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s).

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

@@ -1,6 +1,9 @@
 examples:
   react:
   - overlay_default: Default
+  - overlay_gradient_opacity: Gradient & Opacity
+  - overlay_color: Color
+  - overlay_layout: Layout
   - overlay_multi_directional: Multi-directional
   - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle

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

@@ -1,4 +1,7 @@
 export { default as OverlayDefault } from './_overlay_default.jsx'
+export { default as OverlayGradientOpacity } from './_overlay_gradient_opacity.jsx'
+export { default as OverlayColor } from './_overlay_color.jsx'
+export { default as OverlayLayout } from './_overlay_layout.jsx'
 export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'
 export { default as OverlayToggle } from './_overlay_toggle.jsx'
 export { default as OverlayVerticalDynamicMultiDirectional } from './_overlay_vertical_dynamic_multi_directional.jsx'

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

@@ -1,3 +1,5 @@
 The `collapsibleContent` can display any content, including nested Table Rows. 
 
-Additionally, the `collapsibleSideHighlight` can also be removed by setting it to false if needed. This prop is set to true by default. 
+Additionally, the `collapsibleSideHighlight` can also be removed by setting it to false if needed. This prop is set to true by default. 
+
+**NOTE**: We advise against using the `disableHover` Table prop when nesting Table Rows within a Table.

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

@@ -1,3 +1,5 @@
 The `collapsible_content` can display any content, including nested Table Rows.
 
-Additionally, the `collapsible_side_highlight` can also be removed by setting it to false if needed. This prop is set to true by default.
+Additionally, the `collapsible_side_highlight` can also be removed by setting it to false if needed. This prop is set to true by default.
+
+**NOTE**: We advise against using the `disable_hover` Table prop when nesting Table Rows within a Table.

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

@@ -1 +1,3 @@
-The `collapsibleContent` can also be used to display nested Tables within each Row. 
+The `collapsibleContent` can also be used to display nested Tables within each Row. 
+
+**NOTE**: We advise against using the `disableHover` Table prop when nesting Tables within a Table.

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

@@ -1 +1,3 @@
-The `collapsible_content` can also be used to display nested Tables within each Row.
+The `collapsible_content` can also be used to display nested Tables within each Row.
+
+**NOTE**: We advise against using the `disable_hover` Table prop when nesting Tables within a Table.

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

@@ -0,0 +1,94 @@
+import React, { useState } from 'react'
+
+import TextInput from '../../pb_text_input/_text_input'
+
+const TextInputSanitize = (props) => {
+  const ref = React.createRef()
+
+  const [currency, setCurrency] = useState('')
+  const [sanitizedCurrency, setSanitizedCurrency] = useState('')
+  const handleOnChangeSanitizeCurrency = ({ target }, sanitizedValue) => {
+    setCurrency(target.value)
+    setSanitizedCurrency(sanitizedValue);
+  }
+
+  const [creditCard, setCreditCard] = useState('')
+  const [sanitizedCreditCard, setSanitizedCreditCard] = useState('')
+  const handleOnChangeSanitizeCC = ({ target }, sanitizedValue) => {
+    setCreditCard(target.value)
+    setSanitizedCreditCard(sanitizedValue);
+  }
+
+  const [ssn, setSSN] = useState('')
+  const [sanitizedSSN, setSanitizedSSN] = useState('')
+  const handleOnChangeSanitizeSSN = ({ target }, sanitizedValue) => {
+    setSSN(target.value)
+    setSanitizedSSN(sanitizedValue);
+  }
+
+  return (
+    <div>
+      <TextInput
+          label="Currency"
+          mask="currency"
+          onChange={handleOnChangeSanitizeCurrency}
+          placeholder="Enter Amount"
+          ref={ref}
+          value={currency}
+          {...props}
+      />
+
+      {currency !== "" && (
+        <React.Fragment>{`The masked value is: ${currency}`}</React.Fragment>
+      )}
+      <br />
+      {sanitizedCurrency !== "" && (
+        <React.Fragment>{`The sanitized value is: ${sanitizedCurrency}`}</React.Fragment>
+      )}
+
+      <br />
+      <br />
+
+      <TextInput
+          label="Credit Card"
+          mask="creditCard"
+          onChange={handleOnChangeSanitizeCC}
+          placeholder="Enter Card"
+          ref={ref}
+          value={creditCard}
+          {...props}
+      />
+
+      {creditCard !== "" && (
+        <React.Fragment>{`The masked value is: ${creditCard}`}</React.Fragment>
+      )}
+      <br />
+      {sanitizedCreditCard !== "" && (
+        <React.Fragment>{`The sanitized value is: ${sanitizedCreditCard}`}</React.Fragment>
+      )}
+
+      <br />
+      <br />
+
+      <TextInput
+          label="SSN"
+          mask="ssn"
+          onChange={handleOnChangeSanitizeSSN}
+          placeholder="Enter Amount"
+          ref={ref}
+          value={ssn}
+          {...props}
+      />
+
+      {ssn !== "" && (
+        <React.Fragment>{`The masked value is: ${ssn}`}</React.Fragment>
+      )}
+      <br />
+      {sanitizedSSN !== "" && (
+        <React.Fragment>{`The sanitized value is: ${sanitizedSSN}`}</React.Fragment>
+      )}
+    </div>
+  )
+}
+
+export default TextInputSanitize

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md

@@ -0,0 +1 @@
+When utilizing the Mask prop, you can retrieve the sanitized value of your input through an event handler that targets `sanitizedValue`.

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

@@ -18,6 +18,8 @@ examples:
   - text_input_inline: Inline
   - text_input_no_label: No Label
   - text_input_mask: Mask
+  - text_input_sanitize: Sanitized Masked Input
+
 
   swift:
     - text_input_default_swift: Default

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

@@ -6,3 +6,4 @@ export { default as TextInputAddOn } from './_text_input_add_on.jsx'
 export { default as TextInputInline } from './_text_input_inline.jsx'
 export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
 export { default as TextInputMask } from './_text_input_mask.jsx'
+export { default as TextInputSanitize } from './_text_input_sanitize.jsx'