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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c4eed786792f1c5eea97b75faecd6189cb039c81d91a3f999cb9caab3048b63e
-  data.tar.gz: a88401324ebf090e25add4d906ac29e974536fc0800bedf80a3c74fb7e346524
+  metadata.gz: 876386e07608e48add16b3cac4356626c21d8ac34ad119992fa677533b09252b
+  data.tar.gz: d09e56e7d4a6e8e963579139cb4e0469b36591a38296eb42df18904a41a0676f
 SHA512:
-  metadata.gz: a86ebc9438ea0abc1ad6dc17ccad0881ea85af8116da7dcc098f34555ecdbe4191ef2983fb458c1011ac8cc0a4941c0fafbc2a345babe4d9b286ad916f5e6bd3
-  data.tar.gz: 2161ae14909692c4433b10399f95862a64685350fb43e03c1329574251291aaaf6bb0212d58f8b753c4c84b9570767293c6533554f0bad23663a9130b325fc18
+  metadata.gz: 4e5241baf0769fef68aee63106f2299b4ab6ce69865091cb94a5caf6de83da2d0c96657aa38a17ce1bc51dc7e33b1f3758d2b18a5eefe29ed55478924f2a988d
+  data.tar.gz: a7f4b0b20f5f3b64dc5285e39bea36f9810c42a87ef687d32f0befbc210098ad934f79abb2bf0b0e66dfef40aee1720265d0c9011d34cdaa2136e1120c871572

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

@@ -18,39 +18,34 @@ $overlay_colors: (
   card_dark: $card_dark,
   bg_dark: $bg_dark,
   bg_light: $bg_light,
-  black: $black,
-  white: $white,
-  success: $success,
-  error: $error
 );
 
-@mixin overlay($direction, $size, $color, $apply_gradient: true) {
+@mixin overlay($direction, $size, $color) {
   display: block;
   position: absolute;
   pointer-events: none;
   z-index: 1;
   content: "";
 
-  @if $apply_gradient {
-    @if $direction == "left" {
-      inset: 0 auto 0 0;
-      background: linear-gradient(to right, $color 0%, transparent 100%);
-      width: $size;
-    } @else if $direction == "right" {
-      inset: 0 0 0 auto;
-      background: linear-gradient(to left, $color 0%, transparent 100%);
-      width: $size;
-    } @else if $direction == "top" {
-      inset: 0 0 auto 0;
-      background: linear-gradient(to bottom, $color 0%, transparent 100%);
-      height: $size;
-    } @else if $direction == "bottom" {
-      inset: auto 0 0 0;
-      background: linear-gradient(to top, $color 0%, transparent 100%);
-      height: $size;
-    }
-  } @else {
-    background: $color;
+  @if $direction == "left" {
+    inset: 0 auto 0 0;
+    background: linear-gradient(to right, $color 0%, transparent 100%);
+    width: $size;
+  }
+  @if $direction == "right" {
+    inset: 0 0 0 auto;
+    background: linear-gradient(to left, $color 0%, transparent 100%);
+    width: $size;
+  }
+  @if $direction == "top" {
+    inset: 0 0 auto 0;
+    background: linear-gradient(to bottom, $color 0%, transparent 100%);
+    height: $size;
+  }
+  @if $direction == "bottom" {
+    inset: auto 0 0 0;
+    background: linear-gradient(to top, $color 0%, transparent 100%);
+    height: $size;
   }
 }
 
@@ -74,7 +69,7 @@ $overlay_colors: (
     pointer-events: none;
     z-index: 1;
   }
-
+  
   &.overlay-hide-scrollbar {
     & [class*="overflow_x_auto"],
     & [class*="overflow_y_auto"],
@@ -82,31 +77,9 @@ $overlay_colors: (
       &::-webkit-scrollbar {
         display: none !important;
       }
-
+      
       -ms-overflow-style: none !important;
       scrollbar-width: none !important;
     }
   }
-
-  &.no_gradient {
-    @each $color_name, $color in $overlay_colors {
-      .overlay_#{$color_name} {
-        @each $name, $size in $overlay_sizes {
-          @each $position in $overlay_positions {
-            &_#{$position}_#{$name} {
-              @include overlay($position, $size, $color, false);
-            }
-          }
-        }
-      }
-    }
-
-    @each $key, $value in $opacity {
-      &.#{$key} {
-        [class^=overlay] {
-          opacity: $value;
-        }
-      }
-    }
-  }
 }

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

@@ -7,7 +7,7 @@ import OverlayToken from './subcomponents/_overlay_token'
 
 export type OverlayChildrenProps = {
     children: React.ReactNode[] | React.ReactNode,
-    color: "card_light" | "bg_light" | "card_dark" | "bg_dark" | "black" | "white" | "success" | "error",
+    color: "card_light" | "bg_light" | "card_dark" | "bg_dark",
     dynamic?: boolean,
     position: string,
     size: string,
@@ -18,16 +18,14 @@ type OverlayProps = {
     aria?: { [key: string]: string },
     className?: string,
     children: React.ReactNode[] | React.ReactNode,
-    color: "card_light" | "bg_light" | "card_dark" | "bg_dark" | "black" | "white" | "success" | "error",
+    color: "card_light" | "bg_light" | "card_dark" | "bg_dark",
     data?: { [key: string]: string },
     dynamic?: false,
-    gradient?: boolean,
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string,
     layout: { [key: string]: string },
-    opacity: 'opacity_1' | 'opacity_2' | 'opacity_3' | 'opacity_4' | 'opacity_5' | 'opacity_6' | 'opacity_7' | 'opacity_8' | 'opacity_9' | 'opacity_10',
     scrollBarNone?: boolean,
-
+    
 }
 
 const Overlay = (props: OverlayProps) => {
@@ -38,24 +36,15 @@ const Overlay = (props: OverlayProps) => {
         color = "card_light",
         data = {},
         dynamic = false,
-        gradient = true,
         htmlOptions = {},
         id,
         layout = { "bottom": "full" },
-        opacity,
         scrollBarNone = false,
     } = props
 
     const ariaProps = buildAriaProps(aria)
     const dataProps = buildDataProps(data)
-    const classes = classnames(
-        buildCss('pb_overlay'),
-        { 'overlay-hide-scrollbar': scrollBarNone },
-        globalProps(props),
-        gradient === false ? 'no_gradient' : '',
-        opacity,
-        className
-    )
+    const classes = classnames(buildCss('pb_overlay'), { 'overlay-hide-scrollbar': scrollBarNone }, globalProps(props), className )
     const htmlProps = buildHtmlProps(htmlOptions)
     const dynamicInlineProps = globalInlineProps(props)
 

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

@@ -1 +1,7 @@
-Overlays help shift focus by dimming or masking background content. This kit supports gradient and solid color modes, with adjustable opacity to suit the context.
+Overlays optionally accept a `color`, which sets the "start" (opaque) color of a gradient mask. Because this overlay is intended to reveal underlying content, the "end" color is fixed to transparent. 
+
+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,9 +1,6 @@
 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,7 +1,4 @@
 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_overlay/overlay.test.jsx

@@ -71,46 +71,8 @@ test('should add overlay-hide-scrollbar class when scrollBarNone is true', () =>
       data: { testid: testId },
       scrollBarNone: true
     }
-
+  
     render(<Overlay {...props} />)
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveClass('overlay-hide-scrollbar')
 })
-
-test('should have no_gradient class if gradient prop is false', () => {
-    const props = {
-        children,
-        data: { testid: testId },
-        id: testId,
-        gradient: false
-    }
-
-    render(<Overlay {...props} />)
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('no_gradient')
-})
-
-test('should not have no_gradient class if gradient is not passed', () => {
-    const props = {
-        children,
-        data: { testid: testId },
-        id: testId
-    }
-
-    render(<Overlay {...props} />)
-    const kit = screen.getByTestId(testId)
-    expect(kit).not.toHaveClass('no_gradient')
-})
-
-test('should have the correct opacity class if opacity prop is passed', () => {
-    const props = {
-        children,
-        data: { testid: testId },
-        id: testId,
-        opacity: "opacity_5"
-    }
-
-    render(<Overlay {...props} />)
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('opacity_5')
-})