playbook_ui 14.17.0.pre.alpha.PLAY1967bracketlayoutphase27244 → 14.17.0.pre.alpha.PLAY20267223

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

@@ -5,110 +5,79 @@ import { GlobalProps, globalProps, globalInlineProps } from '../../utilities/glo
 
 import Card from '../../pb_card/_card'
 import SectionSeparator from '../../pb_section_separator/_section_separator'
-import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
 
 type LayoutGameProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
   numberOfRounds: number,
   numberOfGames: number,
-  lastRoundWithSelf?: number,
   isOdd: boolean,
 } & GlobalProps
 
 // Game component (modeled after Item)
 const Game = (props: LayoutGameProps) => {
-  const { children, className, numberOfRounds, numberOfGames, isOdd, lastRoundWithSelf } = props
+  const { children, className, numberOfRounds, numberOfGames, isOdd } = props
   const dynamicInlineProps = globalInlineProps(props)
-
+  
   const numberOfChildren = Array.isArray(children) ? children.length : 0
-
+  
   const isMultiple = Array.isArray(children)
-
+  
   let ratio = 0
   let exponent
-  let currentRound = numberOfRounds
   if (numberOfGames > 1) {
     exponent = (numberOfRounds) - Math.log2(numberOfGames) - 1
     ratio = 2 ** exponent
-
-    currentRound = exponent + 1
   }
-
-  let hasWinner = false
-  const hasLastWinnerAndSelf = lastRoundWithSelf === currentRound
+  
   if (numberOfChildren === 2) {
-    const [firstChildWithoutProps, secondChildWithoutProps] = React.Children.toArray(children)
-
-    const firstChild = React.isValidElement(firstChildWithoutProps) ? React.cloneElement(firstChildWithoutProps, { hasLastWinnerAndSelf }) : firstChildWithoutProps
-    const secondChild = React.isValidElement(secondChildWithoutProps) ? React.cloneElement(secondChildWithoutProps, { hasLastWinnerAndSelf }) : secondChildWithoutProps
-
-    if (React.isValidElement(firstChild) && React.isValidElement(secondChild)) {
-      if (
-        firstChild?.props && typeof firstChild.props === 'object' && 'winner' in firstChild.props ||
-        secondChild?.props && typeof secondChild.props === 'object' && 'winner' in secondChild.props
-      ) {
-        hasWinner = true
-      }
-      return (
-        <div
-            className={classnames('layout_game', globalProps(props), className)}
-            style={dynamicInlineProps}
+    const [firstChild, secondChild] = React.Children.toArray(children)
+  
+    if (React.isValidElement(firstChild) && React.isValidElement(secondChild)) { 
+    return (
+      <div
+          className={classnames('layout_game', globalProps(props), className)}
+          style={dynamicInlineProps}
+      >
+        <Card
+            marginY="xs"
+            padding="none"
+            shadow="deep"
         >
-          <Card
-              marginY="xs"
-              overflow="hidden"
-              padding="none"
-              shadow="deep"
-          >
-            <Card.Body padding="none">{firstChild}</Card.Body>
-            <SectionSeparator className="game_separator"/>
-            <Card.Body padding="none">{secondChild}</Card.Body>
-          </Card>
-          {isOdd && numberOfGames > 1 &&
-            <div
-                className="half_box"
-                style={{ height: `calc(${ratio} * 100% + 4px)` }}
-            />
-          }
-          {numberOfGames > 1 && hasWinner &&
-            <div className="polygon_node" />
-          }
-        </div>
+          <Card.Body padding="xs">{firstChild}</Card.Body>
+          <SectionSeparator />
+          <Card.Body padding="xs">{secondChild}</Card.Body>
+        </Card>
+        {isOdd && numberOfGames > 1  &&
+          <div
+              className="half_box"
+              style={{ height: `calc(${ratio} * 100% + 4px)` }}
+          />
+        }
+      </div>
       )
     }
   }
-
+  
   return (
     <div
         className={classnames('layout_game', globalProps(props), className)}
         style={dynamicInlineProps}
     >
-      {((!isMultiple && children) || numberOfChildren >= 1) ? (
-        children
-      ) : (
-        <div className="layout_tbd">
-          <Card
-              marginY="xs"
-              padding="none"
-              shadow="deep"
-          >
-            <Card.Body padding="xs">
-              <Body color="light">
-                To be determined...
-              </Body>
-            </Card.Body>
-            <SectionSeparator className="game_separator"/>
-            <Card.Body padding="xs">
-              <Body color="light">
-                To be determined...
-              </Body>
-            </Card.Body>
-          </Card>
-        </div>
-      )}
-      {isOdd && numberOfGames > 1 &&
+    {((!isMultiple && children) || numberOfChildren >= 1 )? (
+      children
+    ) : (
+      <Card
+          marginY="xs"
+          padding="none"
+          shadow="deep"
+      >
+        <Card.Body padding="xs">To be determined...</Card.Body>
+        <SectionSeparator />
+        <Card.Body padding="xs">To be determined...</Card.Body>
+      </Card>
+    )}
+      {isOdd && numberOfGames > 1  &&
         <div
             className="half_box"
             style={{ height: `calc(${ratio} * 100% + 4px)` }}

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_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