playbook_ui_docs 14.12.0.pre.rc.11 → 14.13.0.pre.alpha.play1834depupdatesass6024

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.html.erb

@@ -0,0 +1,52 @@
+<% content = capture do %>
+    <%= pb_rails("table", props: { container: false, border_radius: "none", size: "sm"}) do %>
+        <%= pb_rails("background", props: { tag: "tr" }) do %>
+            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+            <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+        <% end %>
+    <% end %>
+<% end %>
+
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
+          <%= pb_rails("table/table_header", props: { text: ""}) %>
+       <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: false, id: "3" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md

@@ -0,0 +1,3 @@
+The `collapsible_content` can display any content, including nested Table Rows.
+
+Additionally, the `collapsible_side_highlight` can also be removed by setting it to false if needed. This prop is set to true by default.

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb

@@ -0,0 +1,80 @@
+<% content = capture do %>
+    <%= pb_rails("table", props: { container: false, border_radius: "none", size: "sm"}) do %>
+        <%= pb_rails("table/table_head") do %>
+            <%= pb_rails("background", props: { tag: "tr" }) do %>
+                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
+                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
+                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
+                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
+            <% end %>
+        <% end %>
+        <%= pb_rails("table/table_body") do %>
+            <%= pb_rails("table/table_row") do %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>
+                    <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
+                <% end %>
+            <% end %>
+            <%= pb_rails("table/table_row") do %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>
+                    <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
+                <% end %>
+            <% end %>
+            <%= pb_rails("table/table_row") do %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>
+                    <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>
+
+
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
+          <%= pb_rails("table/table_header", props: { text: ""}) %>
+       <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: false, id: "4" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md

@@ -0,0 +1 @@
+The `collapsible_content` can also be used to display nested Tables within each Row.

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

@@ -30,6 +30,10 @@ examples:
     - table_with_subcomponents_rails: Table with Sub Components (Table Elements)
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
+    - table_with_collapsible: Table with Collapsible
+    - table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
+    - table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
+    - table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
 
   react:
     - table_sm: Small

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb

@@ -0,0 +1,46 @@
+  <%= pb_rails("text_input", props: {
+    label: "Currency",
+    mask: "currency",
+    margin_bottom: "md",
+    name: "currency_name",
+    placeholder:"$0.00"
+  }) %>
+
+  <%= pb_rails("text_input", props: {
+    label: "ZIP Code",
+    mask: "zip_code",
+    margin_bottom: "md",
+    placeholder: "12345"
+  }) %>
+
+  <%= pb_rails("text_input", props: {
+    label: "Postal Code",
+    mask: "postal_code",
+    placeholder: "12345-6789",
+    margin_bottom: "md",
+  }) %>
+
+  <%= pb_rails("text_input", props: {
+    label: "SSN",
+    mask: "ssn",
+    margin_bottom: "md",
+    placeholder: "123-45-6789"
+  }) %>
+
+  <%= pb_rails("title" , props: {
+    text: "Hidden Input Under The Hood",
+    padding_bottom: "sm"
+  })%>
+
+  <%= pb_rails("text_input", props: {
+    label: "Currency",
+    mask: "currency",
+    margin_bottom: "md",
+    name: "currency_name",
+    id: "example-currency",
+    value: "$99.99",
+  }) %>
+
+<style>
+#example-currency-sanitized {display: flex !important;}
+</style>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask_rails.md

@@ -0,0 +1,3 @@
+The mask prop lets you style your inputs while maintaining the value that the user typed in.
+
+It uses a hidden input field to submit the unformatted value as it will have the proper `name` attribute. It will also copy the id field with a `"#{your-id-sanitized}"`

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

@@ -8,6 +8,7 @@ examples:
   - text_input_inline: Inline
   - text_input_no_label: No Label
   - text_input_options: Input Options
+  - text_input_mask: Mask
   react:
   - text_input_default: Default
   - text_input_error: With Error
@@ -23,4 +24,4 @@ examples:
     - text_input_error_swift: With Error
     - text_input_disabled_swift: Disabled
     - text_input_add_on_swift: Add On
-    - text_input_props_swift: ""
+    - text_input_props_swift: ""

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb

@@ -43,4 +43,4 @@
         Whoa. I'm a tooltip.
     <% end %>
   <% end %>
-<% end %>
+<% end %>

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

@@ -0,0 +1,19 @@
+<%
+  names = [
+    { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
+    { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
+    { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
+    { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
+    { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    html_options: { style: { maxWidth: "240px" }},
+    id: "typeahead-form-pill",
+    is_multi: true,
+    options: names,
+    label: "Truncation Within Typeahead",
+    pills: true,
+    truncate: 1,
+}) %>

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

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Typeahead } from 'playbook-ui'
+
+const names = [
+  { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
+  { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
+  { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
+  { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
+  { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
+]
+
+const TypeaheadTruncatedText = (props) => {
+  return (
+    <>
+      <Typeahead
+          htmlOptions={{ style: { maxWidth: "240px" }}}
+          isMulti
+          label="Truncation Within Typeahead"
+          options={names}
+          truncate={1}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TypeaheadTruncatedText

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.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.

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

@@ -11,6 +11,7 @@ examples:
     - typeahead_error_state: Error State
     - typeahead_margin_bottom: Margin Bottom
     - typeahead_with_pills_color: With Pills (Custom Color)
+    - typeahead_truncated_text: Truncated Text
 
   react:
     - typeahead_default: Default
@@ -27,3 +28,4 @@ examples:
     - typeahead_custom_menu_list: Custom MenuList
     - typeahead_margin_bottom: Margin Bottom
     - typeahead_with_pills_color: With Pills (Custom Color)
+    - typeahead_truncated_text: Truncated Text

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

@@ -12,3 +12,4 @@ export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'
 export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_list.jsx'
 export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx'
 export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'
+export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.jsx'

data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.html.erb

@@ -0,0 +1,42 @@
+<div class="pb--doc-demo-row">
+  <div>
+    <%= pb_rails("user", props: {
+      name: "Anna Black",
+      title: "Remodeling Consultant",
+      orientation: "vertical",
+      align: "center",
+      size: "lg",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+      bold: false
+      }) %>
+  </div>
+  <div>
+    <%= pb_rails("user", props: {
+      name: "Anna Black",
+      title: "Remodeling Consultant",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+      bold: false
+      }) %>
+  </div>
+  <div>
+    <%= pb_rails("user", props: {
+      name: "Anna Black",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+      bold: false
+      }) %>
+
+     <br>
+
+     <%= pb_rails("user", props: {
+       name: "Anna Black",
+       orientation: "horizontal",
+       align: "left",
+       avatar: true,
+       bold: false
+     }) %>
+  </div>
+</div>

data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { User } from 'playbook-ui'
+
+const UserLightWeight = (props) => {
+  return (
+    <div className="pb--doc-demo-row">
+
+      <div>
+        <User
+            align="center"
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            bold={false}
+            name="Anna Black"
+            orientation="vertical"
+            size="lg"
+            title="Remodeling Consultant"
+            {...props}
+        />
+      </div>
+
+      <div>
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            bold={false}
+            name="Anna Black"
+            orientation="horizontal"
+            title="Remodeling Consultant"
+            {...props}
+        />
+      </div>
+
+      <div>
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            bold={false}
+            name="Anna Black"
+            orientation="horizontal"
+            {...props}
+        />
+
+        <br />
+
+        <User
+            align="left"
+            avatar
+            bold={false}
+            name="Anna Black"
+            orientation="horizontal"
+            {...props}
+        />
+      </div>
+
+    </div>
+  )
+}
+
+export default UserLightWeight

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

@@ -0,0 +1,2 @@
+##### Prop
+Name will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`. Name will then use `font-weight: 300`.

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

@@ -2,6 +2,7 @@ examples:
 
   rails:
   - user_default: Default
+  - user_light_weight: Light Weight
   - user_with_territory: With Territory
   - user_text_only: Text Only
   - user_size: Horizontal Size
@@ -11,6 +12,7 @@ examples:
 
   react:
   - user_default: Default
+  - user_light_weight: Light Weight
   - user_with_territory: With Territory
   - user_text_only: Text Only
   - user_size: Horizontal Size

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

@@ -1,4 +1,5 @@
 export { default as UserDefault } from './_user_default.jsx'
+export { default as UserLightWeight } from './_user_light_weight.jsx'
 export { default as UserWithTerritory } from './_user_with_territory.jsx'
 export { default as UserTextOnly } from './_user_text_only.jsx'
 export { default as UserSize } from './_user_size.jsx'