RubyGems - playbook_ui_docs - Versions diffs - 14.10.0.pre.alpha.play1465attempt25272 → 14.10.0.pre.alpha.play1662cssbargraph5193 - Mend

playbook_ui_docs 14.10.0.pre.alpha.play1465attempt25272 → 14.10.0.pre.alpha.play1662cssbargraph5193

Files changed (40) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2b7fecce4978cd084fbb5b38e490ff59e2bb2cae9e4ad3c31df947795a7c77fe
-  data.tar.gz: 291b7a3dc26c0e6d21f7a34b7fe0c419c8e5cc6a4bf225373b504e60a9a8841e
+  metadata.gz: 7119ca26238f90df496bdd0b13e7972f8016e20d13d9610cdda2ef0cdb153c06
+  data.tar.gz: f01616ecd7feabf0c5a276a487345dd5acfe9c06ff8ddb9698c793f2b402d8b3
 SHA512:
-  metadata.gz: eba273c321e515386c948aae00fbde3b17c31fa5f038cfd2627d1c234efb26d4dda9ed5dc0b67d29c06e11497da24eda490d15f060f1419d5c09d3304117002c
-  data.tar.gz: 70eab09d4b00d5479800fb7709d1273e6744e0d5ab3f8d327a86fed2b381b1585f3cc7e00e90337dc3de32b11f7205e3417a78e81230d6bc23df09aa07ace9dd
+  metadata.gz: a2f899c83ccbeb19d33df131f4e5d73d1bc94755dc92d1507fbf71018d11f87bbd7dc408d716e2f482097e7e21169275f73bf17533f236027281c79388cb13ed
+  data.tar.gz: b3d038942441794b803e8bf71044bf17bec6d1159da4b0c59dcde455868f817ff247fe9810d6c468d5d0173463d953de7a0c1163488a5f25e4d787fd40b3b956

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb CHANGED Viewed

@@ -49,9 +49,11 @@
       label: "Graduated Students",
     }
   ]
+  subrow_headers = ["Quarter", "Month", "Day"]
 %>
 <%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
   <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, enable_toggle_expansion: "all" }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "beta_sort", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
 <% end %>

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

@@ -1,13 +1,10 @@
 examples:
   rails:
   - advanced_table_beta: Default (Required Props)
-  # - advanced_table_beta_subrow_headers: SubRow Headers
+  - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_custom_cell_rails: Custom Components for Cells
-  - advanced_table_column_headers: Multi-Header Columns
-  - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   react:
   - advanced_table_default: Default (Required Props)

data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb CHANGED Viewed

@@ -88,21 +88,3 @@
     Body
   <% end %>
 <% end %>
-<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "success_subtle" }) do %>
-    <%= pb_rails("body", props: { text: "Success Subtle" }) %>
-  <% end %>
-  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
-    Body
-  <% end %>
-<% end %>
-<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "error_subtle" }) do %>
-    <%= pb_rails("body", props: { text: "Error Subtle"}) %>
-  <% end %>
-  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
-    Body
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx CHANGED Viewed

@@ -231,46 +231,6 @@ const CardHeader = (props) => {
                     />
                 </Card.Body>
             </Card>
-            <Card
-                {...props}
-                marginBottom='sm'
-                padding="none"
-            >
-                <Card.Header
-                    headerColor="success_subtle"
-                >
-                    <Body
-                        text="Success Subtle"
-                    />
-                </Card.Header>
-                <Card.Body>
-                    <Body
-                        {...props}
-                        text="Body"
-                    />
-                </Card.Body>
-            </Card>
-            <Card
-                {...props}
-                marginBottom='sm'
-                padding="none"
-            >
-                <Card.Header
-                    headerColor="error_subtle"
-                >
-                    <Body
-                        text="Error Subtle"
-                    />
-                </Card.Header>
-                <Card.Body>
-                    <Body
-                        {...props}
-                        text="Body"
-                    />
-                </Card.Body>
-            </Card>
         </>
     )
 }

data/app/pb_kits/playbook/pb_section_separator/docs/example.yml CHANGED Viewed

@@ -6,7 +6,6 @@ examples:
   - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
   - section_separator_children: Children
-  - section_separator_color: Color
   react:
   - section_separator_line: Line Separator
@@ -14,7 +13,6 @@ examples:
   - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
   - section_separator_children: Children
-  - section_separator_color: Color
   swift:
   - section_separator_line_swift: Line Separator

data/app/pb_kits/playbook/pb_section_separator/docs/index.js CHANGED Viewed

@@ -3,4 +3,3 @@ export { default as SectionSeparatorText } from './_section_separator_text.jsx'
 export { default as SectionSeparatorVertical } from './_section_separator_vertical.jsx'
 export { default as SectionSeparatorDashed } from './_section_separator_dashed.jsx'
 export { default as SectionSeparatorChildren } from './_section_separator_children.jsx'
-export { default as SectionSeparatorColor } from './_section_separator_color.jsx'

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.html.erb CHANGED Viewed

	@@ -1 +1 @@
1	- <%= pb_rails("skeleton_loading") %>
1	+ <%= pb_rails("skeleton_loading") %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Button, Card, Filter, Flex, Select, SkeletonLoading, TextInput } from "playbook-ui";
 const SortingChangeCallback = (sortOptions) => {
@@ -6,8 +6,7 @@ const SortingChangeCallback = (sortOptions) => {
 }
 const SkeletonLoadingFilter = (props) => {
-  const [isLoading, setIsLoading] = useState(true)
-  const toggleLoading = () => setIsLoading((prev) => !prev)
+  const isLoading = true
   const options = [
     { value: 'USA' },
@@ -19,13 +18,6 @@ const SkeletonLoadingFilter = (props) => {
   return (
     <div>
-      <Button
-          marginBottom="md"
-          onClick={toggleLoading}
-          variant="secondary"
-      >
-          {isLoading ? "Show Filter" : "Show Skeleton Loading"}
-      </Button>
       <div>
         {isLoading ? (
           <Card

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx CHANGED Viewed

@@ -17,11 +17,9 @@ const SkeletonLoadingHeightWidth = (props) => (
         width="50px"
         {...props}
     />
-    <Card
-        height='200px'
+    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}}
         marginBottom="md"
         padding="none"
-        width='100%'
         {...props}
     >
       <SkeletonLoading
@@ -32,10 +30,8 @@ const SkeletonLoadingHeightWidth = (props) => (
           {...props}
       />
     </Card>
-    <Card
-        height='200px'
+    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}}
         padding="none"
-        width='100%'
         {...props}
     >
       <SkeletonLoading

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx CHANGED Viewed

@@ -1,19 +1,11 @@
-import React, { useState } from 'react';
-import { Button, Flex, SkeletonLoading, User } from "playbook-ui";
+import React from 'react';
+import { Flex, SkeletonLoading, User } from "playbook-ui";
 const SkeletonLoadingUser = (props) => {
-  const [isLoading, setIsLoading] = useState(true)
-  const toggleLoading = () => setIsLoading((prev) => !prev)
+  const isLoading = true
   return (
     <div>
-      <Button
-          marginBottom="md"
-          onClick={toggleLoading}
-          variant="secondary"
-      >
-          {isLoading ? "Show User" : "Show Skeleton Loading"}
-      </Button>
       <div>
         {isLoading ? (
           <Flex alignItems="center">

data/app/pb_kits/playbook/pb_skeleton_loading/docs/example.yml CHANGED Viewed

@@ -1,13 +1,8 @@
 examples:
   rails:
-  - skeleton_loading_default: Default
-  - skeleton_loading_color: Color
-  - skeleton_loading_layout: Layout
-  - skeleton_loading_border_radius: Border Radius
-  - skeleton_loading_height_width: Height & Width
-  - skeleton_loading_user: User Component Example
-  - skeleton_loading_filter: Filter Component Example
+  # - skeleton_loading_default: Default
   react:
   - skeleton_loading_default: Default

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx CHANGED Viewed

@@ -6,7 +6,7 @@ const TableStickyLeftColumns = () => {
         <Table
             responsive="scroll"
             size="md"
-            stickyLeftColumn={["1", "2", "3"]}
+            stickyLeftcolumn={["1", "2", "3"]}
         >
             <thead>
                 <tr>

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md CHANGED Viewed

@@ -1,3 +1 @@
 The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyLeftColumn`.

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md CHANGED Viewed

@@ -1,5 +1,2 @@
 The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
-If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using `stickyLeftColumn` prop.
+If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx CHANGED Viewed

@@ -1,5 +1,3 @@
-/* eslint-disable react/no-multi-comp */
 import React, { useState } from 'react'
 import {

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx CHANGED Viewed

@@ -45,7 +45,8 @@ const promiseOptions = (inputValue) =>
 const TypeaheadWithPillsAsync = (props) => {
   const [users, setUsers] = useState([])
+  const handleOnChange = (value) => setUsers(formatUsers(value))
+  const formatValue = (users) => formatUsers(users)
   const formatUsers = (users) => {
     const results = () => (users.map((user) => {
       if (Object.keys(user)[0] === 'name' || Object.keys(user)[1] === 'id'){
@@ -57,9 +58,6 @@ const TypeaheadWithPillsAsync = (props) => {
     return results()
   }
-  const handleOnChange = (value) => setUsers(formatUsers(value))
-  const formatValue = (users) => formatUsers(users)
   return (
     <>
       {users && users.length > 0 && (

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx CHANGED Viewed

@@ -83,13 +83,13 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
           onChange={handleOnChange}
           onMultiValueClick={handleOnMultiValueClick}
           placeholder="type the name of a Github user"
-          valueComponent={({imageUrl, label, territory, type}) => (
+          valueComponent={(props) => (
             <User
                 avatar
-                avatarUrl={imageUrl}
-                name={label}
-                territory={territory}
-                title={type}
+                avatarUrl={props.imageUrl}
+                name={props.label}
+                territory={props.territory}
+                title={props.type}
             />
           )}
           {...props}