playbook_ui_docs 14.7.0.pre.rc.8 → 14.7.0.pre.rc.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8ce647ad4d14898cd95f97e2ea49f70fe65d3d975d953ba6f77c6c587061dbdd
-  data.tar.gz: 1e587ed6b81162cceb5a5fe3fb028a9acc4272048c0d9598a92cf3a0f74332ab
+  metadata.gz: d1d21af470009342cd52494ba2ecbb02dee3328acd44056a24999d1198548cac
+  data.tar.gz: 48f0b17550f7651839517220160bd3a64752a7b7d3b327b2c058f52d8f559456
 SHA512:
-  metadata.gz: 176ac3c5766e4993c98edc20b401f4cb43bbd677c0e9b72b35b0ad15ca9d20a753e535115f66d5a70077ecb6d2388456e5804a73c7f02b51ce79790e458f4574
-  data.tar.gz: 2c2637bc1ac2099bce057cc4acb83706bcc20aadd9f015ad628ef396ba5b7701b98411045a384fe038d8f53c4c007277d7a0f9a7a104d3ac684c61025aa43764
+  metadata.gz: a906c5c08ef767e57c8d4dd310cfc1949b8c1c5cdb0f443ec6081df89581b5480dd6cfdc1c2e8dfed1c8507302784a1c578a60e0571f16d5b6f47c430f0cb712
+  data.tar.gz: af323f2bc7aafb1f82f650007440d5f63d6e63c7a8fa970359387672256da8992a657c972aa274ffd1f0b675b1fcdc36534b37739827a97c2aa01f2c46f22ae8

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

@@ -13,7 +13,30 @@
     id: "typeahead-form-pill",
     is_multi: true,
     options: names,
-    label: "Names",
+    label: "Truncation Within Typeahead",
     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,
+      id: "truncation-1"
+  }) %>
+  <%= pb_rails("form_pill", props: {
+      icon: "badge-check",
+      text: "icon and a very long tag to show truncation",
+      tabindex: 0,
+      truncate: 1,
+      id: "truncation-2"
+  }) %>
+  <%= pb_rails("form_pill", props: {
+      text: "form pill long tag no tooltip 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 Typeahead from '../../pb_typeahead/_typeahead'
+import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
@@ -15,11 +15,34 @@ const FormPillTruncatedText = (props) => {
       <Typeahead
           htmlOptions={{ style: { maxWidth: "240px" }}}
           isMulti
-          label="Names"
+          label="Truncation Within Typeahead"
           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_rails.md

@@ -0,0 +1,3 @@
+For Form 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.
+
+__NOTE__: For Rails Form Pills (not ones embedded within a React-rendered Typeahead or MultiLevelSelect), a unique `id` is required to enable the Tooltip functionality displaying the text or tag section of the Form Pill.

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

@@ -0,0 +1 @@
+For Form 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.