playbook_ui 14.17.0.pre.alpha.play1735highchartscirclechartdefaultrebuild7372 → 14.17.0.pre.alpha.play1906overlaykitaddopacityandgradient7201

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_background.jsx

@@ -1,49 +0,0 @@
-import React, { useState } from 'react'
-import Overlay from '../../pb_overlay/_overlay'
-import Button from '../../pb_button/_button'
-import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
-
-const OverlayFullscreenBackground = () => {
-  const [openBackground, setOpenBackground] = useState(false)
-
-  const handleClickBackground = () => {
-    setOpenBackground(true)
-  }
-
-  const handleCloseBackground = () => {
-    setOpenBackground(false)
-  }
-
-  return (
-    <>
-      <div>
-        <Button
-            onClick={handleClickBackground}
-            text="Background Dark"
-            variant="secondary"
-        />
-
-        {openBackground && (
-          <Overlay
-              color="bg_dark"
-              fullScreen
-              gradient={false}
-              opacity="opacity_4"
-          >
-            <FixedConfirmationToast
-                closeable
-                horizontal='center'
-                onClose={handleCloseBackground}
-                open={openBackground}
-                status="tip"
-                text='Fullscreen Overlay with color set to Background Dark.'
-                vertical='top'
-            />
-          </Overlay>
-        )}
-      </div>
-    </>
-  )
-}
-
-export default OverlayFullscreenBackground

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

@@ -1 +0,0 @@
-The `fullScreen` prop also allows you to use `color` along with it.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.jsx

@@ -1,81 +0,0 @@
-import React, { useState } from 'react'
-
-import Overlay from '../../pb_overlay/_overlay'
-import Button from '../../pb_button/_button'
-import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
-
-const OverlayFullscreenOpacity = () => {
-  const [openOpacity40, setOpenOpacity40] = useState(false)
-  const [openOpacity80, setOpenOpacity80] = useState(false)
-
-  const handleClickOpacity40 = () => {
-    setOpenOpacity40(true)
-  }
-  const handleCloseOpacity40 = () => {
-    setOpenOpacity40(false)
-  }
-
-  const handleClickOpacity80 = () => {
-    setOpenOpacity80(true)
-  }
-  const handleCloseOpacity80 = () => {
-    setOpenOpacity80(false)
-  }
-
-  return (
-    <>
-      <div>
-        <Button
-            onClick={handleClickOpacity40}
-            text="40% Opacity"
-            variant="secondary"
-        />
-        {' '}
-        <Button
-            onClick={handleClickOpacity80}
-            text="80% Opacity"
-            variant="secondary"
-        />
-
-        {openOpacity40 && (
-            <Overlay
-                fullScreen
-                gradient={false}
-                opacity="opacity_4"
-            >
-              <FixedConfirmationToast
-                  closeable
-                  horizontal='center'
-                  onClose={handleCloseOpacity40}
-                  open={openOpacity40}
-                  status="tip"
-                  text='Fullscreen Overlay at 40% Opacity.'
-                  vertical='top'
-              />
-            </Overlay>
-        )}
-
-        {openOpacity80 && (
-            <Overlay
-                fullScreen
-                gradient={false}
-                opacity="opacity_8"
-            >
-              <FixedConfirmationToast
-                  closeable
-                  display="block"
-                  horizontal='center'
-                  onClose={handleCloseOpacity80}
-                  open={openOpacity80}
-                  status="tip"
-                  text='Fullscreen Overlay at 80% Opacity.'
-                  vertical='top'
-              />
-            </Overlay>
-        )}
-      </div>
-    </>
-  )
-}
-
-export default OverlayFullscreenOpacity

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

@@ -1 +0,0 @@
-To enable the overlay to cover the full size of your screen, you can pass the `fullScreen` prop. You can also pass an opacity along with it.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx

@@ -1,39 +0,0 @@
-import React from 'react'
-
-import Overlay from '../../pb_overlay/_overlay'
-import Image from '../../pb_image/_image'
-import Flex from '../../pb_flex/_flex'
-
-const OverlayGradientOpacity = () => (
-    <Flex
-        justify="around"
-        wrap
-    >
-        <Overlay
-            gradient={false}
-            marginBottom="xxs"
-            opacity="opacity_2"
-        >
-          <Image
-              alt="picture of a misty forest"
-              display="block"
-              maxWidth="100%"
-              url="https://unsplash.it/500/400/?image=634"
-          />
-        </Overlay>
-        <Overlay
-            gradient={false}
-            marginBottom="xxs"
-            opacity="opacity_8"
-        >
-          <Image
-              alt="picture of a misty forest"
-              display="block"
-              maxWidth="100%"
-              url="https://unsplash.it/500/400/?image=634"
-          />
-        </Overlay>
-    </Flex>
-)
-
-export default OverlayGradientOpacity

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

@@ -1 +0,0 @@
-By default, the overlay is rendered as a gradient. Setting the `gradient` prop to `false` renders the overlay as a solid color. You can adjust the transparency of the solid overlay by using the `opacity` prop.

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

@@ -1,40 +0,0 @@
-import React from 'react'
-
-import Overlay from '../../pb_overlay/_overlay'
-import Table from '../../pb_table/_table'
-
-
-const TableExample = () => {
-    return (
-        <Table size="sm">
-            <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>
-                {Array.from({ length: 7 }, (_, index) => (
-                    <tr key={index}>
-                        {Array.from({ length: 5 }, (_, columnIndex) => (
-                            <td key={columnIndex}>{`Value ${columnIndex + 1}`}</td>
-                        ))}
-                    </tr>
-                ))}
-            </tbody>
-        </Table>
-    )
-}
-
-const OverlayLayout = () => (
-    <>
-        <Overlay layout={{ y: "xl" }}>
-            <TableExample />
-        </Overlay>
-    </>
-)
-
-export default OverlayLayout

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

@@ -1,5 +0,0 @@
-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_table/docs/_table_with_header_style_borderless.html.erb

@@ -1,34 +0,0 @@
-<%= pb_rails("table", props: { size: "sm", header_style: "borderless" }) do %>
-    <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>
-<% end %>

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

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

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb

@@ -1,36 +0,0 @@
-<%= pb_rails("card", props: { background: "light" })  do %>
-    <%= pb_rails("table", props: { size: "sm", header_style: "floating" }) do %>
-        <%= pb_rails("table/table_head") do %>
-            <%= pb_rails("background", props: { background_color: "light", tag: "tr" }) do %>
-                <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
-                <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
-                <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
-                <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
-                <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>       
-            <% end %>
-        <% end %>
-        <%= pb_rails("table/table_body") do %>
-            <%= pb_rails("table/table_row") do %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-            <% end %>
-            <%= pb_rails("table/table_row") do %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-            <% end %>
-            <%= pb_rails("table/table_row") do %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-            <% end %>
-        <% end %>
-    <% end %>
-<% end %>

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

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

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

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

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