playbook_ui 14.18.0.pre.rc.3 → 14.18.0

data/app/pb_kits/playbook/pb_overlay/_overlay.tsx

@@ -9,6 +9,7 @@ export type OverlayChildrenProps = {
     children: React.ReactNode[] | React.ReactNode,
     color: "card_light" | "bg_light" | "card_dark" | "bg_dark" | "black" | "white" | "success" | "error",
     dynamic?: boolean,
+    gradient?: boolean,
     position: string,
     size: string,
     scrollBarNone?: boolean,
@@ -21,6 +22,7 @@ type OverlayProps = {
     color: "card_light" | "bg_light" | "card_dark" | "bg_dark" | "black" | "white" | "success" | "error",
     data?: { [key: string]: string },
     dynamic?: false,
+    fullScreen?: boolean,
     gradient?: boolean,
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string,
@@ -38,6 +40,7 @@ const Overlay = (props: OverlayProps) => {
         color = "card_light",
         data = {},
         dynamic = false,
+        fullScreen = false,
         gradient = true,
         htmlOptions = {},
         id,
@@ -51,8 +54,9 @@ const Overlay = (props: OverlayProps) => {
     const classes = classnames(
         buildCss('pb_overlay'),
         { 'overlay-hide-scrollbar': scrollBarNone },
+        { 'overlay-full-screen': fullScreen },
+        { 'no_gradient': gradient === false },
         globalProps(props),
-        gradient === false ? 'no_gradient' : '',
         opacity,
         className
     )
@@ -64,6 +68,9 @@ const Overlay = (props: OverlayProps) => {
     }
 
     const getSize = () => {
+        if (fullScreen) {
+            return "100%"
+        }
         return Object.values(layout)[0]
     }
 
@@ -75,23 +82,37 @@ const Overlay = (props: OverlayProps) => {
             {...dataProps}
             {...htmlProps}
             className={classes}
+            data-overlay-color={color}
             id={id}
-            style={dynamicInlineProps}
+            style={{
+                ...(fullScreen ? {
+                  position: 'fixed',
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  zIndex: 9999,
+                  '--overlay-color': `var(--${color})`,
+                } : {}),
+                ...dynamicInlineProps
+              }}
         >
             {isSizePercentage ?
                 OverlayPercentage({
                     children,
                     color,
+                    gradient,
                     position: getPosition(),
                     scrollBarNone,
-                    size: getSize()
+                    size: getSize(),
                 }) : OverlayToken({
                     children,
                     color,
                     dynamic: dynamic,
+                    gradient,
                     position: getPosition(),
                     scrollBarNone,
-                    size: getSize()
+                    size: getSize(),
                 })
             }
         </div>

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

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

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

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

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

@@ -0,0 +1 @@
+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/example.yml

@@ -8,6 +8,8 @@ examples:
   - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle
   - overlay_hide_scroll_bar: Hide Scroll Bar
+  - overlay_fullscreen_opacity: Full Page Opacity
+  - overlay_fullscreen_background: Full Page Using Background Color Tokens
 
   rails:
   - overlay_default: Default

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

@@ -6,3 +6,5 @@ export { default as OverlayMultiDirectional } from './_overlay_multi_directional
 export { default as OverlayToggle } from './_overlay_toggle.jsx'
 export { default as OverlayVerticalDynamicMultiDirectional } from './_overlay_vertical_dynamic_multi_directional.jsx'
 export { default as OverlayHideScrollBar } from './_overlay_hide_scroll_bar.jsx'
+export { default as OverlayFullscreenOpacity } from './_overlay_fullscreen_opacity.jsx'
+export { default as OverlayFullscreenBackground } from './_overlay_fullscreen_background.jsx'