playbook_ui 7.0.1 → 7.1.0.pre.alpha1

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

@@ -0,0 +1 @@
+Icon buttons are great to use if space is limited. If the icon isn’t VERY self explanatory (for example pencil/pen for edit, trashcan for delete) then it should use a tooltip explaining what the action does. The tooltip shouldn’t be longer than a few words and essentially serves as a replacement for what the button would say if it weren’t an icon

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

@@ -0,0 +1,34 @@
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td><%= pb_rails("button", props: { text: "Action", variant: "secondary" }) %></td>
+    </tr>
+  </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_one_action.jsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { Table } from '../..'
+import { Button } from '../../'
+
+const TableOneAction = () => {
+  return (
+    <Table size="sm">
+      <thead>
+        <tr>
+          <th>{'Column 1'}</th>
+          <th>{'Column 2'}</th>
+          <th>{'Column 3'}</th>
+          <th>{'Column 4'}</th>
+          <th>{''}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>
+            {' '}
+            <Button
+                onClick={() => alert('button clicked!')}
+                text="Action"
+                variant="secondary"
+            />
+            {' '}
+          </td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>
+            {' '}
+            <Button
+                onClick={() => alert('button clicked!')}
+                text="Action"
+                variant="secondary"
+            />
+            {' '}
+          </td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>
+            {' '}
+            <Button
+                onClick={() => alert('button clicked!')}
+                text="Action"
+                variant="secondary"
+            />
+            {' '}
+          </td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
+export default TableOneAction

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

@@ -0,0 +1,2 @@
+If there is one button on each row of the table, ideally, it should use the `secondary` variant and be placed at the end of the row
+

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

@@ -0,0 +1,43 @@
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>
+      <%= pb_rails("button", props: { text: "Tetriary Action", variant: "link", padding_left: "none" }) %>
+      <%= pb_rails("button", props: { text: "Secondary Action", variant: "secondary" }) %>
+      </td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>
+      <%= pb_rails("button", props: { text: "Tetriary Action", variant: "link", padding_left: "none" }) %>
+      <%= pb_rails("button", props: { text: "Secondary Action", variant: "secondary" }) %>
+      </td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>
+      <%= pb_rails("button", props: { text: "Tetriary Action", variant: "link", padding_left: "none" }) %>
+      <%= pb_rails("button", props: { text: "Secondary Action", variant: "secondary" }) %>
+      </td>    
+      </tr>
+  </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import { Table } from '../..'
+import { Button } from '../../'
+
+const TableOneAction = () => {
+  return (
+    <Table size="sm">
+      <thead>
+        <tr>
+          <th>{'Column 1'}</th>
+          <th>{'Column 2'}</th>
+          <th>{'Column 3'}</th>
+          <th>{'Column 4'}</th>
+          <th>{''}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>
+            <Button
+                onClick={() => alert('button clicked!')}
+                paddingLeft="none"
+                text="Tetriary Action"
+                variant="link"
+            />
+            <Button
+                onClick={() => alert('button clicked!')}
+                text="Secondary Action"
+                variant="secondary"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>
+            <Button
+                onClick={() => alert('button clicked!')}
+                paddingLeft="none"
+                text="Tetriary Action"
+                variant="link"
+            />
+            <Button
+                onClick={() => alert('button clicked!')}
+                text="Secondary Action"
+                variant="secondary"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>
+            <Button
+                onClick={() => alert('button clicked!')}
+                paddingLeft="none"
+                text="Tetriary Action"
+                variant="link"
+            />
+            <Button
+                onClick={() => alert('button clicked!')}
+                text="Secondary Action"
+                variant="secondary"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
+export default TableOneAction

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

@@ -0,0 +1 @@
+If there are two actions on each of the row, one should ideally one should use the `secondary` variant and the other use the `link` variant. The button using the `secondary` variant should be placed at the end.

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

@@ -0,0 +1,34 @@
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td> <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %> </td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td> <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %> </td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td> <%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "ellipsis-h" }) %> </td>
+      </tr>
+  </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.jsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import { Table } from '../..'
+import { CircleIconButton } from '../../'
+
+const TableTwoPlusActions = () => {
+  return (
+    <Table size="sm">
+      <thead>
+        <tr>
+          <th>{'Column 1'}</th>
+          <th>{'Column 2'}</th>
+          <th>{'Column 3'}</th>
+          <th>{'Column 4'}</th>
+          <th>{''}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>
+            {' '}
+            <CircleIconButton
+                icon="ellipsis-h"
+                variant="secondary"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>
+            {' '}
+            <CircleIconButton
+                icon="ellipsis-h"
+                variant="secondary"
+            />
+          </td>
+
+        </tr>
+        <tr>
+          <td>{'Value 1'}</td>
+          <td>{'Value 2'}</td>
+          <td>{'Value 3'}</td>
+          <td>{'Value 4'}</td>
+          <td>
+            {' '}
+            <CircleIconButton
+                icon="ellipsis-h"
+                variant="secondary"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
+
+export default TableTwoPlusActions

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

@@ -0,0 +1 @@
+If there are more than two actions on each row, then they should be contained in secondary circle icon button with the `ellipsis-h` icon (horizontal ellipsis) at the end of the row

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

@@ -10,6 +10,12 @@ examples:
     - table_single_line: Force Single Line
     - table_data_table: Data Table
     - table_responsive_table: Responsive Tables
+    - table_one_action: Table with 1 Action
+    - table_two_actions: Table with 2 Actions
+    - table_two_plus_actions: Table with 2+ Actions
+    - table_action_middle: Table with Actions in the Middle
+    - table_icon_buttons: Table with Icon Buttons
+
  
   react:
     - table_sm: Small
@@ -22,3 +28,9 @@ examples:
     - table_single_line: Force Single Line
     - table_data_table: Data Table
     - table_responsive_table: Responsive Tables
+    - table_one_action: Table with 1 Action
+    - table_two_actions: Table with 2 Actions
+    - table_two_plus_actions: Table with 2+ Actions
+    - table_action_middle: Table with Actions in the Middle
+    - table_icon_buttons: Table with Icon Buttons
+

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

@@ -8,3 +8,9 @@ export { default as TableResponsiveTable } from './_table_responsive_table.jsx'
 export { default as TableDisableHover } from './_table_disable_hover.jsx'
 export { default as TableSingleLine } from './_table_single_line.jsx'
 export { default as TableMultiline } from './_table_multiline.jsx'
+export { default as TableOneAction } from './_table_one_action.jsx'
+export { default as TableTwoActions } from './_table_two_actions.jsx'
+export { default as TableTwoPlusActions } from './_table_two_plus_actions.jsx'
+export { default as TableActionMiddle } from './_table_action_middle.jsx'
+export { default as TableIconButtons } from './_table_icon_buttons.jsx'
+

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss

@@ -22,14 +22,14 @@
     display: flex;
     align-items: center;
     [class*=pb_time_range_inline_arrow] {
-      margin-left: 4px;
-      margin-right: 4px;
+      margin-left: $space_xs/2;
+      margin-right: $space_xs/2;
     }
     [class*=pb_time_range_inline_timezone] {
-      margin-left: 4px;
+      margin-left: $space_xs/2;
     }
     [class*=pb_time_range_inline_icon] {
-      margin-right: 4px;
+      margin-right: $space_xs/2;
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_options.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("toggle" , props: {
+  text: "Toggle with Options",
+  input_options: {
+    id: "toggle-id",
+    name: "toggle-name",
+    value: "toggle-value",
+    class: "toggle-class",
+    checked: true
+  }
+}) %>

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

@@ -5,6 +5,7 @@ examples:
   - toggle_name: Name and Value
   - toggle_custom: Custom checkbox input
   - toggle_custom_radio: Custom radio inputs
+  - toggle_options: Toggle w/ Options
 
   react:
   - toggle_default: Default State

data/app/pb_kits/playbook/pb_toggle/toggle.rb

@@ -11,6 +11,9 @@ module Playbook
 
       partial "pb_toggle/toggle"
 
+      prop :input_options, type: Playbook::Props::Hash,
+                           default: {}
+
       prop :checked, type: Playbook::Props::Boolean,
                      default: false
       prop :name
@@ -24,7 +27,7 @@ module Playbook
       end
 
       def input
-        check_box_tag(name, value, checked)
+        check_box_tag(name, value, checked, input_options)
       end
 
     private

data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb

@@ -1,25 +1,29 @@
-<%= content_tag(:div,
+<% if object.pills %>
+  <%= react_component('Typeahead', object.typeahead_with_pills_options) %>
+<% else %>
+  <%= content_tag(:div,
                 id: object.id,
                 data: object.data,
                 class: object.classname) do %>
-  <div class="pb_typeahead_wrapper">
-    <div class="pb_typeahead_loading_indicator" data-pb-typeahead-kit-loading-indicator>
-      <i class="far fa-spinner fa-spin"></i>
+    <div class="pb_typeahead_wrapper">
+      <div class="pb_typeahead_loading_indicator" data-pb-typeahead-kit-loading-indicator>
+        <i class="far fa-spinner fa-spin"></i>
+      </div>
+      <%= pb_rails("text_input", props: {
+        type: "search",
+        label: object.label,
+        name: object.name,
+        value: object.value,
+        placeholder: object.placeholder
+      }) %>
+      <%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
+      <% end %>
     </div>
-    <%= pb_rails("text_input", props: {
-      type: "search",
-      label: object.label,
-      name: object.name,
-      value: object.value,
-      placeholder: object.placeholder
-    }) %>
-    <%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
-    <% end %>
-  </div>
 
-  <template data-pb-typeahead-kit-result-option>
-    <%= pb_rails("list/item") do %>
-      <button type="button" data-result-option-item><%= tag(:slot, name: :content) %></button>
-    <% end %>
-  </template>
-<% end %>
+    <template data-pb-typeahead-kit-result-option>
+      <%= pb_rails("list/item") do %>
+        <button type="button" data-result-option-item><%= tag(:slot, name: :content) %></button>
+      <% end %>
+    </template>
+  <% end %>
+<% end %>