playbook_ui 14.13.0.pre.alpha.play1852reacthookformsupportradio6213 → 14.13.0.pre.alpha.play1884progresspill6064

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

@@ -10,4 +10,3 @@ export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
 export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'
 export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'
 export { default as BarGraphHorizontal } from './_bar_graph_horizontal.jsx'
-export { default as BarGraphPbStyles } from './_bar_graph_pb_styles.jsx'

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, forwardRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import Body from '../pb_body/_body'
 import Icon from '../pb_icon/_icon'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
@@ -24,7 +24,7 @@ type CheckboxProps = {
   value?: string,
 } & GlobalProps
 
-const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
+const Checkbox = (props: CheckboxProps): React.ReactElement => {
   const {
     aria = {},
     checked = false,
@@ -44,15 +44,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
     value = '',
   } = props
 
-  const internalRef = useRef<HTMLInputElement>(null)
-  const setRefs = (el: HTMLInputElement) => {
-    internalRef.current = el
-    if (typeof ref === 'function') {
-      ref(el)
-    } else if (ref) {
-      (ref as React.MutableRefObject<HTMLInputElement | null>).current = el
-    }
-  }
+  const checkRef = useRef(null)
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -64,9 +56,9 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
   )
 
   useEffect(() => {
-    if (internalRef.current) {
-      internalRef.current.checked = checked
-      internalRef.current.indeterminate = indeterminate
+    if (checkRef.current) {
+      checkRef.current.checked = checked
+      checkRef.current.indeterminate = indeterminate
     }
   }, [indeterminate, checked])
 
@@ -80,7 +72,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
         disabled={disabled}
         name={name}
         onChange={onChange}
-        ref={setRefs}
+        ref={checkRef}
         tabIndex={tabIndex}
         type="checkbox"
         value={value}
@@ -127,7 +119,6 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
       </Body>
     </label>
   )
-})
+}
 
-Checkbox.displayName = "Checkbox"
 export default Checkbox

data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js

@@ -106,19 +106,3 @@ test('has disabled attribute', () => {
   const input = kit.querySelector('input')
   expect(input).toHaveAttribute('disabled')
 }) 
-
-test('has ref in the input element', () => {
-  const ref = React.createRef()
-    render(
-      <Checkbox
-          data={{ testid: testId }}
-          name="checkbox-name"
-          ref={ref}
-          text="Checkbox"
-          value="check-box value"
-      />
-  )
-
-  expect(ref.current).not.toBeNull()
-  expect(ref.current?.tagName).toBe('INPUT')
-})

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

@@ -11,7 +11,6 @@ examples:
   react:
   - checkbox_default: Default
   - checkbox_checked: Load as checked
-  - checkbox_react_hook: React Hook Form
   - checkbox_custom: Custom Checkbox
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
@@ -22,4 +21,4 @@ examples:
     - checkbox_error_swift: Default w/ Error
     - checkbox_indeterminate_swift: Indeterminate Checkbox
     - checkbox_props_swift: ""
-    
+    

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

@@ -1,6 +1,5 @@
 export { default as CheckboxDefault } from './_checkbox_default.jsx'
 export { default as CheckboxCustom } from './_checkbox_custom.jsx'
-export { default as CheckboxReactHook } from './_checkbox_react_hook.jsx'
 export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -29,7 +29,6 @@ type DatePickerProps = {
   hideLabel?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  initializeOnce?: boolean,
   inLine?: boolean,
   inputAria?: { [key: string]: string },
   inputData?: { [key: string]: string },
@@ -74,7 +73,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     hideLabel = false,
     htmlOptions = {},
     id,
-    initializeOnce = false,
     inLine = false,
     inputAria = {},
     inputData = {},
@@ -136,7 +134,7 @@ useEffect(() => {
     yearRange,
     required: false,
   }, scrollContainer)
-}, initializeOnce ? [] : undefined)
+})
   const filteredProps = {...props}
   if (filteredProps.marginBottom === undefined) {
     filteredProps.marginBottom = "sm"

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb

@@ -43,9 +43,9 @@
       <% end %>
     <% end %>
 
-    <%= pb_rails("table/table_body", props: {draggable_container: true}) do %>
+    <%= pb_rails("draggable/draggable_container", props: {tag:"tbody"}) do %>
       <% initial_items.each do |item| %>
-        <%= pb_rails("table/table_row", props:{drag_id: item[:id], draggable_item: true}) do %>
+        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], tag:"tr"}) do %>
           <%= pb_rails("table/table_cell", props: { text: item[:id]}) %>
           <%= pb_rails("table/table_cell") do %>
             <%= pb_rails("flex", props:{align:"center"}) do %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md

@@ -1,4 +1 @@
-The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
-
-- use the `draggable_container` prop on the table/table_body to designate it as the Draggable Container
-- use the `draggable_item` prop on the table/table_row to designate it as the Draggable Item. Make sure to also pass id to the `drag_id` prop here. 
+The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this, make use of the `tag` prop on the draggable_container to set it to 'tbody' and the same prop on the draggable_item to set that to 'tr'. This will create the functionality seen here. 

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

@@ -4,9 +4,7 @@ examples:
   - draggable_with_list: Draggable with List Kit
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
-  - draggable_with_table_react: Draggable with Table
   - draggable_multiple_containers: Dragging Across Multiple Containers
-
   rails:
   - draggable_default_rails: Default
   - draggable_with_list_rails: Draggable with List Kit

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

@@ -2,5 +2,4 @@ export { default as DraggableDefault } from './_draggable_default.jsx'
 export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
 export { default as DraggableWithList } from './_draggable_with_list.jsx'
 export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
-export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
-export { default as DraggableWithTableReact } from './_draggable_with_table_react.jsx'
+export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'

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

@@ -17,11 +17,10 @@ type DraggableContainerProps = {
   data?: { [key: string]: string };
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
-  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col' | 'tbody',
 };
 
 const DraggableContainer = (props: DraggableContainerProps) => {
-  const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id, tag="div" } = props;
+  const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id } = props;
 
   const { handleDragOver, handleDrop, activeContainer } = DraggableContext();
 
@@ -29,8 +28,6 @@ const DraggableContainer = (props: DraggableContainerProps) => {
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
 
-  const Tag: React.ReactElement | any = `${tag}`;
-
   const classes = classnames(
     buildCss("pb_draggable_container"),
     `${activeContainer === container ? "active" : ""}`,
@@ -39,18 +36,18 @@ const DraggableContainer = (props: DraggableContainerProps) => {
   );
 
   return (
-    <Tag
+    <div
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
         className={classes}
         id={id}
         key={container}
-        onDragOver={(e: Event) => handleDragOver(e, container)}
+        onDragOver={(e) => handleDragOver(e, container)}
         onDrop={() => handleDrop(container)}
     >
       {children}
-    </Tag>
+    </div>
   );
 };
 

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

@@ -18,11 +18,10 @@ type DraggableItemProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   dragId?: string;
-  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col' | 'tbody',
 };
 
 const DraggableItem = (props: DraggableItemProps) => {
-  const { aria = {}, children, className, container, data = {}, htmlOptions = {},  id, dragId, tag="div" } = props;
+  const { aria = {}, children, className, container, data = {}, htmlOptions = {},  id, dragId } = props;
 
   const { isDragging, handleDragStart, handleDragEnter, handleDragEnd } =
     DraggableContext();
@@ -31,8 +30,6 @@ const DraggableItem = (props: DraggableItemProps) => {
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
 
-  const Tag: React.ReactElement | any = `${tag}`;
-  
   const classes = classnames(
     buildCss("pb_draggable_item"),
     `${isDragging === dragId ? "is_dragging" : ""}`,
@@ -41,7 +38,7 @@ const DraggableItem = (props: DraggableItemProps) => {
   );
 
   return (
-    <Tag
+    <div
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
@@ -54,7 +51,7 @@ const DraggableItem = (props: DraggableItemProps) => {
         onDragStart={() => handleDragStart(dragId, container)}
     >
       {children}
-    </Tag>
+    </div>
   );
 };
 

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+      aria: object.aria,
+      data: object.data,
+      id: object.id,
+      class: object.classname,
+      **combined_html_options) do %>
   <%= react_component("MultiLevelSelect", object.multi_level_select_options)  %>
 <% end %>

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -1,9 +1,15 @@
   <% if object.collapsible %>
     <%= pb_rails("collapsible", props: { name: "collapsible-nav-example", classname: object.collapsible_nav_classname }) do %>
       <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark, classname:object.margin_classes }) do %>
-        <%= pb_content_tag( object.tag,
-            href: object.link && object.link,
-            target: object.link && object.target
+        <%= content_tag(object.tag,
+          aria: object.aria,
+          class: object.classname,
+          data: object.data,
+          dark: object.dark,
+          id: object.id,
+          href: object.link && object.link,
+          target: object.link && object.target,
+          **combined_html_options
           ) do %>
           <% if object.image_url %>
             <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
@@ -14,16 +20,22 @@
           <span class="pb_nav_list_item_text_collapsible">
             <%= object.text %>
           </span>
-        <% end %>
+        <% end %>    
        <% end %>
       <%= pb_rails("collapsible/collapsible_content", props: {collapsed: object.collapsed}) do %>
         <%= content.presence %>
       <% end %>
     <% end %>
   <% else %>
-    <%= pb_content_tag( object.tag,
-        href: object.link && object.link,
-        target: object.link && object.target
+    <%= content_tag(object.tag,
+      aria: object.aria,
+      class: object.classname,
+      **combined_html_options,
+      data: object.data,
+      dark: object.dark,
+      id: object.id,
+      href: object.link && object.link,
+      target: object.link && object.target
       ) do %>
       <% if object.image_url %>
         <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>

data/app/pb_kits/playbook/pb_nav/nav.html.erb

@@ -1,7 +1,12 @@
-<%= pb_content_tag(:nav) do %>
+<%= content_tag(:nav,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <% if object.title %>
-    <%= pb_content_tag do %>
-      <%= pb_content_tag(:a) do %>
+    <%= content_tag(:div, class: "pb_nav_list_title") do %>
+      <%= content_tag(:a, class: "pb_nav_list_item_link_text", href: object.link) do %>
         <%= pb_rails("caption", props: { text: object.title, dark: dark }) %>
       <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_online_status/online_status.html.erb

@@ -1,2 +1,7 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria.merge!(label: object.status),
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
 <% end %>

data/app/pb_kits/playbook/pb_overlay/_overlay.tsx

@@ -8,7 +8,6 @@ import OverlayToken from './subcomponents/_overlay_token'
 export type OverlayChildrenProps = {
     children: React.ReactNode[] | React.ReactNode,
     color: "card_light" | "bg_light" | "card_dark" | "bg_dark",
-    dynamic?: boolean,
     position: string,
     size: string,
 }
@@ -19,7 +18,6 @@ type OverlayProps = {
     children: React.ReactNode[] | React.ReactNode,
     color: "card_light" | "bg_light" | "card_dark" | "bg_dark",
     data?: { [key: string]: string },
-    dynamic?: false,
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string,
     layout: { [key: string]: string },
@@ -32,7 +30,6 @@ const Overlay = (props: OverlayProps) => {
         children,
         color = "card_light",
         data = {},
-        dynamic = false,
         htmlOptions = {},
         id,
         layout = { "bottom": "full" },
@@ -72,7 +69,6 @@ const Overlay = (props: OverlayProps) => {
                 }) : OverlayToken({
                     children,
                     color,
-                    dynamic: dynamic,
                     position: getPosition(),
                     size: getSize()
                 })

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

@@ -2,7 +2,6 @@ examples:
   react:
   - overlay_default: Default
   - overlay_multi_directional: Multi-directional
-  - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle
 
   rails:

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

@@ -1,4 +1,3 @@
 export { default as OverlayDefault } from './_overlay_default.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'

data/app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx

@@ -1,5 +1,5 @@
-import React, { useRef, useEffect, useState } from 'react';
-import { OverlayChildrenProps } from '../_overlay';
+import React from 'react'
+import { OverlayChildrenProps } from '../_overlay'
 
 const previousOverlayDirectionMap: { [key: string]: string } = {
     "x": "left",
@@ -15,40 +15,11 @@ const OverlayToken = (props: OverlayChildrenProps) => {
     const {
         children,
         color,
-        dynamic,
         position,
         size,
     } = props
 
-    const scrollContainerRef = useRef<HTMLDivElement>(null);
-    const [isAtStart, setIsAtStart] = useState(true);
-    const [isAtEnd, setIsAtEnd] = useState(false);
-
-
-    const handleScroll = () => {
-        const container = scrollContainerRef.current;
-        if (container) {
-            const { scrollLeft, scrollWidth, clientWidth } = container;
-            const atStart = scrollLeft === 0;
-            const atEnd = scrollLeft + clientWidth >= scrollWidth - 1; 
-
-            setIsAtStart(atStart);
-            setIsAtEnd(atEnd);
-        }
-    };
-
-    useEffect(() => {
-        const container = scrollContainerRef.current;
-        if (container) {
-            container.addEventListener('scroll', handleScroll);
-            handleScroll();
-            return () => {
-                container.removeEventListener('scroll', handleScroll);
-            };
-        }
-    }, []);
-
-    const hasSubsequentOverlay = position === "x" || position === "y";
+    const hasSubsequentOverlay = position === "x" || position === "y"
 
     const getPreviousOverlayDirection = () => {
         return hasSubsequentOverlay ? previousOverlayDirectionMap[position] : position
@@ -63,24 +34,15 @@ const OverlayToken = (props: OverlayChildrenProps) => {
 
     return (
         <>
-            <div className={dynamic ? isAtStart ? '' : previousOverlayClassName : previousOverlayClassName} />
-            {dynamic ? 
-                <div
-                    ref={scrollContainerRef}
-                    style={{
-                        overflowX: 'auto',     
-                    }}
-                >
-                    {children}
-                </div>
-                : 
-                    children
-                }
-            {hasSubsequentOverlay &&
-                <div className={dynamic ? isAtEnd ? '' : subsequentOverlayClassName : subsequentOverlayClassName} />
+            <div className={previousOverlayClassName} />
+
+            {children}
+
+            { hasSubsequentOverlay &&
+                <div className={subsequentOverlayClassName} />
             }
         </>
     )
 }
 
-export default OverlayToken;
+export default OverlayToken

data/app/pb_kits/playbook/pb_popover/popover.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  aria: object.aria,
+  class: object.classname,
+  data: object.data,
+  id: object.id,
+  **combined_html_options) do %>
   <div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
     <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
       <%= content.presence %>

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss

@@ -28,10 +28,6 @@
   [class*=pb_progress_pill] {
     @include pb_progress_pill;
 
-    &.full_width_pill {
-      max-width: none;
-    }
-
     &[class*=_inactive] {
       background-color: $border_light;
       &.dark {

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx

@@ -13,7 +13,6 @@ type ProgressPillsProps = {
   className?: string,
   data?: { [key: string]: string },
   dark?: boolean,
-  fullWidthPill?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   steps?: number,
@@ -21,19 +20,19 @@ type ProgressPillsProps = {
   value?: string,
 }
 
-const ProgressPill = ({ active, dark, steps: step, fullWidthPill }: ProgressPillsProps) => (
+const ProgressPill = ({ active, dark, steps: step }: ProgressPillsProps) => (
   <div
       className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${dark ? ' dark' : ''
-      }${fullWidthPill ? ' full_width_pill' : ''}`}
+      }`}
       key={step}
   />
 )
 
-const showSteps = (steps: number, active: number, dark: boolean, fullWidthPill: boolean) => {
+const showSteps = (steps: number, active: number, dark: boolean) => {
   const items = []
 
   for (let step = 1; step <= steps; step++) {
-    items.push(ProgressPill({ steps: step, active, dark, fullWidthPill }))
+    items.push(ProgressPill({ steps: step, active, dark }))
   }
 
   return items
@@ -45,7 +44,6 @@ const ProgressPills = (props: ProgressPillsProps) => {
     aria = { hidden: 'true' },
     className,
     data = {},
-    fullWidthPill = false,
     htmlOptions = {},
     id,
     steps = 3,
@@ -81,7 +79,7 @@ const ProgressPills = (props: ProgressPillsProps) => {
               text={value}
           />
         </div>}
-      <div className="progress_pills">{showSteps(steps, active, dark, fullWidthPill)}</div>
+      <div className="progress_pills">{showSteps(steps, active, dark)}</div>
     </div>
   )
 }

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

@@ -3,11 +3,9 @@ examples:
   rails:
   - progress_pills_default: Default
   - progress_pills_status: Status
-  - progress_pills_full_width: Full Container Width
 
 
 
   react:
   - progress_pills_default: Default
   - progress_pills_status: Status
-  - progress_pills_full_width: Full Container Width

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

@@ -1,3 +1,2 @@
 export { default as ProgressPillsDefault } from './_progress_pills_default.jsx'
 export { default as ProgressPillsStatus } from './_progress_pills_status.jsx'
-export { default as ProgressPillsFullWidth } from './_progress_pills_full_width.jsx'

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria_attributes,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
 
     <div class="progress_pills_status">
       <% object.with_status do |status| %>
@@ -9,7 +14,7 @@
 
     <div class="progress_pills">
       <% object.each_step do |step| %>
-        <span class="pb_progress_pill<%= object.active_step(step) %><%= object.make_full_width %><%= object.dark_pill %>"></span>
+        <span class="pb_progress_pill<%= object.active_step(step) %><%= object.dark_pill %>"></span>
       <% end %>
     </div>
 

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.rb

@@ -9,8 +9,6 @@ module Playbook
       prop :steps, type: Playbook::Props::Number,
                    default: 3
       prop :title
-      prop :full_width_pill, type: Playbook::Props::Boolean,
-                             default: false
 
       def classname
         generate_classname("pb_progress_pills_kit")
@@ -28,10 +26,6 @@ module Playbook
         step <= active ? "_active" : "_inactive"
       end
 
-      def make_full_width
-        full_width_pill ? " full_width_pill" : nil
-      end
-
       def aria_attributes
         return aria if aria.present?
 

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.test.js

@@ -23,20 +23,6 @@ const ProgressPillsDefault = () => {
     )
 }
 
-const ProgressPillsFullWidth = () => {
-    return (
-        <ProgressPills
-            active={2}
-            aria={{ label: ariaLabel }}
-            data={{ testid: testId }}
-            fullWidthPill
-            steps={3}
-            title={title}
-            value={value}
-        />
-    )
-}
-
 test('should pass data prop', () => {
     render(<ProgressPillsDefault />)
     const kit = screen.getByTestId(testId)
@@ -65,15 +51,4 @@ test('should render value', () => {
     render(<ProgressPillsDefault />)
     const kit = screen.getByText(value)
     expect(kit).toBeInTheDocument()
-})
-
-test('should apply fullWidthPill styling when fullWidthPill prop is true', () => {
-    render(<ProgressPillsFullWidth />)
-    const container = screen.getByTestId(testId)
-    const pillElements = container.querySelectorAll('.full_width_pill')
-  
-    expect(pillElements.length).toBeGreaterThan(0)
-    pillElements.forEach((pill) => {
-        expect(pill).toHaveClass('full_width_pill')
-    })
-})
+})

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb

@@ -1,7 +1,11 @@
 <%= content_tag(:div,
 class: object.wrapper_classname,
 style: object.style) do %>
-  <%= pb_content_tag do %>
+  <%= content_tag(:div,
+  id: object.id,
+  data: object.data_values,
+  class: object.classname,
+  **combined_html_options) do %>
     <%= content_tag(:div, "",
       class: "progress_simple_value",
       style: object.value_style) %>