@conduction/components 2.2.6 → 2.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +4 -0
  2. package/lib/components/Pagination/Pagination.module.css +17 -10
  3. package/lib/components/tableWrapper/TableWrapper.module.css +6 -0
  4. package/lib/components/tabs/Tabs.js +1 -1
  5. package/lib/components/tabs/Tabs.module.css +36 -12
  6. package/package.json +1 -1
  7. package/src/components/Pagination/Pagination.module.css +17 -10
  8. package/src/components/tableWrapper/TableWrapper.module.css +6 -0
  9. package/src/components/tabs/Tabs.module.css +36 -12
  10. package/src/components/tabs/Tabs.tsx +24 -23
package/README.md CHANGED
@@ -4,6 +4,10 @@
4
4
 
5
5
  - **Version 2.2 (breaking changes from 2.1.x)**
6
6
 
7
+ - 2.2.8:
8
+ - Updated Pagination to show current page.
9
+ - Updated Tabs component to have correct border-bottom length.
10
+ - 2.2.7: Updated TableWrapper component and updated Tabs component.
7
11
  - 2.2.6: Added TableWrapper component and updated Tabs component.
8
12
  - 2.2.5: Updated Tabs component.
9
13
  - 2.2.4: Refactor the Tooltip component to include react-tooltip version 5+.
package/lib/components/Pagination/Pagination.module.css CHANGED
@@ -59,9 +59,25 @@
59
59
  user-select: none;
60
60
  }
61
61
 
62
- .container > li:not(.previous):not(.next) > a {
62
+ .container > li.currentPage > a {
63
+ color: var(--conduction-pagination-current-page-color);
64
+ background-color: var(--conduction-pagination-current-page-background-color);
65
+ border: var(--conduction-pagination-current-page-border-width) var(--conduction-pagination-current-page-border-style) var(--conduction-pagination-current-page-border-color);
66
+ border-radius: var(--conduction-pagination-item-border-radius);
67
+ padding-inline-start: var(--conduction-pagination-item-padding-inline-start);
68
+ padding-inline-end: var(--conduction-pagination-item-padding-inline-end);
69
+ padding-block-start: var(--conduction-pagination-item-padding-block-start);
70
+ padding-block-end: var(--conduction-pagination-item-padding-block-end);
71
+ font-size: var(--conduction-pagination-item-font-size);
72
+ font-weight: var(--conduction-pagination-current-page-font-weight);
73
+ font-family: var(--conduction-pagination-item-font-family);
74
+ text-decoration: var(--conduction-pagination-current-page-text-decoration);
75
+ }
76
+
77
+ .container > li:not(.previous):not(.next):not(.currentPage) > a {
63
78
  color: var(--conduction-pagination-item-color);
64
79
  background-color: var(--conduction-pagination-item-background-color);
80
+ border: var(--conduction-pagination-item-border-width) var(--conduction-pagination-item-border-style) var(--conduction-pagination-item-border-color);
65
81
  border-radius: var(--conduction-pagination-item-border-radius);
66
82
  padding-inline-start: var(--conduction-pagination-item-padding-inline-start);
67
83
  padding-inline-end: var(--conduction-pagination-item-padding-inline-end);
@@ -70,21 +86,12 @@
70
86
  font-size: var(--conduction-pagination-item-font-size);
71
87
  font-weight: var(--conduction-pagination-item-font-weight);
72
88
  font-family: var(--conduction-pagination-item-font-family);
73
- border: var(--conduction-pagination-item-border-width) var(--conduction-pagination-item-border-style) var(--conduction-pagination-item-border-color);
74
89
  }
75
90
 
76
91
  .button {
77
92
  pointer-events: none;
78
93
  }
79
94
 
80
- .container > li.currentPage > a {
81
- color: var(--conduction-pagination-current-page-color);
82
- background-color: var(--conduction-pagination-current-page-background-color);
83
- font-weight: var(--conduction-pagination-current-page-font-weight);
84
- text-decoration: var(--conduction-pagination-current-page-text-decoration);
85
- border: var(--conduction-pagination-current-page-border-width) var(--conduction-pagination-current-page-border-style) var(--conduction-pagination-current-page-border-color);
86
- }
87
-
88
95
  .disabled:hover,
89
96
  .currentPage:hover {
90
97
  cursor: not-allowed;
package/lib/components/tableWrapper/TableWrapper.module.css CHANGED
@@ -5,6 +5,9 @@
5
5
  --conduction-table-wrapper-scroll-button-padding-inline-end: 14px;
6
6
  /* --conduction-table-wrapper-scroll-button-padding-block-start: 10px; */
7
7
  /* --conduction-table-wrapper-scroll-button-padding-block-end: 10px; */
8
+ /* --conduction-table-wrapper-scroll-button-border-color: 1px; */
9
+ /* --conduction-table-wrapper-scroll-button-border-color: solid; */
10
+ /* --conduction-table-wrapper-scroll-button-border-color: #000000; */
8
11
 
9
12
  --conduction-table-wrapper-scroll-button-hover-background-color: #ffffff;
10
13
  --conduction-table-wrapper-scroll-button-hover-color: #4376fc;
@@ -32,6 +35,9 @@
32
35
  padding-inline-end: var(--conduction-table-wrapper-scroll-button-padding-inline-end);
33
36
  padding-block-start: var(--conduction-table-wrapper-scroll-button-padding-block-start);
34
37
  padding-block-end: var(--conduction-table-wrapper-scroll-button-padding-block-end);
38
+ border-width:var(--conduction-table-wrapper-scroll-button-border-width) ;
39
+ border-style:var(--conduction-table-wrapper-scroll-button-border-style) ;
40
+ border-color:var(--conduction-table-wrapper-scroll-button-border-color) ;
35
41
  }
36
42
 
37
43
  .scrollLeftButton:hover,
package/lib/components/tabs/Tabs.js CHANGED
@@ -32,7 +32,7 @@ export const TabList = ({ children, ...otherProps }) => {
32
32
  setCanScrollRight(wrapperRef.current.scrollWidth > wrapperRef.current.clientWidth); // initiate scroll
33
33
  }
34
34
  }, []);
35
- return (_jsx("div", { className: styles.container, children: _jsx("div", { onScroll: handleScroll, ref: wrapperRef, className: clsx(styles.wrapper), children: _jsx("div", { className: styles.tabListContainer, children: _jsxs(RTabList, { className: styles.tabList, ...otherProps, children: [canScrollLeft && (_jsx(RTab, { onClick: handleScrollLeft, className: clsx(canScrollLeft && styles.scrollLeftButton, styles.tabButton), children: _jsx("span", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }) })), children, canScrollRight && (_jsx(RTab, { onClick: handleScrollRight, className: clsx(canScrollRight && styles.scrollRightButton, styles.tabButton), children: _jsx("span", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }) }))] }) }) }) }));
35
+ return (_jsx("div", { className: styles.container, children: _jsx("div", { onScroll: handleScroll, ref: wrapperRef, className: clsx(styles.wrapper), children: _jsxs("div", { className: styles.tabListContainer, children: [canScrollLeft && (_jsx("div", { onClick: handleScrollLeft, className: clsx(canScrollLeft && styles.scrollLeftButton, styles.tabButton), children: _jsx("span", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }) })), _jsx(RTabList, { className: clsx(canScrollRight || canScrollLeft ? styles.tabListOverflow : styles.tabList), ...otherProps, children: children }), canScrollRight && (_jsx("div", { onClick: handleScrollRight, className: clsx(canScrollRight && styles.scrollRightButton, styles.tabButton), children: _jsx("span", { className: styles.scrollButton, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }) }))] }) }) }));
36
36
  };
37
37
  TabList.tabsRole = "TabList";
38
38
  // Tab
package/lib/components/tabs/Tabs.module.css CHANGED
@@ -21,10 +21,13 @@
21
21
  /* --conduction-tabs-tab-letter-spacing: 0.02857em; */
22
22
  /* --conduction-tabs-tab-text-transform: uppercase; */
23
23
 
24
- --conduction-tabs-scrollButton-background-color: #ffffff;
25
- --conduction-tabs-scrollButton-color: #4a4a4a;
26
- --conduction-tabs-scrollButton-hover-background-color: #ffffff;
27
- --conduction-tabs-scrollButton-hover-color: #4376fc;
24
+ --conduction-tabs-scroll-button-background-color: #ffffff;
25
+ --conduction-tabs-scroll-button-color: #4a4a4a;
26
+ --conduction-tabs-scroll-button-hover-background-color: #ffffff;
27
+ --conduction-tabs-scroll-button-hover-color: #4376fc;
28
+ /* --conduction-tabs-scroll-button-border-width: 1px; */
29
+ /* --conduction-tabs-scroll-button-border-style: solid; */
30
+ /* --conduction-tabs-scroll-button-border-color: #4376fc; */
28
31
 
29
32
  --conduction-tabs-tab-selected-background-color: #ffffff;
30
33
  --conduction-tabs-tab-selected-color: #4a4a4a;
@@ -88,13 +91,13 @@
88
91
  padding-block-end: var(--conduction-tabs-tab-padding-block-end);
89
92
  padding-inline-start: var(--conduction-tabs-tab-padding-inline-start);
90
93
  padding-inline-end: var(--conduction-tabs-tab-padding-inline-end);
91
- margin-inline-end: var(--conduction-tabs-tab-margin-inline-end);
92
94
  font-size: var(--conduction-tabs-tab-font-size);
93
95
  font-weight: var(--conduction-tabs-tab-font-weight);
94
96
  font-family: var(--conduction-tabs-tab-font-family);
95
97
  min-height: var(--conduction-tabs-tab-min-height);
96
98
  letter-spacing: var(--conduction-tabs-tab-letter-spacing);
97
99
  text-transform: var(--conduction-tabs-tab-text-transform);
100
+ flex-shrink: 0;
98
101
  }
99
102
 
100
103
  .tabButton {
@@ -108,14 +111,16 @@
108
111
  text-align: center;
109
112
  white-space: normal;
110
113
 
111
- background-color: var(--conduction-tabs-scrollButton-background-color);
112
- color: var(--conduction-tabs-tabButton-color);
114
+ border-width: var(--conduction-tabs-scroll-button-border-width, var(--conduction-tabs-tab-border-width));
115
+ border-style: var(--conduction-tabs-scroll-button-border-style, var(--conduction-tabs-tab-border-style));
116
+ border-color: var(--conduction-tabs-scroll-button-border-color, var(--conduction-tabs-tab-border-color));
117
+ background-color: var(--conduction-tabs-scroll-button-background-color);
118
+ color: var(--conduction-tabs-tab-button-color);
113
119
  bottom: var(--conduction-tabs-tab-bottom);
114
120
  padding-block-start: var(--conduction-tabs-tab-padding-block-start);
115
121
  padding-block-end: var(--conduction-tabs-tab-padding-block-end);
116
122
  padding-inline-start: var(--conduction-tabs-tab-padding-inline-start);
117
123
  padding-inline-end: var(--conduction-tabs-tab-padding-inline-end);
118
- margin-inline-end: var(--conduction-tabs-tab-margin-inline-end);
119
124
  font-size: var(--conduction-tabs-tab-font-size);
120
125
  font-weight: var(--conduction-tabs-tab-font-weight);
121
126
  font-family: var(--conduction-tabs-tab-font-family);
@@ -124,9 +129,13 @@
124
129
  text-transform: var(--conduction-tabs-tab-text-transform);
125
130
  }
126
131
 
132
+ .tabButton:hover {
133
+ background-color: var(--conduction-tabs-scroll-button-hover-background-color);
134
+ color: var(--conduction-tabs-scroll-button-hover-color);
135
+ }
127
136
  .tabButton:hover > * {
128
- background-color: var(--conduction-tabs-scrollButton-hover-background-color);
129
- color: var(--conduction-tabs-scrollButton-hover-color);
137
+ background-color: var(--conduction-tabs-scroll-button-hover-background-color);
138
+ color: var(--conduction-tabs-scroll-button-hover-color);
130
139
  }
131
140
 
132
141
  .tabListContainer {
@@ -167,6 +176,21 @@
167
176
  border-bottom-width: var(--conduction-tabs-tab-list-border-bottom-width);
168
177
  border-bottom-style: var(--conduction-tabs-tab-list-border-bottom-style);
169
178
  border-bottom-color: var(--conduction-tabs-tab-list-border-bottom-color);
179
+ width: auto;
180
+ }
181
+
182
+ .tabListOverflow {
183
+ display: flex;
184
+ padding-inline-start: var(--conduction-tabs-tab-list-padding-inline-start);
185
+ margin-block-end: var(--conduction-tabs-tab-list-margin-block-end);
186
+ border-bottom-width: var(--conduction-tabs-tab-list-border-bottom-width);
187
+ border-bottom-style: var(--conduction-tabs-tab-list-border-bottom-style);
188
+ border-bottom-color: var(--conduction-tabs-tab-list-border-bottom-color);
189
+ width: max-content;
190
+ }
191
+
192
+ .tabList :not(:last-child) {
193
+ margin-inline-end: var(--conduction-tabs-tab-margin-inline-end);
170
194
  }
171
195
 
172
196
  /* TabPanel */
@@ -183,8 +207,8 @@
183
207
  }
184
208
 
185
209
  .scrollButton {
186
- background-color: var(--conduction-tabs-scrollButton-background-color);
187
- color: var(--conduction-tabs-scrollButton-color);
210
+ background-color: var(--conduction-tabs-scroll-button-background-color);
211
+ color: var(--conduction-tabs-scroll-button-color);
188
212
  }
189
213
 
190
214
  .container {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "2.2.6",
3
+ "version": "2.2.8",
4
4
  "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
package/src/components/Pagination/Pagination.module.css CHANGED
@@ -59,9 +59,25 @@
59
59
  user-select: none;
60
60
  }
61
61
 
62
- .container > li:not(.previous):not(.next) > a {
62
+ .container > li.currentPage > a {
63
+ color: var(--conduction-pagination-current-page-color);
64
+ background-color: var(--conduction-pagination-current-page-background-color);
65
+ border: var(--conduction-pagination-current-page-border-width) var(--conduction-pagination-current-page-border-style) var(--conduction-pagination-current-page-border-color);
66
+ border-radius: var(--conduction-pagination-item-border-radius);
67
+ padding-inline-start: var(--conduction-pagination-item-padding-inline-start);
68
+ padding-inline-end: var(--conduction-pagination-item-padding-inline-end);
69
+ padding-block-start: var(--conduction-pagination-item-padding-block-start);
70
+ padding-block-end: var(--conduction-pagination-item-padding-block-end);
71
+ font-size: var(--conduction-pagination-item-font-size);
72
+ font-weight: var(--conduction-pagination-current-page-font-weight);
73
+ font-family: var(--conduction-pagination-item-font-family);
74
+ text-decoration: var(--conduction-pagination-current-page-text-decoration);
75
+ }
76
+
77
+ .container > li:not(.previous):not(.next):not(.currentPage) > a {
63
78
  color: var(--conduction-pagination-item-color);
64
79
  background-color: var(--conduction-pagination-item-background-color);
80
+ border: var(--conduction-pagination-item-border-width) var(--conduction-pagination-item-border-style) var(--conduction-pagination-item-border-color);
65
81
  border-radius: var(--conduction-pagination-item-border-radius);
66
82
  padding-inline-start: var(--conduction-pagination-item-padding-inline-start);
67
83
  padding-inline-end: var(--conduction-pagination-item-padding-inline-end);
@@ -70,21 +86,12 @@
70
86
  font-size: var(--conduction-pagination-item-font-size);
71
87
  font-weight: var(--conduction-pagination-item-font-weight);
72
88
  font-family: var(--conduction-pagination-item-font-family);
73
- border: var(--conduction-pagination-item-border-width) var(--conduction-pagination-item-border-style) var(--conduction-pagination-item-border-color);
74
89
  }
75
90
 
76
91
  .button {
77
92
  pointer-events: none;
78
93
  }
79
94
 
80
- .container > li.currentPage > a {
81
- color: var(--conduction-pagination-current-page-color);
82
- background-color: var(--conduction-pagination-current-page-background-color);
83
- font-weight: var(--conduction-pagination-current-page-font-weight);
84
- text-decoration: var(--conduction-pagination-current-page-text-decoration);
85
- border: var(--conduction-pagination-current-page-border-width) var(--conduction-pagination-current-page-border-style) var(--conduction-pagination-current-page-border-color);
86
- }
87
-
88
95
  .disabled:hover,
89
96
  .currentPage:hover {
90
97
  cursor: not-allowed;
package/src/components/tableWrapper/TableWrapper.module.css CHANGED
@@ -5,6 +5,9 @@
5
5
  --conduction-table-wrapper-scroll-button-padding-inline-end: 14px;
6
6
  /* --conduction-table-wrapper-scroll-button-padding-block-start: 10px; */
7
7
  /* --conduction-table-wrapper-scroll-button-padding-block-end: 10px; */
8
+ /* --conduction-table-wrapper-scroll-button-border-color: 1px; */
9
+ /* --conduction-table-wrapper-scroll-button-border-color: solid; */
10
+ /* --conduction-table-wrapper-scroll-button-border-color: #000000; */
8
11
 
9
12
  --conduction-table-wrapper-scroll-button-hover-background-color: #ffffff;
10
13
  --conduction-table-wrapper-scroll-button-hover-color: #4376fc;
@@ -32,6 +35,9 @@
32
35
  padding-inline-end: var(--conduction-table-wrapper-scroll-button-padding-inline-end);
33
36
  padding-block-start: var(--conduction-table-wrapper-scroll-button-padding-block-start);
34
37
  padding-block-end: var(--conduction-table-wrapper-scroll-button-padding-block-end);
38
+ border-width:var(--conduction-table-wrapper-scroll-button-border-width) ;
39
+ border-style:var(--conduction-table-wrapper-scroll-button-border-style) ;
40
+ border-color:var(--conduction-table-wrapper-scroll-button-border-color) ;
35
41
  }
36
42
 
37
43
  .scrollLeftButton:hover,
package/src/components/tabs/Tabs.module.css CHANGED
@@ -21,10 +21,13 @@
21
21
  /* --conduction-tabs-tab-letter-spacing: 0.02857em; */
22
22
  /* --conduction-tabs-tab-text-transform: uppercase; */
23
23
 
24
- --conduction-tabs-scrollButton-background-color: #ffffff;
25
- --conduction-tabs-scrollButton-color: #4a4a4a;
26
- --conduction-tabs-scrollButton-hover-background-color: #ffffff;
27
- --conduction-tabs-scrollButton-hover-color: #4376fc;
24
+ --conduction-tabs-scroll-button-background-color: #ffffff;
25
+ --conduction-tabs-scroll-button-color: #4a4a4a;
26
+ --conduction-tabs-scroll-button-hover-background-color: #ffffff;
27
+ --conduction-tabs-scroll-button-hover-color: #4376fc;
28
+ /* --conduction-tabs-scroll-button-border-width: 1px; */
29
+ /* --conduction-tabs-scroll-button-border-style: solid; */
30
+ /* --conduction-tabs-scroll-button-border-color: #4376fc; */
28
31
 
29
32
  --conduction-tabs-tab-selected-background-color: #ffffff;
30
33
  --conduction-tabs-tab-selected-color: #4a4a4a;
@@ -88,13 +91,13 @@
88
91
  padding-block-end: var(--conduction-tabs-tab-padding-block-end);
89
92
  padding-inline-start: var(--conduction-tabs-tab-padding-inline-start);
90
93
  padding-inline-end: var(--conduction-tabs-tab-padding-inline-end);
91
- margin-inline-end: var(--conduction-tabs-tab-margin-inline-end);
92
94
  font-size: var(--conduction-tabs-tab-font-size);
93
95
  font-weight: var(--conduction-tabs-tab-font-weight);
94
96
  font-family: var(--conduction-tabs-tab-font-family);
95
97
  min-height: var(--conduction-tabs-tab-min-height);
96
98
  letter-spacing: var(--conduction-tabs-tab-letter-spacing);
97
99
  text-transform: var(--conduction-tabs-tab-text-transform);
100
+ flex-shrink: 0;
98
101
  }
99
102
 
100
103
  .tabButton {
@@ -108,14 +111,16 @@
108
111
  text-align: center;
109
112
  white-space: normal;
110
113
 
111
- background-color: var(--conduction-tabs-scrollButton-background-color);
112
- color: var(--conduction-tabs-tabButton-color);
114
+ border-width: var(--conduction-tabs-scroll-button-border-width, var(--conduction-tabs-tab-border-width));
115
+ border-style: var(--conduction-tabs-scroll-button-border-style, var(--conduction-tabs-tab-border-style));
116
+ border-color: var(--conduction-tabs-scroll-button-border-color, var(--conduction-tabs-tab-border-color));
117
+ background-color: var(--conduction-tabs-scroll-button-background-color);
118
+ color: var(--conduction-tabs-tab-button-color);
113
119
  bottom: var(--conduction-tabs-tab-bottom);
114
120
  padding-block-start: var(--conduction-tabs-tab-padding-block-start);
115
121
  padding-block-end: var(--conduction-tabs-tab-padding-block-end);
116
122
  padding-inline-start: var(--conduction-tabs-tab-padding-inline-start);
117
123
  padding-inline-end: var(--conduction-tabs-tab-padding-inline-end);
118
- margin-inline-end: var(--conduction-tabs-tab-margin-inline-end);
119
124
  font-size: var(--conduction-tabs-tab-font-size);
120
125
  font-weight: var(--conduction-tabs-tab-font-weight);
121
126
  font-family: var(--conduction-tabs-tab-font-family);
@@ -124,9 +129,13 @@
124
129
  text-transform: var(--conduction-tabs-tab-text-transform);
125
130
  }
126
131
 
132
+ .tabButton:hover {
133
+ background-color: var(--conduction-tabs-scroll-button-hover-background-color);
134
+ color: var(--conduction-tabs-scroll-button-hover-color);
135
+ }
127
136
  .tabButton:hover > * {
128
- background-color: var(--conduction-tabs-scrollButton-hover-background-color);
129
- color: var(--conduction-tabs-scrollButton-hover-color);
137
+ background-color: var(--conduction-tabs-scroll-button-hover-background-color);
138
+ color: var(--conduction-tabs-scroll-button-hover-color);
130
139
  }
131
140
 
132
141
  .tabListContainer {
@@ -167,6 +176,21 @@
167
176
  border-bottom-width: var(--conduction-tabs-tab-list-border-bottom-width);
168
177
  border-bottom-style: var(--conduction-tabs-tab-list-border-bottom-style);
169
178
  border-bottom-color: var(--conduction-tabs-tab-list-border-bottom-color);
179
+ width: auto;
180
+ }
181
+
182
+ .tabListOverflow {
183
+ display: flex;
184
+ padding-inline-start: var(--conduction-tabs-tab-list-padding-inline-start);
185
+ margin-block-end: var(--conduction-tabs-tab-list-margin-block-end);
186
+ border-bottom-width: var(--conduction-tabs-tab-list-border-bottom-width);
187
+ border-bottom-style: var(--conduction-tabs-tab-list-border-bottom-style);
188
+ border-bottom-color: var(--conduction-tabs-tab-list-border-bottom-color);
189
+ width: max-content;
190
+ }
191
+
192
+ .tabList :not(:last-child) {
193
+ margin-inline-end: var(--conduction-tabs-tab-margin-inline-end);
170
194
  }
171
195
 
172
196
  /* TabPanel */
@@ -183,8 +207,8 @@
183
207
  }
184
208
 
185
209
  .scrollButton {
186
- background-color: var(--conduction-tabs-scrollButton-background-color);
187
- color: var(--conduction-tabs-scrollButton-color);
210
+ background-color: var(--conduction-tabs-scroll-button-background-color);
211
+ color: var(--conduction-tabs-scroll-button-color);
188
212
  }
189
213
 
190
214
  .container {
package/src/components/tabs/Tabs.tsx CHANGED
@@ -58,31 +58,32 @@ export const TabList: ReactTabsFunctionComponent<TabListProps> = ({ children, ..
58
58
  <div className={styles.container}>
59
59
  <div onScroll={handleScroll} ref={wrapperRef} className={clsx(styles.wrapper)}>
60
60
  <div className={styles.tabListContainer}>
61
- <RTabList className={styles.tabList} {...otherProps}>
62
- {canScrollLeft && (
63
- <RTab
64
- onClick={handleScrollLeft}
65
- className={clsx(canScrollLeft && styles.scrollLeftButton, styles.tabButton)}
66
- >
67
- <span className={styles.scrollButton}>
68
- <FontAwesomeIcon icon={faChevronLeft} />
69
- </span>
70
- </RTab>
71
- )}
72
-
61
+ {canScrollLeft && (
62
+ <div
63
+ onClick={handleScrollLeft}
64
+ className={clsx(canScrollLeft && styles.scrollLeftButton, styles.tabButton)}
65
+ >
66
+ <span className={styles.scrollButton}>
67
+ <FontAwesomeIcon icon={faChevronLeft} />
68
+ </span>
69
+ </div>
70
+ )}
71
+ <RTabList
72
+ className={clsx(canScrollRight || canScrollLeft ? styles.tabListOverflow : styles.tabList)}
73
+ {...otherProps}
74
+ >
73
75
  {children}
74
-
75
- {canScrollRight && (
76
- <RTab
77
- onClick={handleScrollRight}
78
- className={clsx(canScrollRight && styles.scrollRightButton, styles.tabButton)}
79
- >
80
- <span className={styles.scrollButton}>
81
- <FontAwesomeIcon icon={faChevronRight} />
82
- </span>
83
- </RTab>
84
- )}
85
76
  </RTabList>
77
+ {canScrollRight && (
78
+ <div
79
+ onClick={handleScrollRight}
80
+ className={clsx(canScrollRight && styles.scrollRightButton, styles.tabButton)}
81
+ >
82
+ <span className={styles.scrollButton}>
83
+ <FontAwesomeIcon icon={faChevronRight} />
84
+ </span>
85
+ </div>
86
+ )}
86
87
  </div>
87
88
  </div>
88
89
  </div>