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

data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx

@@ -128,58 +128,6 @@ const DraggableKitWithCard = () => {
   );
 };
 
-const DraggableWithLineVertical = () => {
-  const [initialState, setInitialState] = useState(data);
-  return (
-    <div data-testid={testId}>
-      <DraggableProvider
-          dropZone={{ type: "line" }}
-          initialItems={data}
-          onReorder={(items) => setInitialState(items)}
-      >
-        <Draggable>
-          <Draggable.Container>
-            {initialState.map(({ id, text }) => (
-              <Draggable.Item
-                  dragId={id}
-                  key={id}
-              >
-                {text}
-              </Draggable.Item>
-            ))}
-          </Draggable.Container>
-        </Draggable>
-      </DraggableProvider>
-    </div>
-  );
-};
-
-const DraggableWithLineHorizontal = () => {
-  const [initialState, setInitialState] = useState(data);
-  return (
-    <div data-testid={testId}>
-      <DraggableProvider
-          dropZone={{ type: "line", direction: "horizontal" }}
-          initialItems={data}
-          onReorder={(items) => setInitialState(items)}
-      >
-        <Draggable>
-          <Draggable.Container>
-            {initialState.map(({ id, text }) => (
-              <Draggable.Item
-                  dragId={id}
-                  key={id}
-              >
-                {text}
-              </Draggable.Item>
-            ))}
-          </Draggable.Container>
-        </Draggable>
-      </DraggableProvider>
-    </div>
-  );
-};
-
 test("generated default kit and classname", () => {
   render(<DefaultDraggableKit />);
   const kit = screen.getByTestId(testId);
@@ -240,19 +188,3 @@ test("generated dragHandle with Card", () => {
   const dragHandle = card.querySelector(".pb_custom_icon");
   expect(dragHandle).toBeInTheDocument();
 });
-
-test("line dropZone with default direction applies 'line_vertical' class to container", () => {
-  render(<DraggableWithLineVertical />);
-  const kit = screen.getByTestId(testId);
-  const container = kit.querySelector(".pb_draggable_container");
-  
-  expect(container).toHaveClass("line_vertical");
-});
-
-test("line dropZone with horizontal direction applies 'line_horizontal' class to container", () => {
-  render(<DraggableWithLineHorizontal />);
-  const kit = screen.getByTestId(testId);
-  const container = kit.querySelector(".pb_draggable_container");
-  
-  expect(container).toHaveClass("line_horizontal");
-});

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx

@@ -31,7 +31,7 @@ const DraggableContainer = (props: DraggableContainerProps) => {
   } = contextValues;
 
   // Only get direction if dropZone is 'line'
-  const direction = dropZone === 'line' ? (contextValues.direction || 'vertical') : null; 
+  const direction = dropZone === 'line' ? (contextValues.direction || 'vertical') : 'vertical';
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
@@ -41,9 +41,8 @@ const DraggableContainer = (props: DraggableContainerProps) => {
   const classes = classnames(
     buildCss("pb_draggable_container"),
     `${activeContainer === container ? "active" : ""}`,
-    // Line variant gets line_{direction} classname on container no matter what
-    dropZone === 'line' && direction === 'vertical' ? 'line_vertical' : '',
-    dropZone === 'line' && direction === 'horizontal' ? 'line_horizontal' : '',
+    // Only add vertical class if dropZone is 'line' and direction is 'vertical'
+    (dropZone === 'line' && direction === 'vertical') ? 'vertical' : '',
     globalProps(props),
     className
   );

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -85,16 +85,8 @@
     .text_input_wrapper input, [class^=pb_text_input_kit] .text_input_wrapper .text_input {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
-      border-right-color: transparent;
+      border-right-width: 0;
     }
-    [class^=pb_text_input_kit] .text_input_wrapper input:focus,
-    [class^=pb_text_input_kit] .text_input_wrapper .text_input:focus {
-      border-right-color: $primary;
-    } 
-    [class^=pb_text_input_kit].error .text_input_wrapper input,
-    [class^=pb_text_input_kit].error .text_input_wrapper .text_input {
-      border-right-color: $error;
-    }   
   }
 
   & > [class^=pb_phone_number_input]:not(:first-child) {
@@ -115,16 +107,8 @@
     .text_input {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
-      border-right-color: transparent;
+      border-right: none;
     }
-    [class^=pb_text_input_kit] .text_input_wrapper input:focus,
-    [class^=pb_text_input_kit] .text_input_wrapper .text_input:focus {
-      border-right-color: $primary;
-    } 
-    [class^=pb_text_input_kit].error .text_input_wrapper input,
-    [class^=pb_text_input_kit].error .text_input_wrapper .text_input {
-      border-right-color: $error;
-    }  
   }
 
   &[class*=rails] > [class^=pb_date_picker_kit] {

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

@@ -210,78 +210,10 @@ $bracket-border-width: 4px;
       border-right: $bracket-border-width solid $border_light;
     }
 
-    .polygon_node {
-      position: absolute;
-      top: calc(50% - 5px);
-      right: -10px;
-
-      width: 0;
-      height: 0;
-      border-top: 5px solid transparent;
-      border-bottom: 5px solid transparent;
-      border-left: 10px solid $border_light;
-    }
-
     .layout_round_label {
       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 {
-      position: relative;
-
-      &::after {
-        content: "";
-        position: absolute;
-        top: 0;
-        width: 4px;
-        height: 100%;
-      }
-    }
-
-    .layout_participant_winner::after {
-      right: 0;
-      background: $product_6_highlight;
-    }
-
-    .layout_participant_self::after {
-      left: 0;
-      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 +221,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

@@ -6,7 +6,6 @@ import { GlobalProps, globalProps, globalInlineProps } from '../utilities/global
 
 import { Round, RoundLabel } from "./subcomponents/_round";
 import Game from "./subcomponents/_game";
-import Participant from "./subcomponents/_participant";
 
 type LayoutPropTypes = {
   aria?: {[key: string]: string},
@@ -177,38 +176,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}
@@ -245,6 +219,5 @@ Layout.Footer = Footer
 Layout.Round = Round
 Layout.Game = Game
 Layout.RoundLabel = RoundLabel
-Layout.Participant = Participant
 
 export default Layout