carbon-react 112.0.2 → 112.0.4

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 (11) hide show
  1. package/esm/components/pages/page/page.component.d.ts +3 -1
  2. package/esm/components/pages/page/page.component.js +4 -1
  3. package/esm/components/pages/page/page.style.d.ts +1 -1
  4. package/esm/components/pages/page/page.style.js +1 -1
  5. package/esm/components/tabs/__internal__/tab-title/tab-title.style.js +96 -92
  6. package/lib/components/pages/page/page.component.d.ts +3 -1
  7. package/lib/components/pages/page/page.component.js +4 -1
  8. package/lib/components/pages/page/page.style.d.ts +1 -1
  9. package/lib/components/pages/page/page.style.js +1 -1
  10. package/lib/components/tabs/__internal__/tab-title/tab-title.style.js +96 -92
  11. package/package.json +1 -1
package/esm/components/pages/page/page.component.d.ts CHANGED
@@ -5,11 +5,13 @@ export interface PageProps extends PaddingProps {
5
5
  title: React.ReactNode;
6
6
  /** This component supports children. */
7
7
  children: React.ReactNode;
8
+ /** The ARIA role to be applied to the component */
9
+ role?: string;
8
10
  /** @ignore @private */
9
11
  transitionName?: () => string;
10
12
  }
11
13
  declare const Page: {
12
- ({ title, children, ...rest }: PageProps): JSX.Element;
14
+ ({ role, title, children, ...rest }: PageProps): JSX.Element;
13
15
  displayName: string;
14
16
  };
15
17
  export default Page;
package/esm/components/pages/page/page.component.js CHANGED
@@ -10,6 +10,7 @@ import { StyledPage, StyledPageContent } from "./page.style";
10
10
  import { filterStyledSystemPaddingProps } from "../../../style/utils";
11
11
 
12
12
  const Page = ({
13
+ role,
13
14
  title,
14
15
  children,
15
16
  ...rest
@@ -30,7 +31,8 @@ const Page = ({
30
31
  }, {
31
32
  nodeRef: styledPageNodeRef
32
33
  }, rest), /*#__PURE__*/React.createElement(StyledPage, _extends({}, tagComponent("page", rest), {
33
- ref: styledPageNodeRef
34
+ ref: styledPageNodeRef,
35
+ role: role
34
36
  }), /*#__PURE__*/React.createElement(FullScreenHeading, {
35
37
  hasContent: true
36
38
  }, title), /*#__PURE__*/React.createElement(StyledPageContent, _extends({
@@ -201,6 +203,7 @@ Page.propTypes = {
201
203
  "toString": PropTypes.func.isRequired,
202
204
  "valueOf": PropTypes.func.isRequired
203
205
  }), PropTypes.string]),
206
+ "role": PropTypes.string,
204
207
  "title": PropTypes.node,
205
208
  "transitionName": PropTypes.func
206
209
  };
package/esm/components/pages/page/page.style.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- declare const StyledPage: import("styled-components").StyledComponent<"article", any, {}, never>;
1
+ declare const StyledPage: import("styled-components").StyledComponent<"div", any, {}, never>;
2
2
  declare const StyledPageContent: import("styled-components").StyledComponent<"div", any, {}, never>;
3
3
  export { StyledPage, StyledPageContent };
package/esm/components/pages/page/page.style.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import styled from "styled-components";
2
2
  import { padding } from "styled-system";
3
3
  import BaseTheme from "../../../style/themes/base";
4
- const StyledPage = styled.article`
4
+ const StyledPage = styled.div`
5
5
  width: 100%;
6
6
  height: 100%;
7
7
  `;
package/esm/components/tabs/__internal__/tab-title/tab-title.style.js CHANGED
@@ -237,136 +237,140 @@ const StyledTabTitle = styled.button`
237
237
  isInSidebar
238
238
  }) => css`
239
239
  height: ${size === "large" ? "var(--sizing600)" : "var(--sizing500)"};
240
-
240
+
241
241
  ${position === "top" && css`
242
- ${borders && !(noRightBorder || noLeftBorder) && css`
243
- &:nth-of-type(n + 1) {
244
- margin-left: -1px;
245
- }
246
- &:first-child {
247
- margin-left: 0;
248
- }
249
- `}
242
+ ${borders && !(noRightBorder || noLeftBorder) && css`
243
+ &:nth-of-type(n + 1) {
244
+ margin-left: -1px;
245
+ }
246
+ &:first-child {
247
+ margin-left: 0;
248
+ }
250
249
  `}
250
+ `}
251
251
  ${position === "left" && css`
252
- ${borders && css`
253
- &:nth-of-type(n + 1) {
254
- margin-top: -1px;
255
- }
256
- &:first-child {
257
- margin-top: 0;
258
- }
259
- `}
252
+ ${borders && css`
253
+ &:nth-of-type(n + 1) {
254
+ margin-top: -1px;
255
+ }
256
+ &:first-child {
257
+ margin-top: 0;
258
+ }
260
259
  `}
260
+ `}
261
261
 
262
262
  ${!isTabSelected && css`
263
- color: var(--colorsActionMinorYin090);
263
+ color: var(--colorsActionMinorYin090);
264
264
 
265
- &:hover {
266
- background: var(--colorsActionMinor100);
267
- color: var(--colorsActionMinorYin090);
268
- outline: none;
269
- }
270
- &:focus {
271
- color: var(--colorsActionMinorYin090);
272
- outline: none;
273
- }
274
- `}
265
+ &:hover {
266
+ background: var(--colorsActionMinor100);
267
+ color: var(--colorsActionMinorYin090);
268
+ outline: none;
269
+ }
270
+ &:focus {
271
+ color: var(--colorsActionMinorYin090);
272
+ outline: none;
273
+ }
274
+ `}
275
275
 
276
276
  ${isTabSelected && css`
277
- color: var(--colorsActionMajorYin090);
278
- background-color: var(--colorsActionMajorYang100);
279
-
280
- ${(error || warning || info) && css`
281
- padding-bottom: 0px;
282
- `}
277
+ color: var(--colorsActionMajorYin090);
278
+ background-color: var(--colorsActionMajorYang100);
283
279
 
284
- &:hover {
285
- background-color: var(--colorsActionMajorYang100);
286
- border-bottom-color: ${alternateStyling ? "var(--colorsActionMinor100)" : "var(--colorsActionMajor500)"};
287
- color: var(--colorsActionMajorYin090);
288
- cursor: default;
289
- }
280
+ ${(error || warning || info) && css`
281
+ padding-bottom: 0px;
290
282
  `}
291
283
 
284
+ &:hover {
285
+ background-color: var(--colorsActionMajorYang100);
286
+ border-bottom-color: ${alternateStyling ? "var(--colorsActionMinor100)" : "var(--colorsActionMajor500)"};
287
+ color: var(--colorsActionMajorYin090);
288
+ cursor: default;
289
+ }
290
+ `}
291
+
292
292
  &:focus {
293
- outline: ${isInSidebar ? "none;" : "var(--borderWidth300) solid var(--colorsSemanticFocus500);"}
293
+ outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
294
294
  z-index: 2;
295
+
296
+ ${isInSidebar && css`
297
+ outline-offset: -3px;
298
+ `}
295
299
  }
296
300
 
297
301
  ${position === "left" && css`
298
- background-color: transparent;
299
- border-bottom: 0px;
302
+ background-color: transparent;
303
+ border-bottom: 0px;
300
304
 
301
- ${!isInSidebar && !error && css`
302
- border-right: ${alternateStyling ? "1px" : "2px"} solid
303
- var(--colorsActionMinor100);
304
- `}
305
+ ${!isInSidebar && !error && css`
306
+ border-right: ${alternateStyling ? "1px" : "2px"} solid
307
+ var(--colorsActionMinor100);
308
+ `}
305
309
 
306
- ${!borders && css`
307
- ${StyledTitleContent} {
308
- border-bottom: none;
309
- }
310
- `}
310
+ ${!borders && css`
311
+ ${StyledTitleContent} {
312
+ border-bottom: none;
313
+ }
314
+ `}
311
315
 
312
316
  display: flex;
313
- height: auto;
314
- margin-left: 0px;
317
+ height: auto;
318
+ margin-left: 0px;
315
319
 
316
- &:first-child {
317
- margin-top: 0;
318
- }
320
+ &:first-child {
321
+ margin-top: 0;
322
+ }
319
323
 
320
- &:hover {
321
- ${alternateStyling && "border-right-color: var(--colorsActionMinor100)"}
322
- }
324
+ &:hover {
325
+ ${alternateStyling && "border-right-color: var(--colorsActionMinor100)"}
326
+ }
323
327
 
324
- ${(warning || info) && css`
325
- border-right: none;
328
+ ${(warning || info) && css`
329
+ border-right: none;
330
+ `}
331
+
332
+ ${isTabSelected && css`
333
+ ${alternateStyling && css`
334
+ border-right-color: var(--colorsActionMinor100);
326
335
  `}
327
336
 
328
- ${isTabSelected && css`
329
- ${alternateStyling && css`
330
- border-right-color: var(--colorsActionMinor100);
331
- `}
337
+ ${!alternateStyling && css`
338
+ border-right: none;
339
+ padding-bottom: 0px;
332
340
 
333
- ${!alternateStyling && css`
341
+ ${StyledTitleContent} {
342
+ ${!(error || warning || info) && "margin-right: 2px;"}
334
343
  border-right: none;
335
- padding-bottom: 0px;
336
-
337
- ${StyledTitleContent} {
338
- ${!(error || warning || info) && "margin-right: 2px;"}
339
- border-right: none;
340
- }
341
- `}
344
+ }
345
+ `}
342
346
 
343
347
  background-color: var(--colorsActionMajorYang100);
344
348
 
345
- &:hover {
346
- ${alternateStyling && "border-right-color: var(--colorsActionMinor100);"}
347
- background-color: var(--colorsActionMajorYang100);
348
- ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
349
- }
349
+ &:hover {
350
+ ${alternateStyling && "border-right-color: var(--colorsActionMinor100);"}
351
+ background-color: var(--colorsActionMajorYang100);
352
+ ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
353
+ }
350
354
 
351
- &:focus {
352
- ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
353
- }
354
- `}
355
+ &:focus {
356
+ ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
357
+ }
355
358
  `}
359
+ `}
356
360
 
357
361
  ${alternateStyling && css`
358
- &:focus {
359
- background-color: var(--colorsActionMinor200);
360
- }
362
+ &:focus {
363
+ background-color: var(--colorsActionMinor200);
364
+ }
361
365
 
362
- &:hover {
363
- background-color: ${isTabSelected ? "var(--colorsActionMinor200)" : "var(--colorsActionMinor250)"};
364
- }
366
+ &:hover {
367
+ background-color: ${isTabSelected ? "var(--colorsActionMinor200)" : "var(--colorsActionMinor250)"};
368
+ }
365
369
 
366
- ${isTabSelected && css`
367
- background-color: var(--colorsActionMinor200);
368
- `}
370
+ ${isTabSelected && css`
371
+ background-color: var(--colorsActionMinor200);
369
372
  `}
373
+ `}
370
374
  `}
371
375
  `;
372
376
  const StyledLayoutWrapper = styled.div`
package/lib/components/pages/page/page.component.d.ts CHANGED
@@ -5,11 +5,13 @@ export interface PageProps extends PaddingProps {
5
5
  title: React.ReactNode;
6
6
  /** This component supports children. */
7
7
  children: React.ReactNode;
8
+ /** The ARIA role to be applied to the component */
9
+ role?: string;
8
10
  /** @ignore @private */
9
11
  transitionName?: () => string;
10
12
  }
11
13
  declare const Page: {
12
- ({ title, children, ...rest }: PageProps): JSX.Element;
14
+ ({ role, title, children, ...rest }: PageProps): JSX.Element;
13
15
  displayName: string;
14
16
  };
15
17
  export default Page;
package/lib/components/pages/page/page.component.js CHANGED
@@ -30,6 +30,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
30
30
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
31
31
 
32
32
  const Page = ({
33
+ role,
33
34
  title,
34
35
  children,
35
36
  ...rest
@@ -50,7 +51,8 @@ const Page = ({
50
51
  }, {
51
52
  nodeRef: styledPageNodeRef
52
53
  }, rest), /*#__PURE__*/_react.default.createElement(_page.StyledPage, _extends({}, (0, _tags.default)("page", rest), {
53
- ref: styledPageNodeRef
54
+ ref: styledPageNodeRef,
55
+ role: role
54
56
  }), /*#__PURE__*/_react.default.createElement(_fullScreenHeading.default, {
55
57
  hasContent: true
56
58
  }, title), /*#__PURE__*/_react.default.createElement(_page.StyledPageContent, _extends({
@@ -221,6 +223,7 @@ Page.propTypes = {
221
223
  "toString": _propTypes.default.func.isRequired,
222
224
  "valueOf": _propTypes.default.func.isRequired
223
225
  }), _propTypes.default.string]),
226
+ "role": _propTypes.default.string,
224
227
  "title": _propTypes.default.node,
225
228
  "transitionName": _propTypes.default.func
226
229
  };
package/lib/components/pages/page/page.style.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- declare const StyledPage: import("styled-components").StyledComponent<"article", any, {}, never>;
1
+ declare const StyledPage: import("styled-components").StyledComponent<"div", any, {}, never>;
2
2
  declare const StyledPageContent: import("styled-components").StyledComponent<"div", any, {}, never>;
3
3
  export { StyledPage, StyledPageContent };
package/lib/components/pages/page/page.style.js CHANGED
@@ -13,7 +13,7 @@ var _base = _interopRequireDefault(require("../../../style/themes/base"));
13
13
 
14
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
15
 
16
- const StyledPage = _styledComponents.default.article`
16
+ const StyledPage = _styledComponents.default.div`
17
17
  width: 100%;
18
18
  height: 100%;
19
19
  `;
package/lib/components/tabs/__internal__/tab-title/tab-title.style.js CHANGED
@@ -255,136 +255,140 @@ const StyledTabTitle = _styledComponents.default.button`
255
255
  isInSidebar
256
256
  }) => (0, _styledComponents.css)`
257
257
  height: ${size === "large" ? "var(--sizing600)" : "var(--sizing500)"};
258
-
258
+
259
259
  ${position === "top" && (0, _styledComponents.css)`
260
- ${borders && !(noRightBorder || noLeftBorder) && (0, _styledComponents.css)`
261
- &:nth-of-type(n + 1) {
262
- margin-left: -1px;
263
- }
264
- &:first-child {
265
- margin-left: 0;
266
- }
267
- `}
260
+ ${borders && !(noRightBorder || noLeftBorder) && (0, _styledComponents.css)`
261
+ &:nth-of-type(n + 1) {
262
+ margin-left: -1px;
263
+ }
264
+ &:first-child {
265
+ margin-left: 0;
266
+ }
268
267
  `}
268
+ `}
269
269
  ${position === "left" && (0, _styledComponents.css)`
270
- ${borders && (0, _styledComponents.css)`
271
- &:nth-of-type(n + 1) {
272
- margin-top: -1px;
273
- }
274
- &:first-child {
275
- margin-top: 0;
276
- }
277
- `}
270
+ ${borders && (0, _styledComponents.css)`
271
+ &:nth-of-type(n + 1) {
272
+ margin-top: -1px;
273
+ }
274
+ &:first-child {
275
+ margin-top: 0;
276
+ }
278
277
  `}
278
+ `}
279
279
 
280
280
  ${!isTabSelected && (0, _styledComponents.css)`
281
- color: var(--colorsActionMinorYin090);
281
+ color: var(--colorsActionMinorYin090);
282
282
 
283
- &:hover {
284
- background: var(--colorsActionMinor100);
285
- color: var(--colorsActionMinorYin090);
286
- outline: none;
287
- }
288
- &:focus {
289
- color: var(--colorsActionMinorYin090);
290
- outline: none;
291
- }
292
- `}
283
+ &:hover {
284
+ background: var(--colorsActionMinor100);
285
+ color: var(--colorsActionMinorYin090);
286
+ outline: none;
287
+ }
288
+ &:focus {
289
+ color: var(--colorsActionMinorYin090);
290
+ outline: none;
291
+ }
292
+ `}
293
293
 
294
294
  ${isTabSelected && (0, _styledComponents.css)`
295
- color: var(--colorsActionMajorYin090);
296
- background-color: var(--colorsActionMajorYang100);
297
-
298
- ${(error || warning || info) && (0, _styledComponents.css)`
299
- padding-bottom: 0px;
300
- `}
295
+ color: var(--colorsActionMajorYin090);
296
+ background-color: var(--colorsActionMajorYang100);
301
297
 
302
- &:hover {
303
- background-color: var(--colorsActionMajorYang100);
304
- border-bottom-color: ${alternateStyling ? "var(--colorsActionMinor100)" : "var(--colorsActionMajor500)"};
305
- color: var(--colorsActionMajorYin090);
306
- cursor: default;
307
- }
298
+ ${(error || warning || info) && (0, _styledComponents.css)`
299
+ padding-bottom: 0px;
308
300
  `}
309
301
 
302
+ &:hover {
303
+ background-color: var(--colorsActionMajorYang100);
304
+ border-bottom-color: ${alternateStyling ? "var(--colorsActionMinor100)" : "var(--colorsActionMajor500)"};
305
+ color: var(--colorsActionMajorYin090);
306
+ cursor: default;
307
+ }
308
+ `}
309
+
310
310
  &:focus {
311
- outline: ${isInSidebar ? "none;" : "var(--borderWidth300) solid var(--colorsSemanticFocus500);"}
311
+ outline: var(--borderWidth300) solid var(--colorsSemanticFocus500);
312
312
  z-index: 2;
313
+
314
+ ${isInSidebar && (0, _styledComponents.css)`
315
+ outline-offset: -3px;
316
+ `}
313
317
  }
314
318
 
315
319
  ${position === "left" && (0, _styledComponents.css)`
316
- background-color: transparent;
317
- border-bottom: 0px;
320
+ background-color: transparent;
321
+ border-bottom: 0px;
318
322
 
319
- ${!isInSidebar && !error && (0, _styledComponents.css)`
320
- border-right: ${alternateStyling ? "1px" : "2px"} solid
321
- var(--colorsActionMinor100);
322
- `}
323
+ ${!isInSidebar && !error && (0, _styledComponents.css)`
324
+ border-right: ${alternateStyling ? "1px" : "2px"} solid
325
+ var(--colorsActionMinor100);
326
+ `}
323
327
 
324
- ${!borders && (0, _styledComponents.css)`
325
- ${StyledTitleContent} {
326
- border-bottom: none;
327
- }
328
- `}
328
+ ${!borders && (0, _styledComponents.css)`
329
+ ${StyledTitleContent} {
330
+ border-bottom: none;
331
+ }
332
+ `}
329
333
 
330
334
  display: flex;
331
- height: auto;
332
- margin-left: 0px;
335
+ height: auto;
336
+ margin-left: 0px;
333
337
 
334
- &:first-child {
335
- margin-top: 0;
336
- }
338
+ &:first-child {
339
+ margin-top: 0;
340
+ }
337
341
 
338
- &:hover {
339
- ${alternateStyling && "border-right-color: var(--colorsActionMinor100)"}
340
- }
342
+ &:hover {
343
+ ${alternateStyling && "border-right-color: var(--colorsActionMinor100)"}
344
+ }
341
345
 
342
- ${(warning || info) && (0, _styledComponents.css)`
343
- border-right: none;
346
+ ${(warning || info) && (0, _styledComponents.css)`
347
+ border-right: none;
348
+ `}
349
+
350
+ ${isTabSelected && (0, _styledComponents.css)`
351
+ ${alternateStyling && (0, _styledComponents.css)`
352
+ border-right-color: var(--colorsActionMinor100);
344
353
  `}
345
354
 
346
- ${isTabSelected && (0, _styledComponents.css)`
347
- ${alternateStyling && (0, _styledComponents.css)`
348
- border-right-color: var(--colorsActionMinor100);
349
- `}
355
+ ${!alternateStyling && (0, _styledComponents.css)`
356
+ border-right: none;
357
+ padding-bottom: 0px;
350
358
 
351
- ${!alternateStyling && (0, _styledComponents.css)`
359
+ ${StyledTitleContent} {
360
+ ${!(error || warning || info) && "margin-right: 2px;"}
352
361
  border-right: none;
353
- padding-bottom: 0px;
354
-
355
- ${StyledTitleContent} {
356
- ${!(error || warning || info) && "margin-right: 2px;"}
357
- border-right: none;
358
- }
359
- `}
362
+ }
363
+ `}
360
364
 
361
365
  background-color: var(--colorsActionMajorYang100);
362
366
 
363
- &:hover {
364
- ${alternateStyling && "border-right-color: var(--colorsActionMinor100);"}
365
- background-color: var(--colorsActionMajorYang100);
366
- ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
367
- }
367
+ &:hover {
368
+ ${alternateStyling && "border-right-color: var(--colorsActionMinor100);"}
369
+ background-color: var(--colorsActionMajorYang100);
370
+ ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
371
+ }
368
372
 
369
- &:focus {
370
- ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
371
- }
372
- `}
373
+ &:focus {
374
+ ${(error || warning || info) && "border-right-color: var(--colorsSemanticNegative500);"}
375
+ }
373
376
  `}
377
+ `}
374
378
 
375
379
  ${alternateStyling && (0, _styledComponents.css)`
376
- &:focus {
377
- background-color: var(--colorsActionMinor200);
378
- }
380
+ &:focus {
381
+ background-color: var(--colorsActionMinor200);
382
+ }
379
383
 
380
- &:hover {
381
- background-color: ${isTabSelected ? "var(--colorsActionMinor200)" : "var(--colorsActionMinor250)"};
382
- }
384
+ &:hover {
385
+ background-color: ${isTabSelected ? "var(--colorsActionMinor200)" : "var(--colorsActionMinor250)"};
386
+ }
383
387
 
384
- ${isTabSelected && (0, _styledComponents.css)`
385
- background-color: var(--colorsActionMinor200);
386
- `}
388
+ ${isTabSelected && (0, _styledComponents.css)`
389
+ background-color: var(--colorsActionMinor200);
387
390
  `}
391
+ `}
388
392
  `}
389
393
  `;
390
394
  exports.StyledTabTitle = StyledTabTitle;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "112.0.2",
3
+ "version": "112.0.4",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",