playbook_ui 14.17.0.pre.alpha.PBNTR766tablenestedcollapsiblerowsborderdoubling7256 → 14.17.0.pre.alpha.PBNTR920emojipickerpoc7130

data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx

@@ -25,33 +25,16 @@ type LayoutRoundProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
   numberOfRounds: number,
-  lastRoundWithSelf: number,
 } & GlobalProps
 
 export const Round = (props: LayoutRoundProps) => {
-  const { children, className, numberOfRounds, lastRoundWithSelf } = props
+  const { children, className, numberOfRounds } = props
   const dynamicInlineProps = globalInlineProps(props)
   const numberOfChildren = Array.isArray(children) ? children.length : 0
 
-  const childrenWithProps = Array.isArray(children)
-  ? children.map((child, index) =>
-      React.isValidElement(child)
-        ? React.cloneElement(child, {
-            numberOfRounds,
-            numberOfGames: numberOfChildren,
-            isOdd: index % 2 === 0,
-            key: `child_${index}`,
-            lastRoundWithSelf
-          })
-        : child
-    )
-  : React.isValidElement(children)
-    ? React.cloneElement(children, {
-        numberOfRounds,
-        numberOfGames: numberOfChildren,
-        lastRoundWithSelf
-      })
-    : children
+  const childrenWithProps = Array.isArray(children) ? children.map((child, index) =>
+    React.isValidElement(child) ? React.cloneElement(child, { numberOfRounds, numberOfGames: numberOfChildren, isOdd: index % 2 === 0, key: `child_${index}` }) : child
+  ) : children
 
   const rightConnectors = Array.from({ length: numberOfChildren / 2 }, (_, index) => (
     <div

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/styles/_collapsible.scss

@@ -1,5 +1,4 @@
 @import "../../tokens/colors";
-@import "../../tokens/screen_sizes";
 
 .table_collapsible_side_highlight {
   border-left: 4px solid $primary;
@@ -49,87 +48,4 @@
   .border-active {
     border-bottom: 1px;
   }
-
-  // Removing borders from nested collapsible tables and table rows to prevent visual border doubling
-  &.table-sm.table-collapse-sm,
-  &.table-md.table-collapse-sm,
-  &.table-lg.table-collapse-sm {
-    .pb_collapsible_content_kit {
-      .pb_table {
-        @media only screen and (min-width: $screen-xs-max) {
-          th {
-            border-left: none;
-            border-right: none;
-            border-top: none;
-          }
-          tr td:first-child {
-            border-left: none;
-          }
-          tr td:last-child {
-            border-right: none;
-          }
-          tr:first-child td {
-            border-top: none;
-          }
-          tr:last-child td {
-            border-bottom: none;
-          }
-        }
-      }
-    }
-  }
-  &.table-sm.table-collapse-md,
-  &.table-md.table-collapse-md,
-  &.table-lg.table-collapse-md {
-    .pb_collapsible_content_kit {
-      .pb_table {
-        @media only screen and (min-width: $screen-lg-min) {
-          th {
-            border-left: none;
-            border-right: none;
-            border-top: none;
-          }
-          tr td:first-child {
-            border-left: none;
-          }
-          tr td:last-child {
-            border-right: none;
-          }
-          tr:first-child td {
-            border-top: none;
-          }
-          tr:last-child td {
-            border-bottom: none;
-          }
-        }
-      }
-    }
-  }
-  &.table-sm.table-collapse-lg,
-  &.table-md.table-collapse-lg,
-  &.table-lg.table-collapse-lg {
-    .pb_collapsible_content_kit {
-      .pb_table {
-        @media only screen and (min-width: $screen-xl-min) {
-          th {
-            border-left: none;
-            border-right: none;
-            border-top: none;
-          }
-          tr td:first-child {
-            border-left: none;
-          }
-          tr td:last-child {
-            border-right: none;
-          }
-          tr:first-child td {
-            border-top: none;
-          }
-          tr:last-child td {
-            border-bottom: none;
-          }
-        }
-      }
-    }
-  }
 }

data/app/pb_kits/playbook/pb_table/styles/_headers.scss

@@ -6,20 +6,8 @@
   &.table-lg {
     thead, .pb_table_thead {
       tr, .pb_table_tr {
-        th:not(:has(
-          [class*="pb_body_kit"],
-          [class*="pb_detail_kit"],
-          [class*="pb_title_kit"]
-        )),
-        .pb_table_th:not(:has(
-          [class*="pb_body_kit"],
-          [class*="pb_detail_kit"],
-          [class*="pb_title_kit"]
-        )) {
-          @include caption;
-        }
-
         th, .pb_table_th {
+          @include caption;
           border-bottom: 1px solid $border_light;
         }
       }
@@ -95,10 +83,10 @@
 
 // flatten out corners for floating headerstyle variant to avoid small triangle of white/empty space
 .header-floating > thead > tr:first-child > th:first-child,
-.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child {
-  border-top-left-radius: 0 !important;
-}
-.header-floating > thead > tr:first-child > th:last-child,
-.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child {
-  border-top-right-radius: 0 !important;
+.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child { 
+  border-top-left-radius: 0 !important; 
+} 
+.header-floating > thead > tr:first-child > th:last-child, 
+.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child { 
+  border-top-right-radius: 0 !important; 
 }

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