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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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}