playbook_ui 14.5.0.pre.rc.13 → 14.5.0.pre.rc.15

Sign up to get free protection for your applications and to get access to all the features.
Files changed (23) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_button/_button.tsx +6 -2
  3. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +10 -2
  4. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb +5 -1
  5. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.html.erb +5 -1
  6. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb +5 -1
  7. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb +5 -1
  8. data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb +5 -1
  9. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +5 -1
  10. data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb +5 -1
  11. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb +14 -13
  12. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx +4 -4
  13. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +17 -13
  14. data/app/pb_kits/playbook/utilities/icons/allicons.tsx +13 -13
  15. data/dist/chunks/{_typeahead-D72GNy0y.js → _typeahead-nZIE-AbB.js} +2 -2
  16. data/dist/chunks/{_weekday_stacked-BDIhh9Z6.js → _weekday_stacked-D7x3JLfv.js} +1 -1
  17. data/dist/chunks/vendor.js +1 -1
  18. data/dist/playbook-doc.js +1 -1
  19. data/dist/playbook-rails-react-bindings.js +1 -1
  20. data/dist/playbook-rails.js +1 -1
  21. data/lib/playbook/pagination_renderer.rb +10 -2
  22. data/lib/playbook/version.rb +1 -1
  23. metadata +4 -4
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c48f925d87b9373c2bb1e9f70998d2d01141398419d2adb6b0a8193366eb7923
4
- data.tar.gz: a4357ea2e9ef56fb66959708f73dc9fe5174306f901deb6b84df141327f405bd
3
+ metadata.gz: 00377cb9f1363b524f32694c5d1087d4e1630104f0b578fc759de3020122422b
4
+ data.tar.gz: 1e1dd41a3dce4d09b6667ff2905e3f9901d87058046ebc64c2456f7cf0db6de7
5
5
  SHA512:
6
- metadata.gz: 518d8bfb962b87cbaabaeea46ebf63908315d83ea167ab946add95a4b5ccfe952dc191a81e594f49bcfbab6633f64cc65044f5b596a67c6b5f4d16f0304267e5
7
- data.tar.gz: 0bd271d10113a4b49ea0d9c6f1aad023a51089fab60138a8ebfb083c163f37c44fea029fe5e623b78a768913b8b695fc853b5fcda7f91c25b232388fa55f0b90
6
+ metadata.gz: 2fbca5625f8968e28a17cb3935a284a31a3005fffb88dfd8a665ba49eb354122774de17bc1c76e0e492fe2a363408cd21aa246033254b2cd65bee1ab672fcc17
7
+ data.tar.gz: 0b4a4b60c8820cfb45d96cbdca5fd223ffebc181274898b50a99ffb42ec44701ab549771df69ff2ea7f2bea7f68b9e81d296e9c8be7011578338460316a3af00
data/app/pb_kits/playbook/pb_button/_button.tsx CHANGED
@@ -116,11 +116,15 @@ const Button = (props: ButtonPropTypes): React.ReactElement => {
116
116
  const content = (
117
117
  <span className="pb_button_content">
118
118
  {icon && !iconRight && (
119
- <i className={`pb_icon_kit far fa-${icon} fa-fw button_with_icon`} />
119
+ <Icon className='button_with_icon'
120
+ icon={icon}
121
+ />
120
122
  )}
121
123
  <span>{text || children}</span>
122
124
  {icon && iconRight && (
123
- <i className={`pb_icon_kit far fa-${icon} fa-fw button_with_icon_right`} />
125
+ <Icon className='button_with_icon_right'
126
+ icon={icon}
127
+ />
124
128
  )}
125
129
  </span>
126
130
  )
data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb CHANGED
@@ -30,7 +30,11 @@
30
30
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
31
31
 
32
32
  <%= form.actions do |action| %>
33
- <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
33
+ <%= action.submit props: {
34
+ text: "Apply",
35
+ data: {
36
+ disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
37
+ },}%>
34
38
  <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
35
39
  <% end %>
36
40
  <% end %>
@@ -64,7 +68,11 @@
64
68
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
65
69
 
66
70
  <%= form.actions do |action| %>
67
- <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
71
+ <%= action.submit props: {
72
+ text: "Apply",
73
+ data: {
74
+ disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
75
+ },}%>
68
76
  <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
69
77
  <% end %>
70
78
  <% end %>
data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb CHANGED
@@ -35,7 +35,11 @@
35
35
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
36
36
 
37
37
  <%= form.actions do |action| %>
38
- <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
38
+ <%= action.submit props: {
39
+ text: "Apply",
40
+ data: {
41
+ disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
42
+ },}%>
39
43
  <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
40
44
  <% end %>
41
45
  <% end %>
data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.html.erb CHANGED
@@ -30,7 +30,11 @@
30
30
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
31
31
 
32
32
  <%= form.actions do |action| %>
33
- <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
33
+ <%= action.submit props: {
34
+ text: "Apply",
35
+ data: {
36
+ disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
37
+ },}%>
34
38
  <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
35
39
  <% end %>
36
40
  <% end %>
data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb CHANGED
@@ -69,7 +69,11 @@
69
69
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
70
70
 
71
71
  <%= form.actions do |action| %>
72
- <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
72
+ <%= action.submit props: {
73
+ text: "Apply",
74
+ data: {
75
+ disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
76
+ },}%>
73
77
  <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
74
78
  <% end %>
75
79
  <% end %>
data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb CHANGED
@@ -24,7 +24,11 @@
24
24
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
25
25
 
26
26
  <%= form.actions do |action| %>
27
- <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
27
+ <%= action.submit props: {
28
+ text: "Apply",
29
+ data: {
30
+ disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
31
+ },}%>
28
32
  <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
29
33
  <% end %>
30
34
  <% end %>
data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb CHANGED
@@ -22,7 +22,11 @@
22
22
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
23
23
 
24
24
  <%= form.actions do |action| %>
25
- <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
25
+ <%= action.submit props: {
26
+ text: "Apply",
27
+ data: {
28
+ disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
29
+ },}%>
26
30
  <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
27
31
  <% end %>
28
32
  <% end %>
data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb CHANGED
@@ -23,7 +23,11 @@
23
23
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
24
24
 
25
25
  <%= form.actions do |action| %>
26
- <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
26
+ <%= action.submit props: {
27
+ text: "Apply",
28
+ data: {
29
+ disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
30
+ },}%>
27
31
  <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
28
32
  <% end %>
29
33
  <% end %>
data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb CHANGED
@@ -29,7 +29,11 @@
29
29
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
30
30
 
31
31
  <%= form.actions do |action| %>
32
- <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
32
+ <%= action.submit props: {
33
+ text: "Apply",
34
+ data: {
35
+ disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
36
+ },}%>
33
37
  <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
34
38
  <% end %>
35
39
  <% end %>
data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb CHANGED
@@ -1,8 +1,10 @@
1
1
  <%= pb_rails("button", props: { variant: "secondary", id: 'list' }) do %>
2
2
  <%= pb_rails("flex", props: {align: "center"}) do %>
3
- Filter By
3
+ Filter By
4
4
  <%= pb_rails("flex/flex_item", props: {margin_left: "xxs"}) do %>
5
- <div id="arrow-icon" style="display: flex"></div>
5
+ <div id="arrow-icon" style="display: flex">
6
+ <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true }) %>
7
+ </div>
6
8
  <% end %>
7
9
  <% end %>
8
10
  <% end %>
@@ -18,18 +20,17 @@
18
20
 
19
21
 
20
22
  <script type="text/javascript">
21
- const button = document.querySelector("#list")
22
- let buttonClicked = false
23
+ const popoverButton = document.querySelector("#list")
24
+ let buttonClicked = false
23
25
 
24
- const arrowDiv = document.querySelector("#arrow-icon")
25
- arrowDiv.innerHTML = '<i class="far fa-angle-down"></i>'
26
+ const arrowDiv = document.querySelector("#arrow-icon")
26
27
 
27
- button.onclick = () => {
28
- buttonClicked = !buttonClicked
29
- if (buttonClicked) {
30
- arrowDiv.innerHTML = '<i class="far fa-angle-up"></i>'
31
- } else {
32
- arrowDiv.innerHTML = '<i class="far fa-angle-down"></i>'
28
+ popoverButton.onclick = () => {
29
+ buttonClicked = !buttonClicked
30
+ if (buttonClicked) {
31
+ arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 31 25" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" id="" data="{}" aria="{}" tabindex=""><path d="M14.2031 5.70312C14.625 5.28125 15.3281 5.28125 15.75 5.70312L24.7969 14.7031C25.2188 15.1719 25.2188 15.875 24.7969 16.2969C24.3281 16.7656 23.625 16.7656 23.2031 16.2969L15 8.09375L6.79688 16.2969C6.32812 16.7656 5.625 16.7656 5.20312 16.2969C4.73438 15.875 4.73438 15.1719 5.20312 14.75L14.2031 5.70312Z" fill="currentColor"/></svg>'
32
+ } else {
33
+ arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 31 25" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" id="" data="{}" aria="{}" tabindex=""><path d="M14.2031 19.2969L5.20312 10.2969C4.73438 9.875 4.73438 9.17188 5.20312 8.70312C5.625 8.28125 6.32812 8.28125 6.79688 8.70312L15 16.9531L23.2031 8.75C23.625 8.28125 24.3281 8.28125 24.7969 8.75C25.2188 9.17188 25.2188 9.875 24.7969 10.2969L15.75 19.2969C15.3281 19.7656 14.625 19.7656 14.2031 19.2969Z" fill="currentColor"/></svg>'
34
+ }
33
35
  }
34
- }
35
36
  </script>
data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx CHANGED
@@ -26,10 +26,10 @@ const PopoverWithButton = (props) => {
26
26
  className={showPopover ? "fa-flip-vertical" : ""}
27
27
  display="inline_flex"
28
28
  >
29
- <Icon
30
- fixedWidth
31
- icon="angle-down"
32
- margin-left="xxs"
29
+ <Icon
30
+ fixedWidth
31
+ icon="angle-down"
32
+ margin-left="xxs"
33
33
  />
34
34
  </Flex>
35
35
  </Flex>
data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx CHANGED
@@ -1,14 +1,14 @@
1
1
  import React, { useRef, useState, forwardRef, ForwardedRef } from "react"
2
2
 
3
3
  import {
4
- arrow,
5
- flip,
6
- offset,
7
- Placement,
8
- safePolygon,
4
+ arrow,
5
+ flip,
6
+ offset,
7
+ Placement,
8
+ safePolygon,
9
9
  shift,
10
- useFloating,
11
- useHover,
10
+ useFloating,
11
+ useHover,
12
12
  useInteractions,
13
13
  } from "@floating-ui/react"
14
14
 
@@ -16,6 +16,8 @@ import classnames from "classnames"
16
16
  import { GlobalProps, globalProps } from "../utilities/globalProps"
17
17
  import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props"
18
18
  import Flex from "../pb_flex/_flex"
19
+ import { getAllIcons } from "../utilities/icons/allicons"
20
+ import Icon from '../pb_icon/_icon'
19
21
 
20
22
  type TooltipProps = {
21
23
  aria?: { [key: string]: string },
@@ -53,7 +55,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
53
55
  const dataProps: { [key: string]: string } = buildDataProps(data)
54
56
  const ariaProps: { [key: string]: string } = buildAriaProps(aria)
55
57
  const htmlProps = buildHtmlProps(htmlOptions)
56
-
58
+
57
59
  const css = classnames(
58
60
  globalProps({...rest}),
59
61
  className,
@@ -61,7 +63,6 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
61
63
  const [open, setOpen] = useState(false)
62
64
  const arrowRef = useRef(null)
63
65
 
64
-
65
66
  const {
66
67
  context,
67
68
  middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, },
@@ -95,7 +96,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
95
96
  placement: preferredPlacement
96
97
  })
97
98
 
98
-
99
+
99
100
  const { getFloatingProps } = useInteractions([
100
101
  useHover(context, {
101
102
  delay,
@@ -148,13 +149,16 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
148
149
  },
149
150
  })}
150
151
  >
151
- <Flex
152
+ <Flex
152
153
  align="center"
153
154
  gap="xs"
154
155
  >
155
156
  {icon && (
156
- <i className={`pb_icon_kit far fa-${icon} fa-fw`} />
157
- )}
157
+ <i className={`pb_icon_kit`}>
158
+ <Icon
159
+ icon={icon}
160
+ />
161
+ </i>)}
158
162
  {text}
159
163
  </Flex>
160
164
  <div
data/app/pb_kits/playbook/utilities/icons/allicons.tsx CHANGED
@@ -2,11 +2,11 @@ import React from "react";
2
2
  import ReactDOMServer from 'react-dom/server';
3
3
 
4
4
  const spinner = (
5
- <svg
6
- fill="none"
7
- height="25"
8
- viewBox="0 0 31 25"
9
- width="31"
5
+ <svg
6
+ fill="none"
7
+ height="25"
8
+ viewBox="0 0 31 25"
9
+ width="31"
10
10
  xmlns="http://www.w3.org/2000/svg"
11
11
  >
12
12
  <path d="M17.4043 1.85547C17.4043 2.69922 16.7012 3.35547 15.9043 3.35547C15.0605 3.35547 14.4043 2.69922 14.4043 1.85547C14.4043 1.05859 15.0605 0.355469 15.9043 0.355469C16.7012 0.355469 17.4043 1.05859 17.4043 1.85547ZM17.4043 22.8555C17.4043 23.6992 16.7012 24.3555 15.9043 24.3555C15.0605 24.3555 14.4043 23.6992 14.4043 22.8555C14.4043 22.0586 15.0605 21.3555 15.9043 21.3555C16.7012 21.3555 17.4043 22.0586 17.4043 22.8555ZM24.9043 12.3555C24.9043 11.5586 25.5605 10.8555 26.4043 10.8555C27.2012 10.8555 27.9043 11.5586 27.9043 12.3555C27.9043 13.1992 27.2012 13.8555 26.4043 13.8555C25.5605 13.8555 24.9043 13.1992 24.9043 12.3555ZM5.4043 13.8555C4.56055 13.8555 3.9043 13.1992 3.9043 12.3555C3.9043 11.5586 4.56055 10.8555 5.4043 10.8555C6.20117 10.8555 6.9043 11.5586 6.9043 12.3555C6.9043 13.1992 6.20117 13.8555 5.4043 13.8555ZM7.41992 20.8398C6.81055 20.2773 6.81055 19.3398 7.41992 18.7305C7.98242 18.168 8.91992 18.168 9.5293 18.7305C10.0918 19.3398 10.0918 20.2773 9.5293 20.8398C8.91992 21.4492 7.98242 21.4492 7.41992 20.8398ZM22.2324 20.8398C21.8574 20.5117 21.6699 19.9023 21.8105 19.3867C21.9512 18.8711 22.373 18.4492 22.8887 18.3086C23.4043 18.168 24.0137 18.3555 24.3887 18.7305C24.7637 19.1055 24.9512 19.668 24.8105 20.2305C24.6699 20.7461 24.248 21.168 23.7324 21.3086C23.1699 21.4492 22.6074 21.2617 22.2324 20.8398ZM7.41992 3.87109C7.98242 3.30859 8.91992 3.30859 9.5293 3.87109C10.0918 4.48047 10.0918 5.41797 9.5293 6.02734C8.91992 6.58984 7.98242 6.58984 7.41992 6.02734C6.81055 5.41797 6.81055 4.48047 7.41992 3.87109Z"
@@ -16,10 +16,10 @@ const spinner = (
16
16
  )
17
17
 
18
18
  const clock = (
19
- <svg
20
- fill="none"
21
- height="25"
22
- viewBox="0 0 31 25"
19
+ <svg
20
+ fill="none"
21
+ height="25"
22
+ viewBox="0 0 31 25"
23
23
  width="31"
24
24
  xmlns="http://www.w3.org/2000/svg"
25
25
  >
@@ -31,10 +31,10 @@ const clock = (
31
31
 
32
32
  const times = (
33
33
  <svg
34
- fill="none"
35
- height="25"
36
- viewBox="0 0 31 25"
37
- width="31"
34
+ fill="none"
35
+ height="25"
36
+ viewBox="0 0 31 25"
37
+ width="31"
38
38
  xmlns="http://www.w3.org/2000/svg"
39
39
  >
40
40
  <path