playbook_ui 13.7.0.pre.alpha.play978makehighchartsadevdependencypoc1223 → 13.8.0.pre.alpha.PLAY1016reactionbuttonemojibug1245

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 3af73a271b14120c123a4d4e31f6b89a82d00a40bdff0e18a614f98713f513da
4
- data.tar.gz: 5ae66cfb76da4695f1c782453139f09730b2f5cfb8a8f8713fa0c3b81aa2ce8a
3
+ metadata.gz: ffbc0de9897a5a39191f65def3ab36d7a9addfba0d1aadafaeafdd49e46cf125
4
+ data.tar.gz: 812f051276f0e616e9840dbcf2e974c2ac674edf2c40be72a3a104f8c201b652
5
5
  SHA512:
6
- metadata.gz: ee3cbba5e1bd7ec6d247d90775f5c231f2523e6ad7b685be4fcca0413b802df399e1dacabf4953cc4b5e505e3a82e7bdf98ce8a0f3e4f23a4d6c8c1e222f2c70
7
- data.tar.gz: 22cd11e1fc810be00b8bce763c90fa22502475b9ed0ed120b53e0b15c6862ce71cc77b79042490950a87c567d95864d559cc16be5995adf89dca617206e66555
6
+ metadata.gz: 570df4d72fdec4376ef4e899e71513012e3653c8ec926b91029f143f3c439dba769fd2840cb6be745ad85dfc835a00a0a39f54c1ead9e576d8dea3443ecd03c4
7
+ data.tar.gz: f5740a5b50db2488cd4c932c00fd5b8324dad33bb6a67daf61a3d10e51b0e0c14fac249fd4d745b2c4dbb067b780111897fd561b9943e7047e2d1c95d97836df
@@ -40,7 +40,7 @@ type ButtonPropTypes = {
40
40
 
41
41
  const isValidEmoji = (emoji: string) => {
42
42
  // Using regular expression to check if the string is a valid emoji/emoji Unicode
43
- const emojiRegex = /^(\p{Emoji}|\uFE0F)+$/u;
43
+ const emojiRegex = /^(\p{Emoji}|\uFE0F|\u200D|\u20E3)+$/u;
44
44
  return emojiRegex.test(emoji);
45
45
  };
46
46
 
@@ -1,5 +1,5 @@
1
1
  <%= pb_rails("button", props: { count: 153, highlight: false, icon: "&#127881;", classname: "count", id: "reaction-button-highlight", variant: "reaction" }) %>
2
- <%= pb_rails("button", props: { count: 5, icon: "😍", variant: "reaction", margin_left: "lg" }) %>
2
+ <%= pb_rails("button", props: { count: 5, icon: "1️⃣", variant: "reaction", margin_left: "lg" }) %>
3
3
  <%= pb_rails("button", props: { variant: "reaction", margin_left: "lg" }) %>
4
4
  <%= pb_rails("button", props: { icon: "user", variant: "reaction", margin_left: "lg" }) %>
5
5
 
@@ -19,7 +19,7 @@ return (
19
19
  />
20
20
  <Button
21
21
  count={5}
22
- icon="😍"
22
+ icon="1️⃣"
23
23
  marginLeft='lg'
24
24
  tabIndex={0}
25
25
  variant="reaction"
@@ -1,4 +1,3 @@
1
-
2
1
  [class^=pb_currency_kit] {
3
2
  &[class*=_center] {
4
3
  & > [class^=pb_caption],
@@ -21,30 +20,43 @@
21
20
  justify-content: flex-end;
22
21
  }
23
22
  }
23
+
24
24
  [class^=pb_currency_wrapper] {
25
25
  display: flex;
26
26
  align-items: baseline;
27
27
 
28
- &[class*=_deemphasized] [class^=pb_body_kit][class*=_light] {
29
- color: $text_lt_default;
30
- }
28
+ &[class*=_deemphasized] {
29
+ [class^=pb_body_kit], [class^=pb_body_kit] {
30
+ &:not([class*=dark]) {
31
+ color: $text_lt_default;
32
+ }
33
+ }
31
34
 
32
- &[class*=_deemphasized] [class^=pb_title_kit][class*=_4] {
33
- font-weight: $regular;
34
- }
35
+ [class^=pb_body_kit][class*=_light] {
36
+ font-weight: $regular;
37
+ }
35
38
 
36
- &[class*=_light] [class^=pb_body_kit][class*=_light] {
37
- color: $text_lt_light;
39
+ [class^=pb_title_kit] {
40
+ font-weight: $lighter;
41
+ }
38
42
  }
39
43
 
40
- &[class*=_light] [class^=pb_title_kit][class*=_4] {
41
- color: $text_lt_light;
42
- font-weight: $regular;
44
+ &[class*=_light] {
45
+ [class^=pb_body_kit], [class^=pb_title_kit] {
46
+ color: $text_lt_light;
47
+ font-weight: $regular;
48
+ }
49
+
50
+ [class^=pb_title_kit].dark {
51
+ color: $text_dk_light;
52
+ }
43
53
  }
44
54
 
45
- &[class*=_bold] [class^=pb_body_kit][class*=_light] {
46
- color: $text_lt_default;
47
- font-weight: $bolder;
55
+ &[class*=_bold] {
56
+ [class^=pb_body_kit], [class^=_light]{
57
+ color: $text_lt_default;
58
+ font-weight: $bolder;
59
+ }
48
60
  }
49
61
 
50
62
  & > [class*=dollar_sign] {
@@ -57,6 +69,14 @@
57
69
  }
58
70
  }
59
71
 
72
+ &[class*=_sm] {
73
+ [class^=pb_currency_wrapper][class*=_deemphasized] {
74
+ [class^=pb_title_kit] {
75
+ font-weight: $regular;
76
+ }
77
+ }
78
+ }
79
+
60
80
  &[class*=_lg] [class^=pb_currency_wrapper] [class*=pb_currency_value] {
61
81
  line-height: .9;
62
82
  padding-left: $space_xs - 7px;
@@ -24,6 +24,7 @@ type CurrencyProps = {
24
24
  symbol?: string,
25
25
  variant?: 'default' | 'light' | 'bold',
26
26
  unit?: string,
27
+ unstyled?: boolean,
27
28
  }
28
29
 
29
30
  const sizes: {lg: 1, md: 3, sm: 4} = {
@@ -49,17 +50,16 @@ const Currency = (props: CurrencyProps) => {
49
50
  symbol = '$',
50
51
  variant = 'default',
51
52
  dark = false,
53
+ unstyled = false,
52
54
  } = props
53
55
 
54
56
  const emphasizedClass = emphasized ? '' : '_deemphasized'
55
57
 
56
58
  let variantClass
57
- if (size === 'sm') {
58
- if (variant === 'light') {
59
- variantClass = '_light'
60
- } else if (variant === 'bold') {
61
- variantClass = '_bold'
62
- }
59
+ if (variant === 'light') {
60
+ variantClass = '_light'
61
+ } else if (variant === 'bold') {
62
+ variantClass = '_bold'
63
63
  }
64
64
 
65
65
  const [whole, decimal = '00'] = amount.split('.')
@@ -99,44 +99,46 @@ const Currency = (props: CurrencyProps) => {
99
99
  className={classes}
100
100
  id={id}
101
101
  >
102
- <Caption>{label}</Caption>
102
+ <Caption dark={dark}>{label}</Caption>
103
103
 
104
104
  <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
105
- <Body
106
- className="dollar_sign"
107
- color="light"
108
- dark={dark}
109
- >
110
- {symbol}
111
- </Body>
112
-
113
- <Title
114
- className="pb_currency_value"
115
- dark={dark}
116
- size={sizes[size]}
117
- >
118
- {getAmount}
119
- </Title>
120
-
121
- <Body
122
- className="unit"
123
- color="light"
124
- dark={dark}
125
- >
126
- {getAbbreviation}
127
- {
128
- unit ? (
129
- <>
130
- {unit}
131
- </>
132
- ) : (
133
- <>
134
- {getDecimalValue}
135
- </>
136
- )
137
- }
138
-
139
- </Body>
105
+ {unstyled ? (
106
+ <>
107
+ <div>{symbol}</div>
108
+ <div>{getAmount}</div>
109
+ <div>
110
+ {getAbbreviation}
111
+ {unit ? unit : getDecimalValue}
112
+ </div>
113
+ </>
114
+ ) : (
115
+ <>
116
+ <Body
117
+ className="dollar_sign"
118
+ color="light"
119
+ dark={dark}
120
+ >
121
+ {symbol}
122
+ </Body>
123
+
124
+ <Title
125
+ className="pb_currency_value"
126
+ dark={dark}
127
+ size={sizes[size]}
128
+ >
129
+ {getAmount}
130
+ </Title>
131
+
132
+ <Body
133
+ className="unit"
134
+ color="light"
135
+ dark={dark}
136
+ >
137
+ {getAbbreviation}
138
+ {unit ? unit : getDecimalValue}
139
+ </Body>
140
+ </>
141
+ )}
140
142
  </div>
141
143
  </div>
142
144
  )
@@ -3,13 +3,19 @@
3
3
  id: object.id,
4
4
  data: object.data,
5
5
  class: object.classname) do %>
6
- <%= pb_rails("caption", props: { text: object.label }) %>
6
+ <%= pb_rails("caption", props: object.caption_props) %>
7
7
 
8
8
  <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
9
- <%= pb_rails("body", props: object.currency_wrapper_props) do %>
10
- <%= object.symbol %>
9
+ <% if object.unstyled %>
10
+ <div><%= object.symbol %></div>
11
+ <div><%= object.title_props[:text] %></div>
12
+ <div><%= object.body_props[:text] %></div>
13
+ <% else %>
14
+ <%= pb_rails("body", props: object.currency_wrapper_props) do %>
15
+ <%= object.symbol %>
16
+ <% end %>
17
+ <%= pb_rails("title", props: object.title_props) %>
18
+ <%= pb_rails("body", props: object.body_props) %>
11
19
  <% end %>
12
- <%= pb_rails("title", props: object.title_props) %>
13
- <%= pb_rails("body", props: object.body_props) %>
14
20
  </div>
15
21
  <% end %>
@@ -40,6 +40,9 @@ module Playbook
40
40
  values: %w[default matching],
41
41
  default: "default"
42
42
 
43
+ prop :unstyled, type: Playbook::Props::Boolean,
44
+ default: false
45
+
43
46
  def classname
44
47
  generate_classname("pb_currency_kit", align, size, dark_class)
45
48
  end
@@ -52,6 +55,13 @@ module Playbook
52
55
  }
53
56
  end
54
57
 
58
+ def caption_props
59
+ {
60
+ text: label,
61
+ dark: dark,
62
+ }
63
+ end
64
+
55
65
  def title_props
56
66
  {
57
67
  size: size_value,
@@ -75,8 +85,6 @@ module Playbook
75
85
  end
76
86
 
77
87
  def variant_class
78
- return unless size == "sm"
79
-
80
88
  case variant
81
89
  when "light"
82
90
  "_light"
@@ -0,0 +1,14 @@
1
+ <%= pb_rails("currency", props: {
2
+ amount: "2,000.50",
3
+ label: "Basic unstyled example",
4
+ margin_bottom: "md",
5
+ unstyled: true
6
+ }) %>
7
+
8
+ <%= pb_rails("title", props: { size: 1 }) do %>
9
+ <%= pb_rails("currency", props: {
10
+ amount: "2,000.50",
11
+ label: "Example with wrapping typography kit",
12
+ unstyled: true
13
+ }) %>
14
+ <% end %>
@@ -0,0 +1,30 @@
1
+ import React from 'react'
2
+ import { Currency, Title } from '../..'
3
+
4
+ const CurrencyUnstyled = (props) => {
5
+ return (
6
+ <>
7
+ <Currency
8
+ amount="2,000.50"
9
+ label="Basic unstyled example"
10
+ marginBottom="md"
11
+ unstyled
12
+ {...props}
13
+ />
14
+
15
+ <Title
16
+ size={1}
17
+ {...props}
18
+ >
19
+ <Currency
20
+ amount="2,000.50"
21
+ label="Example with wrapping typography kit"
22
+ unstyled
23
+ {...props}
24
+ />
25
+ </Title>
26
+ </>
27
+ )
28
+ }
29
+
30
+ export default CurrencyUnstyled
@@ -0,0 +1 @@
1
+ For alternative typography styles, you can pass a boolean prop called `unstyled` to the `Currency` kit and wrap it in any of our typography kits (`Title`, `Body`, `Caption`, etc.). This will allow the `Currency` kit to inherit any of our typography styles.
@@ -13,12 +13,13 @@
13
13
  size: "sm",
14
14
  symbol: "€",
15
15
  variant: "light",
16
+ emphasized: false,
16
17
  }) %>
17
18
 
18
19
  <%= pb_rails("currency", props: {
19
20
  amount: "45",
20
21
  label: "Bold",
21
- size: "lg",
22
+ size: "sm",
22
23
  unit: "/mo",
23
24
  variant: "bold",
24
25
  }) %>
@@ -7,6 +7,7 @@ examples:
7
7
  - currency_no_symbol: No Symbol
8
8
  - currency_abbreviated: Abbreviate Larger Amounts
9
9
  - currency_matching_decimals: Matching Decimals
10
+ - currency_unstyled: Unstyled
10
11
 
11
12
  react:
12
13
  - currency_variants: Variants
@@ -15,3 +16,4 @@ examples:
15
16
  - currency_no_symbol: No Symbol
16
17
  - currency_abbreviated: Abbreviate Larger Amounts
17
18
  - currency_matching_decimals: Matching Decimals
19
+ - currency_unstyled: Unstyled
@@ -4,3 +4,4 @@ export { default as CurrencyAlignment } from './_currency_alignment.jsx'
4
4
  export { default as CurrencyNoSymbol } from './_currency_no_symbol.jsx'
5
5
  export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
6
6
  export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
7
+ export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
@@ -106,7 +106,7 @@ const Icon = (props: IconProps) => {
106
106
 
107
107
  const isValidEmoji = (emoji: string) => {
108
108
  // Using regular expression to check if the string is a valid emoji/emoji Unicode
109
- const emojiRegex = /^(\p{Emoji}|\uFE0F)+$/u;
109
+ const emojiRegex = /^(\p{Emoji}|\uFE0F|\u200D|\u20E3)+$/u;
110
110
  return emojiRegex.test(emoji);
111
111
  };
112
112
 
@@ -12,6 +12,7 @@ import { Spacing } from "../types";
12
12
 
13
13
  type NavItemProps = {
14
14
  active?: boolean;
15
+ highlighted_border?: boolean;
15
16
  aria?: { [key: string]: string };
16
17
  fontWeight?: "regular" | "bold" | "bolder";
17
18
  children?: React.ReactNode[] | React.ReactNode;
@@ -44,7 +45,7 @@ type NavItemProps = {
44
45
  } & GlobalProps;
45
46
 
46
47
  const NavItem = (props: NavItemProps) => {
47
-
48
+
48
49
  const fontWeightDefault = (orientation: string, variant: string) => {
49
50
  return orientation === "horizontal" && variant === "subtle"
50
51
  ? "regular"
@@ -55,6 +56,7 @@ const NavItem = (props: NavItemProps) => {
55
56
 
56
57
  const {
57
58
  active = false,
59
+ highlighted_border = true,
58
60
  aria = {},
59
61
  orientation,
60
62
  variant,
@@ -97,7 +99,7 @@ const NavItem = (props: NavItemProps) => {
97
99
  marginY,
98
100
  };
99
101
 
100
- //separate margin props and padding props in itemSpacing object
102
+ //separate margin props and padding props in itemSpacing object
101
103
  const filterItemSpacing = (obj: { [key: string]: string }) => {
102
104
  const filteredPadding: { [key: string]: string } = {};
103
105
  const filteredMargin: { [key: string]: string } = {};
@@ -114,7 +116,7 @@ const filterItemSpacing = (obj: { [key: string]: string }) => {
114
116
  //deconstruct itemSpacing
115
117
  const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
116
118
 
117
- //if itemSpacing has margin props, apply those, if margin global props passed to navItem itself, navItem props take precendence
119
+ //if itemSpacing has margin props, apply those, if margin global props passed to navItem itself, navItem props take precendence
118
120
  const finalItemSpacing = {
119
121
  ...(filteredMargin || {}),
120
122
  ...Object.entries(spacingMarginProps).reduce((acc: any, [prop, value]) => {
@@ -138,19 +140,20 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
138
140
 
139
141
  const Tag = link ? "a" : "div";
140
142
  const activeClass = active === true ? "active" : "";
143
+ const highlightedBorderClass = active === true && highlighted_border === false ? "highlighted_border_none" : "";
141
144
  const collapsibleTrailClass = collapsible && collapsibleTrail ? "collapsible_trail" : "";
142
145
 
143
146
  const fontSizeMapping = {
144
147
  "small": "font_size_small",
145
148
  "normal": "font_size_normal"
146
149
  };
147
-
150
+
148
151
  const fontWeightMapping = {
149
152
  "bold": "font_bold",
150
153
  "bolder": "font_bolder",
151
154
  "regular": "font_regular"
152
155
  };
153
-
156
+
154
157
  const fontSizeClass = fontSizeMapping[fontSize];
155
158
  const fontWeightClass = fontWeightMapping[fontWeight];
156
159
 
@@ -162,9 +165,9 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
162
165
  );
163
166
 
164
167
  const classes = classnames(
165
- buildCss("pb_nav_list_kit_item", activeClass),
168
+ buildCss("pb_nav_list_kit_item", activeClass, highlightedBorderClass),
166
169
  collapsible
167
- ? buildCss("pb_collapsible_nav_item", activeClass)
170
+ ? buildCss("pb_collapsible_nav_item", activeClass, highlightedBorderClass)
168
171
  : "",
169
172
  fontSizeClass,
170
173
  fontWeightClass,
@@ -192,7 +195,7 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
192
195
  return child;
193
196
  });
194
197
 
195
- const collapsibleClasses = buildCss("collapsible_nav_wrapper", activeClass, collapsibleTrailClass)
198
+ const collapsibleClasses = buildCss("collapsible_nav_wrapper", activeClass, highlightedBorderClass, collapsibleTrailClass)
196
199
 
197
200
  return (
198
201
  <>
@@ -207,7 +210,7 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
207
210
  onIconClick={onIconRightClick}
208
211
  onClick={onClick}
209
212
  >
210
- <Collapsible.Main
213
+ <Collapsible.Main
211
214
  className={globalProps({ ...finalItemSpacing })}
212
215
  dark={dark}>
213
216
  <Tag
@@ -6,6 +6,8 @@ import NavItem from './_item'
6
6
 
7
7
  const navTestId = 'nav'
8
8
  const itemTestId = 'item'
9
+ const activeTestBorderlessId = 'activeborderless'
10
+ const activeTestBorderId = 'active'
9
11
  const navClassName = 'custom-class-name-nav'
10
12
  const itemClassName = 'custom-class-name-item'
11
13
  const navTitle = 'Menu'
@@ -35,6 +37,14 @@ const NavDefault = (props) => {
35
37
  />
36
38
  <NavItem
37
39
  active
40
+ data={{ testid: activeTestBorderId }}
41
+ link="#"
42
+ text="Video"
43
+ />
44
+ <NavItem
45
+ active
46
+ data={{ testid: activeTestBorderlessId }}
47
+ highlighted_border={false}
38
48
  link="#"
39
49
  text="Video"
40
50
  />
@@ -70,6 +80,18 @@ test('should render title', () => {
70
80
  expect(kit).toBeInTheDocument()
71
81
  })
72
82
 
83
+ test('should have a left border', () => {
84
+ render(<NavDefault iconRight="angle-down" />)
85
+ const kit = screen.getByTestId(activeTestBorderId)
86
+ expect(kit).toContainHTML('pb_nav_list_kit_item_active')
87
+ })
88
+
89
+ test('should not have a left border', () => {
90
+ render(<NavDefault iconRight="angle-down" />)
91
+ const kit = screen.getByTestId(activeTestBorderlessId)
92
+ expect(kit).toContainHTML('pb_nav_list_kit_item_active_highlighted_border_none')
93
+ })
94
+
73
95
  test('should have a right icon', () => {
74
96
  render(<NavDefault iconRight="angle-down" />)
75
97
  const kit = screen.getByTestId(itemTestId)
@@ -80,4 +102,4 @@ test('should have a left icon', () => {
80
102
  render(<NavDefault iconLeft="users-class" />)
81
103
  const kit = screen.getByTestId(itemTestId)
82
104
  expect(kit).toContainHTML('<i class="pb_icon_kit far fa-fw fa-users-class pb_nav_list_item_icon_left" />')
83
- })
105
+ })
@@ -41,5 +41,11 @@
41
41
  color: $primary;
42
42
  letter-spacing: normal;
43
43
  }
44
+ &[class*="dark"] {
45
+ [class*="_item_text"],
46
+ [class*="_item_icon"] {
47
+ color: $white !important;
48
+ }
49
+ }
44
50
  }
45
51
  }
@@ -22,6 +22,9 @@ $selector: ".pb_nav_list";
22
22
  border-bottom: 1px solid $border_light;
23
23
  &[class*="_active"] {
24
24
  border-left-color: $primary !important;
25
+ &[class*="_highlighted_border_none"] {
26
+ border-left-width: 0px !important;
27
+ }
25
28
  [class*="_item_icon"] {
26
29
  color: $primary !important;
27
30
  }
@@ -10,6 +10,7 @@ module Playbook
10
10
  prop :font_weight, type: Playbook::Props::Enum,
11
11
  values: %w[bold regular bolder],
12
12
  default: "regular"
13
+ prop :highlighted_border, type: Playbook::Props::Boolean, default: true
13
14
  prop :collapsible, type: Playbook::Props::Boolean, default: false
14
15
  prop :link
15
16
  prop :text
@@ -22,9 +23,9 @@ module Playbook
22
23
  default: "_self"
23
24
  def classname
24
25
  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} pb_nav_list_item_link_collapsible"
26
+ "#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{generate_classname('pb_collapsible_nav_item', active_class, collapsible_trail_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link_collapsible"
26
27
  else
27
- "#{generate_classname('pb_nav_list_kit_item', active_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link"
28
+ "#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link"
28
29
  end
29
30
  end
30
31
 
@@ -96,6 +97,10 @@ module Playbook
96
97
  active ? "active" : nil
97
98
  end
98
99
 
100
+ def highlighted_border_class
101
+ !highlighted_border && active ? "highlighted_border_none" : nil
102
+ end
103
+
99
104
  def font_weight_class
100
105
  case font_weight
101
106
  when "bold"
@@ -24,6 +24,7 @@ $text_align_values: (
24
24
  .pb_th_link:hover {
25
25
  background-color: rgba($primary, 0.03);
26
26
  color: $primary !important;
27
+ border-radius: $border_radius_md;
27
28
  }
28
29
 
29
30
  .pb_th_link, .pb_th_nolink{
@@ -38,13 +39,12 @@ $text_align_values: (
38
39
  }
39
40
  }
40
41
 
41
- [class*="pb_table_header_dropdown"][class*="_vertical"] {
42
- &[class*="_normal"] {
43
- [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
44
- &[class*="_link"] {
45
- border-left-width: 0px;
46
- background-color: #fff !important;
47
- }
48
- }
49
- }
42
+ .header_last_item {
43
+ border-bottom-left-radius: $border_radius_md;
44
+ border-bottom-right-radius: $border_radius_md;
45
+ }
46
+
47
+ .header_first_item {
48
+ border-top-left-radius: $border_radius_md;
49
+ border-top-right-radius: $border_radius_md;
50
50
  }
@@ -28,8 +28,16 @@
28
28
  position: object.placement ,
29
29
  padding: 'none'}) do %>
30
30
  <%= pb_rails("nav", props: {classname: "pb_table_header_dropdown"}) do %>
31
- <% object.sort_menu.each do |item| %>
32
- <%= pb_rails("nav/item", props: { text: item[:item], link: item[:link], icon_right: sort_icon(item[:direction], item[:active]), active: item[:active] }) %>
31
+ <% object.sort_menu.each_with_index do |item, index| %>
32
+ <%= pb_rails("nav/item", props: {
33
+ text: item[:item],
34
+ link: item[:link],
35
+ highlighted_border: false,
36
+ padding: "xs",
37
+ icon_right: sort_icon(item[:direction], item[:active]),
38
+ active: item[:active],
39
+ classname: "header_nav_item #{'header_first_item' if index == 0} #{'header_last_item' if index == object.sort_menu.size - 1}"
40
+ }) %>
33
41
  <% end %>
34
42
  <% end %>
35
43
  <% end %>