playbook_ui 14.17.0.pre.alpha.play1906overlaykitaddopacityandgradient7232 → 14.17.0.pre.alpha.play1964tablekitheadertextstylefix7164

data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx

@@ -128,58 +128,6 @@ const DraggableKitWithCard = () => {
   );
 };
 
-const DraggableWithLineVertical = () => {
-  const [initialState, setInitialState] = useState(data);
-  return (
-    <div data-testid={testId}>
-      <DraggableProvider
-          dropZone={{ type: "line" }}
-          initialItems={data}
-          onReorder={(items) => setInitialState(items)}
-      >
-        <Draggable>
-          <Draggable.Container>
-            {initialState.map(({ id, text }) => (
-              <Draggable.Item
-                  dragId={id}
-                  key={id}
-              >
-                {text}
-              </Draggable.Item>
-            ))}
-          </Draggable.Container>
-        </Draggable>
-      </DraggableProvider>
-    </div>
-  );
-};
-
-const DraggableWithLineHorizontal = () => {
-  const [initialState, setInitialState] = useState(data);
-  return (
-    <div data-testid={testId}>
-      <DraggableProvider
-          dropZone={{ type: "line", direction: "horizontal" }}
-          initialItems={data}
-          onReorder={(items) => setInitialState(items)}
-      >
-        <Draggable>
-          <Draggable.Container>
-            {initialState.map(({ id, text }) => (
-              <Draggable.Item
-                  dragId={id}
-                  key={id}
-              >
-                {text}
-              </Draggable.Item>
-            ))}
-          </Draggable.Container>
-        </Draggable>
-      </DraggableProvider>
-    </div>
-  );
-};
-
 test("generated default kit and classname", () => {
   render(<DefaultDraggableKit />);
   const kit = screen.getByTestId(testId);
@@ -240,19 +188,3 @@ test("generated dragHandle with Card", () => {
   const dragHandle = card.querySelector(".pb_custom_icon");
   expect(dragHandle).toBeInTheDocument();
 });
-
-test("line dropZone with default direction applies 'line_vertical' class to container", () => {
-  render(<DraggableWithLineVertical />);
-  const kit = screen.getByTestId(testId);
-  const container = kit.querySelector(".pb_draggable_container");
-  
-  expect(container).toHaveClass("line_vertical");
-});
-
-test("line dropZone with horizontal direction applies 'line_horizontal' class to container", () => {
-  render(<DraggableWithLineHorizontal />);
-  const kit = screen.getByTestId(testId);
-  const container = kit.querySelector(".pb_draggable_container");
-  
-  expect(container).toHaveClass("line_horizontal");
-});

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx

@@ -31,7 +31,7 @@ const DraggableContainer = (props: DraggableContainerProps) => {
   } = contextValues;
 
   // Only get direction if dropZone is 'line'
-  const direction = dropZone === 'line' ? (contextValues.direction || 'vertical') : null; 
+  const direction = dropZone === 'line' ? (contextValues.direction || 'vertical') : 'vertical';
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
@@ -41,9 +41,8 @@ const DraggableContainer = (props: DraggableContainerProps) => {
   const classes = classnames(
     buildCss("pb_draggable_container"),
     `${activeContainer === container ? "active" : ""}`,
-    // Line variant gets line_{direction} classname on container no matter what
-    dropZone === 'line' && direction === 'vertical' ? 'line_vertical' : '',
-    dropZone === 'line' && direction === 'horizontal' ? 'line_horizontal' : '',
+    // Only add vertical class if dropZone is 'line' and direction is 'vertical'
+    (dropZone === 'line' && direction === 'vertical') ? 'vertical' : '',
     globalProps(props),
     className
   );

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')
-})

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 `background` or `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 `backgroundColor` for the element in which it is nested).

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

@@ -37,8 +37,6 @@ 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,16 +37,13 @@ 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}", header_style_class, separator: " "
+          "table-responsive-#{responsive}", separator: " "
         )
       end
 
@@ -126,15 +123,6 @@ 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,12 +26,9 @@ 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, header_style_class) + tag_class
+        generate_classname("pb_table_header_kit", align_class) + tag_class
       end
 
       def tag_class
@@ -109,15 +106,6 @@ 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