playbook_ui 14.17.0.pre.alpha.PLAY1823maskedsanitizedtextinput7271 → 14.17.0.pre.alpha.PLAY1967bracketlayoutphase27198

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb

@@ -1,4 +1,5 @@
-<%= pb_rails("flex", props: {orientation: "column", row_gap:"md"}) do %>
+<div>
+
   <%= pb_rails("form_group") do %>
     <%= pb_rails("text_input", props: { placeholder: "Enter Artist Name" }) %>
     <%= pb_rails("select", props: {
@@ -16,6 +17,8 @@
       ]
     }) %>
   <% end %>
+  <br>
+  <br>
   <%= pb_rails("form_group") do %>
     <%= pb_rails("select", props: {
         blank_selection: "Phone",
@@ -29,17 +32,4 @@
         id: "phone"
     }) %>
   <% end %>
-  <%= pb_rails("form_group") do %>
-      <%= pb_rails("phone_number_input", props: {
-        id: "phone2"
-      }) %>
-      <%= pb_rails("select", props: {
-        blank_selection: "Phone",
-        options: [
-          { value: "Cell" },
-          { value: "Work" },
-          { value: "Home" },
-        ]
-      }) %>
-  <% end %>
-<% end %>
+</div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx

@@ -4,7 +4,6 @@ import FormGroup from '../_form_group'
 import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
 import Select from '../../pb_select/_select'
 import TextInput from '../../pb_text_input/_text_input'
-import Flex from '../../pb_flex/_flex'
 
 const FormGroupSelect = (props) => {
   const options = [
@@ -26,10 +25,7 @@ const FormGroupSelect = (props) => {
   ]
 
   return (
-    <Flex 
-        orientation="column" 
-        rowGap="md"
-    >
+    <div>
       <FormGroup>
         <TextInput
             placeholder="Enter Artist Name"
@@ -41,29 +37,18 @@ const FormGroupSelect = (props) => {
             {...props}
         />
       </FormGroup>
+      <br />
+      <br />
       <FormGroup>
         <Select
             blankSelection="Phone"
             options={phoneOptions}
-            {...props}
-        />
+            />
         <PhoneNumberInput
             id='default'
-            {...props}
         />
     </FormGroup>
-    <FormGroup>
-      <PhoneNumberInput
-          id='default-2'
-          {...props}
-      />
-      <Select
-          blankSelection="Phone"
-          options={phoneOptions}
-          {...props}
-      />
-    </FormGroup>
-    </Flex>
+    </div>
   )
 }
 

data/app/pb_kits/playbook/pb_layout/_layout.scss

@@ -226,25 +226,8 @@ $bracket-border-width: 4px;
       display: none;
     }
 
-    .layout_participant,
     .layout_participant_winner,
-    .layout_participant_self,
-    .layout_participant_winner_self,
-    .layout_participant_winner_self_last {
-      height: 60px;
-    }
-
-    .layout_tbd {
-      height: 140px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-    }
-
-    .layout_participant_winner,
-    .layout_participant_self,
-    .layout_participant_winner_self,
-    .layout_participant_winner_self_last {
+    .layout_participant_self {
       position: relative;
 
       &::after {
@@ -266,22 +249,6 @@ $bracket-border-width: 4px;
       background: $category_1;
     }
 
-    .layout_participant_winner_self::after {
-      right: 0;
-      background: $product_6_highlight;
-    }
-
-    .layout_participant_winner_self_last::after {
-      left: 0;
-      background: $category_1;
-    }
-
-    .game_separator {
-      &::before, &::after {
-        height: 2px;
-      }
-    }
-
     @media (max-width: $screen-md-max) {
       flex-direction: column;
       .layout_round_label {
@@ -289,8 +256,7 @@ $bracket-border-width: 4px;
       }
       .layout_round .layout_game::after,
       .connector_container,
-      .half_box,
-      .polygon_node {
+      .half_box {
         display: none !important;
       }
     }

data/app/pb_kits/playbook/pb_layout/_layout.tsx

@@ -177,38 +177,13 @@ const Layout = (props: LayoutPropTypes) => {
     (child: React.ReactElement & {type: {displayName: string}}) => child.type?.displayName !== 'Side'
   )
 
-  const numberOfRounds = Array.isArray(children) ? React.Children.toArray(children).filter(
+  const numberOfRounds = Array.isArray(nonSideChildren) ? React.Children.toArray(children).filter(
     (child) => {
       return (child as React.ReactElement).type === Layout.Round;
     }
   ).length : 0
-
-  const lastRoundWithSelf = React.Children.toArray(children).filter((child) => {
-    if ((child as React.ReactElement).type !== Layout.Round) {
-      return false
-    }
-  
-    const roundElement = child as React.ReactElement
-  
-    const gameChildren = React.Children.toArray(roundElement.props.children)
-  
-    const hasWinningSelfParticipant = gameChildren.some((gameChild) => {
-      const gameElement = gameChild as React.ReactElement
-  
-      const participantChildren = React.Children.toArray(gameElement.props.children)
-  
-      return participantChildren.some((participantChild) => {
-        const participantElement = participantChild as React.ReactElement
-        const { self } = participantElement.props
-        return self === true
-      })
-    })
-  
-    return hasWinningSelfParticipant
-  }).length
-
   const bracketChildren = nonSideChildren.map(child =>
-    React.isValidElement(child) ? React.cloneElement(child, { numberOfRounds, lastRoundWithSelf }) : child
+    React.isValidElement(child) ? React.cloneElement(child, { numberOfRounds }) : child
   )
   
   const filteredProps = {...props}

data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx

@@ -6,85 +6,85 @@ import SectionSeparator from '../../pb_section_separator/_section_separator'
 
 const teamData = {
   eagles: {
-    avatar:"https://images.unsplash.com/photo-1628703117067-fb7c9c20946e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZWFnbGVzfGVufDB8fDB8fHww",
+    avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/8/8e/Philadelphia_Eagles_logo.svg/1920px-Philadelphia_Eagles_logo.svg.png",
     name:"Eagles",
     rank:"#1 NFC East",
     territory:"PHI",
   },
   packers: {
-    avatar:"https://images.unsplash.com/photo-1486297678162-eb2a19b0a32d?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    avatar:"https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Green_Bay_Packers_logo.svg/1920px-Green_Bay_Packers_logo.svg.png",
     name:"Packers",
     rank:"#3 NFC North",
     territory:"GB",
   },
   vikings: {
-    avatar:"https://images.unsplash.com/photo-1525540796810-55f9fbc5592f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHZpa2luZ3xlbnwwfHwwfHx8MA%3D%3D",
+    avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/4/48/Minnesota_Vikings_logo.svg/1024px-Minnesota_Vikings_logo.svg.png",
     name:"Vikings",
     rank:"#2 NFC North",
     territory:"MIN",
   },
   rams: {
-    avatar:"https://images.unsplash.com/photo-1490739043913-239b6cdf4084?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/8/8a/Los_Angeles_Rams_logo.svg/1920px-Los_Angeles_Rams_logo.svg.png",
     name:"Rams",
     rank:"#1 NFC West",
     territory:"LAR",
   },
   lions: {
-    avatar:"https://images.unsplash.com/photo-1614027164847-1b28cfe1df60?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/7/71/Detroit_Lions_logo.svg/1920px-Detroit_Lions_logo.svg.png",
     name:"Lions",
     rank:"#1 NFC North",
     territory:"DET",
   },
   commanders: {
-    avatar:"https://images.unsplash.com/photo-1501466044931-62695aada8e9?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    avatar:"https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Washington_Commanders_logo.svg/2560px-Washington_Commanders_logo.svg.png",
     name:"Commanders",
     rank:"#2 NFC East",
     territory:"WAS",
   },
   buccaneers: {
-    avatar:"https://images.unsplash.com/photo-1584116843008-46d529f04145?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/a/a2/Tampa_Bay_Buccaneers_logo.svg/1920px-Tampa_Bay_Buccaneers_logo.svg.png",
     name:"Buccaneers",
     rank:"#1 NFC South",
     territory:"TB",
   },
   chiefs: {
-    avatar:"https://plus.unsplash.com/premium_photo-1697729864667-57f5f29e946b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8a2Fuc2FzJTIwY2l0eXxlbnwwfHwwfHx8MA%3D%3D",
+    avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/e/e1/Kansas_City_Chiefs_logo.svg/2560px-Kansas_City_Chiefs_logo.svg.png",
     name:"Chiefs",
     rank:"#1 AFC West",
     territory:"KC",
   },
   chargers: {
-    avatar:"https://images.unsplash.com/photo-1529310399831-ed472b81d589?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    avatar:"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Los_Angeles_Chargers_logo.svg/2560px-Los_Angeles_Chargers_logo.svg.png",
     name:"Chargers",
     rank:"#2 AFC West",
     territory:"LAC",
   },
   texans: {
-    avatar:"https://images.unsplash.com/photo-1545345540-ea5d968030af?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/2/28/Houston_Texans_logo.svg/1280px-Houston_Texans_logo.svg.png",
     name:"Texans",
     rank:"#1 AFC South",
     territory:"HOU",
   },
   broncos: {
-    avatar:"https://images.unsplash.com/photo-1553284965-83fd3e82fa5a?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/4/44/Denver_Broncos_logo.svg/2560px-Denver_Broncos_logo.svg.png",
     name:"Broncos",
     rank:"#3 AFC West",
     territory:"DEN",
   },
   bills: {
-    avatar:"https://images.unsplash.com/photo-1575414914265-ebc9aa2637f4?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/7/77/Buffalo_Bills_logo.svg/1920px-Buffalo_Bills_logo.svg.png",
     name:"Bills",
     rank:"#1 AFC East",
     territory:"BUF",
   },
   steelers: {
-    avatar:"https://plus.unsplash.com/premium_photo-1697730155764-cc8ca8f78cbe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cGl0dHNidXJnaHxlbnwwfHwwfHx8MA%3D%3D",
+    avatar:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Pittsburgh_Steelers_logo.svg/1280px-Pittsburgh_Steelers_logo.svg.png",
     name:"Steelers",
     rank:"#2 AFC North",
     territory:"PIT",
   },
   ravens: {
-    avatar:"https://images.unsplash.com/photo-1433888376991-1297486ba3f5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cmF2ZW58ZW58MHx8MHx8fDA%3D",
+    avatar:"https://upload.wikimedia.org/wikipedia/en/thumb/1/16/Baltimore_Ravens_logo.svg/2560px-Baltimore_Ravens_logo.svg.png",
     name:"Ravens",
     rank:"#1 AFC North",
     territory:"BAL",
@@ -121,7 +121,6 @@ const LayoutBracket = () => {
                 name={teamData.eagles.name}
                 points="22"
                 rank={teamData.eagles.rank}
-                self
                 territory={teamData.eagles.territory}
                 winner
             />
@@ -264,7 +263,6 @@ const LayoutBracket = () => {
                 name={teamData.eagles.name}
                 points="28"
                 rank={teamData.eagles.rank}
-                self
                 territory={teamData.eagles.territory}
                 winner
             />
@@ -339,7 +337,6 @@ const LayoutBracket = () => {
                 name={teamData.eagles.name}
                 points="55"
                 rank={teamData.eagles.rank}
-                self
                 territory={teamData.eagles.territory}
                 winner
             />
@@ -382,7 +379,6 @@ const LayoutBracket = () => {
                 rank={teamData.eagles.rank}
                 self
                 territory={teamData.eagles.territory}
-                winner
             />
           </Layout.Game>
         </Layout.Round>

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

@@ -6,20 +6,18 @@ 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
@@ -28,27 +26,17 @@ const Game = (props: LayoutGameProps) => {
 
   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
+    const [firstChild, secondChild] = React.Children.toArray(children)
 
     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
-      ) {
+      if ('winner' in firstChild.props || 'winner' in secondChild.props) {
         hasWinner = true
       }
       return (
@@ -63,7 +51,7 @@ const Game = (props: LayoutGameProps) => {
               shadow="deep"
           >
             <Card.Body padding="none">{firstChild}</Card.Body>
-            <SectionSeparator className="game_separator"/>
+            <SectionSeparator />
             <Card.Body padding="none">{secondChild}</Card.Body>
           </Card>
           {isOdd && numberOfGames > 1 &&
@@ -88,25 +76,23 @@ const Game = (props: LayoutGameProps) => {
       {((!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>
+        <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

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

@@ -23,10 +23,9 @@ type LayoutParticipantProps = {
 } & GlobalProps
 
 export const Participant = (props: LayoutParticipantProps) => {
-  const { className, name = 'To be determined...', territory = '', points, rank, avatar, winner, self, hasLastWinnerAndSelf } = props
+  const { className, name = 'To be determined...', territory = '', points, rank, avatar, winner, self } = props
   const dynamicInlineProps = globalInlineProps(props)
-  const isLastWinnerAndSelf = hasLastWinnerAndSelf && self && winner
-  const classes = classnames(buildCss('layout_participant', winner ? 'winner' : '', self ? 'self' : '', isLastWinnerAndSelf ? 'last' : ''), globalProps(props), className)
+  const classes = classnames(buildCss('layout_participant', winner ? 'winner' : '', self ? 'self' : ''), globalProps(props), className)
   return (
     <Background
         backgroundColor={winner ? "success_subtle" : "white"}
@@ -43,20 +42,15 @@ export const Participant = (props: LayoutParticipantProps) => {
         />
         <Body flexGrow={1}>
           <Flex justify="between">
+            <Body color={winner ? "success" : "default"}>{winner ? <strong>{name}</strong> : name}{self ? ' (You)' : ''}</Body>
             <Body
-                color={winner && !isLastWinnerAndSelf ? "success" : "default"}
-                truncate={1}
-            >
-              {winner ? <strong>{name}{self ? ' (You)' : ''}</strong> : name + (self && !isLastWinnerAndSelf ? ' (You)' : '')}
-            </Body>
-            <Body
-                color={winner && !isLastWinnerAndSelf ? "success" : "light"}
+                color={winner ? "success" : "light"}
                 display="flex"
             >
               {points && (<>
                 <strong>{points}</strong>
                 <Detail
-                    color={winner && !isLastWinnerAndSelf ? "success" : "light"}
+                    color={winner ? "success" : "light"}
                     text="pts"
                 />
               </>)}
@@ -67,7 +61,7 @@ export const Participant = (props: LayoutParticipantProps) => {
             &nbsp;
             <Badge
                 text={rank}
-                variant={winner && !isLastWinnerAndSelf ? "success" : self ? "notification" : "neutral"}
+                variant={winner ? "success" : self ? "notification" : "neutral"}
             />
           </Body>
         </Body>

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)