Skip to content

Commit d06b45a

Browse files
andy-blumproeungjeffchewemyarodMarlene Wanberg
authored
feat(scrolling-utility): Add new utility to mimic dotcom-shell functionality (#8434)
* feat(scrolling-utility): Add new utility to handle dotcom-shell logic Co-authored-by: Putra Bonaccorsi <putra.roeung@gmail.com> Co-authored-by: Jeff Chew <jeff.chew@gmail.com> Co-authored-by: andrew <emyarod@users.noreply.github.com> Co-authored-by: Marlene Wanberg <marlene.wanberg@ibm.com> Co-authored-by: Ignacio Becerra <i1becerr@ucsd.edu> Co-authored-by: kennylam <kennylam@protonmail.com>
1 parent e0b3a51 commit d06b45a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+543
-90
lines changed

‎.yarn/offline-mirror/@carbon-grid-10.42.0.tgz

-17.9 KB
Binary file not shown.

‎.yarn/offline-mirror/@carbon-grid-10.43.0.tgz

19.4 KB
Binary file not shown.

‎.yarn/offline-mirror/@carbon-icons-10.47.0.tgz

-3.48 MB
Binary file not shown.

‎.yarn/offline-mirror/@carbon-icons-10.48.0.tgz

3.56 MB
Binary file not shown.

‎.yarn/offline-mirror/@carbon-icons-react-10.48.0.tgz

5.86 MB
Binary file not shown.

‎.yarn/offline-mirror/@carbon-telemetry-0.1.0.tgz

834 KB
Binary file not shown.

‎.yarn/offline-mirror/@carbon-themes-10.52.0.tgz ‎.yarn/offline-mirror/@carbon-themes-10.53.1.tgz

90.7 KB
Binary file not shown.

‎.yarn/offline-mirror/@carbon-type-10.42.0.tgz

-46.7 KB
Binary file not shown.

‎.yarn/offline-mirror/@carbon-type-10.43.1.tgz

48.3 KB
Binary file not shown.

‎.yarn/offline-mirror/carbon-components-10.54.0.tgz

-1.91 MB
Binary file not shown.

‎.yarn/offline-mirror/carbon-components-10.55.1.tgz

2.03 MB
Binary file not shown.

‎packages/react/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,10 @@
6363
"@babel/runtime": "^7.5.5",
6464
"@carbon/ibmdotcom-services": "1.32.0-rc.0",
6565
"@carbon/ibmdotcom-styles": "1.32.0-rc.0",
66-
"@carbon/ibmdotcom-utilities": "1.31.0",
67-
"@carbon/telemetry": "^0.0.0-alpha.6",
66+
"@carbon/ibmdotcom-utilities": "1.32.0-rc.0",
67+
"@carbon/telemetry": "^0.1.0",
6868
"autosuggest-highlight": "^3.1.1",
69-
"carbon-components": "10.54.0",
69+
"carbon-components": "10.55.1",
7070
"carbon-components-react": "7.54.2",
7171
"carbon-icons": "7.0.7",
7272
"classnames": "2.3.1",
@@ -202,7 +202,7 @@
202202
"whatwg-fetch": "^2.0.3"
203203
},
204204
"resolutions": {
205-
"@carbon/icons-react": "10.47.0"
205+
"@carbon/icons-react": "10.48.0"
206206
},
207207
"sideEffects": false,
208208
"bundleSizeThreshold": 300000,

‎packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap

+10
Original file line numberDiff line numberDiff line change
@@ -39996,6 +39996,7 @@ exports[`Storyshots Components|Dotcom shell Default (footer language only) 1`] =
3999639996
className="bx--tableofcontents__mobile__select__wrapper"
3999739997
>
3999839998
<select
39999+
aria-label="Jump to"
3999940000
className="bx--tableofcontents__mobile__select"
4000040001
onBlur={[Function]}
4000140002
onChange={[Function]}
@@ -47045,6 +47046,7 @@ exports[`Storyshots Components|Dotcom shell Default 1`] = `
4704547046
className="bx--tableofcontents__mobile__select__wrapper"
4704647047
>
4704747048
<select
47049+
aria-label="Jump to"
4704847050
className="bx--tableofcontents__mobile__select"
4704947051
onBlur={[Function]}
4705047052
onChange={[Function]}
@@ -53389,6 +53391,7 @@ exports[`Storyshots Components|Dotcom shell Search open 1`] = `
5338953391
className="bx--tableofcontents__mobile__select__wrapper"
5339053392
>
5339153393
<select
53394+
aria-label="Jump to"
5339253395
className="bx--tableofcontents__mobile__select"
5339353396
onBlur={[Function]}
5339453397
onChange={[Function]}
@@ -64981,6 +64984,7 @@ exports[`Storyshots Components|Dotcom shell With L1 1`] = `
6498164984
className="bx--tableofcontents__mobile__select__wrapper"
6498264985
>
6498364986
<select
64987+
aria-label="Jump to"
6498464988
className="bx--tableofcontents__mobile__select"
6498564989
onBlur={[Function]}
6498664990
onChange={[Function]}
@@ -71558,6 +71562,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer (language only) 1`
7155871562
className="bx--tableofcontents__mobile__select__wrapper"
7155971563
>
7156071564
<select
71565+
aria-label="Jump to"
7156171566
className="bx--tableofcontents__mobile__select"
7156271567
onBlur={[Function]}
7156371568
onChange={[Function]}
@@ -77602,6 +77607,7 @@ exports[`Storyshots Components|Dotcom shell With micro footer 1`] = `
7760277607
className="bx--tableofcontents__mobile__select__wrapper"
7760377608
>
7760477609
<select
77610+
aria-label="Jump to"
7760577611
className="bx--tableofcontents__mobile__select"
7760677612
onBlur={[Function]}
7760777613
onChange={[Function]}
@@ -83396,6 +83402,7 @@ exports[`Storyshots Components|Dotcom shell With platform 1`] = `
8339683402
className="bx--tableofcontents__mobile__select__wrapper"
8339783403
>
8339883404
<select
83405+
aria-label="Jump to"
8339983406
className="bx--tableofcontents__mobile__select"
8340083407
onBlur={[Function]}
8340183408
onChange={[Function]}
@@ -89977,6 +89984,7 @@ exports[`Storyshots Components|Dotcom shell With short footer (language only) 1`
8997789984
className="bx--tableofcontents__mobile__select__wrapper"
8997889985
>
8997989986
<select
89987+
aria-label="Jump to"
8998089988
className="bx--tableofcontents__mobile__select"
8998189989
onBlur={[Function]}
8998289990
onChange={[Function]}
@@ -97091,6 +97099,7 @@ exports[`Storyshots Components|Dotcom shell With short footer 1`] = `
9709197099
className="bx--tableofcontents__mobile__select__wrapper"
9709297100
>
9709397101
<select
97102+
aria-label="Jump to"
9709497103
className="bx--tableofcontents__mobile__select"
9709597104
onBlur={[Function]}
9709697105
onChange={[Function]}
@@ -138460,6 +138469,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condiment
138460138469
className="bx--tableofcontents__mobile__select__wrapper"
138461138470
>
138462138471
<select
138472+
aria-label="Jump to"
138463138473
className="bx--tableofcontents__mobile__select"
138464138474
onBlur={[Function]}
138465138475
onChange={[Function]}

‎packages/react/src/components/Masthead/MastheadL1.js

+11-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
* LICENSE file in the root directory of this source tree.
66
*/
77

8+
import React, { useEffect } from 'react';
89
import cx from 'classnames';
910
import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
1011
import HeaderMenu from '../carbon-components-react/UIShell/HeaderMenu';
@@ -13,7 +14,6 @@ import HeaderNavContainer from './HeaderNavContainer';
1314
import HeaderNavigation from '../../internal/vendor/carbon-components-react/components/UIShell/HeaderNavigation';
1415
import MegaMenu from './MastheadMegaMenu/MegaMenu';
1516
import PropTypes from 'prop-types';
16-
import React from 'react';
1717
import root from 'window-or-global';
1818
import settings from 'carbon-components/es/globals/js/settings';
1919

@@ -29,6 +29,16 @@ const MastheadL1 = ({ navigationL1, ...rest }) => {
2929
});
3030
const childLinkChecker = rest.hasCurrentUrl();
3131

32+
useEffect(() => {
33+
document
34+
.querySelector(`.${prefix}--header__menu-bar`)
35+
?.setAttribute('role', 'menu');
36+
document.querySelectorAll(`.${prefix}--header__menu-bar li`).forEach(e => {
37+
e.setAttribute('role', 'menuitem');
38+
e.querySelector('a').removeAttribute('role');
39+
});
40+
}, []);
41+
3242
const mastheadL1Links = navigationL1.map((link, index) => {
3343
const selectedUrlItem =
3444
childLinkChecker && childLinkChecker(link, root.location?.href);

‎packages/react/src/components/Masthead/MastheadTopNav.js

+11-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* LICENSE file in the root directory of this source tree.
66
*/
77

8-
import React, { useState } from 'react';
8+
import React, { useEffect, useState } from 'react';
99
import classnames from 'classnames';
1010
import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
1111
import HeaderMenu from '../carbon-components-react/UIShell/HeaderMenu';
@@ -29,6 +29,16 @@ const MastheadTopNav = ({ navigation, ...topNavProps }) => {
2929

3030
const childLinkChecker = topNavProps.hasCurrentUrl();
3131

32+
useEffect(() => {
33+
document
34+
.querySelector(`.${prefix}--header__menu-bar`)
35+
?.setAttribute('role', 'menu');
36+
document.querySelectorAll(`.${prefix}--header__menu-bar li`).forEach(e => {
37+
e.setAttribute('role', 'menuitem');
38+
e.querySelector('a').removeAttribute('role');
39+
});
40+
}, []);
41+
3242
/**
3343
* Top masthead navigation
3444
*

‎packages/react/src/components/TableOfContents/TOCMobile.js

+1
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ const TOCMobile = ({ menuItems, selectedId, menuLabel, updateState }) => {
7979
data-autoid={`${stablePrefix}--tableofcontents__mobile`}>
8080
<div className={`${prefix}--tableofcontents__mobile__select__wrapper`}>
8181
<select
82+
aria-label={menuLabel}
8283
className={`${prefix}--tableofcontents__mobile__select`}
8384
onBlur={handleOnBlur}
8485
value={selectedOption}

‎packages/react/tests/e2e-storybook/cypress/support/commands.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ Cypress.Commands.add('checkAxeA11y', (context, additionalRules) => {
9999
context || null,
100100
{
101101
rules: rules,
102-
includedImpacts: ['critical']
102+
includedImpacts: ['critical', 'serious']
103103
},
104104
terminalLog,
105105
true

‎packages/services-store/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
"dependencies": {
4242
"@carbon/ibmdotcom-services": "1.32.0-rc.0",
4343
"@carbon/ibmdotcom-utilities": "1.31.0",
44-
"carbon-components": "10.54.0",
44+
"carbon-components": "10.55.1",
4545
"redux": "^4.0.0",
4646
"redux-logger": "^3.0.0",
4747
"redux-thunk": "^2.3.0",

‎packages/services/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
"dependencies": {
5050
"@babel/runtime": "^7.5.0",
5151
"@carbon/ibmdotcom-utilities": "1.31.0",
52-
"@carbon/telemetry": "0.0.0-alpha.6",
52+
"@carbon/telemetry": "0.1.0",
5353
"axios": "~0.21.4",
5454
"marked": "^4.0.10",
5555
"window-or-global": "^1.0.1"

‎packages/styles/package.json

+6-6
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,15 @@
3131
"upgrade-carbon": "yarn upgrade-interactive @carbon/grid @carbon/import-once @carbon/layout @carbon/motion @carbon/themes @carbon/type carbon-components @carbon/icons-react --latest --exact"
3232
},
3333
"dependencies": {
34-
"@carbon/grid": "10.42.0",
35-
"@carbon/icons-react": "10.47.0",
34+
"@carbon/grid": "10.43.0",
35+
"@carbon/icons-react": "10.48.0",
3636
"@carbon/import-once": "10.7.0",
3737
"@carbon/layout": "10.37.0",
3838
"@carbon/motion": "10.29.0",
39-
"@carbon/telemetry": "0.0.0-alpha.6",
40-
"@carbon/themes": "10.52.0",
41-
"@carbon/type": "10.42.0",
42-
"carbon-components": "10.54.0"
39+
"@carbon/telemetry": "0.1.0",
40+
"@carbon/themes": "10.53.1",
41+
"@carbon/type": "10.43.1",
42+
"carbon-components": "10.55.1"
4343
},
4444
"devDependencies": {
4545
"autoprefixer": "^9.8.0",

‎packages/styles/scss/components/tabs-extended-media/_tabs-extended-media.scss

+13-24
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Copyright IBM Corp. 2016, 2021
2+
* Copyright IBM Corp. 2016, 2022
33
*
44
* This source code is licensed under the Apache-2.0 license found in the
55
* LICENSE file in the root directory of this source tree.
@@ -15,8 +15,9 @@
1515
@mixin tabs-extended-media {
1616
:host(#{$dds-prefix}-tabs-extended-media) {
1717
margin: 0;
18-
grid-column: 1 / span 16;
18+
display: flex;
1919
overflow-x: hidden;
20+
2021
@include carbon--breakpoint(sm) {
2122
padding-top: $carbon--spacing-07;
2223
padding-bottom: $carbon--spacing-12;
@@ -27,50 +28,38 @@
2728
}
2829

2930
::slotted([slot='heading']) {
30-
grid-column: 1 / span 1;
31-
grid-row: 1;
3231
margin-bottom: $carbon--spacing-09;
33-
margin-left: $carbon--spacing-05;
34-
margin-right: $carbon--spacing-05;
32+
padding-left: $carbon--spacing-05;
33+
padding-right: $carbon--spacing-05;
34+
3535
@include carbon--breakpoint(lg) {
3636
padding-top: var(--cds-spacing-04, 0.75rem);
37-
margin-left: 0;
38-
margin-right: 0;
3937
}
4038
}
4139

4240
.#{$prefix}--tabs-extended-media {
43-
display: grid;
44-
column-gap: $carbon--spacing-07;
45-
@include carbon--breakpoint(sm) {
46-
grid-template-columns: repeat(1, 1fr);
47-
}
4841
@include carbon--breakpoint(lg) {
49-
grid-template-columns: repeat(4, 1fr);
42+
display: flex;
5043
}
5144
}
5245

53-
.#{$prefix}--tabs-extended {
54-
@include carbon--breakpoint(sm) {
55-
grid-column: 1 / span 1;
56-
grid-row: 2;
57-
}
46+
.#{$prefix}--heading {
5847
@include carbon--breakpoint(lg) {
59-
grid-column: 2 / span 3;
60-
grid-row: 1;
48+
flex: 0 0 25%;
6149
}
6250
}
6351

6452
.#{$prefix}--tab-content {
65-
padding: 0;
53+
padding-left: $carbon--spacing-05;
54+
padding-right: $carbon--spacing-05;
6655
}
6756

6857
.#{$prefix}--accordion__content {
6958
margin-top: -$carbon--spacing-07;
7059
margin-bottom: $carbon--spacing-05;
7160
padding-bottom: 0;
72-
padding-left: 0;
73-
padding-right: 0;
61+
padding-left: $carbon--spacing-05;
62+
padding-right: $carbon--spacing-05;
7463

7564
@include carbon--breakpoint(md) {
7665
margin-bottom: -$carbon--spacing-05;

‎packages/styles/scss/components/tabs-extended/_tabs-extended.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Copyright IBM Corp. 2016, 2021
2+
* Copyright IBM Corp. 2016, 2022
33
*
44
* This source code is licensed under the Apache-2.0 license found in the
55
* LICENSE file in the root directory of this source tree.
@@ -26,7 +26,7 @@
2626

2727
.#{$prefix}--tabs__nav-item {
2828
min-height: $spacing-09;
29-
width: $spacing-13;
29+
width: calc(100% / (12 / 2) - (#{$spacing-01} / 2));
3030
height: auto;
3131

3232
p {
@@ -68,7 +68,7 @@
6868
border: initial;
6969
border-bottom: carbon--rem(2px) solid $ui-03;
7070
display: inline-flex;
71-
width: $spacing-13;
71+
width: 100%;
7272
text-align: left;
7373

7474
&[hasTooltip] {

‎packages/utilities/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,9 @@
4848
"upgrade-carbon": "yarn upgrade-interactive carbon-components --latest --exact"
4949
},
5050
"dependencies": {
51-
"@carbon/telemetry": "0.0.0-alpha.6",
51+
"@carbon/telemetry": "0.1.0",
5252
"axios": "~0.21.4",
53-
"carbon-components": "10.54.0",
53+
"carbon-components": "10.55.1",
5454
"isomorphic-dompurify": "0.4.0",
5555
"js-cookie": "^2.2.1",
5656
"marked": "^4.0.10",

0 commit comments

Comments
 (0)