playbook_ui 12.37.0.pre.alpha.PLAY951collapsiblenav31078 → 12.37.0.pre.alpha.PLAYaddingdatapropselectkit1071

Sign up to get free protection for your applications and to get access to all the features.
Files changed (37) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +0 -6
  3. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +3 -3
  4. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +9 -10
  5. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx +2 -2
  6. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +2 -2
  7. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +8 -4
  8. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.md +1 -1
  9. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx +5 -5
  10. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +6 -7
  11. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +1 -2
  12. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +17 -280
  13. data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +0 -6
  14. data/app/pb_kits/playbook/pb_nav/_item.tsx +22 -35
  15. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +7 -6
  16. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +1 -1
  17. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +58 -85
  18. data/app/pb_kits/playbook/pb_nav/docs/{_collapsible_nav_emphasize.jsx → _collapsible_nav_custom_icons.jsx} +5 -14
  19. data/app/pb_kits/playbook/pb_nav/docs/example.yml +3 -5
  20. data/app/pb_kits/playbook/pb_nav/docs/index.js +1 -2
  21. data/app/pb_kits/playbook/pb_nav/item.html.erb +4 -5
  22. data/app/pb_kits/playbook/pb_nav/item.rb +3 -29
  23. data/app/pb_kits/playbook/pb_select/docs/_select_data_attributes.html.erb +24 -0
  24. data/app/pb_kits/playbook/pb_select/docs/_select_data_attributes.md +1 -0
  25. data/app/pb_kits/playbook/pb_select/docs/example.yml +1 -0
  26. data/app/pb_kits/playbook/pb_select/select.html.erb +1 -1
  27. data/dist/playbook-rails.js +1 -1
  28. data/lib/playbook/version.rb +1 -1
  29. metadata +5 -11
  30. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx +0 -75
  31. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.md +0 -3
  32. data/app/pb_kits/playbook/pb_nav/_mixins.scss +0 -5
  33. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md +0 -1
  34. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +0 -58
  35. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.md +0 -1
  36. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb +0 -23
  37. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md +0 -1
@@ -11,71 +11,57 @@ import Collapsible from '../pb_collapsible/_collapsible'
11
11
  type NavItemProps = {
12
12
  active?: boolean,
13
13
  aria?: { [key: string]: string },
14
- fontWeight?: "regular" | "bold" | "bolder",
15
14
  children?: React.ReactNode[] | React.ReactNode,
16
15
  className?: string,
17
16
  collapsible?: boolean,
17
+ collapsibleClick?: () => void,
18
18
  data?: object,
19
- dark?: boolean,
20
- fontSize?: "normal" | "small",
21
19
  iconLeft?: string,
22
20
  iconRight?: string | string[],
23
- onIconRightClick?: () => void,
24
- onIconLeftClick?: () => void,
21
+ iconRightClick?: () => void,
22
+ iconLeftClick?: () => void,
25
23
  id?: string,
26
24
  imageUrl?: string,
27
25
  link?: string,
28
- onClick?: () => void,
26
+ onClick?: React.MouseEventHandler<HTMLElement>,
29
27
  target?: '_blank' | '_self' | '_parent' | '_top',
30
28
  text: string,
31
- collapsibleTrail?: boolean,
32
- collapsed?: boolean
29
+ toggleCollapsed?: any
33
30
  } & GlobalProps
34
31
 
35
32
  const NavItem = (props: NavItemProps) => {
36
33
  const {
37
34
  active = false,
38
35
  aria = {},
39
- fontWeight = "regular",
40
36
  children,
41
37
  className,
42
38
  collapsible,
39
+ collapsibleClick,
43
40
  data = {},
44
- dark = false,
45
- fontSize = "normal",
46
41
  iconLeft,
47
42
  iconRight,
48
- onIconRightClick,
49
- onIconLeftClick,
43
+ iconRightClick,
44
+ iconLeftClick,
50
45
  id,
51
46
  imageUrl,
52
47
  link,
53
48
  onClick = () => { },
54
49
  target = '_self',
55
50
  text = '',
56
- collapsibleTrail,
57
- collapsed
51
+ toggleCollapsed
58
52
  } = props
59
53
 
60
54
  const Tag = link ? 'a' : 'div'
61
55
  const activeClass = active === true ? 'active' : ''
62
- const collapsibleTrailClass = collapsible && collapsibleTrail ? 'collapsible_trail' : ''
63
- const fontSizeClass = fontSize === 'small' ? "font_size_small" : "font_size_normal"
64
- const fontWeightClass = fontWeight === 'bold' ? "font_bold" : fontWeight === 'bolder' ? "font_bolder" : "font_regular"
65
56
  const ariaProps = buildAriaProps(aria)
66
57
  const dataProps = buildDataProps(data)
67
- const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass),
68
- collapsible ? buildCss('pb_collapsible_nav_item', activeClass, collapsibleTrailClass) : '',
69
- fontSizeClass,
70
- fontWeightClass,
71
- globalProps(props),
72
- className)
58
+ const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass), collapsible ? 'pb_collapsible_nav_item' : '', globalProps(props), className)
73
59
 
74
60
 
75
61
  const handleIconClick = (e:any) => {
76
- if (onIconLeftClick) {
62
+ if (iconLeftClick) {
77
63
  e.stopPropagation();
78
- onIconLeftClick()
64
+ iconLeftClick()
79
65
  }
80
66
  }
81
67
 
@@ -91,19 +77,20 @@ const NavItem = (props: NavItemProps) => {
91
77
  <Collapsible icon={iconRight ? iconRight : ['plus','minus']}
92
78
  iconSize="xs"
93
79
  id={id}
94
- collapsed={collapsed}
95
- onIconClick={onIconRightClick}
96
- onClick={onClick}
80
+ collapsed={toggleCollapsed}
81
+ iconClick={iconRightClick}
82
+ onClick={collapsibleClick}
97
83
  >
98
- <Collapsible.Main dark={dark}>
84
+ <Collapsible.Main>
99
85
  <Tag
100
- className="pb_nav_list_item_link_collapsible"
86
+ className="pb_nav_list_item_link"
101
87
  href={link}
88
+ onClick={onClick}
102
89
  target={target}
103
90
  >
104
91
  {imageUrl &&
105
92
  <div
106
- className="pb_nav_list_item_icon_section_collapsible"
93
+ className="pb_nav_list_item_icon_section"
107
94
  key={imageUrl}
108
95
  onClick={(e)=>handleIconClick(e)}
109
96
  >
@@ -116,18 +103,18 @@ const NavItem = (props: NavItemProps) => {
116
103
 
117
104
  {iconLeft &&
118
105
  <div
119
- className="pb_nav_list_item_icon_section_collapsible"
106
+ className="pb_nav_list_item_icon_section"
120
107
  key={iconLeft}
121
108
  onClick={(e)=>handleIconClick(e)}
122
109
  >
123
110
  <Icon
124
- className="pb_nav_list_item_icon_left_collapsible"
111
+ className="pb_nav_list_item_icon_left"
125
112
  fixedWidth
126
113
  icon={iconLeft}
127
114
  />
128
115
  </div>
129
116
  }
130
- <span className="pb_nav_list_item_text_collapsible">
117
+ <span className="pb_nav_list_item_text">
131
118
  {text}
132
119
  </span>
133
120
  </Tag>
@@ -27,7 +27,14 @@
27
27
  }
28
28
  [class*=_text] {
29
29
  flex: 1;
30
+ font-weight: $regular;
30
31
  }
32
+ }
33
+ &[class*=_active] [class*=_link] {
34
+ @include pb_title_4;
35
+ color: $primary;
36
+ letter-spacing: normal;
37
+ }
31
38
  &:hover {
32
39
  background-color: rgba($primary, 0.03);
33
40
  [class*=_icon] {
@@ -37,11 +44,5 @@
37
44
  color: $primary;
38
45
  }
39
46
  }
40
- }
41
- &[class*=_active] [class*=_link] {
42
- @include pb_title_4;
43
- color: $primary;
44
- letter-spacing: normal;
45
- }
46
47
  }
47
48
  }
@@ -56,7 +56,7 @@ $selector: ".pb_nav_list";
56
56
  color: $primary;
57
57
  }
58
58
  [class*=_text] {
59
- color: $primary !important;
59
+ color: $primary;
60
60
  }
61
61
  }
62
62
  }
@@ -1,90 +1,63 @@
1
- import React from "react";
2
- import { Nav, NavItem } from '../..'
1
+ import React from "react"
2
+ import { Nav, NavItem, useCollapsible } from "../.."
3
3
 
4
4
  const CollapsibleNav = (props) => {
5
+ const navItems = ["Overview", "Albums", "Similar Artists"]
6
+ // eslint-disable-next-line react-hooks/rules-of-hooks
7
+ const collapsibles = navItems.map(() => useCollapsible(true))
8
+
9
+ const handleMainClick = (index) => {
10
+ collapsibles.forEach(([, , setCollapsed], idx) => {
11
+ if (idx === index) {
12
+ setCollapsed(false)
13
+ } else {
14
+ setCollapsed(true)
15
+ }
16
+ })
17
+ }
18
+
19
+
20
+ const handleIconRightClick = (index) => {
21
+ const [isCollapsed, setCollapsed] = collapsibles[index]
22
+ setCollapsed(!isCollapsed)
23
+ }
24
+
5
25
  return (
6
- <Nav>
7
- <NavItem
8
- active
9
- collapsible
10
- collapsibleTrail
11
- fontWeight="bolder"
12
- iconLeft="city"
13
- iconRight={["plus", "minus"]}
14
- link="#"
15
- text="Overview"
16
- {...props}
17
- >
18
- <NavItem
19
- link="#"
20
- text="City"
21
- {...props}
22
- />
23
- <NavItem
24
- link="#"
25
- text="People"
26
- {...props}
27
- />
28
- <NavItem
29
- link="#"
30
- text="Business"
31
- {...props}
32
- />
33
- </NavItem>
34
- <NavItem
35
- collapsible
36
- collapsibleTrail
37
- fontWeight="bolder"
38
- iconLeft="theater-masks"
39
- iconRight={["plus", "minus"]}
40
- link="#"
41
- text="Albums"
42
- {...props}
43
- >
44
- <NavItem
45
- link="#"
46
- text="Entertainment"
47
- {...props}
48
- />
49
- <NavItem
50
- link="#"
51
- text="Food"
52
- {...props}
53
- />
54
- <NavItem
55
- link="#"
56
- text="Style"
57
- {...props}
58
- />
59
- </NavItem>
60
- <NavItem
61
- collapsible
62
- collapsibleTrail
63
- fontWeight="bolder"
64
- iconLeft="city"
65
- iconRight={["plus", "minus"]}
66
- link="#"
67
- text="Similar Artists"
68
- {...props}
69
- >
70
- <NavItem
71
- link="#"
72
- text="City"
73
- {...props}
74
- />
75
- <NavItem
76
- link="#"
77
- text="People"
78
- {...props}
79
- />
80
- <NavItem
81
- link="#"
82
- text="Business"
83
- {...props}
84
- />
85
- </NavItem>
86
- </Nav>
87
- );
88
- };
26
+ <>
27
+ <Nav variant='subtle'>
28
+ {navItems.map((text, index) => {
29
+ const [collapsed] = collapsibles[index]
30
+ return (
31
+ <NavItem
32
+ collapsible
33
+ collapsibleClick={() => handleMainClick(index)}
34
+ iconLeft="chevron-down"
35
+ iconRightClick={() => handleIconRightClick(index)}
36
+ id={`collapsible-nav-item-${index + 1}`}
37
+ key={index}
38
+ link="#"
39
+ text={text}
40
+ toggleCollapsed={collapsed}
41
+ {...props}
42
+ >
43
+ <NavItem link="#"
44
+ text="City"
45
+ {...props}
46
+ />
47
+ <NavItem link="#"
48
+ text="People"
49
+ {...props}
50
+ />
51
+ <NavItem link="#"
52
+ text="Business"
53
+ {...props}
54
+ />
55
+ </NavItem>
56
+ );
57
+ })}
58
+ </Nav>
59
+ </>
60
+ )
61
+ }
89
62
 
90
63
  export default CollapsibleNav
@@ -1,15 +1,11 @@
1
1
  import React from "react";
2
2
  import { Nav, NavItem } from '../..'
3
3
 
4
- const CollapsibleNavEmphasize = (props) => {
4
+ const CollapsibleNavCustomIcons = (props) => {
5
5
  return (
6
- <Nav variant="bold">
6
+ <Nav variant="subtle">
7
7
  <NavItem
8
- active
9
- collapsible
10
- collapsibleTrail
11
- fontSize="small"
12
- fontWeight="bolder"
8
+ collapsible
13
9
  iconLeft="city"
14
10
  iconRight={["plus", "minus"]}
15
11
  link="#"
@@ -33,10 +29,8 @@ const CollapsibleNavEmphasize = (props) => {
33
29
  />
34
30
  </NavItem>
35
31
  <NavItem
32
+ active
36
33
  collapsible
37
- collapsibleTrail
38
- fontSize="small"
39
- fontWeight="bolder"
40
34
  iconLeft="theater-masks"
41
35
  iconRight={["plus", "minus"]}
42
36
  link="#"
@@ -61,9 +55,6 @@ const CollapsibleNavEmphasize = (props) => {
61
55
  </NavItem>
62
56
  <NavItem
63
57
  collapsible
64
- collapsibleTrail
65
- fontSize="small"
66
- fontWeight="bolder"
67
58
  iconLeft="city"
68
59
  iconRight={["plus", "minus"]}
69
60
  link="#"
@@ -90,4 +81,4 @@ const CollapsibleNavEmphasize = (props) => {
90
81
  );
91
82
  };
92
83
 
93
- export default CollapsibleNavEmphasize;
84
+ export default CollapsibleNavCustomIcons;
@@ -7,8 +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: Collapsible Nav
11
- - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
10
+ # - collapsible_nav: Subtle With Collapsible
12
11
  - subtle_no_highlight_nav: Subtle No Highlight
13
12
  - bold_vertical_nav: Bold Variant
14
13
  - horizontal_nav: Horizontal Nav
@@ -26,9 +25,8 @@ examples:
26
25
  - borderless_nav: No Borders
27
26
  - subtle_nav: Subtle Variant
28
27
  - subtle_with_icons_nav: Subtle With Icons
29
- - collapsible_nav: Collapsible Nav
30
- - collapsible_nav_emphasize: Collapsible Nav with Emphasize Styling
31
- - collapsible_nav_custom: Collapsible Nav With Custom Toggling
28
+ # - collapsible_nav: Subtle With Collapsible
29
+ # - collapsible_nav_custom_icons: Subtle With Collapsible (No custom toggling)
32
30
  - subtle_no_highlight_nav: Subtle No Highlight
33
31
  - bold_vertical_nav: Bold Variant
34
32
  - horizontal_nav: Horizontal Nav
@@ -14,5 +14,4 @@ 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
16
  export { default as CollapsibleNav } from './_collapsible_nav.jsx'
17
- export { default as CollapsibleNavCustom } from './_collapsible_nav_custom.jsx'
18
- export { default as CollapsibleNavEmphasize } from "./_collapsible_nav_emphasize.jsx"
17
+ export { default as CollapsibleNavCustomIcons } from './_collapsible_nav_custom_icons.jsx'
@@ -2,20 +2,19 @@
2
2
  aria: object.aria,
3
3
  class: object.classname,
4
4
  data: object.data,
5
- dark: object.dark,
6
5
  id: object.id) do %>
7
6
  <% if object.collapsible %>
8
7
  <%= pb_rails("collapsible", props: { name: "collapsible-nav-example" }) do %>
9
- <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark }) do %>
8
+ <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs" }) do %>
10
9
  <%= content_tag(object.tag,
11
10
  object.link ? object.link_options : object.options) do %>
12
11
  <% if object.image_url %>
13
- <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
12
+ <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
14
13
  <% end %>
15
14
  <% if object.icon_left %>
16
- <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left_collapsible", fixed_width: true}) %>
15
+ <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
17
16
  <% end %>
18
- <span class="pb_nav_list_item_text_collapsible">
17
+ <span class="pb_nav_list_item_text">
19
18
  <%= object.text %>
20
19
  </span>
21
20
  <% end %>
@@ -4,16 +4,9 @@ module Playbook
4
4
  module PbNav
5
5
  class Item < Playbook::KitBase
6
6
  prop :active, type: Playbook::Props::Boolean, default: false
7
- prop :font_size, type: Playbook::Props::Enum,
8
- values: %w[normal small],
9
- default: "normal"
10
- prop :font_weight, type: Playbook::Props::Enum,
11
- values: %w[bold regular bolder],
12
- default: "regular"
13
7
  prop :collapsible, type: Playbook::Props::Boolean, default: false
14
8
  prop :link
15
9
  prop :text
16
- prop :collapsible_trail, type: Playbook::Props::Boolean, default: false
17
10
  prop :icon_left
18
11
  prop :icon_right
19
12
  prop :image_url
@@ -22,9 +15,9 @@ module Playbook
22
15
  default: "_self"
23
16
  def classname
24
17
  if collapsible
25
- "#{generate_classname('pb_nav_list_kit_item', active_class)} #{generate_classname('pb_collapsible_nav_item', active_class, collapsible_trail_class)} #{font_size_class} #{font_weight_class}"
18
+ "pb_collapsible_nav_item #{generate_classname('pb_nav_list_kit_item', active_class)}"
26
19
  else
27
- "#{generate_classname('pb_nav_list_kit_item', active_class)} #{font_size_class} #{font_weight_class}"
20
+ generate_classname("pb_nav_list_kit_item", active_class)
28
21
  end
29
22
  end
30
23
 
@@ -34,7 +27,7 @@ module Playbook
34
27
 
35
28
  def options
36
29
  {
37
- class: collapsible ? "pb_nav_list_item_link_collapsible" : "pb_nav_list_item_link",
30
+ class: "pb_nav_list_item_link",
38
31
  }.compact
39
32
  end
40
33
 
@@ -54,25 +47,6 @@ module Playbook
54
47
  def active_class
55
48
  active ? "active" : nil
56
49
  end
57
-
58
- def font_weight_class
59
- case font_weight
60
- when "bold"
61
- "font_bold"
62
- when "bolder"
63
- "font_bolder"
64
- else
65
- "font_regular"
66
- end
67
- end
68
-
69
- def collapsible_trail_class
70
- collapsible_trail ? "collapsible_trail" : nil
71
- end
72
-
73
- def font_size_class
74
- font_size === "small" ? "font_size_small" : "font_size_normal"
75
- end
76
50
  end
77
51
  end
78
52
  end
@@ -0,0 +1,24 @@
1
+ <%= pb_rails("select", props: {
2
+ data: { options: "data_attribute" },
3
+ label: "Favorite Food",
4
+ name: "food",
5
+ options: [
6
+ {
7
+ value: "1",
8
+ value_text: "Burgers",
9
+ },
10
+ {
11
+ value: "2",
12
+ selected: true,
13
+ value_text: "Pizza",
14
+ },
15
+ {
16
+ value: "3",
17
+ value_text: "Tacos",
18
+ },
19
+ {
20
+ value: "4",
21
+ value_text: "BBQ",
22
+ },
23
+ ]
24
+ }) %>
@@ -0,0 +1 @@
1
+ Inspect the element and notice the data-attribute being added to the `<select>` element
@@ -11,6 +11,7 @@ examples:
11
11
  - select_error: Select w/ Error
12
12
  - select_inline: Select Inline
13
13
  - select_inline_compact: Select Inline Compact
14
+ - select_data_attributes: Select W/ Data Attributes
14
15
 
15
16
 
16
17
 
@@ -1,5 +1,4 @@
1
1
  <%= content_tag(:div,
2
- data: object.data,
3
2
  aria: object.aria,
4
3
  class: object.classnames) do %>
5
4
  <% if object.label %>
@@ -24,6 +23,7 @@
24
23
  disabled: object.disabled,
25
24
  required: object.required,
26
25
  multiple: object.multiple,
26
+ data: object.data,
27
27
  onchange: object.onchange,
28
28
  include_blank: object.include_blank,
29
29
  )