playbook_ui 12.38.0.pre.alpha.PLAY966collapsiblenav41086 → 12.38.0.pre.alpha.PLAYaddingdatapropselectkit1080

Sign up to get free protection for your applications and to get access to all the features.
Files changed (39) 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 +25 -101
  15. data/app/pb_kits/playbook/pb_nav/_nav.tsx +1 -22
  16. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +7 -6
  17. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +1 -1
  18. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +58 -85
  19. data/app/pb_kits/playbook/pb_nav/docs/{_collapsible_nav_emphasize.jsx → _collapsible_nav_custom_icons.jsx} +5 -14
  20. data/app/pb_kits/playbook/pb_nav/docs/example.yml +3 -5
  21. data/app/pb_kits/playbook/pb_nav/docs/index.js +1 -2
  22. data/app/pb_kits/playbook/pb_nav/item.html.erb +4 -5
  23. data/app/pb_kits/playbook/pb_nav/item.rb +3 -29
  24. data/app/pb_kits/playbook/pb_select/docs/_select_attributes.html.erb +26 -0
  25. data/app/pb_kits/playbook/pb_select/docs/_select_attributes.md +1 -0
  26. data/app/pb_kits/playbook/pb_select/docs/example.yml +1 -0
  27. data/app/pb_kits/playbook/pb_select/select.html.erb +2 -8
  28. data/app/pb_kits/playbook/pb_select/select.rb +14 -0
  29. data/dist/playbook-rails.js +1 -1
  30. data/lib/playbook/version.rb +1 -1
  31. metadata +4 -10
  32. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx +0 -75
  33. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.md +0 -3
  34. data/app/pb_kits/playbook/pb_nav/_mixins.scss +0 -5
  35. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md +0 -1
  36. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +0 -58
  37. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.md +0 -1
  38. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb +0 -23
  39. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md +0 -1
@@ -7,141 +7,64 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
7
7
  import Icon from '../pb_icon/_icon'
8
8
  import Image from '../pb_image/_image'
9
9
  import Collapsible from '../pb_collapsible/_collapsible'
10
- import { NavChildProps } from './_nav'
11
10
 
12
11
  type NavItemProps = {
13
12
  active?: boolean,
14
13
  aria?: { [key: string]: string },
15
- fontWeight?: "regular" | "bold" | "bolder",
16
14
  children?: React.ReactNode[] | React.ReactNode,
17
15
  className?: string,
18
16
  collapsible?: boolean,
17
+ collapsibleClick?: () => void,
19
18
  data?: object,
20
- dark?: boolean,
21
- fontSize?: "normal" | "small",
22
19
  iconLeft?: string,
23
20
  iconRight?: string | string[],
24
- onIconRightClick?: () => void,
25
- onIconLeftClick?: () => void,
21
+ iconRightClick?: () => void,
22
+ iconLeftClick?: () => void,
26
23
  id?: string,
27
24
  imageUrl?: string,
28
25
  link?: string,
29
- onClick?: () => void,
26
+ onClick?: React.MouseEventHandler<HTMLElement>,
30
27
  target?: '_blank' | '_self' | '_parent' | '_top',
31
28
  text: string,
32
- collapsibleTrail?: boolean,
33
- collapsed?: boolean,
34
- paddingBottom?: string,
35
- paddingTop?: string,
36
- paddingLeft?: string,
37
- paddingRight?: string,
38
- paddingX?: string,
39
- paddingY?: string,
40
- padding?: 'none' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
41
- orientation?: "vertical" | "horizontal",
42
- variant?: "normal" | "subtle",
29
+ toggleCollapsed?: any
43
30
  } & GlobalProps
44
31
 
45
32
  const NavItem = (props: NavItemProps) => {
46
33
  const {
47
34
  active = false,
48
35
  aria = {},
49
- fontWeight = "regular",
50
36
  children,
51
37
  className,
52
38
  collapsible,
39
+ collapsibleClick,
53
40
  data = {},
54
- dark = false,
55
- fontSize = "normal",
56
41
  iconLeft,
57
42
  iconRight,
58
- onIconRightClick,
59
- onIconLeftClick,
43
+ iconRightClick,
44
+ iconLeftClick,
60
45
  id,
61
46
  imageUrl,
62
47
  link,
63
48
  onClick = () => { },
64
49
  target = '_self',
65
50
  text = '',
66
- collapsibleTrail,
67
- collapsed,
68
- // orientation,
69
- // variant,
70
- itemPadding,
71
- padding,
72
- paddingX,
73
- paddingY,
74
- paddingBottom,
75
- paddingTop,
76
- paddingLeft,
77
- paddingRight
51
+ toggleCollapsed
78
52
  } = props
79
53
 
80
- const filteredProps = {...props}
81
- delete filteredProps?.padding
82
- delete filteredProps?.paddingX
83
- delete filteredProps?.paddingY
84
- delete filteredProps?.paddingBottom
85
- delete filteredProps?.paddingTop
86
- delete filteredProps?.paddingRight
87
- delete filteredProps?.paddingLeft
88
-
89
54
  const Tag = link ? 'a' : 'div'
90
55
  const activeClass = active === true ? 'active' : ''
91
- const collapsibleTrailClass = collapsible && collapsibleTrail ? 'collapsible_trail' : ''
92
- const fontSizeClass = fontSize === 'small' ? "font_size_small" : "font_size_normal"
93
- const fontWeightClass = fontWeight === 'bold' ? "font_bold" : fontWeight === 'bolder' ? "font_bolder" : "font_regular"
94
56
  const ariaProps = buildAriaProps(aria)
95
57
  const dataProps = buildDataProps(data)
96
- const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass),
97
- collapsible ? buildCss('pb_collapsible_nav_item', activeClass, collapsibleTrailClass) : '',
98
- fontSizeClass,
99
- fontWeightClass,
100
- globalProps(filteredProps),
101
- className)
102
-
103
- const paddingProps = {
104
- padding,
105
- paddingBottom,
106
- paddingTop,
107
- paddingRight,
108
- paddingLeft,
109
- paddingX,
110
- paddingY,
111
- };
112
-
113
- const finalItemPadding = {
114
- ...(itemPadding || {}),
115
- ...Object.entries(paddingProps).reduce((acc:any, [prop, value]) => {
116
- if (value) {
117
- acc[prop] = value;
118
- }
119
- return acc;
120
- }, {}),
121
- };
58
+ const classes = classnames(buildCss('pb_nav_list_kit_item', activeClass), collapsible ? 'pb_collapsible_nav_item' : '', globalProps(props), className)
122
59
 
123
- const tagClasses = classnames(collapsible ? 'pb_nav_list_item_link_collapsible' : "pb_nav_list_item_link",
124
- globalProps({...finalItemPadding}))
125
60
 
126
61
  const handleIconClick = (e:any) => {
127
- if (onIconLeftClick) {
62
+ if (iconLeftClick) {
128
63
  e.stopPropagation();
129
- onIconLeftClick()
64
+ iconLeftClick()
130
65
  }
131
66
  }
132
67
 
133
- // Map over the children and clone them with itemPadding prop so nested navItems all get itemPadding
134
- const childrenWithProps = React.Children.map(children, (child) => {
135
- if (React.isValidElement(child)) {
136
- const childProps: NavChildProps = {
137
- itemPadding: itemPadding
138
- };
139
- return React.cloneElement(child, childProps);
140
- }
141
- return child;
142
- });
143
-
144
-
145
68
  return (
146
69
  <li
147
70
  {...ariaProps}
@@ -154,19 +77,20 @@ const childrenWithProps = React.Children.map(children, (child) => {
154
77
  <Collapsible icon={iconRight ? iconRight : ['plus','minus']}
155
78
  iconSize="xs"
156
79
  id={id}
157
- collapsed={collapsed}
158
- onIconClick={onIconRightClick}
159
- onClick={onClick}
80
+ collapsed={toggleCollapsed}
81
+ iconClick={iconRightClick}
82
+ onClick={collapsibleClick}
160
83
  >
161
- <Collapsible.Main dark={dark}>
84
+ <Collapsible.Main>
162
85
  <Tag
163
- className={tagClasses}
86
+ className="pb_nav_list_item_link"
164
87
  href={link}
88
+ onClick={onClick}
165
89
  target={target}
166
90
  >
167
91
  {imageUrl &&
168
92
  <div
169
- className="pb_nav_list_item_icon_section_collapsible"
93
+ className="pb_nav_list_item_icon_section"
170
94
  key={imageUrl}
171
95
  onClick={(e)=>handleIconClick(e)}
172
96
  >
@@ -179,30 +103,30 @@ const childrenWithProps = React.Children.map(children, (child) => {
179
103
 
180
104
  {iconLeft &&
181
105
  <div
182
- className="pb_nav_list_item_icon_section_collapsible"
106
+ className="pb_nav_list_item_icon_section"
183
107
  key={iconLeft}
184
108
  onClick={(e)=>handleIconClick(e)}
185
109
  >
186
110
  <Icon
187
- className="pb_nav_list_item_icon_left_collapsible"
111
+ className="pb_nav_list_item_icon_left"
188
112
  fixedWidth
189
113
  icon={iconLeft}
190
114
  />
191
115
  </div>
192
116
  }
193
- <span className="pb_nav_list_item_text_collapsible">
117
+ <span className="pb_nav_list_item_text">
194
118
  {text}
195
119
  </span>
196
120
  </Tag>
197
121
  </Collapsible.Main>
198
122
  <Collapsible.Content>
199
- {childrenWithProps}
123
+ {children}
200
124
  </Collapsible.Content>
201
125
  </Collapsible>
202
126
  ) : (
203
127
  <Tag
204
- className={tagClasses}
205
- href={link}
128
+ className="pb_nav_list_item_link"
129
+ href={link}
206
130
  onClick={onClick}
207
131
  target={target}
208
132
  >
@@ -20,15 +20,8 @@ type NavProps = {
20
20
  link?: string,
21
21
  title?: string,
22
22
  variant?: "normal" | "subtle",
23
- itemPadding?: {padding?: string, paddingBottom?: string, paddingTop?: string, paddingRight?: string, paddingLeft?: string, paddingX?: string, paddingY?: string}
24
23
  } & GlobalProps
25
24
 
26
- export type NavChildProps = {
27
- orientation?: "vertical" | "horizontal";
28
- variant?: "normal" | "subtle";
29
- itemPadding?: {padding?: string, paddingBottom?: string, paddingTop?: string, paddingRight?: string, paddingLeft?: string, paddingX?: string, paddingY?: string}
30
- };
31
-
32
25
  const Nav = (props: NavProps) => {
33
26
  const {
34
27
  aria = {},
@@ -44,7 +37,6 @@ const Nav = (props: NavProps) => {
44
37
  orientation = 'vertical',
45
38
  title = '',
46
39
  variant = 'normal',
47
- itemPadding,
48
40
  } = props
49
41
 
50
42
  const ariaProps = buildAriaProps(aria)
@@ -58,19 +50,6 @@ const Nav = (props: NavProps) => {
58
50
  className
59
51
  )
60
52
 
61
- // Map over the children and clone them with orientation and variant props to gain access to them in navItem
62
- const childrenWithProps = React.Children.map(children, (child) => {
63
- if (React.isValidElement(child)) {
64
- const childProps: NavChildProps = {
65
- orientation: orientation,
66
- variant: variant,
67
- itemPadding: itemPadding
68
- };
69
- return React.cloneElement(child, childProps);
70
- }
71
- return child;
72
- });
73
-
74
53
  return (
75
54
  <nav
76
55
  {...ariaProps}
@@ -93,7 +72,7 @@ const childrenWithProps = React.Children.map(children, (child) => {
93
72
  </a>
94
73
  </div>
95
74
  }
96
- <ul>{childrenWithProps}</ul>
75
+ <ul>{children}</ul>
97
76
  </nav>
98
77
  )
99
78
  }
@@ -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,26 @@
1
+ <%= pb_rails("select", props: {
2
+ attributes: {
3
+ data: { options: "data_attribute" },
4
+ },
5
+ label: "Favorite Food",
6
+ name: "food",
7
+ options: [
8
+ {
9
+ value: "1",
10
+ value_text: "Burgers",
11
+ },
12
+ {
13
+ value: "2",
14
+ selected: true,
15
+ value_text: "Pizza",
16
+ },
17
+ {
18
+ value: "3",
19
+ value_text: "Tacos",
20
+ },
21
+ {
22
+ value: "4",
23
+ value_text: "BBQ",
24
+ },
25
+ ]
26
+ }) %>
@@ -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_attributes: Select W/ Attributes
14
15
 
15
16
 
16
17
 
@@ -1,6 +1,6 @@
1
1
  <%= content_tag(:div,
2
- data: object.data,
3
2
  aria: object.aria,
3
+ data: object.data,
4
4
  class: object.classnames) do %>
5
5
  <% if object.label %>
6
6
  <label class="pb_select_kit_label" for="<%= object.name %>">
@@ -19,13 +19,7 @@
19
19
  selected: object.selected,
20
20
  disabled: object.disabled_options,
21
21
  ),
22
- id: object.id,
23
- prompt: object.blank_selection,
24
- disabled: object.disabled,
25
- required: object.required,
26
- multiple: object.multiple,
27
- onchange: object.onchange,
28
- include_blank: object.include_blank,
22
+ object.all_attributes
29
23
  )
30
24
  %>
31
25
  <%= pb_rails("body", props: { status: "negative", text: object.error }) %>