playbook_ui 14.17.0.pre.alpha.play1906overlaykitaddopacityandgradient7201 → 14.17.0.pre.alpha.play1906overlaykitaddopacityandgradient7232

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fcbb7de57b1795b09a1e17be0796d035b2d81369c91fb4f41f8305356ae9ecb9
-  data.tar.gz: 2ad249de4b7102825375229b1785b79bfaf59c28c433fed5f8085b7c9d1ff4f3
+  metadata.gz: c4eed786792f1c5eea97b75faecd6189cb039c81d91a3f999cb9caab3048b63e
+  data.tar.gz: a88401324ebf090e25add4d906ac29e974536fc0800bedf80a3c74fb7e346524
 SHA512:
-  metadata.gz: 5a308beba3d438ade5305948c24395ebc76ecee41870c11966e9e4dadcdccb96898909334a34e51a3e07e1f71cb75158e9c228cc13dc5c80e774d1c9f1b817ff
-  data.tar.gz: b706011d94f16779786e69b56136ea18806acd9d74198e5ebbcae38506ebbce822b70ee35c406ce282b7c845d9157c3b38ded9c68883e0cf827b2304bf471916
+  metadata.gz: a86ebc9438ea0abc1ad6dc17ccad0881ea85af8116da7dcc098f34555ecdbe4191ef2983fb458c1011ac8cc0a4941c0fafbc2a345babe4d9b286ad916f5e6bd3
+  data.tar.gz: 2161ae14909692c4433b10399f95862a64685350fb43e03c1329574251291aaaf6bb0212d58f8b753c4c84b9570767293c6533554f0bad23663a9130b325fc18

data/app/pb_kits/playbook/pb_background/_background.scss

@@ -55,4 +55,30 @@ $background_colors: map-merge($additional_colors, $merge_kits7);
       transition: 700ms ease-in;
     }
   }
+
+  &[class*=imageoverlay] {
+    position: relative;
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+      background-color: inherit;
+    }
+
+    * {
+      position: relative;
+      z-index: 2;
+    }
+  }
+
+  @each $key, $value in $opacity {
+    &.imageoverlay_#{$key}::before {
+      opacity: $value;
+    }
+  }
 }

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -25,6 +25,7 @@ type BackgroundProps = {
   backgroundPosition?: ResponsiveProp<string> | string,
   backgroundRepeat?: ResponsiveProp<BackgroundRepeat> | BackgroundRepeat,
   imageUrl?: ResponsiveProp<string> | string,
+  imageOverlay?: 'opacity_1' | 'opacity_2' | 'opacity_3' | 'opacity_4' | 'opacity_5' | 'opacity_6' | 'opacity_7' | 'opacity_8' | 'opacity_9' | 'opacity_10',
   children?: React.ReactChild[] | React.ReactNode,
   className?: string,
   customColor?: string,
@@ -83,11 +84,12 @@ const Background = (props: BackgroundProps): React.ReactElement => {
     data = {},
     htmlOptions = {},
     id,
+    imageOverlay,
     imageUrl = '',
     tag = 'div',
     transition = '',
   } = props
-  
+
   const [responsiveProps, setResponsiveProps] = useState({
     backgroundSize: getResponsiveValue(backgroundSize),
     backgroundPosition: getResponsiveValue(backgroundPosition),
@@ -132,6 +134,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
       [`pb_background_color_${resBackgroundColor}`]: resBackgroundColor && !customColor,
       [`pb_background_custom_color`]: !!customColor,
     },
+    imageOverlay ? `imageoverlay_${imageOverlay}` : "",
     className
   );
 
@@ -155,7 +158,7 @@ const Background = (props: BackgroundProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
-  
+
   return (
     <Tag
         {...ariaProps}
@@ -168,7 +171,6 @@ const Background = (props: BackgroundProps): React.ReactElement => {
     >
       {children}
     </Tag>
-  
   )
 }
 

data/app/pb_kits/playbook/pb_background/background.test.js

@@ -37,3 +37,8 @@ test('backgroundSize = auto', () => {
   const kit = renderKit(Background, props, { classname: "background-image", imageUrl: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", backgroundSize: 'auto' })
   expect(kit).toHaveStyle('background-size: auto')
 })
+
+test('applies correct overlay class when imageOverlay prop is provided', () => {
+  const kit = renderKit(Background, props, { imageOverlay: 'opacity_6' });
+  expect(kit).toHaveClass('imageoverlay_opacity_6');
+});

data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import Background from "../../pb_background/_background"
+import Flex from "../../pb_flex/_flex"
+import FlexItem from "../../pb_flex/_flex_item"
+import Title from "../../pb_title/_title"
+
+const BackgroundOverlay = (props) => {
+  return (
+    <Background
+        alt="colorful background"
+        backgroundColor="category_21"
+        className="background lazyload"
+        imageOverlay="opacity_2"
+        imageUrl="https://unsplash.it/500/400/?image=633"
+        {...props}
+      >
+        <Flex
+            orientation="column"
+            vertical="center"
+            {...props}
+        >
+          <FlexItem>
+            <Title
+                dark
+                padding="lg"
+                size={1}
+                text="Background Kit Image"
+            />
+          </FlexItem>
+        </Flex>
+      </Background>
+  )
+}
+
+export default BackgroundOverlay

data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md

@@ -0,0 +1 @@
+An overlay can be added to the background image by setting the `imageOverlay` prop and adding a `backgroundColor`. The `imageOverlay` prop can be set to any opacity ranging from `opacity_1` to `opacity_10`.

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

@@ -19,3 +19,4 @@ examples:
   - background_status_subtle: Status Subtle
   - background_category: Category
   - background_size: Size
+  - background_overlay: Overlay

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

@@ -6,3 +6,4 @@ export { default as BackgroundStatus } from './_background_status.jsx'
 export { default as BackgroundStatusSubtle } from './_background_status_subtle.jsx'
 export { default as BackgroundCategory } from './_background_category.jsx'
 export { default as BackgroundSize } from './_background_size.jsx'
+export { default as BackgroundOverlay } from './_background_overlay.jsx'

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

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

@@ -0,0 +1,3 @@
+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_default.md

@@ -1,9 +1 @@
-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).
-
-By default, the overlay is rendered as a gradient. Setting the `gradient` prop to `false` renders the overlay as a solid color using the value provided by the `color` prop. You can adjust the transparency of the solid overlay by using the `opacity` prop.
+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.

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

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

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

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

@@ -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_header_style_borderless.html.erb

@@ -0,0 +1,34 @@
+<%= 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

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

@@ -0,0 +1,36 @@
+<%= 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

@@ -0,0 +1 @@
+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_table/docs/_table_with_header_style_floating_react.md

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

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

@@ -37,6 +37,8 @@ examples:
     - table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
     - table_with_clickable_rows: Table with Clickable Rows
     - table_with_selectable_rows: Table with Selectable Rows
+    - table_with_header_style_borderless: Header Style Borderless
+    - table_with_header_style_floating: Header Style Floating
 
   react:
     - table_sm: Small

data/app/pb_kits/playbook/pb_table/table.rb

@@ -37,13 +37,16 @@ module Playbook
       prop :outer_padding, type: Playbook::Props::Enum,
                            values: ["none", "xxs", "xs", "sm", "md", "lg", "xl", nil],
                            default: nil
+      prop :header_style, type: Playbook::Props::Enum,
+                          values: %w[default borderless floating],
+                          default: "default"
 
       def classname
         generate_classname(
           "pb_table", "table-#{size}", single_line_class, dark_class,
           disable_hover_class, container_class, data_table_class, sticky_class, sticky_left_column_class,
           sticky_right_column_class, collapse_class, vertical_border_class, striped_class, outer_padding_class,
-          "table-responsive-#{responsive}", separator: " "
+          "table-responsive-#{responsive}", header_style_class, separator: " "
         )
       end
 
@@ -123,6 +126,15 @@ module Playbook
           outer_padding.present? ? "outer_padding_#{space_css_name}#{outer_padding}" : nil
         end
       end
+
+      def header_style_class
+        case header_style
+        when "borderless"
+          "header-borderless"
+        when "floating"
+          "header-floating"
+        end
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_table/table_header.rb

@@ -26,9 +26,12 @@ module Playbook
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[table div],
                  default: "table"
+      prop :header_style, type: Playbook::Props::Enum,
+                          values: %w[default borderless floating],
+                          default: "default"
 
       def classname
-        generate_classname("pb_table_header_kit", align_class) + tag_class
+        generate_classname("pb_table_header_kit", align_class, header_style_class) + tag_class
       end
 
       def tag_class
@@ -106,6 +109,15 @@ module Playbook
         end
         active_item
       end
+
+      def header_style_class
+        case header_style
+        when "borderless"
+          "header-borderless"
+        when "floating"
+          "header-floating"
+        end
+      end
     end
   end
 end