playbook_ui 14.17.0.pre.alpha.play1906overlaykitaddopacityandgradient7232 → 14.17.0.pre.alpha.playcdntest7233

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.17.0"
-  VERSION = "14.17.0.pre.alpha.play1906overlaykitaddopacityandgradient7232"
+  VERSION = "14.17.0.pre.alpha.playcdntest7233"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.17.0.pre.alpha.play1906overlaykitaddopacityandgradient7232
+  version: 14.17.0.pre.alpha.playcdntest7233
 platform: ruby
 authors:
 - Power UX
@@ -2195,19 +2195,13 @@ files:
 - app/pb_kits/playbook/pb_online_status/online_status.test.js
 - app/pb_kits/playbook/pb_overlay/_overlay.scss
 - app/pb_kits/playbook/pb_overlay/_overlay.tsx
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_default.html.erb
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_default.jsx
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.html.erb
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.jsx
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_rails.md
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_react.md
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.html.erb
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.md
@@ -3482,7 +3476,7 @@ files:
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
 - dist/chunks/_typeahead-C2GOKWtm.js
-- dist/chunks/_weekday_stacked-Cw9LuHnt.js
+- dist/chunks/_weekday_stacked-CFGTPT0O.js
 - dist/chunks/lazysizes-B7xYodB-.js
 - dist/chunks/lib-BGzBzFZX.js
 - dist/chunks/pb_form_validation-BvNy9Bd6.js

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

@@ -1,63 +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 OverlayColor = () => (
-    <Flex
-        justify="around"
-        wrap
-    >
-        <Overlay
-            color="black"
-            marginBottom="xxs"
-        >
-          <Image
-              alt="picture of a misty forest"
-              display="block"
-              size="xl"
-              url="https://unsplash.it/500/400/?image=634"
-          />
-        </Overlay>
-        <Overlay
-            color="black"
-            gradient={false}
-            marginBottom="xxs"
-            opacity="opacity_4"
-        >
-          <Image
-              alt="picture of a misty forest"
-              display="block"
-              size="xl"
-              url="https://unsplash.it/500/400/?image=634"
-          />
-        </Overlay>
-        <Overlay
-            color="error"
-            marginBottom="xxs"
-        >
-          <Image
-              alt="picture of a misty forest"
-              display="block"
-              size="xl"
-              url="https://unsplash.it/500/400/?image=634"
-          />
-        </Overlay>
-        <Overlay
-            color="error"
-            gradient={false}
-            marginBottom="xxs"
-            opacity="opacity_4"
-        >
-          <Image
-              alt="picture of a misty forest"
-              display="block"
-              size="xl"
-              url="https://unsplash.it/500/400/?image=634"
-          />
-        </Overlay>
-    </Flex>
-)
-
-export default OverlayColor

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

@@ -1,3 +0,0 @@
-The `color` prop is used to change the color of the solid or gradient mask. Gradient overlays always start opaque and fade to transparent.
-
-NOTE: Images are set to `display: block` to remove the default inline spacing caused by line height. This ensures the image fully fills the container without unexpected gaps.

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).