playbook_ui_docs 14.25.0 → 15.0.0.pre.alpha.play1986inlineloadingsolidvariant10321

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 17377883adedb4af5d2a6890fcec2cc8536538ff54885c300738fdd8a843689b
-  data.tar.gz: a5a0317ddb43a680c0441ee41bba11d215c00f551ee1872b9bd717c7438083a0
+  metadata.gz: 3bc4b7150697a9184a33ebb59605342de7e0140512bc61733a859253289d7e63
+  data.tar.gz: 2f4b6ef3893db64978608d812d5818d78f8d364dc5fe92360aca9924d65eb2e3
 SHA512:
-  metadata.gz: '08cbfc7cd58df427620018e446d6d0409ee034f039175088c9928a900a9eb94eaf43ce7f0042a2407e8cf8b84d70403ad316b917cf43143577579e62a2d21665'
-  data.tar.gz: dd09288525d787eaee6e16a0afd3e97557d72b1cdafd67616d2b70389c81ce5843ce09f7858dab2b25beaefcc17530e94a90b7aa8a2820edc509343b95125f0b
+  metadata.gz: 3850c1af8959df9756336f4108e04f3be0a77b366014d926a7d12ee1d19da3196f041b769512fde8c5da90a69b2d9a028f7a10fdf8384efead2e404838ab63d5
+  data.tar.gz: 4c4f9a412c2facfcf43ca326feb63201ca1321430091fbc161875b2fe95da107a7da1a2749c4313a55d73db569a13d5ff2db32d6a5aaf7a8daea80d363ea718e

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

@@ -50,7 +50,7 @@
 <% end %>
 
 <%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "bg_dark" }) do %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "dark" }) do %>
     <%= pb_rails("body", props: { text: "Dark", dark: true }) %>
   <% end %>
   <%= pb_rails("card/card_body", props: { padding: "md" }) do %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb

@@ -21,13 +21,27 @@
         let currentClass = okayLoadingButton.className;
         let cancelClass = cancelButton ? cancelButton.className : "";
 
+        okayLoadingButton.disabled = true;
+        okayLoadingButton.classList.add("pb_button_loading");
+        okayLoadingButton.classList.remove("pb_button_enabled");
+        okayLoadingButton.classList.add("pb_button_disabled");
+
+        if (cancelButton) {
+            cancelButton.disabled = true;
+            cancelButton.classList.remove("pb_button_enabled");
+            cancelButton.classList.add("pb_button_disabled");
+        }
+
         setTimeout(function() {
             okayLoadingButton.disabled = false;
-            okayLoadingButton.className = currentClass.replace("_disabled_loading", "_enabled");
+            okayLoadingButton.classList.remove("pb_button_loading");
+            okayLoadingButton.classList.remove("pb_button_disabled");
+            okayLoadingButton.classList.add("pb_button_enabled");
 
             if (cancelButton) {
             cancelButton.disabled = false;
-            cancelButton.className = cancelClass.replace("_disabled", "_enabled");
+            cancelButton.classList.remove("pb_button_disabled");
+            cancelButton.classList.add("pb_button_enabled");
             }
         }, 5000);
 

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_props_swift.md

@@ -2,7 +2,8 @@
 | Name | Type | Description | Default | Values |
 | --- | ----------- | --------- | --------- | --------- |
 | **text** | `String` |`Value for the toast message` | `nil` |   |
-| **variant** | `Variant` | `Determines the type pf toast message being displayed` | `.custom()` |  `error`, `success`, 
-`neutral`, `custom()` |
+| **font** | `PBFont` |`Value for the toast message font style` | `.title4` |   |
+| **animatedIcon** | `AnyView` |`Value for the option to use an animated icon` | `nil` |   |
+| **variant** | `Variant` | `Determines the type pf toast message being displayed` | `.custom()` |  `error` `success` `neutral` `custom()` |
 | **actionView** | `dismissAction` | Dismisses the toast message | `.default` | `default` `custom()` `withTimer()` |
 | **dismissAction** | `(() -> Void)` | `Triggers the dismiss action` |  |  |

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("title", props: {size: 4, text: "Row"}) %>
+<%= pb_rails("title", props: {size: 4, text: "Gap"}) %>
 <br/>
 <div class="flex-doc-example">
   <%= pb_rails("flex", props:{ gap: "xxs", wrap:true}) do %>
@@ -31,3 +31,14 @@
    <%= pb_rails("flex/flex_item") do %>4<% end %>
   <% end %>
 </div>
+
+<br/><br/>
+<%= pb_rails("title", props: {size: 4, text: "Responsive"}) %>
+<br/>
+<div class="flex-doc-example">
+  <%= pb_rails("flex", props: { gap: { xs: "none", sm: "sm", md: "md", lg: "lg", xl: "xl" }, wrap: true }) do %>
+   <% 40.times do |i| %>
+    <%= pb_rails("flex/flex_item") do %> <%=i%> <% end %>
+   <% end %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
+import Title from '../../pb_title/_title'
 
 const FlexGap = (props) => {
   const count = () => {
@@ -13,6 +14,8 @@ const FlexGap = (props) => {
 
   return (
     <>
+      <Title size={4}>Gap</Title>
+      <br />
       <div className="flex-doc-example">
         <Flex
             gap="xxs"
@@ -27,8 +30,10 @@ const FlexGap = (props) => {
         </Flex>
       </div>
 
-      <br />
+      <br /><br />
 
+      <Title size={4}>Column Gap</Title>
+      <br />
       <div className="flex-doc-example">
         <Flex
             columnGap="lg"
@@ -48,6 +53,9 @@ const FlexGap = (props) => {
           </FlexItem>
         </Flex>
       </div>
+      <br /><br />
+
+      <Title size={4}>Row Gap</Title>
       <br />
       <div className="flex-doc-example">
         <Flex
@@ -69,6 +77,23 @@ const FlexGap = (props) => {
           </FlexItem>
         </Flex>
       </div>
+
+      <br /><br />
+      <Title size={4}>Responsive</Title>
+      <br />
+      <div className="flex-doc-example">
+        <Flex
+            gap={{ xs: "none", sm: "sm", md: "md", lg: "lg", xl: "xl" }}
+            wrap
+            {...props}
+        >
+          {count().map((v, key) => (
+            <FlexItem key={key}>
+              {v}
+            </FlexItem>
+            ))}
+        </Flex>
+      </div>
     </>
   )
 }

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap_rails.md

@@ -0,0 +1,11 @@
+##### Prop
+
+`gap` | `row_gap` | `column_gap` | **Type**: String | Hash | **Values**: xxs | xs | sm | md | lg | xl | none
+
+Setting the gap prop sets the `row_gap` and the `column_gap` props to the same size and creates equal space within a flex container.
+
+Setting the `row_gap` prop creates space between rows in a flex container.
+
+Setting the `column_gap` prop creates space between columns in a flex container.
+
+You can also set responsive values by passing a hash with device sizes and values. 

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap_react.md

@@ -0,0 +1,11 @@
+##### Prop
+
+`gap` | `rowGap` | `columnGap` | **Type**: String | Object | **Values**: xxs | xs | sm | md | lg | xl | none
+
+Setting the gap prop sets the `rowGap` and the `columnGap` props to the same size and creates equal space within a flex container.
+
+Setting the `rowGap` prop creates space between rows in a flex container.
+
+Setting the `columnGap` prop creates space between columns in a flex container.
+
+You can also set responsive values by passing an object with device sizes and values. 

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("loading_inline", props: {text: "Dotted Spinner", variant: "dotted"}) %>
+
+<br/>
+
+<%= pb_rails("loading_inline", props: {text: "Solid Spinner", variant: "solid"}) %>

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { LoadingInline } from 'playbook-ui'
+
+const LoadingInlineVariant = (props) => {
+  return (
+    <div>
+      <LoadingInline 
+          text=" Dotted Spinner" 
+          variant="dotted" 
+          {...props}
+      />
+
+      <br />
+  
+      <LoadingInline
+          text=" Solid Spinner"
+          variant="solid"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default LoadingInlineVariant

data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml

@@ -3,9 +3,11 @@ examples:
   rails:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
+  - loading_inline_variant: Variant
 
   
   
   react:
   - loading_inline_default: Default
   - loading_inline_custom: Custom Text
+  - loading_inline_variant: Variant

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

@@ -1,2 +1,3 @@
 export { default as LoadingInlineDefault } from './_loading_inline_default.jsx'
 export { default as LoadingInlineCustom } from './_loading_inline_custom.jsx'
+export { default as LoadingInlineVariant } from './_loading_inline_variant.jsx'

data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx

@@ -26,7 +26,7 @@ const MapDefault = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
+        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit pb_title_4">Hello World!</h4>`)) // add popup
         .addTo(map);
 
         // disable map zoom when using scroll

data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx

@@ -29,7 +29,7 @@ const MapWithCustomButton = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
+        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit pb_title_4">Hello World!</h4>`)) // add popup
         .addTo(map);
 
         // disable map zoom when using scroll

data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx

@@ -26,7 +26,7 @@ const MapWithPlugin = (props) => {
         new maplibregl.Marker({
           color: mapTheme.marker,
         }).setLngLat(defaultPosition)
-        .setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
+        .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit pb_title_4">Hello World!</h4>`)) // add popup
         .addTo(map);
 
         //add maplibre default zoom controls

data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx

@@ -19,7 +19,6 @@ const RadioReactHook = () => {
           paddingRight="lg"
         >
         <Radio
-            alignment="left"
             label="Small"
             marginBottom='sm'
             name="size"
@@ -28,7 +27,6 @@ const RadioReactHook = () => {
         />
         <br />
         <Radio
-            alignment="left"
             label="Medium"
             marginBottom='sm'
             name="size"
@@ -37,7 +35,6 @@ const RadioReactHook = () => {
         />
         <br />
         <Radio
-            alignment="left"
             label="Large"
             marginBottom='sm'
             name="size"

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx

@@ -5,7 +5,9 @@ import Detail from '../../pb_detail/_detail'
 import Icon from '../../pb_icon/_icon'
 
 const children = (
-  <Flex padding="xs">
+  <Flex alignItems="center"
+      padding="xs"
+  >
     <Icon color="primary"
         icon="arrow-down"
     />

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb

@@ -7,7 +7,7 @@
   ]
 %>
 
-<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
+<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", default_options: [options.first], options: options, label: "Products", name: :foo, pills: true }) %>
 
 <%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
 

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx

@@ -13,7 +13,7 @@ const TypeaheadWithPills = (props) => {
     <>
       <Typeahead
           isMulti
-          label="Colors"
+          label="Products"
           options={options}
           placeholder=""
           {...props}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.html.erb

@@ -7,25 +7,4 @@
   ]
 %>
 
-<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", pill_color: "neutral", default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
-
-<%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
-
-<!-- This section is an example of the available JavaScript event hooks -->
-<%= javascript_tag defer: "defer" do %>
-  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-select", function(event) {
-    console.log('Option selected')
-    console.dir(event.detail)
-  })
-  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-remove", function(event) {
-    console.log('Option removed')
-    console.dir(event.detail)
-  })
-  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-clear", function() {
-    console.log('All options cleared')
-  })
-
-  document.querySelector('#clear-pills').addEventListener('click', function() {
-    document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
-  })
-<% end %>
+<%= pb_rails("typeahead", props: { id: "typeahead-pills-example2", pill_color: "neutral", options: options, label: "Products", name: :foo, pills: true }) %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.jsx

@@ -13,7 +13,7 @@ const TypeaheadWithPills = (props) => {
     <>
       <Typeahead
           isMulti
-          label="Colors"
+          label="Products"
           options={options}
           pillColor="neutral"
           placeholder=""

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.html.erb

@@ -9,9 +9,9 @@
 
 <%= pb_rails("typeahead", props: {
     id: "typeahead-without-pills-example1",
-    placeholder: "All Colors",
+    placeholder: "All Products",
     options: options, 
-    label: "Colors",
+    label: "Products",
     name: :foo,
     is_multi: false
   })

data/app/pb_kits/playbook/pb_user/docs/_user_props_table.md

@@ -1,11 +1,18 @@
 ### Props
 | Name | Type | Description | Default | Values |
 | --- | ----------- | --------- | --------- | --------- |
-| **name** | `String` | Sets the User's name |  |  |
+| **name** | `String` | Sets the User's name | `""` |  |
+| **nameFont** | `Typography` | Font styling for the user's name | `.init(font: .title4, variant: .bold)` |  |
+| **image** | `Image?` | Sets image for the avatar | `nil` |  |
+| **orientation** | `Orientation` | Changes the orientation of the User | `.horizontal` | `.horizontal` `.vertical` |
+| **size** | `Size` | Changes the size of the User | `.medium` | `.xxSmall` `.xSmall` `.small` `.medium` `.large` `.xLarge` |
+| **territory** | `String?` | Adds the User's territory | `nil` |  |
+| **title** | `String?` | Adds a title | `nil` |  |
+| **subtitle** | `AnyView?` | Adds a subtitle view | `nil` |  |
+| **status** | `PBOnlineStatus.Status?` | An indicator for the current status of the user | `nil` | `.online` `.away` `.offline` |
 | **displayAvatar** | `Bool` | Displays the User's avatar | `true` | `true` `false` |
-| **image** | `Image` | Sets image for the avatar |  |  |
-| **orientation** | `Orientation` | Changes the orientation of the User | `.horizontal` | `.horizontal` `.verticle` |
-| **size** | `UserAvatarSize` | Changes the size of the User | `.medium` | `.small` `.medium` `.large` |
-| **territory** | `String` | Adds the User's territory |  |  |
-| **title** | `String` | Adds a title |  |  |
-| **status** | `PBAvatar.PresenceStatus?` | An idicator for the current status of the user | `.none` | `.online` `.away` `.offline` |
+| **territoryTitleFont** | `PBFont` | Font for territory and title text | `.subcaption` | `.title1` `.body` `.caption` `.subcaption` `.badgeText` `.title4` |
+| **isActive** | `Bool` | Sets whether the user is active | `true` | `true` `false` |
+| **hasInactiveBadge** | `Bool` | Shows inactive badge when user is not active | `false` | `true` `false` |
+| **spacing** | `CGFloat` | Controls spacing between elements | `Spacing.small` | `.none` `.xxSmall` `.xSmall` `.small` `.medium` `.large` `.xLarge` |
+