playbook_ui_docs 14.6.2.pre.alpha.PLAY1613darkdatetimecolors4432 → 14.6.2.pre.alpha.PLAY15814348

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a9ef2b3d93897533ac2027aeaa6ac0ef3dce8bb4f52fcdf4419ee60860e35d23
-  data.tar.gz: df99f436834dd8b604110bde4a048737fc164fdff48e33c52bb28f62a2b11610
+  metadata.gz: ae22d798e0f1be8ba540d96ba7cfcf9ba02bb6fa118824a790c8ec74606bf03b
+  data.tar.gz: 8c13f486768c53544d4fcb5fd9d84534cb52bc3519c6b89305f8f8a20c67cd79
 SHA512:
-  metadata.gz: e2b81388d80999ac33d3c4e19f3b6153a893a2bcb55b5a9555c63a6f4dfd87ba4d48a2cf191ffd573c65b861f31e0c89583876b39dc89dd17cb8f91d3f085514
-  data.tar.gz: d8d6ee4ab67d50e277f8341f22a96a9f736f9d2054fcc3c6879f4712da9c37675e80ee07aaea982881aa952be4d1c7899311fc6901e884dd83d123bc26a4646c
+  metadata.gz: b8ab318d62a3615d3e75d4c2fa01f6f962db30b97af9a24451407fa2fbf5fedd5cdf1ef1d95e42aa5f36896418da63ba7b76f52937a24b159336f567ef5e612f
+  data.tar.gz: 141120ab4a900cd21898fddbece7c8f4ea8bb7cafb9656e249725a6193e6791d9595d89c2dbc0dc424837016e11a12836c6b72d9355ad8601c7aabca9e836db4

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable, Pill, Body, Flex, Detail, Caption, Badge, Title } from "playbook-ui"
+import { AdvancedTable, Pill, Body, Flex, Detail, Caption } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableCustomCell = (props) => {
@@ -8,18 +8,7 @@ const AdvancedTableCustomCell = (props) => {
       accessor: "year",
       label: "Year",
       cellAccessors: ["quarter", "month", "day"],
-      customRenderer: (row, value) => (
-        <Flex>
-          <Title size={4}
-              text={value} 
-          />
-          <Badge dark
-              marginLeft="xxs"
-              text={row.original.newEnrollments > 20 ? "High" : "Low"}
-              variant="neutral"
-          />
-        </Flex>
-      ), 
+
     },
     {
       accessor: "newEnrollments",

data/app/pb_kits/playbook/pb_card/docs/_card_light.jsx

@@ -1,12 +1,26 @@
-import React from 'react'
-import Card from '../_card'
+import React from "react"
+import Card from "../_card"
 
 const CardLight = (props) => {
   return (
     <div>
-      <Card {...props}>{'Card content'}</Card>
+      <Card
+          height="100%"
+          htmlOptions={{
+            style: {
+              width: "100%",
+              backgroundColor: "blue",
+            },
+            tabIndex: 7
+          }}
+          minHeight="189px"
+          {...props}
+      >
+        {"HELLO WORLD!!!"}
+      </Card>
     </div>
   )
 }
 
 export default CardLight
+

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

@@ -13,30 +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,
-      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 { 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

@@ -0,0 +1 @@
+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_timeline/docs/example.yml

@@ -4,11 +4,10 @@ examples:
   - timeline_default: Default
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
-  - timeline_with_children: With Children
   
   
   react:
   - timeline_default: Default
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
-  - timeline_with_children: With Children
+  

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

@@ -1,4 +1,3 @@
 export { default as TimelineDefault } from './_timeline_default.jsx'
 export { default as TimelineVertical } from './_timeline_vertical.jsx'
 export { default as TimelineWithDate } from './_timeline_with_date.jsx'
-export { default as TimelineWithChildren } from './_timeline_with_children.jsx'