playbook_ui 14.1.0 → 14.2.0.pre.alpha.PLAY15063618

Sign up to get free protection for your applications and to get access to all the features.
Files changed (91) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +3 -3
  4. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +1 -1
  5. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss +2 -2
  6. data/app/pb_kits/playbook/pb_badge/_badge.scss +9 -0
  7. data/app/pb_kits/playbook/pb_badge/_badge.tsx +8 -3
  8. data/app/pb_kits/playbook/pb_badge/badge.rb +1 -1
  9. data/app/pb_kits/playbook/pb_badge/badge.test.js +17 -11
  10. data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb +13 -0
  11. data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx +31 -12
  12. data/app/pb_kits/playbook/pb_button/_button.tsx +4 -1
  13. data/app/pb_kits/playbook/pb_button/button.html.erb +1 -1
  14. data/app/pb_kits/playbook/pb_button/button.rb +4 -0
  15. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss +1 -1
  16. data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +2 -2
  17. data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx +5 -1
  18. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +3 -1
  19. data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +20 -1
  20. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -1
  21. data/app/pb_kits/playbook/pb_dialog/dialog_header.rb +4 -0
  22. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +1 -5
  23. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx +46 -0
  24. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -0
  25. data/app/pb_kits/playbook/pb_dialog/docs/index.js +1 -0
  26. data/app/pb_kits/playbook/pb_filter/filter.rb +1 -1
  27. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -0
  28. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +43 -25
  29. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +6 -2
  30. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -2
  31. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +4 -4
  32. data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +4 -0
  33. data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.scss +3 -0
  34. data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx +72 -0
  35. data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +53 -0
  36. data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +7 -0
  37. data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +1 -0
  38. data/app/pb_kits/playbook/pb_gantt_chart/gantt_chart.test.jsx +19 -0
  39. data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -1
  40. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +0 -2
  41. data/app/pb_kits/playbook/pb_pagination/_pagination.scss +49 -13
  42. data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +164 -0
  43. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx +19 -0
  44. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md +1 -0
  45. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +62 -0
  46. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +1 -0
  47. data/app/pb_kits/playbook/pb_pagination/docs/data.js +23 -0
  48. data/app/pb_kits/playbook/pb_pagination/docs/example.yml +3 -1
  49. data/app/pb_kits/playbook/pb_pagination/docs/index.js +2 -0
  50. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +0 -7
  51. data/app/pb_kits/playbook/pb_popover/_popover.tsx +10 -5
  52. data/app/pb_kits/playbook/pb_rich_text_editor/_previewer_mixin.scss +132 -0
  53. data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +50 -76
  54. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx +73 -0
  55. data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +1 -0
  56. data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +2 -1
  57. data/app/pb_kits/playbook/pb_star_rating/index.js +78 -41
  58. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +4 -2
  59. data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +17 -0
  60. data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_display.tsx +0 -2
  61. data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx +0 -1
  62. data/app/pb_kits/playbook/pb_time/_time.tsx +12 -8
  63. data/app/pb_kits/playbook/pb_time/time.html.erb +3 -3
  64. data/app/pb_kits/playbook/pb_time/time.rb +4 -0
  65. data/app/pb_kits/playbook/tokens/_container.scss +21 -0
  66. data/app/pb_kits/playbook/utilities/_min_width.scss +45 -0
  67. data/app/pb_kits/playbook/utilities/globalPropNames.mjs +1 -0
  68. data/app/pb_kits/playbook/utilities/globalProps.ts +20 -3
  69. data/app/pb_kits/playbook/utilities/icons/allicons.tsx +59 -0
  70. data/app/pb_kits/playbook/utilities/icons/clock.svg +9 -0
  71. data/app/pb_kits/playbook/utilities/icons/spinner.svg +3 -0
  72. data/app/pb_kits/playbook/utilities/icons/times.svg +3 -0
  73. data/dist/chunks/_typeahead-Cq7RLPBA.js +22 -0
  74. data/dist/chunks/_weekday_stacked-Cykj5kLZ.js +45 -0
  75. data/dist/chunks/lazysizes-B7xYodB-.js +1 -0
  76. data/dist/chunks/{lib-BE0Z3F7x.js → lib-DErGXNy3.js} +2 -2
  77. data/dist/chunks/{pb_form_validation-TzZQ0Flx.js → pb_form_validation-BC6kh7Hu.js} +1 -1
  78. data/dist/chunks/vendor.js +1 -1
  79. data/dist/menu.yml +4 -0
  80. data/dist/playbook-doc.js +1 -1
  81. data/dist/playbook-rails-react-bindings.js +1 -1
  82. data/dist/playbook-rails.js +1 -1
  83. data/dist/playbook.css +1 -1
  84. data/lib/playbook/classnames.rb +1 -0
  85. data/lib/playbook/spacing.rb +31 -2
  86. data/lib/playbook/version.rb +2 -2
  87. metadata +35 -13
  88. data/dist/chunks/_typeahead-D6PRvP-1.js +0 -22
  89. data/dist/chunks/_weekday_stacked-DbdEuIzh.js +0 -45
  90. data/dist/chunks/lazysizes-DHz07jlL.js +0 -1
  91. /data/app/pb_kits/playbook/pb_pagination/docs/{_pagination_default.md → _pagination_default_rails.md} +0 -0
@@ -3,9 +3,10 @@
3
3
  @import "../tokens/opacity";
4
4
  @import "../tokens/shadows";
5
5
  @import "../pb_avatar/avatar";
6
+ @import "../tokens/typography";
6
7
 
7
8
  $selector: ".pb_form_pill";
8
- $pb_form_pill_height: 37px;
9
+ $pb_form_pill_height: 27px;
9
10
  $form_pill_colors: (
10
11
  primary: map-get($status_color_text, "primary"),
11
12
  neutral: map-get($status_color_text, "neutral"),
@@ -16,18 +17,24 @@ $form_pill_colors: (
16
17
  display: inline-flex;
17
18
  justify-content: center;
18
19
  align-items: center;
19
- padding: 0 calc($space-sm/3);
20
+ padding: 0 calc($space-md/2);
20
21
  height: $pb_form_pill_height;
21
22
  border-radius: calc($pb_form_pill_height/2);
22
23
  margin-bottom: 2px;
23
24
  margin-top: 2px;
24
25
  cursor: pointer;
26
+ .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag{
27
+ font-size: $font_small !important;
28
+ }
25
29
  @each $color_name, $color_value in $form_pill_colors {
26
30
  &[class*=_#{$color_name}] {
27
31
  background-color: mix($color_value, $card_light, 10%);
28
32
  @if ($color_name == "neutral") {
29
33
  background-color: $white;
30
34
  border: 1px solid $border_light;
35
+ .pb_form_pill_icon {
36
+ color: $text_lt_default;
37
+ }
31
38
  }
32
39
  transition: background-color 0.2s ease;
33
40
  box-shadow: none;
@@ -51,20 +58,18 @@ $form_pill_colors: (
51
58
  @if ($color_name == "neutral") {
52
59
  color: $text_lt_default;
53
60
  }
54
- padding-left: $space-sm;
55
- padding-right: calc($space-sm/2);
61
+ padding: 0 $space-xs;
56
62
  }
57
63
  #{$selector}_close {
58
64
  color: $color_value;
59
- padding-left: calc($space-sm/4);
60
- padding-right: calc($space-sm/4);
61
65
  display: flex;
62
66
  align-items: center;
63
- // I had to temporarily change height to 27px so new hover state darker background forms a circle not an oval
64
- // before size change (ticket 2 of 4) - change back to 100% when $pb_form_pill_height changed to 27px from 37px
65
- height: 27px;
66
- border-radius: 70px;
67
+ height: 17px;
68
+ border-radius: calc(50%);
67
69
  cursor: pointer;
70
+ @if ($color_name == "neutral") {
71
+ color: $text_lt_default;
72
+ }
68
73
  &:hover {
69
74
  background-color: mix($color_value, $card_light, 40%);
70
75
  @if ($color_name == "neutral") {
@@ -74,7 +79,7 @@ $form_pill_colors: (
74
79
  }
75
80
  #{$selector}_tag {
76
81
  color: $color_value;
77
- padding-left: $space-sm;
82
+ padding: 0 $space-xs;
78
83
  @if ($color_name == "neutral") {
79
84
  color: $text_lt_default;
80
85
  }
@@ -92,24 +97,37 @@ $form_pill_colors: (
92
97
  .pb_form_pill_icon {
93
98
  height: 12px !important;
94
99
  width: 12px !important;
100
+ padding-right: $space_xs;
101
+ + .pb_form_pill_text, + .pb_form_pill_tag {
102
+ padding-left: 0;
103
+ }
95
104
  }
96
105
  &.small {
97
- height: fit-content;
98
- height: -moz-fit-content;
106
+ height: 17px;
107
+ padding: 0 $space-xs;
99
108
  .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
100
- font-size: $font_base;
101
- font-weight: $regular;
109
+ font-size: $font_smallest !important;
102
110
  }
103
111
  .pb_form_pill_text, .pb_form_pill_tag {
104
112
  line-height: 1.7;
105
- padding-left: $space_xs;
106
- padding-right: 2px;
113
+ padding: 0 $space_xxs;
114
+ }
115
+ .pb_form_pill_close {
116
+ height: 10px;
117
+ border-radius: calc(50%);
107
118
  }
108
- [class^=pb_avatar_kit], [class^=pb_avatar_kit] .avatar_wrapper {
109
- width: 20px;
110
- height: 20px;
111
- flex-basis: 20px;
112
- &::before { line-height: 21px; }
119
+ [class^=pb_avatar_kit] .avatar_wrapper {
120
+ flex-basis: 16px;
121
+ height: 16px;
122
+ margin-top: 2px;
123
+ width: 16px;
124
+ &::before { line-height: 16.5px; }
125
+ }
126
+ .pb_form_pill_icon {
127
+ padding-right: $space_xxs;
128
+ + .pb_form_pill_text, + .pb_form_pill_tag {
129
+ padding-left: 0;
130
+ }
113
131
  }
114
132
  }
115
133
  &.dark {
@@ -118,7 +136,7 @@ $form_pill_colors: (
118
136
  // Primary and Neutral are exceptions to the general rule in the handoff
119
137
  &[class*=_#{$color_name}] {
120
138
  // background-color: mix($color_value, $card_dark, 10%);
121
- // .pb_form_pill_tag {
139
+ // .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
122
140
  // color: $color_name;
123
141
  // }
124
142
  // .pb_form_pill_close {
@@ -136,7 +154,7 @@ $form_pill_colors: (
136
154
  @if ($color_name == "neutral") {
137
155
  background-color: transparent;
138
156
  border: 1px solid $border_dark;
139
- .pb_form_pill_text, .pb_form_pill_tag {
157
+ .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
140
158
  color: $text_dk_default;
141
159
  }
142
160
  .pb_form_pill_close {
@@ -157,7 +175,7 @@ $form_pill_colors: (
157
175
  }
158
176
  @if ($color_name == "primary") {
159
177
  background-color: mix($active_dark, $card_dark, 10%);
160
- .pb_form_pill_text, .pb_form_pill_tag {
178
+ .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
161
179
  color: $active_dark;
162
180
  }
163
181
  .pb_form_pill_close {
@@ -46,6 +46,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
46
46
  } = props
47
47
 
48
48
  const iconClass = icon ? "_icon" : ""
49
+ const closeIconSize = size === "small" ? "xs" : "sm"
49
50
  const css = classnames(
50
51
  `pb_form_pill_kit_${color}${iconClass}`,
51
52
  globalProps(props),
@@ -69,7 +70,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
69
70
  <Avatar
70
71
  imageUrl={avatarUrl}
71
72
  name={name}
72
- size="xs"
73
+ size="xxs"
73
74
  status={null}
74
75
  />
75
76
  <Title
@@ -84,7 +85,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
84
85
  <Avatar
85
86
  imageUrl={avatarUrl}
86
87
  name={name}
87
- size="xs"
88
+ size="xxs"
88
89
  status={null}
89
90
  />
90
91
  <Title
@@ -94,6 +95,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
94
95
  />
95
96
  <Icon
96
97
  className="pb_form_pill_icon"
98
+ color={color}
97
99
  icon={icon}
98
100
  />
99
101
  </>
@@ -102,6 +104,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
102
104
  <>
103
105
  <Icon
104
106
  className="pb_form_pill_icon"
107
+ color={color}
105
108
  icon={icon}
106
109
  />
107
110
  <Title
@@ -126,6 +129,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
126
129
  <Icon
127
130
  fixedWidth
128
131
  icon="times"
132
+ size={closeIconSize}
129
133
  />
130
134
  </div>
131
135
  </div>
@@ -5,11 +5,11 @@ examples:
5
5
  - form_pill_size: Form Pill Size
6
6
  - form_pill_tag: Form Pill Tag
7
7
  - form_pill_example: Example
8
- # - form_pill_icon: Form Pill Icon
8
+ - form_pill_icon: Form Pill Icon
9
9
 
10
10
  react:
11
11
  - form_pill_user: Form Pill User
12
12
  - form_pill_size: Form Pill Size
13
13
  - form_pill_tag: Form Pill Tag
14
14
  - form_pill_example: Example
15
- # - form_pill_icon: Form Pill Icon
15
+ - form_pill_icon: Form Pill Icon
@@ -1,19 +1,19 @@
1
1
  <%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
2
2
  <% if object.name.present? %>
3
- <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xs" }) %>
3
+ <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xxs" }) %>
4
4
  <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
5
5
  <% if object.icon.present? %>
6
- <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
6
+ <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
7
7
  <% end %>
8
8
  <% elsif object.text.present? %>
9
9
  <% if object.icon.present? %>
10
- <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
10
+ <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
11
11
  <% end %>
12
12
  <% if object.text.present? %>
13
13
  <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
14
14
  <% end %>
15
15
  <% end %>
16
16
  <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
17
- <%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %>
17
+ <%= pb_rails("icon", props: { icon: 'times', fixed_width: true, size: object.close_icon_size }) %>
18
18
  <% end %>
19
19
  <% end %>
@@ -32,6 +32,10 @@ module Playbook
32
32
  def icon_class
33
33
  icon ? "icon" : nil
34
34
  end
35
+
36
+ def close_icon_size
37
+ size == "small" ? "xs" : "sm"
38
+ end
35
39
  end
36
40
  end
37
41
  end
@@ -0,0 +1,3 @@
1
+ .pb_gantt_chart {
2
+
3
+ }
@@ -0,0 +1,72 @@
1
+ import React, { useState, useEffect } from "react";
2
+ import classnames from "classnames";
3
+ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
4
+ import { globalProps } from "../utilities/globalProps";
5
+ import HighchartsReact from "highcharts-react-official";
6
+ import Highcharts from "highcharts/highcharts-gantt";
7
+
8
+ import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
9
+ import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
10
+
11
+ type GanttChartProps = {
12
+ aria?: { [key: string]: string };
13
+ className?: string;
14
+ customOptions: Partial<Highcharts.Options>;
15
+ dark?: boolean;
16
+ data?: { [key: string]: string };
17
+ htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
18
+ id?: string;
19
+ };
20
+
21
+ const GanttChart = (props: GanttChartProps) => {
22
+ const {
23
+ aria = {},
24
+ className,
25
+ customOptions = {},
26
+ dark = false,
27
+ data = {},
28
+ htmlOptions = {},
29
+ id,
30
+ } = props;
31
+
32
+ const ariaProps = buildAriaProps(aria);
33
+ const dataProps = buildDataProps(data);
34
+ const htmlProps = buildHtmlProps(htmlOptions);
35
+ const classes = classnames(
36
+ buildCss("pb_gantt_chart"),
37
+ globalProps(props),
38
+ className
39
+ );
40
+
41
+ const [options, setOptions] = useState<Highcharts.Options | undefined>(customOptions);
42
+
43
+ useEffect(() => {
44
+ setOptions(customOptions);
45
+ }, [customOptions]);
46
+
47
+ const setupTheme = () => {
48
+ dark
49
+ ? Highcharts.setOptions(highchartsDarkTheme)
50
+ : Highcharts.setOptions(highchartsTheme);
51
+ };
52
+ setupTheme();
53
+
54
+ return (
55
+ <div>
56
+ <HighchartsReact
57
+ constructorType={"ganttChart"}
58
+ containerProps={{
59
+ className: classnames(globalProps(props), classes),
60
+ id: id,
61
+ ...ariaProps,
62
+ ...dataProps,
63
+ ...htmlProps,
64
+ }}
65
+ highcharts={Highcharts}
66
+ options={options}
67
+ />
68
+ </div>
69
+ );
70
+ };
71
+
72
+ export default GanttChart;
@@ -0,0 +1,53 @@
1
+ import React from "react";
2
+ import { GanttChart } from "playbook-ui";
3
+
4
+ const mockOptions = {
5
+ title: {
6
+ text: "Simple Gantt Chart",
7
+ },
8
+
9
+ xAxis: [
10
+ {
11
+ min: Date.UTC(2014, 10, 17),
12
+ max: Date.UTC(2014, 10, 30),
13
+ },
14
+ ],
15
+
16
+ series: [
17
+ {
18
+ name: "Project 1",
19
+ data: [
20
+ {
21
+ name: "Start prototype",
22
+ start: Date.UTC(2014, 10, 18),
23
+ end: Date.UTC(2014, 10, 25),
24
+ },
25
+ {
26
+ name: "Develop",
27
+ start: Date.UTC(2014, 10, 20),
28
+ end: Date.UTC(2014, 10, 25),
29
+ },
30
+ {
31
+ name: "Run acceptance tests",
32
+ start: Date.UTC(2014, 10, 23),
33
+ end: Date.UTC(2014, 10, 26),
34
+ },
35
+ {
36
+ name: "Test prototype",
37
+ start: Date.UTC(2014, 10, 27),
38
+ end: Date.UTC(2014, 10, 29),
39
+ },
40
+ ],
41
+ },
42
+ ],
43
+ };
44
+
45
+ const GanttChartDefault = (props) => (
46
+ <div>
47
+ <GanttChart customOptions={mockOptions}
48
+ {...props}
49
+ />
50
+ </div>
51
+ );
52
+
53
+ export default GanttChartDefault;
@@ -0,0 +1,7 @@
1
+ examples:
2
+
3
+
4
+ react:
5
+ - gantt_chart_default: Default
6
+
7
+
@@ -0,0 +1 @@
1
+ export { default as GanttChartDefault } from './_gantt_chart_default.jsx'
@@ -0,0 +1,19 @@
1
+ // import { renderKit } from '../utilities/test-utils'
2
+
3
+ // import GanttChart from './_gantt_chart'
4
+
5
+ /* See these resources for more testing info:
6
+ - https://github.com/testing-library/jest-dom#usage for useage and examples
7
+ - https://jestjs.io/docs/en/using-matchers
8
+ */
9
+
10
+ test('generated scaffold test - update me', () => {
11
+ // const props = {
12
+ // data: { testid: 'default' }
13
+ // }
14
+
15
+
16
+ // const kit = renderKit(GanttChart , props)
17
+ // expect(kit).toBeInTheDocument()
18
+ })
19
+
@@ -28,7 +28,7 @@ type IconProps = {
28
28
  data?: {[key: string]: string},
29
29
  fixedWidth?: boolean,
30
30
  flip?: "horizontal" | "vertical" | "both" | "none",
31
- icon: string | ReactSVGElement,
31
+ icon?: string | ReactSVGElement,
32
32
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
33
33
  id?: string,
34
34
  inverse?: boolean,
@@ -469,7 +469,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
469
469
  <FormPill
470
470
  key={index}
471
471
  onClick={(event: any) => handlePillClose(event, item)}
472
- size="small"
473
472
  text={item.label}
474
473
  />
475
474
  ))
@@ -482,7 +481,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
482
481
  <FormPill
483
482
  key={index}
484
483
  onClick={(event: any) => handlePillClose(event, item)}
485
- size="small"
486
484
  text={item.label}
487
485
  />
488
486
  ))
@@ -3,36 +3,45 @@
3
3
  @import "../tokens/border_radius";
4
4
  @import "../tokens/shadows";
5
5
 
6
+
6
7
  $pagination_padding: 7px 13px 6px 13px;
7
8
  $top_bottom_radius: 0px;
8
9
 
10
+ @mixin hover-state {
11
+ background-color: $active_light !important;
12
+ color: $primary;
13
+ border-radius: $border_rad_light;
14
+ }
15
+
9
16
  .pb_pagination {
10
17
  display: inline-block;
11
18
  border-radius: $border_rad_light;
12
19
  border: $border_rad_lightest solid $border_light;
13
20
  background-color: $white;
14
- padding: $space_xxs 0px !important;
15
- li {
21
+ padding: $space_xs 0px !important;
22
+ li, .pagination-number {
16
23
  display: inline;
17
- > a, li > span {
24
+ > a, li > span, .pagination-number {
18
25
  padding: $pagination_padding;
19
26
  text-decoration: none;
20
27
  }}
21
- li:first-child > a, li:first-child > span {
28
+ li:first-child > a, li:first-child > span, .pagination-number, .pagination-left {
29
+ background-color: $white;
22
30
  padding: $pagination_padding;
23
31
  border-right: $border_rad_lightest solid $border_light;
24
32
  z-index: 2;
25
33
  border-top-right-radius: $top_bottom_radius;
26
34
  border-bottom-right-radius: $top_bottom_radius;
35
+ cursor: pointer;
27
36
  }
28
- li:last-child > a, li:last-child > span {
37
+ li:last-child > a, li:last-child > span, .pagination-number, .pagination-right {
29
38
  padding: $pagination_padding;
30
39
  border-left: $border_rad_lightest solid $border_light;
31
40
  z-index: 2;
32
41
  border-top-left-radius: $top_bottom_radius;
33
42
  border-bottom-left-radius: $top_bottom_radius;
34
43
  }
35
- a {
44
+ a, .pagination-number {
36
45
  color: $text_lt_default;
37
46
  font-size: $text_small;
38
47
  font-weight: $regular;
@@ -40,9 +49,7 @@ $top_bottom_radius: 0px;
40
49
  transition: all $transition_default ease-out;
41
50
 
42
51
  &:hover {
43
- background-color: $active_light;
44
- color: $primary;
45
- border-radius: $border_rad_light;
52
+ @include hover-state;
46
53
  }
47
54
 
48
55
  &:focus-visible {
@@ -52,8 +59,8 @@ $top_bottom_radius: 0px;
52
59
  transition: none;
53
60
  }
54
61
  }
55
- .active > span {
56
- background-color: $primary;
62
+ .active > span, .pagination-number.active {
63
+ background-color: $primary !important;
57
64
  border-radius: $border_rad_light;
58
65
  color: #fff;
59
66
  padding: $pagination_padding;
@@ -62,8 +69,37 @@ $top_bottom_radius: 0px;
62
69
  font-weight: $bold;
63
70
  font-size: $text_small;
64
71
  }
65
- .disabled > span {
66
- padding: $pagination_padding;
72
+ .disabled {
73
+ pointer-events: none;
74
+ opacity: 0.5;
75
+ color: grey;
76
+
77
+ & > span {
78
+ padding: $pagination_padding;
79
+ font-size: $text_small;
80
+ }
81
+ }
82
+
83
+ .pagination-right,
84
+ .pagination-left {
85
+ background-color: $white;
86
+ border-top: none;
87
+ border-bottom: none;
88
+ cursor: pointer;
89
+ padding: 7px 11px 6px;
67
90
  font-size: $text_small;
91
+
92
+ &:hover {
93
+ @include hover-state;
94
+ }
95
+ }
96
+ .pagination-left {
97
+ border-left: none;
98
+ margin-right: $space_xxs;
99
+ }
100
+
101
+ .pagination-right {
102
+ border-right: none;
103
+ margin-left: $space_xxs;
68
104
  }
69
105
  }