playbook_ui 14.13.0.pre.alpha.PLAY1856doc6166 → 14.13.0.pre.alpha.PLAY1873rails86087

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0c8c78420782988bab01929b844343a9351bb6d664032a4c69e7e8af20da169a
-  data.tar.gz: 428d83bf48e70f2dcc354bc2a8d96e6f6a0906117717cb8963982b572f2395e6
+  metadata.gz: e08365da5253269e56718df0229fb325a9904ae790a197f4d9498972990d5e20
+  data.tar.gz: 2fd146a0b22bd09f5b4dbe54a16a3b438a7a24bb360f3a476c307645e8b6fc5b
 SHA512:
-  metadata.gz: 2b0d24de756436a380a8c7a55ded51eb922834b4356ce2d7f45211201b72e46e68f064af4fc583f10f8c3366e32eb0dcf1fde143a6602e308aa908f52f8a10a3
-  data.tar.gz: '0996317c488d86f20a67376e79913b403f0f9f767074c86745d721cc20a4ee0bfcf1322a6afab2ecb5662ab4b3d538209f1acabb3c47a2efe08756e563bf4e44'
+  metadata.gz: 79d14e319ea738d2959955de82a9eac69637d27eba8efad3549f520b7c9ce95ee4ed704e4e7451f8aca6ffc633cccab31a1306bd03ca8b6127eaceeb3f16a01c
+  data.tar.gz: 734cff649221dc31c3a2eb03c73d9bc27df9aa28642bb0e190f41317ef0896fd8b9decc85e2e6587d7c2f7a660e1cefd2f7a151dd4ec4264652e6eb44f610557

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_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_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>
   );
 };