playbook_ui 14.6.2.pre.alpha.PBNTR576tooltiptruncatedformpills4296 → 14.6.2.pre.alpha.PBNTR633dropdownavailablepropstable4303

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 89ab9a27621b94e30352163a1c90f30e4cfa79ff773f1933c308c40f3345c164
-  data.tar.gz: 2333af54c76ad12538d3c3b59c41561d1821abc7591e8afa7eca81df1748a4f9
+  metadata.gz: 0e0a61942ce72178bc4995507346515c1ca4a4347152d168cc9e84061d66231f
+  data.tar.gz: b40339fc9adb7796cdb029c5450f3f3d9065ca3122f3659692bbfd42a94c3c67
 SHA512:
-  metadata.gz: 63432e88ba76ed2231c9168dabee21ebb9573b95953667f28a9b151c8859cc9452d28467e100b7c51a73fdc0d2d20ebb13dde853d61b6aa581239b73ea0071da
-  data.tar.gz: a3268da60a7c6c0fca9769fa79fa0e5527c556a99f72d8787f4e39f1846057f70f0db22cb7dcefa7977b42eabadd7e68b47a092e3009aca88c9ebb6359a006ea
+  metadata.gz: 0dba16c359445b2daebcfcd0f56b4cfd50a678fdf09959ed37cbda194900cabaa6da73d557fe064f1e9f9c89eda514341bf72e7db65df606cd2d96039518c3af
+  data.tar.gz: 2bd784894bceafb2c1fdf90aa9aea4f69d19020e2017c900e03a5f87846b7c04b32cf8c4f1fa5113db4853d4db266978c5836556f9b87af16e529cc0bbaa2dcd

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -47,7 +47,7 @@ interface DropdownComponent
     Container: typeof DropdownContainer;
 }
 
-const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
+const Dropdown: React.ForwardRefRenderFunction<unknown, DropdownProps> = (props, ref) => {
     const {
         aria = {},
         autocomplete = false,
@@ -260,7 +260,8 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
                             <DropdownContainer>
                                 {optionsWithBlankSelection &&
                                     optionsWithBlankSelection?.map((option: GenericObject) => (
-                                        <Dropdown.Option key={option.id}
+                                        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                                        <ForwardedDropdown.Option key={option.id}
                                             option={option}
                                         />
                                     ))}
@@ -278,11 +279,12 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
             </DropdownContext.Provider>
         </div>
     )
-}) as DropdownComponent
+}
 
-Dropdown.displayName = "Dropdown";
-Dropdown.Option = DropdownOption;
-Dropdown.Trigger = DropdownTrigger;
-Dropdown.Container = DropdownContainer;
+const ForwardedDropdown = forwardRef(Dropdown) as DropdownComponent;
+ForwardedDropdown.displayName = "Dropdown";
+ForwardedDropdown.Option = DropdownOption;
+ForwardedDropdown.Trigger = DropdownTrigger;
+ForwardedDropdown.Container = DropdownContainer;
 
-export default Dropdown;
+export default ForwardedDropdown;

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -142,9 +142,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     height: 12px !important;
     width: 12px !important;
     padding-right: $space_xs;
-    + .pb_form_pill_text, + .pb_form_pill_tag, 
-    + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
-    + div .pb_form_pill_text, + div .pb_form_pill_tag {
+    + .pb_form_pill_text, + .pb_form_pill_tag {
       padding-left: 0;
     }
   }
@@ -171,9 +169,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     }
     .pb_form_pill_icon {
       padding-right: $space_xxs;
-      + .pb_form_pill_text, + .pb_form_pill_tag, 
-      + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
-      + div .pb_form_pill_text, + div .pb_form_pill_tag {
+      + .pb_form_pill_text, + .pb_form_pill_tag {
         padding-left: 0;
       }
     }

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -3,7 +3,6 @@ import classnames from 'classnames'
 import Title from '../pb_title/_title'
 import Icon from '../pb_icon/_icon'
 import Avatar from '../pb_avatar/_avatar'
-import Tooltip from '../pb_tooltip/_tooltip'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import { buildDataProps, buildHtmlProps } from '../utilities/props'
 
@@ -22,7 +21,6 @@ type FormPillProps = {
   data?: {[key: string]: string},
   tabIndex?: number,
   icon?: string,
-  truncate?: number,
   closeProps?: {
     onClick?: React.MouseEventHandler<HTMLSpanElement>,
     onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
@@ -45,7 +43,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     data = {},
     tabIndex,
     icon = "",
-    truncate,
   } = props
 
   const iconClass = icon ? "_icon" : ""
@@ -65,30 +62,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
 
-  const renderTitle = (content: string, className: string) => {
-    const titleComponent = (
-      <Title
-          className={className}
-          size={4}
-          text={content}
-          truncate={truncate}
-      />
-    )
-    if (truncate) {
-      return (
-        <Tooltip
-            interaction
-            placement="top"
-            position="fixed"
-            text={content}
-        >
-          {titleComponent}
-        </Tooltip>
-      )
-    }
-    return titleComponent
-  }
-
   return (
     <div className={css}
         id={id}
@@ -104,7 +77,12 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               size="xxs"
               status={null}
           />
-          {renderTitle(name, "pb_form_pill_text")}
+          <Title
+              className="pb_form_pill_text"
+              size={4}
+              text={name}
+              truncate={props.truncate}
+          />
         </>
       )}
       {((name && icon && !text) || (name && icon && text)) && (
@@ -115,7 +93,12 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               size="xxs"
               status={null}
           />
-          {renderTitle(name, "pb_form_pill_text")}
+          <Title
+              className="pb_form_pill_text"
+              size={4}
+              text={name}
+              truncate={props.truncate}
+          />
           <Icon
               className="pb_form_pill_icon"
               color={color}
@@ -130,10 +113,22 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               color={color}
               icon={icon}
           />
-          {renderTitle(text, "pb_form_pill_tag")}
+          <Title
+              className="pb_form_pill_tag"
+              size={4}
+              text={text}
+              truncate={props.truncate}
+          />
         </>
       )}
-      {(!name && !icon && text) && renderTitle(text, "pb_form_pill_tag")}
+      {(!name && !icon && text) && (
+        <Title
+            className="pb_form_pill_tag"
+            size={4}
+            text={text}
+            truncate={props.truncate}
+        />
+      )}
       <div
           className="pb_form_pill_close"
           onClick={onClick}
@@ -148,5 +143,4 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     </div>
   )
 }
-
 export default FormPill

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb

@@ -13,28 +13,7 @@
     id: "typeahead-form-pill",
     is_multi: true,
     options: names,
-    label: "Truncation Within Typeahead",
+    label: "Names",
     pills: true,
     truncate: 1,
 }) %>
-
-<%= pb_rails("caption", props: { text: "Form Pill Truncation" }) %>
-<%= pb_rails("card", props: { max_width: "xs" })  do %>
-  <%= pb_rails("form_pill", props: {
-      name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
-      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
-      tabindex: 0,
-      truncate: 1,
-  }) %>
-  <%= pb_rails("form_pill", props: {
-      icon: "badge-check",
-      text: "icon and a very long tag to show truncation",
-      tabindex: 0,
-      truncate: 1,
-  }) %>
-  <%= pb_rails("form_pill", props: {
-      text: "form pill with a very long tag to show truncation",
-      tabindex: 0,
-      truncate: 1,
-  }) %>
-<% end %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
+import Typeahead from '../../pb_typeahead/_typeahead'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
@@ -15,34 +15,11 @@ const FormPillTruncatedText = (props) => {
       <Typeahead
           htmlOptions={{ style: { maxWidth: "240px" }}}
           isMulti
-          label="Truncation Within Typeahead"
+          label="Names"
           options={names}
           truncate={1}
           {...props}
       />
-      <Caption text="Form Pill Truncation"/>
-      <Card maxWidth="xs">
-        <FormPill
-            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
-            name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
-            onClick={() => alert('Click!')}
-            tabIndex={0}
-            truncate={1}
-        />
-        <FormPill
-            icon="badge-check"
-            onClick={() => {alert('Click!')}}
-            tabIndex={0}
-            text="icon and a very long tag to show truncation"
-            truncate={1}
-        />
-        <FormPill
-            onClick={() => {alert('Click!')}}
-            tabIndex={0}
-            text="form pill with a very long tag to show truncation"
-            truncate={1}
-        />
-      </Card>
     </>
   )
 }

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md

@@ -1 +1 @@
-For pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
+For pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,51 +1,19 @@
 <%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xxs" }) %>
-    <% element_id = "pill_#{object.name.parameterize}" %>
-    <div>
-      <%= pb_rails("title", props: { 
-        classname: "pb_form_pill_text #{object.truncate ? "truncate_#{object.truncate}" : ""}",
-        id: element_id,
-        size: 4, 
-        text: object.name,
-      }) %>
-      <% if object.truncate %>
-        <%= pb_rails("tooltip", props: {
-          position: "top",
-          tooltip_id: "tooltip-#{element_id}",
-          trigger_element_selector: "##{element_id}"
-        }) do %>
-          <%= object.name %>
-        <% end %>
-      <% end %>
-    </div>
+    <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
     <% if object.icon.present? %>
       <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
     <% end %>
   <% elsif object.text.present? %>
-    <% if object.icon.present? %>
-      <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
-    <% end %>
-    <% element_id = "pill_#{object.text.parameterize}" %>
-    <div>
-      <%= pb_rails("title", props: { 
-        classname: "pb_form_pill_tag #{object.truncate ? "truncate_#{object.truncate}" : ""}",
-        id: element_id,
-        size: 4, 
-        text: object.text
-      }) %>
-      <% if object.truncate %>
-        <%= pb_rails("tooltip", props: {
-          position: "top",
-          tooltip_id: "tooltip-#{element_id}",
-          trigger_element_selector: "##{element_id}"
-        }) do %>
-          <%= object.text %>
-        <% end %>
+      <% if object.icon.present? %>
+        <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
+      <% end %>
+      <% if object.text.present? %>
+        <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
       <% end %>
-    </div>
   <% end %>
   <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
     <%= pb_rails("icon", props: { icon: 'times', fixed_width: true, size: object.close_icon_size }) %>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -16,8 +16,6 @@ module Playbook
                    default: "primary"
       prop :tabindex
       prop :icon
-      prop :truncate, type: Playbook::Props::Number,
-                      default: nil
 
       def classname
         generate_classname("pb_form_pill_kit", color, icon_class, name, text, text_transform)