playbook_ui 12.34.0.pre.alpha.play716popoverkitcloseonclickissue998 → 12.35.0.pre.alpha.iconpocwebfonts1023

Sign up to get free protection for your applications and to get access to all the features.
Files changed (62) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -0
  3. data/app/pb_kits/playbook/pb_card/_card.scss +3 -0
  4. data/app/pb_kits/playbook/pb_card/_card.tsx +5 -6
  5. data/app/pb_kits/playbook/pb_card/card.html.erb +1 -3
  6. data/app/pb_kits/playbook/pb_card/card.rb +0 -96
  7. data/app/pb_kits/playbook/pb_card/card_body.rb +93 -1
  8. data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +11 -0
  9. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +7 -7
  10. data/app/pb_kits/playbook/pb_collapsible/_helper_functions.ts +25 -0
  11. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx +20 -14
  12. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +35 -17
  13. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +7 -2
  14. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.rb +8 -5
  15. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +1 -1
  16. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.html.erb +10 -0
  17. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +19 -0
  18. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.md +2 -0
  19. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.md +1 -1
  20. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +3 -1
  21. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +1 -0
  22. data/app/pb_kits/playbook/pb_collapsible/index.js +3 -3
  23. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +14 -2
  24. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.tsx +2 -2
  25. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx +1 -4
  26. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx +1 -2
  27. data/app/pb_kits/playbook/pb_highlight/_highlight.scss +4 -3
  28. data/app/pb_kits/playbook/pb_highlight/docs/_highlight_default.html.erb +6 -16
  29. data/app/pb_kits/playbook/pb_highlight/docs/_highlight_default.jsx +2 -2
  30. data/app/pb_kits/playbook/pb_highlight/docs/example.yml +0 -2
  31. data/app/pb_kits/playbook/pb_icon/docs/_icon_font.html.erb +11 -0
  32. data/app/pb_kits/playbook/pb_icon/docs/example.yml +1 -0
  33. data/app/pb_kits/playbook/pb_icon/icon.html.erb +15 -1
  34. data/app/pb_kits/playbook/pb_icon/icon.rb +24 -2
  35. data/app/pb_kits/playbook/pb_message/_message.scss +18 -0
  36. data/app/pb_kits/playbook/pb_message/_message.tsx +2 -0
  37. data/app/pb_kits/playbook/pb_message/_message_mention.tsx +44 -0
  38. data/app/pb_kits/playbook/pb_message/docs/_message_mentions.html.erb +24 -0
  39. data/app/pb_kits/playbook/pb_message/docs/_message_mentions.jsx +31 -0
  40. data/app/pb_kits/playbook/pb_message/docs/_message_mentions.md +1 -0
  41. data/app/pb_kits/playbook/pb_message/docs/example.yml +2 -2
  42. data/app/pb_kits/playbook/pb_message/docs/index.js +1 -1
  43. data/app/pb_kits/playbook/pb_message/message_mention.html.erb +7 -0
  44. data/app/pb_kits/playbook/pb_message/message_mention.rb +15 -0
  45. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +6 -0
  46. data/app/pb_kits/playbook/pb_nav/_item.tsx +98 -49
  47. data/app/pb_kits/playbook/pb_nav/_nav.scss +1 -0
  48. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +9 -11
  49. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.html.erb +24 -0
  50. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +83 -0
  51. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom_icons.jsx +86 -0
  52. data/app/pb_kits/playbook/pb_nav/docs/example.yml +3 -0
  53. data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -0
  54. data/app/pb_kits/playbook/pb_nav/item.html.erb +34 -12
  55. data/app/pb_kits/playbook/pb_nav/item.rb +5 -0
  56. data/app/pb_kits/playbook/pb_popover/_popover.tsx +6 -14
  57. data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx +0 -2
  58. data/app/pb_kits/playbook/pb_popover/index.ts +2 -5
  59. data/dist/playbook-rails.js +7 -7
  60. data/lib/playbook/version.rb +2 -2
  61. metadata +17 -3
  62. data/app/pb_kits/playbook/pb_collapsible/types.d.ts +0 -1
@@ -29,22 +29,20 @@
29
29
  flex: 1;
30
30
  font-weight: $regular;
31
31
  }
32
- @media (hover:hover) {
33
- &:hover {
34
- background-color: rgba($primary, 0.03);
35
- [class*=_icon] {
36
- color: $primary;
37
- }
38
- [class*=_text] {
39
- color: $primary;
40
- }
41
- }
42
- }
43
32
  }
44
33
  &[class*=_active] [class*=_link] {
45
34
  @include pb_title_4;
46
35
  color: $primary;
47
36
  letter-spacing: normal;
48
37
  }
38
+ &:hover {
39
+ background-color: rgba($primary, 0.03);
40
+ [class*=_icon] {
41
+ color: $primary;
42
+ }
43
+ [class*=_text] {
44
+ color: $primary;
45
+ }
46
+ }
49
47
  }
50
48
  }
@@ -0,0 +1,24 @@
1
+ <%= pb_rails("nav", props: { variant: "subtle" }) do %>
2
+ <%= pb_rails("nav/item", props: { text: "Overview", link: "#", collapsible: true, icon_left:"city" }) do %>
3
+ <%= pb_rails("nav", props: { variant: "subtle" }) do %>
4
+ <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
5
+ <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
6
+ <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
7
+ <% end %>
8
+ <% end %>
9
+ <%= pb_rails("nav/item", props: { text: "Albums", link: "#", active: true, collapsible: true, icon_left: "theater-masks" }) do %>
10
+ <%= pb_rails("nav", props: { variant: "subtle" }) do %>
11
+ <%= pb_rails("nav/item", props: { text: "Entertainment", link: "#" }) %>
12
+ <%= pb_rails("nav/item", props: { text: "Food", link: "#" }) %>
13
+ <%= pb_rails("nav/item", props: { text: "Style", link: "#" }) %>
14
+ <% end %>
15
+ <% end %>
16
+ <%= pb_rails("nav/item", props: { text: "Similar Artists", link: "#", collapsible: true, icon_left: "city" }) do %>
17
+ <%= pb_rails("nav", props: { variant: "subtle" }) do %>
18
+ <%= pb_rails("nav/item", props: { text: "City", link: "#" }) %>
19
+ <%= pb_rails("nav/item", props: { text: "People", link: "#" }) %>
20
+ <%= pb_rails("nav/item", props: { text: "Business", link: "#" }) %>
21
+ <% end %>
22
+ <% end %>
23
+ <% end %>
24
+
@@ -0,0 +1,83 @@
1
+ import React from "react";
2
+
3
+ import Nav from "../_nav";
4
+ import NavItem from "../_item";
5
+
6
+ const CollapsibleNav = (props) => {
7
+ return (
8
+ <Nav variant="subtle">
9
+ <NavItem
10
+ collapsible
11
+ iconLeft="city"
12
+ link="#"
13
+ text="Overview"
14
+ {...props}
15
+ >
16
+ <NavItem
17
+ link="#"
18
+ text="City"
19
+ {...props}
20
+ />
21
+ <NavItem
22
+ link="#"
23
+ text="People"
24
+ {...props}
25
+ />
26
+ <NavItem
27
+ link="#"
28
+ text="Business"
29
+ {...props}
30
+ />
31
+ </NavItem>
32
+ <NavItem
33
+ active
34
+ collapsible
35
+ iconLeft="theater-masks"
36
+ link="#"
37
+ text="Albums"
38
+ {...props}
39
+ >
40
+ <NavItem
41
+ link="#"
42
+ text="Entertainment"
43
+ {...props}
44
+ />
45
+ <NavItem
46
+ link="#"
47
+ text="Food"
48
+ {...props}
49
+ />
50
+ <NavItem
51
+ link="#"
52
+ text="Style"
53
+ {...props}
54
+ />
55
+ </NavItem>
56
+ <NavItem
57
+ collapsible
58
+ iconLeft="city"
59
+ link="#"
60
+ text="Similar Artists"
61
+ {...props}
62
+ >
63
+ <NavItem
64
+ link="#"
65
+ text="City"
66
+ {...props}
67
+ />
68
+ <NavItem
69
+ link="#"
70
+ text="People"
71
+ {...props}
72
+ />
73
+ <NavItem
74
+ link="#"
75
+ text="Business"
76
+ {...props}
77
+ />
78
+ </NavItem>
79
+ </Nav>
80
+ );
81
+ };
82
+
83
+ export default CollapsibleNav;
@@ -0,0 +1,86 @@
1
+ import React from "react";
2
+
3
+ import Nav from "../_nav";
4
+ import NavItem from "../_item";
5
+
6
+ const CollapsibleNavCustomIcons = (props) => {
7
+ return (
8
+ <Nav variant="subtle">
9
+ <NavItem
10
+ collapsible
11
+ iconLeft="city"
12
+ iconRight={["chevron-down", "chevron-up"]}
13
+ link="#"
14
+ text="Overview"
15
+ {...props}
16
+ >
17
+ <NavItem
18
+ link="#"
19
+ text="City"
20
+ {...props}
21
+ />
22
+ <NavItem
23
+ link="#"
24
+ text="People"
25
+ {...props}
26
+ />
27
+ <NavItem
28
+ link="#"
29
+ text="Business"
30
+ {...props}
31
+ />
32
+ </NavItem>
33
+ <NavItem
34
+ active
35
+ collapsible
36
+ iconLeft="theater-masks"
37
+ iconRight={["chevron-down", "chevron-up"]}
38
+ link="#"
39
+ text="Albums"
40
+ {...props}
41
+ >
42
+ <NavItem
43
+ link="#"
44
+ text="Entertainment"
45
+ {...props}
46
+ />
47
+ <NavItem
48
+ link="#"
49
+ text="Food"
50
+ {...props}
51
+ />
52
+ <NavItem
53
+ link="#"
54
+ text="Style"
55
+ {...props}
56
+ />
57
+ </NavItem>
58
+ <NavItem
59
+ collapsible
60
+ iconLeft="city"
61
+ iconRight={["chevron-down", "chevron-up"]}
62
+ link="#"
63
+ text="Similar Artists"
64
+ {...props}
65
+ >
66
+ <NavItem
67
+ link="#"
68
+ text="City"
69
+ {...props}
70
+ />
71
+ <NavItem
72
+ link="#"
73
+ text="People"
74
+ {...props}
75
+ />
76
+ <NavItem
77
+ link="#"
78
+ text="Business"
79
+ {...props}
80
+ />
81
+ </NavItem>
82
+ </Nav>
83
+ );
84
+ };
85
+
86
+ export default CollapsibleNavCustomIcons;
@@ -7,6 +7,7 @@ examples:
7
7
  - borderless_nav: No Borders
8
8
  - subtle_nav: Subtle Variant
9
9
  - subtle_with_icons_nav: Subtle With Icons
10
+ # - collapsible_nav: Subtle With Collapsible
10
11
  - subtle_no_highlight_nav: Subtle No Highlight
11
12
  - bold_vertical_nav: Bold Variant
12
13
  - horizontal_nav: Horizontal Nav
@@ -24,6 +25,8 @@ examples:
24
25
  - borderless_nav: No Borders
25
26
  - subtle_nav: Subtle Variant
26
27
  - subtle_with_icons_nav: Subtle With Icons
28
+ # - collapsible_nav: Subtle With Collapsible
29
+ # - collapsible_nav_custom_icons: Subtle With Collapsible (Custom Toggle Icons)
27
30
  - subtle_no_highlight_nav: Subtle No Highlight
28
31
  - bold_vertical_nav: Bold Variant
29
32
  - horizontal_nav: Horizontal Nav
@@ -13,3 +13,5 @@ export { default as WithImgNav } from './_with_img_nav.jsx'
13
13
  export { default as NewTab } from './_new_tab.jsx'
14
14
  export { default as BoldHorizontalNav } from './_bold_horizontal_nav.jsx'
15
15
  export { default as BoldVerticalNav } from './_bold_vertical_nav.jsx'
16
+ export { default as CollapsibleNav } from './_collapsible_nav.jsx'
17
+ export { default as CollapsibleNavCustomIcons } from './_collapsible_nav_custom_icons.jsx'
@@ -3,19 +3,41 @@
3
3
  class: object.classname,
4
4
  data: object.data,
5
5
  id: object.id) do %>
6
- <%= content_tag(object.tag,
7
- object.link ? object.link_options : object.options) do %>
8
- <% if object.image_url %>
9
- <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
6
+ <% if object.collapsible %>
7
+ <%= pb_rails("collapsible", props: { name: "collapsible-nav-example" }) do %>
8
+ <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs" }) do %>
9
+ <%= content_tag(object.tag,
10
+ object.link ? object.link_options : object.options) do %>
11
+ <% if object.image_url %>
12
+ <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
13
+ <% end %>
14
+ <% if object.icon_left %>
15
+ <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
16
+ <% end %>
17
+ <span class="pb_nav_list_item_text">
18
+ <%= object.text %>
19
+ </span>
20
+ <% end %>
21
+ <% end %>
22
+ <%= pb_rails("collapsible/collapsible_content") do %>
23
+ <%= content.presence %>
24
+ <% end %>
10
25
  <% end %>
11
- <% if object.icon_left %>
12
- <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
13
- <% end %>
14
- <span class="pb_nav_list_item_text">
15
- <%= object.text %><%= content.presence %>
16
- </span>
17
- <% if object.icon_right %>
18
- <%= pb_rails("icon", props: { icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
26
+ <% else %>
27
+ <%= content_tag(object.tag,
28
+ object.link ? object.link_options : object.options) do %>
29
+ <% if object.image_url %>
30
+ <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
31
+ <% end %>
32
+ <% if object.icon_left %>
33
+ <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
34
+ <% end %>
35
+ <span class="pb_nav_list_item_text">
36
+ <%= object.text %><%= content.presence %>
37
+ </span>
38
+ <% if object.icon_right %>
39
+ <%= pb_rails("icon", props: { icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
40
+ <% end %>
19
41
  <% end %>
20
42
  <% end %>
21
43
  <% end %>
@@ -4,6 +4,7 @@ module Playbook
4
4
  module PbNav
5
5
  class Item < Playbook::KitBase
6
6
  prop :active, type: Playbook::Props::Boolean, default: false
7
+ prop :collapsible, type: Playbook::Props::Boolean, default: false
7
8
  prop :link
8
9
  prop :text
9
10
  prop :icon_left
@@ -33,6 +34,10 @@ module Playbook
33
34
  )
34
35
  end
35
36
 
37
+ def collapsible_icons
38
+ icon_right.present? ? icon_right : %w[plus minus]
39
+ end
40
+
36
41
  private
37
42
 
38
43
  def active_class
@@ -1,4 +1,4 @@
1
- import React, { useEffect, useState } from "react";
1
+ import React, { useEffect } from "react";
2
2
  import ReactDOM from "react-dom";
3
3
  import {
4
4
  Popper,
@@ -17,7 +17,6 @@ import {
17
17
 
18
18
  import classnames from "classnames";
19
19
  import { globalProps, GlobalProps } from "../utilities/globalProps";
20
- import _uniqueId from 'lodash/uniqueId';
21
20
 
22
21
  type PbPopoverProps = {
23
22
  aria?: { [key: string]: string };
@@ -73,7 +72,6 @@ const Popover = (props: PbPopoverProps) => {
73
72
  maxWidth,
74
73
  minHeight,
75
74
  minWidth,
76
- targetId,
77
75
  } = props;
78
76
 
79
77
  const popoverSpacing =
@@ -125,7 +123,6 @@ const Popover = (props: PbPopoverProps) => {
125
123
  popoverSpacing,
126
124
  overflowHandling
127
125
  )}
128
- id={targetId}
129
126
  style={widthHeightStyles()}
130
127
  >
131
128
  {children}
@@ -139,7 +136,6 @@ const Popover = (props: PbPopoverProps) => {
139
136
  };
140
137
 
141
138
  const PbReactPopover = (props: PbPopoverProps) => {
142
- const [targetId] = useState(_uniqueId('id-'))
143
139
  const {
144
140
  className,
145
141
  children,
@@ -167,27 +163,25 @@ const PbReactPopover = (props: PbPopoverProps) => {
167
163
  "click",
168
164
  ({ target }) => {
169
165
  const targetIsPopover =
170
- (target as HTMLElement).closest("#" + targetId) !==
166
+ (target as HTMLElement).closest("[class^=pb_popover_tooltip]") !==
171
167
  null;
172
168
  const targetIsReference =
173
- (target as HTMLElement).closest("#reference-" + targetId) !==
169
+ (target as HTMLElement).closest(".pb_popover_reference_wrapper") !==
174
170
  null;
175
171
 
176
172
  switch (closeOnClick) {
177
173
  case "outside":
178
- if (!targetIsPopover && !targetIsReference) {
174
+ if (!targetIsPopover || targetIsReference) {
179
175
  shouldClosePopover(true);
180
176
  }
181
177
  break;
182
178
  case "inside":
183
- if (targetIsPopover) {
179
+ if (targetIsPopover || targetIsReference) {
184
180
  shouldClosePopover(true);
185
181
  }
186
182
  break;
187
183
  case "any":
188
- if (targetIsPopover || !targetIsPopover && !targetIsReference) {
189
- shouldClosePopover(true);
190
- }
184
+ shouldClosePopover(true);
191
185
  break;
192
186
  }
193
187
  },
@@ -206,7 +200,6 @@ const PbReactPopover = (props: PbPopoverProps) => {
206
200
  offset={offset}
207
201
  placement={placement}
208
202
  referenceElement={referenceElement}
209
- targetId={targetId}
210
203
  zIndex={zIndex}
211
204
  {...props}
212
205
  >
@@ -221,7 +214,6 @@ const PbReactPopover = (props: PbPopoverProps) => {
221
214
  <PopperReference>
222
215
  {({ ref }) => (
223
216
  <span
224
- id={"reference-" + targetId}
225
217
  className="pb_popover_reference_wrapper"
226
218
  ref={ref}>
227
219
  <reference.type {...reference.props} />
@@ -24,7 +24,6 @@ const PopoverClose = (props) => {
24
24
 
25
25
  const handleOutsideTogglePopover = () => {
26
26
  setOutsideShowPopover(!showOutsidePopover)
27
- setAnyShowPopover(false)
28
27
  }
29
28
 
30
29
  const handleAnyShouldClosePopover = (shouldClosePopover) => {
@@ -33,7 +32,6 @@ const PopoverClose = (props) => {
33
32
 
34
33
  const handleAnyTogglePopover = () => {
35
34
  setAnyShowPopover(!showAnyPopover)
36
- setOutsideShowPopover(false)
37
35
  }
38
36
 
39
37
  const insidePopoverTrigger = (
@@ -49,16 +49,13 @@ export default class PbPopover extends PbEnhancedElement {
49
49
  checkCloseTooltip() {
50
50
  document.querySelector('body').addEventListener('click', ({ target } ) => {
51
51
  const isTooltipElement = (target as HTMLElement).closest(`#${this.tooltipId}`) !== null
52
- const isTriggerElement = (target as HTMLElement).closest(`#${this.triggerElementId}`) !== null
53
52
 
54
53
  switch (this.closeOnClick) {
55
54
  case 'any':
56
- if (isTooltipElement || !isTooltipElement && !isTriggerElement) {
57
- this.hideTooltip()
58
- }
55
+ this.hideTooltip()
59
56
  break
60
57
  case 'outside':
61
- if (!isTooltipElement && !isTriggerElement) {
58
+ if (!isTooltipElement) {
62
59
  this.hideTooltip()
63
60
  }
64
61
  break