playbook_ui 14.13.0.pre.alpha.advsncedtablefix6185 → 14.13.0.pre.alpha.pbntr799collapsiblerowswithcustomclick6117

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7a7a2e5ca60a324ed94a9eeafc8a8b0a458a045aafb3ed2d93e284590941f65e
-  data.tar.gz: dc4b1f1f0d8afc9774805ae6bd1c0e2df6f6077c7086019bb8247c1dcabf1aa6
+  metadata.gz: 937bb9fc3230103fc7be8d835ee2d7ad696ca3d57b01cd03329c899c37acd2b5
+  data.tar.gz: a583fb654a994255ecd697b68ab324b07c10f7470f0e0849659d5103ebd4d4d9
 SHA512:
-  metadata.gz: fdda34d574e75cf743086d341b2c27e08269f6a8483f8f6dc1fd6409e7e8fd25e0ece1f67f345e0836b5c86f0e82b1dfea0e48d9bdaeab3818e2bdab31967ff5
-  data.tar.gz: 3f51f45b3580853de7b4fa027d83f24e1669b5798b4db06f4cd48cd6fd9e11418058177018383561edfee92e859943f271ba080786cc5d455424654f0ab959a4
+  metadata.gz: a77333d667e26114e78da6a2ad3df2fef62cf1da13e2ca5c8c273a23f8cb1095bcd7e510f140ccaa0111207accf78d66cd34eb993fee9a1d4d3512c7ef4f5c9b
+  data.tar.gz: 9bb3eecfa0326a5bd74802ddb7b4448102c82c71169d2726573586db48eefb7a4a65ea4d03964cc5ef4d80a0fc3e256fc4abf6e928c88bb3bab20f8ade55aa77

data/app/pb_kits/playbook/_playbook.scss

@@ -1,6 +1,7 @@
 
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
+@import 'pb_avatar_action_button/avatar_action_button';
 @import 'pb_background/background';
 @import 'pb_badge/badge';
 @import 'pb_bar_graph/bar_graph';

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -116,7 +116,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
 
   //Create cells for columns, with customization for first column
-  const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element, isFirstColumn?: boolean) => {
+  const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element, index?: number) => {
     const columnCells = ({
       row,
       getValue,
@@ -126,7 +126,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }) => {
       const rowData = row.original
 
-    if (isFirstColumn) {
+    if (index === 0) {
       switch (row.depth) {
         case 0: {
           return (
@@ -164,16 +164,15 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     return columnCells
   }
 
-  const buildColumns = (columnDefinitions: GenericObject[], isRoot= true): any => {
+  const buildColumns = (columnDefinitions: GenericObject[]): any => {
     return (
       columnDefinitions &&
       columnDefinitions.map((column, index) => {
-        const isFirstColumn = isRoot && index === 0; 
         //Checking to see if grouped column or not
         if (column.columns && column.columns.length > 0) {
           return {
             header: column.label || "",
-            columns: buildColumns(column.columns, false),
+            columns: buildColumns(column.columns),
           };
         } else {
           // Define the base column structure
@@ -187,7 +186,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             columnStructure.cell = createCellFunction(
               column.cellAccessors,
               column.customRenderer,
-              isFirstColumn
+              index
             );
           }
 

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

@@ -30,7 +30,6 @@ examples:
   - advanced_table_pagination_with_props: Pagination Props
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
-  - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
   # - advanced_table_no_subrows: Table with No Subrows
   - advanced_table_selectable_rows: Selectable Rows
   - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)

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

@@ -19,5 +19,4 @@ export { default as AdvancedTableSelectableRowsNoSubrows } from './_advanced_tab
 export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.jsx'
 export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_selectable_rows_header.jsx'
 export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
-export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
-export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
+export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss

@@ -0,0 +1,66 @@
+[class^=pb_avatar_action_button_kit] {
+
+  $icon_size: 0px;
+  $border_size: 0px;
+
+  $action-colors: (
+    "add": $primary,
+    "remove": $error,
+  );
+
+  @each $key, $value in $action-colors {
+    &[class*=_#{$key}] a {
+      color: $value;
+    }
+  }
+  
+  @mixin icon-base {
+    &.dark{
+        background-color: $bg_dark
+    }
+    width: $icon_size;
+    height: $icon_size;
+    position: absolute;
+    background-color: $white;
+    border-radius: $icon_size;
+    font-size: ($icon_size - $border_size * 2);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+  }
+
+  @each $name, $size in $avatar-sizes {
+    
+    &[class*=_#{$name}] {
+      
+      $avatar_size: map-get($avatar-sizes, $name);
+      $icon_size: $avatar_size / 2;
+      $border_size: $icon_size / 10;
+
+      position: relative;
+      width: $avatar_size * 1.25;
+      height: $avatar_size * 1.1;
+      display: flex;
+    
+      [class^=pb_tooltip_kit] {
+        justify-self: center;
+      }
+    
+      &[class*=_bottom] .icon {
+        @include icon-base;
+        top: $icon_size * 1.27;
+      }
+      &[class*=_top] .icon {
+        @include icon-base;
+        bottom: $icon_size * 1.27;
+      }
+      &[class*=_right] .icon {
+        left: $icon_size * 1.5;
+      }
+      &[class*=_left] [class^=pb_avatar_kit] {
+        padding-left: $icon_size / 2;
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx

@@ -0,0 +1,98 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps, 
+  buildHtmlProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+
+import Avatar from '../pb_avatar/_avatar'
+import Icon from '../pb_icon/_icon'
+
+type AvatarActionButtonProps = {
+  action?: "add" | "remove",
+  aria?: {[key: string]: string},
+  linkAriaLabel?: string,
+  className?: string,
+  dark?: boolean,
+  data?: {[key: string]: string},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string,
+  imageAlt?: string,
+  imageUrl?: string,
+  linkUrl?: string,
+  name?: string,
+  onClick?: React.MouseEventHandler<HTMLSpanElement>,
+  placement?: string,
+  size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
+}
+
+const AvatarActionButton = (props: AvatarActionButtonProps): React.ReactElement => {
+  const {
+    action = 'add',
+    aria = {},
+    linkAriaLabel,
+    className,
+    dark = false,
+    data = {},
+    htmlOptions = {},
+    id,
+    imageAlt = '',
+    imageUrl,
+    linkUrl,
+    name,
+    onClick,
+    placement = 'bottom left',
+    size = 'md',
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+
+  const classes = classnames(buildCss(
+    'pb_avatar_action_button_kit',
+    action,
+    placement,
+    size),
+  globalProps(props),
+  className)
+
+  const icons = {
+    add: 'plus-circle',
+    remove: 'times-circle',
+  }
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
+    >
+      <a
+          aria-label={linkAriaLabel}
+          href={linkUrl}
+          onClick={onClick}
+      >
+        <Avatar
+            imageAlt={imageAlt}
+            imageUrl={imageUrl}
+            name={name}
+            size={size}
+        />
+        <div className={`icon ${dark ? 'dark' : ''}`}>
+          <Icon
+              dark={dark}
+              icon={icons[action]}
+          />
+        </div>
+      </a>
+    </div>
+  )
+}
+
+export default AvatarActionButton

data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb

@@ -0,0 +1,28 @@
+<%= pb_content_tag do %>
+    <% if object.tooltip_text.present? %>
+        <%= pb_rails("tooltip", props: {
+          trigger_element_id: object.tooltip_id,
+          tooltip_id: "tooltip-2",
+          position: 'top'
+        }) do %>
+          <%= object.tooltip_text %>
+        <% end %>
+    <% end %>
+
+    <%= link_to object.link_url, id: object.tooltip_id, 'aria-label': object.link_aria_label do %>
+      <%= pb_rails("avatar", props: {
+        dark: object.dark,
+        name: object.name,
+        size: object.size,
+        image_alt: object.image_alt,
+        image_url: object.image_url,
+        class: "avatar_action"
+      }) %>
+      <div class="icon <%= object.dark ? 'dark' : '' %> ">
+        <%= pb_rails("icon", props: {
+          dark: object.dark,
+          icon: object.action_icons
+        }) %>
+      </div>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbAvatarActionButton
+    class AvatarActionButton < Playbook::KitBase
+      prop :action, type: Playbook::Props::String,
+                    default: "add"
+      prop :link_aria_label, type: Playbook::Props::String
+      prop :image_alt, type: Playbook::Props::String
+      prop :image_url, type: Playbook::Props::String
+      prop :link_url, type: Playbook::Props::String, default: "#"
+      prop :tooltip_text, type: Playbook::Props::String
+      prop :tooltip_id, type: Playbook::Props::String
+      prop :name, type: Playbook::Props::String,
+                  default: ""
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[xs sm md lg xl],
+                  default: "md"
+      prop :placement, type: Playbook::Props::Enum,
+                       values: %w[bottom_left bottom_right top_left top_right],
+                       default: "bottom_left"
+
+      def classname
+        generate_classname("pb_avatar_action_button_kit", action, size, placement)
+      end
+
+      def action_icons
+        icon_hash = {
+          add: "plus-circle",
+          remove: "times-circle",
+        }
+        # if an 'action' prop is passed that isn't
+        # in the icon_hash an empty string is returned
+        # instead of a null value, which would break the page
+
+        # double pipe ruby syntax below is essentially a reduced if-else statement
+        # if icon_hash[action.to_sym] returns a falsey value, return "" instead
+        icon_hash[action.to_sym] ||= ""
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.html.erb

@@ -0,0 +1,19 @@
+<div class="pb--doc-demo-row">
+  
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Add Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Add Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      action: "add",
+  }) %>
+
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Remove Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Remove Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      action: "remove",
+  }) %>
+
+</div>

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import AvatarActionButton from '../_avatar_action_button'
+
+const AvatarActionButtonActions = (props) => (
+  <div className="pb--doc-demo-row">
+    <AvatarActionButton
+        action="add"
+        imageAlt="Add Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Add Sophia Carden"
+        name="Sophia Carden"
+        {...props}
+    />
+    <AvatarActionButton
+        action="remove"
+        imageAlt="Remove Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Remove Sophia Carden"
+        name="Sophia Carden"
+        {...props}
+    />
+  </div>
+)
+
+export default AvatarActionButtonActions

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.html.erb

@@ -0,0 +1,10 @@
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg"
+  }) %>
+
+</div>

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import AvatarActionButton from '../_avatar_action_button'
+
+const AvatarActionButtonDefault = (props) => (
+  <div className="pb--doc-demo-row">
+    <AvatarActionButton
+        imageAlt="Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Sophia Carden"
+        name="Sophia Carden"
+        {...props}
+    />
+  </div>
+)
+
+export default AvatarActionButtonDefault

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import AvatarActionButton from '../_avatar_action_button'
+
+const AvatarActionButtonOnClick = (props) => (
+  <div className="pb--doc-demo-row">
+    <AvatarActionButton
+        imageAlt="Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Alert Sophia Carden"
+        linkUrl="https://www.google.com"
+        name="Sophia Carden"
+        onClick={() => alert('clicked!')}
+        {...props}
+    />
+  </div>
+)
+
+export default AvatarActionButtonOnClick

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_onclick.html.erb

@@ -0,0 +1,16 @@
+<div class="pb--doc-demo-row">
+  
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Alert Sophia Carden",
+      name: "Sophia Carden",
+      id: "clickable",
+      link_url: "http://www.google.com",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+  }) %>
+
+  <%= javascript_tag do %>
+    document.querySelector('#clickable').addEventListener('click', () => alert('clickable clicked!'))
+  <% end %>
+
+</div>

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.html.erb

@@ -0,0 +1,35 @@
+<div class="pb--doc-demo-row">
+  
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      placement: "bottom_left"
+  }) %>
+
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      placement: "bottom_right"
+  }) %>
+
+    <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      placement: "top_left"
+  }) %>
+
+    <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      placement: "top_right"
+  }) %>
+
+</div>

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+
+import AvatarActionButton from '../_avatar_action_button'
+
+const AvatarActionButtonPlacement = (props) => (
+  <div className="pb--doc-demo-row">
+    <AvatarActionButton
+        imageAlt="Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Sophia Carden"
+        name="Sophia Carden"
+        placement="bottom_left"
+        {...props}
+    />
+    <AvatarActionButton
+        imageAlt="Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Sophia Carden"
+        name="Sophia Carden"
+        placement="bottom_right"
+        {...props}
+    />
+    <AvatarActionButton
+        imageAlt="Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Sophia Carden"
+        name="Sophia Carden"
+        placement="top_left"
+        {...props}
+    />
+    <AvatarActionButton
+        imageAlt="Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Sophia Carden"
+        name="Sophia Carden"
+        placement="top_right"
+        {...props}
+    />
+  </div>
+)
+
+export default AvatarActionButtonPlacement

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb

@@ -0,0 +1,13 @@
+<div class="pb--doc-demo-row">
+  
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
+      name: "Sophia Carden",
+      link_url: "http://www.google.com",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      tooltip_text: "Tooltip Text",
+      tooltip_id: "avatar_1",
+  }) %>
+
+</div>

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

@@ -0,0 +1,15 @@
+examples:
+  
+  rails:
+  - avatar_action_button_default: Default
+  - avatar_action_button_placement: Placement
+  - avatar_action_button_actions: Actions
+  - avatar_action_button_onclick: On Click
+  - avatar_action_button_tooltip: Tooltip
+
+  
+  react:
+  - avatar_action_button_default: Default
+  - avatar_action_button_placement: Placement
+  - avatar_action_button_actions: Actions
+  - avatar_action_button_on_click: On Click

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

@@ -0,0 +1,4 @@
+export { default as AvatarActionButtonDefault } from './_avatar_action_button_default.jsx'
+export { default as AvatarActionButtonPlacement } from './_avatar_action_button_placement.jsx'
+export { default as AvatarActionButtonActions } from './_avatar_action_button_actions.jsx'
+export { default as AvatarActionButtonOnClick } from './_avatar_action_button_on_click.jsx'

data/app/pb_kits/playbook/pb_avatar_action_button/pb_avatar_action_button.test.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import AvatarActionButton from './_avatar_action_button'
+
+const imageUrl = 'https://randomuser.me/api/portraits/women/8.jpg',
+  testId = 'scarden',
+  name = 'Sophia Carden',
+  imageAlt = 'Sophia Carden Profile'
+
+test('loads the given image url and name', () => {
+  render(
+    <AvatarActionButton
+        data={{ testid: testId }}
+        imageAlt={imageAlt}
+        imageUrl={imageUrl}
+        linkAriaLabel={name}
+        name={name}
+    />
+  )
+
+  const kit      = screen.getByTestId(testId)
+  const image    = screen.getByAltText(imageAlt)
+  const link     = kit.children[0]
+
+  expect(kit).toHaveClass('pb_avatar_action_button_kit_add_bottom_left_md')
+  expect(image).toHaveAttribute('data-src', imageUrl)
+  expect(image).toHaveAttribute('src', imageUrl)
+  expect(image).toHaveAttribute('alt', imageAlt)
+  expect(link).toHaveAttribute('aria-label', name)
+})

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

@@ -17,7 +17,6 @@ examples:
 
   react:
   - bar_graph_default: Default
-  - bar_graph_pb_styles: Playbook Styles
   - bar_graph_legend: Legend
   - bar_graph_legend_position: Legend Position
   - bar_graph_legend_non_clickable: Legend Non Clickable

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_progress_pills/_progress_pills.scss

@@ -3,8 +3,7 @@
 @import "../tokens/border_radius";
 
 @mixin pb_progress_pill {
-  width: 100%;
-  max-width: 45px;
+  width: 45px;
   height: 4px;
   border-radius: $border_rad_light;
   margin-right: $space_xs;
@@ -28,10 +27,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>
   )
 }