playbook_ui 14.18.0.pre.alpha.revert4567revert4553PLAY2056ATcolbordercolors7469 → 14.18.0.pre.rc.0

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_line_graph/docs/example.yml

@@ -11,7 +11,6 @@ examples:
 
   react:
   - line_graph_default: Default
-  - line_graph_pb_styles: Playbook Styles
   - line_graph_legend: Legend
   - line_graph_legend_position: Legend Position
   - line_graph_legend_nonclickable: Legend Nonclickable

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

@@ -4,4 +4,3 @@ export { default as LineGraphLegendPosition } from './_line_graph_legend_positio
 export { default as LineGraphLegendNonclickable } from './_line_graph_legend_nonclickable.jsx'
 export { default as LineGraphHeight } from './_line_graph_height.jsx'
 export { default as LineGraphColors } from './_line_graph_colors.jsx'
-export { default as LineGraphPbStyles } from './_line_graph_pb_styles.jsx'

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,65 +77,9 @@ $overlay_colors: (
       &::-webkit-scrollbar {
         display: none !important;
       }
-
+      
       -ms-overflow-style: none !important;
       scrollbar-width: none !important;
     }
   }
-
-  &.overlay-full-screen {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100vw;
-    height: 100vh;
-    z-index: 9999;
-
-    &.no_gradient {
-      @each $color_name, $color in $overlay_colors {
-        &[data-overlay-color="#{$color_name}"] {
-          &::before {
-            content: "";
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: $color;
-            pointer-events: none;
-          }
-        }
-      }
-    }
-
-    @each $key, $value in $opacity {
-      &.#{$key}::before {
-        opacity: $value;
-      }
-    }
-  }
-
-  &.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,9 +7,8 @@ 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,
-    gradient?: boolean,
     position: string,
     size: string,
     scrollBarNone?: boolean,
@@ -19,17 +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,
-    fullScreen?: boolean,
-    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) => {
@@ -40,26 +36,15 @@ const Overlay = (props: OverlayProps) => {
         color = "card_light",
         data = {},
         dynamic = false,
-        fullScreen = 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 },
-        { 'overlay-full-screen': fullScreen },
-        { 'no_gradient': gradient === false },
-        globalProps(props),
-        opacity,
-        className
-    )
+    const classes = classnames(buildCss('pb_overlay'), { 'overlay-hide-scrollbar': scrollBarNone }, globalProps(props), className )
     const htmlProps = buildHtmlProps(htmlOptions)
     const dynamicInlineProps = globalInlineProps(props)
 
@@ -68,9 +53,6 @@ const Overlay = (props: OverlayProps) => {
     }
 
     const getSize = () => {
-        if (fullScreen) {
-            return "100%"
-        }
         return Object.values(layout)[0]
     }
 
@@ -82,37 +64,23 @@ const Overlay = (props: OverlayProps) => {
             {...dataProps}
             {...htmlProps}
             className={classes}
-            data-overlay-color={color}
             id={id}
-            style={{
-                ...(fullScreen ? {
-                  position: 'fixed',
-                  top: 0,
-                  left: 0,
-                  right: 0,
-                  bottom: 0,
-                  zIndex: 9999,
-                  '--overlay-color': `var(--${color})`,
-                } : {}),
-                ...dynamicInlineProps
-              }}
+            style={dynamicInlineProps}
         >
             {isSizePercentage ?
                 OverlayPercentage({
                     children,
                     color,
-                    gradient,
                     position: getPosition(),
                     scrollBarNone,
-                    size: getSize(),
+                    size: getSize()
                 }) : OverlayToken({
                     children,
                     color,
                     dynamic: dynamic,
-                    gradient,
                     position: getPosition(),
                     scrollBarNone,
-                    size: getSize(),
+                    size: getSize()
                 })
             }
         </div>

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,15 +1,10 @@
 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
   - overlay_hide_scroll_bar: Hide Scroll Bar
-  - overlay_fullscreen_opacity: Full Page Opacity
-  - overlay_fullscreen_background: Full Page Using Background Color Tokens
 
   rails:
   - overlay_default: Default

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

@@ -1,10 +1,5 @@
 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'
 export { default as OverlayHideScrollBar } from './_overlay_hide_scroll_bar.jsx'
-export { default as OverlayFullscreenOpacity } from './_overlay_fullscreen_opacity.jsx'
-export { default as OverlayFullscreenBackground } from './_overlay_fullscreen_background.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_phone_number_input/_phone_number_input.scss

@@ -39,9 +39,6 @@ $flag-min-resolution: 192dpi;
     color: $charcoal;
   }
 
-  .iti__country-list {
-    min-width: $dropdown-min-width;
-  }
   // iti-spacer-horizontal's default is 8px, or $space_xs 
   .iti__country-list .iti__flag, .iti__country-name {
     margin-right: $space_xs;
@@ -230,16 +227,6 @@ $flag-min-resolution: 192dpi;
     .iti__dropdown-content {
       border-radius: $space_xs; 
       border: 1px solid $border_dark !important;
-      .iti__search-input {
-        background-color: $bg_dark_card;
-        &:hover {
-          background-color: $bg_dark_card;
-        }      
-        &:active,
-        &:focus {
-          background-color: $card_dark;
-        }
-      }
     }
 
     .iti__divider {

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -37,7 +37,6 @@ type PhoneNumberInputProps = {
   required?: boolean,
   value?: string,
   formatAsYouType?: boolean,
-  countrySearch?: boolean,
 }
 
 enum ValidationError {
@@ -92,7 +91,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     preferredCountries = [],
     value = "",
     formatAsYouType = false,
-    countrySearch = false,
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -244,7 +242,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
       autoInsertDialCode: false,
       initialCountry: initialCountry || fallbackCountry,
       onlyCountries,
-      countrySearch: countrySearch,
+      countrySearch: false,
       fixDropdownWidth: false,
       formatAsYouType: formatAsYouType,
       hiddenInput: hiddenInputs ? () => ({

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx

@@ -3,7 +3,6 @@ import React, { useEffect, useState } from "react";
 import Button from '../../pb_button/_button'
 import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
 import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
-import Icon from '../../pb_icon/_icon'
 
 const PhoneNumberInputValidation = (props) => {
     const [formErrors, setFormErrors] = useState("");
@@ -30,12 +29,6 @@ const PhoneNumberInputValidation = (props) => {
         setShowFormErrors(formErrors.length > 0);
     }, [formErrors]);
 
-    const error = (
-        <>
-            <Icon icon="warning" /> Missing phone number.
-        </>
-    )
-
     return (
         <form
             action=""
@@ -50,7 +43,7 @@ const PhoneNumberInputValidation = (props) => {
                 />
             )}
             <PhoneNumberInput
-                error={error}
+                error="Missing phone number."
                 id="validation"
                 initialCountry={countryCode}
                 onChange={handleOnChange}

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

@@ -9,7 +9,6 @@ examples:
   - phone_number_input_clear_field: Clearing the Input Field
   - phone_number_input_access_input_element: Accessing the Input Element
   - phone_number_input_format: Format as You Type
-  - phone_number_input_country_search: Country Search
 
   rails:
   - phone_number_input_default: Default
@@ -19,5 +18,4 @@ examples:
   - phone_number_input_validation: Form Validation
   - phone_number_input_format: Format as You Type
   - phone_number_input_hidden_inputs: Hidden Inputs
-  - phone_number_input_country_search: Country Search
   

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

@@ -6,4 +6,3 @@ export { default as PhoneNumberInputValidation } from './_phone_number_input_val
 export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
 export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
 export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
-export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -25,8 +25,6 @@ module Playbook
                                 default: false
       prop :hidden_inputs, type: Playbook::Props::Boolean,
                            default: false
-      prop :country_search, type: Playbook::Props::Boolean,
-                            default: false
 
       def classname
         generate_classname("pb_phone_number_input")
@@ -47,7 +45,6 @@ module Playbook
           preferredCountries: preferred_countries,
           required: required,
           value: value,
-          countrySearch: country_search,
         }
       end
     end