RubyGems - playbook_ui - Versions diffs - 14.17.0.pre.alpha.PBNTR925railstablecustomheaders7163 → 14.17.0.pre.alpha.PLAY1967bracketlayoutphase27198 - Mend

playbook_ui 14.17.0.pre.alpha.PBNTR925railstablecustomheaders7163 → 14.17.0.pre.alpha.PLAY1967bracketlayoutphase27198

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

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

@@ -5,6 +5,7 @@ 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'
 type LayoutGameProps = {
   children: React.ReactNode[] | React.ReactNode,
@@ -18,66 +19,82 @@ type LayoutGameProps = {
 const Game = (props: LayoutGameProps) => {
   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
   if (numberOfGames > 1) {
     exponent = (numberOfRounds) - Math.log2(numberOfGames) - 1
     ratio = 2 ** exponent
   }
+  let hasWinner = false
   if (numberOfChildren === 2) {
     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"
+    if (React.isValidElement(firstChild) && React.isValidElement(secondChild)) {
+      if ('winner' in firstChild.props || 'winner' in secondChild.props) {
+        hasWinner = true
+      }
+      return (
+        <div
+            className={classnames('layout_game', globalProps(props), className)}
+            style={dynamicInlineProps}
         >
-          <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>
+          <Card
+              marginY="xs"
+              overflow="hidden"
+              padding="none"
+              shadow="deep"
+          >
+            <Card.Body padding="none">{firstChild}</Card.Body>
+            <SectionSeparator />
+            <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>
       )
     }
   }
   return (
     <div
         className={classnames('layout_game', globalProps(props), className)}
         style={dynamicInlineProps}
     >
-    {((!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  &&
+      {((!isMultiple && children) || numberOfChildren >= 1) ? (
+        children
+      ) : (
+        <Card
+            marginY="xs"
+            padding="none"
+            shadow="deep"
+        >
+          <Card.Body padding="xs">
+            <Body color="lighter">
+              To be determined...
+            </Body>
+          </Card.Body>
+          <SectionSeparator />
+          <Card.Body padding="xs">
+            <Body color="lighter">
+              To be determined...
+            </Body>
+          </Card.Body>
+        </Card>
+      )}
+      {isOdd && numberOfGames > 1 &&
         <div
             className="half_box"
             style={{ height: `calc(${ratio} * 100% + 4px)` }}

data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx ADDED Viewed

@@ -0,0 +1,73 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildCss } from '../../utilities/props'
+import { GlobalProps, globalProps, globalInlineProps } from '../../utilities/globalProps'
+import Avatar from "../../pb_avatar/_avatar";
+import Body from "../../pb_body/_body";
+import Flex from "../../pb_flex/_flex";
+import Badge from "../../pb_badge/_badge";
+import Detail from "../../pb_detail/_detail";
+import Background from "../../pb_background/_background";
+type LayoutParticipantProps = {
+  className?: string,
+  name?: string,
+  territory?: string,
+  points?: string,
+  rank?: string,
+  avatar?: string,
+  winner?: boolean,
+  self?: boolean,
+} & GlobalProps
+export const Participant = (props: LayoutParticipantProps) => {
+  const { className, name = 'To be determined...', territory = '', points, rank, avatar, winner, self } = props
+  const dynamicInlineProps = globalInlineProps(props)
+  const classes = classnames(buildCss('layout_participant', winner ? 'winner' : '', self ? 'self' : ''), globalProps(props), className)
+  return (
+    <Background
+        backgroundColor={winner ? "success_subtle" : "white"}
+        className={classes}
+        padding="xs"
+        style={dynamicInlineProps}
+    >
+      <Flex justify="between">
+        <Avatar
+            imageUrl={avatar}
+            marginRight="sm"
+            name={name}
+            size="sm"
+        />
+        <Body flexGrow={1}>
+          <Flex justify="between">
+            <Body color={winner ? "success" : "default"}>{winner ? <strong>{name}</strong> : name}{self ? ' (You)' : ''}</Body>
+            <Body
+                color={winner ? "success" : "light"}
+                display="flex"
+            >
+              {points && (<>
+                <strong>{points}</strong>
+                <Detail
+                    color={winner ? "success" : "light"}
+                    text="pts"
+                />
+              </>)}
+            </Body>
+          </Flex>
+          <Body color="light">
+            {territory}
+            &nbsp;
+            <Badge
+                text={rank}
+                variant={winner ? "success" : self ? "notification" : "neutral"}
+            />
+          </Body>
+        </Body>
+      </Flex>
+    </Background>
+  )
+}
+export default Participant

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md CHANGED Viewed

	@@ -1 +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).
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).

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

@@ -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/_headers.scss CHANGED Viewed

@@ -6,8 +6,20 @@
   &.table-lg {
     thead, .pb_table_thead {
       tr, .pb_table_tr {
-        th, .pb_table_th {
+        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 {
           border-bottom: 1px solid $border_light;
         }
       }
@@ -83,10 +95,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 CHANGED Viewed

@@ -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 CHANGED Viewed

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