Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

[terra-navigation-side-menu] Example Update #2063

Merged
merged 13 commits into from
Mar 20, 2024
Merged

[terra-navigation-side-menu] Example Update #2063

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
8856d43
Update: Navigation side menu issues
MadanKumarGovindaswamy Mar 5, 2024
8185e85
Update: jest
MadanKumarGovindaswamy Mar 5, 2024
86b22b7
changelog file
MadanKumarGovindaswamy Mar 5, 2024
5c7f77d
Update NavigationSideMenuExample.jsx
MadanKumarGovindaswamy Mar 5, 2024
f4cdafb
Update NavigationSideMenuExample.jsx
MadanKumarGovindaswamy Mar 5, 2024
7321c2f
Update NavigationSideMenuExample.jsx
MadanKumarGovindaswamy Mar 5, 2024
6a53803
Merge branch 'main' into NavigationSideMenuIssues
MadanKumarGovindaswamy Mar 6, 2024
d687859
Merge branch 'main' into NavigationSideMenuIssues
MadanKumarGovindaswamy Mar 11, 2024
9819550
Revert "Merge branch 'main' into NavigationSideMenuIssues"
MadanKumarGovindaswamy Mar 11, 2024
dff72f1
Revert "Revert "Merge branch 'main' into NavigationSideMenuIssues""
MadanKumarGovindaswamy Mar 11, 2024
dd752c6
Update CHANGELOG.md
MadanKumarGovindaswamy Mar 11, 2024
406ff00
Merge branch 'main' into NavigationSideMenuIssues
MadanKumarGovindaswamy Mar 19, 2024
4ae5506
Merge branch 'main' into NavigationSideMenuIssues
MadanKumarGovindaswamy Mar 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/terra-framework-docs/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

## Unreleased

* Changed
* Updated `terra-navigation-side-menu` example.

## 1.75.0 - (March 19, 2024)

* Changed
Expand Down
65 changes: 21 additions & 44 deletions ...rk-docs/src/terra-dev-site/doc/navigation-side-menu/example/NavigationSideMenuExample.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@ class NavigationSideMenuDefault extends React.Component {
super(props);

this.handleOnChange = this.handleOnChange.bind(this);
this.resetMenuState = this.resetMenuState.bind(this);
this.fakeRoutingBack = this.fakeRoutingBack.bind(this);

this.state = { selectedMenuKey: 'menu', selectedChildKey: undefined };
}
Expand All @@ -21,49 +19,28 @@ class NavigationSideMenuDefault extends React.Component {
this.setState({ selectedMenuKey: changeData.selectedMenuKey, selectedChildKey: changeData.selectedChildKey });
}

resetMenuState() {
this.setState({ selectedMenuKey: 'menu', selectedChildKey: undefined });
}

fakeRoutingBack() {
this.setState({ selectedMenuKey: 'fake-parent', selectedChildKey: undefined });
}

render() {
let content;
if (this.state.selectedMenuKey === 'fake-parent') {
content = (
<div className={cx('content')}>
<button type="button" onClick={this.resetMenuState}>
Child Route
</button>
<p>Parent Route</p>
</div>
);
} else {
content = (
<NavigationSideMenu
id="test-menu"
menuItems={[
{ key: 'menu', text: 'Hospital Details', childKeys: ['submenu1', 'submenu2', 'submenu3', 'submenu4'] },
{
key: 'submenu1', text: 'Hospital services', childKeys: ['subsubmenu1', 'subsubmenu2', 'subsubmenu3'], id: 'test-item-1',
},
{ key: 'submenu2', text: 'Hospital events' },
{ key: 'submenu3', text: 'Hospital Accommodations' },
{ key: 'submenu4', text: 'Hospital Careers' },
{ key: 'subsubmenu1', text: 'Imaging', id: 'test-item-2' },
{ key: 'subsubmenu2', text: 'Laboratory' },
{ key: 'subsubmenu3', text: 'Rehabilitation services' },
]}
onChange={this.handleOnChange}
routingStackBack={this.fakeRoutingBack}
selectedMenuKey={this.state.selectedMenuKey}
selectedChildKey={this.state.selectedChildKey}
ariaLabel="Sub Menu List"
/>
);
}
const content = (
<NavigationSideMenu
id="test-menu"
menuItems={[
{ key: 'menu', text: 'Hospital Details', childKeys: ['submenu1', 'submenu2', 'submenu3', 'submenu4'] },
{
key: 'submenu1', text: 'Hospital services', childKeys: ['subsubmenu1', 'subsubmenu2', 'subsubmenu3'], id: 'test-item-1',
},
{ key: 'submenu2', text: 'Hospital events' },
{ key: 'submenu3', text: 'Hospital Accommodations' },
{ key: 'submenu4', text: 'Hospital Careers' },
{ key: 'subsubmenu1', text: 'Imaging', id: 'test-item-2' },
{ key: 'subsubmenu2', text: 'Laboratory' },
{ key: 'subsubmenu3', text: 'Rehabilitation services' },
]}
onChange={this.handleOnChange}
selectedMenuKey={this.state.selectedMenuKey}
selectedChildKey={this.state.selectedChildKey}
ariaLabel="Sub Menu List"
/>
);

return (
<div className={cx('content-wrapper')}>
Expand Down
3 changes: 3 additions & 0 deletions packages/terra-navigation-side-menu/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

## Unreleased

* Changed
* Added accessibility label for navigation back button.

## 2.51.0 - (March 14, 2024)

* Changed
Expand Down
1 change: 1 addition & 0 deletions packages/terra-navigation-side-menu/src/NavigationSideMenu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,6 +268,7 @@ class NavigationSideMenu extends Component {
onBack={onBack}
text={currentItem ? currentItem.text : null}
data-navigation-side-menu-action-header
backButtonA11yLabel={currentItem ? currentItem.text : null}
/>
{toolbar}
</Fragment>
Expand Down
26 changes: 16 additions & 10 deletions ...ages/terra-navigation-side-menu/tests/jest/__snapshots__/NavigationSideMenu.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,7 @@ exports[`Layout correctly applies the theme context className 1`] = `
header={
<React.Fragment>
<InjectIntl(ActionHeader)
backButtonA11yLabel="Test Menu"
className="side-menu-action-header"
data-navigation-side-menu-action-header={true}
onBack={[Function]}
Expand Down Expand Up @@ -221,12 +222,14 @@ exports[`Layout correctly applies the theme context className 1`] = `
className="header"
>
<InjectIntl(ActionHeader)
backButtonA11yLabel="Test Menu"
className="side-menu-action-header"
data-navigation-side-menu-action-header={true}
onBack={[Function]}
text="Test Menu"
>
<ActionHeader
backButtonA11yLabel="Test Menu"
className="side-menu-action-header"
data-navigation-side-menu-action-header={true}
intl={
Expand Down Expand Up @@ -283,7 +286,7 @@ exports[`Layout correctly applies the theme context className 1`] = `
isIconOnly={true}
isReversed={false}
onClick={[Function]}
text="Terra.actionHeader.back"
text="Test Menu"
type="button"
variant="utility"
/>
Expand Down Expand Up @@ -342,7 +345,7 @@ exports[`Layout correctly applies the theme context className 1`] = `
isIconOnly={true}
isReversed={false}
onClick={[Function]}
text="Terra.actionHeader.back"
text="Test Menu"
type="button"
variant="utility"
/>
Expand Down Expand Up @@ -375,13 +378,13 @@ exports[`Layout correctly applies the theme context className 1`] = `
isIconOnly={true}
isReversed={false}
onClick={[Function]}
text="Terra.actionHeader.back"
text="Test Menu"
type="button"
variant="utility"
>
<button
aria-disabled={false}
aria-label="Terra.actionHeader.back"
aria-label="Test Menu"
className="button utility orion-fusion-theme header-button back-button"
data-terra-action-header="back-button"
disabled={false}
Expand All @@ -391,7 +394,7 @@ exports[`Layout correctly applies the theme context className 1`] = `
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
title="Terra.actionHeader.back"
title="Test Menu"
type="button"
>
<span
Expand Down Expand Up @@ -951,6 +954,7 @@ exports[`Layout should render a NavigationSideMenu with ariaLabel 1`] = `
header={
<React.Fragment>
<InjectIntl(ActionHeader)
backButtonA11yLabel="Test Menu"
className="side-menu-action-header"
data-navigation-side-menu-action-header={true}
onBack={[Function]}
Expand Down Expand Up @@ -1022,12 +1026,14 @@ exports[`Layout should render a NavigationSideMenu with ariaLabel 1`] = `
className="header"
>
<InjectIntl(ActionHeader)
backButtonA11yLabel="Test Menu"
className="side-menu-action-header"
data-navigation-side-menu-action-header={true}
onBack={[Function]}
text="Test Menu"
>
<ActionHeader
backButtonA11yLabel="Test Menu"
className="side-menu-action-header"
data-navigation-side-menu-action-header={true}
intl={
Expand Down Expand Up @@ -1084,7 +1090,7 @@ exports[`Layout should render a NavigationSideMenu with ariaLabel 1`] = `
isIconOnly={true}
isReversed={false}
onClick={[Function]}
text="Terra.actionHeader.back"
text="Test Menu"
type="button"
variant="utility"
/>
Expand Down Expand Up @@ -1143,7 +1149,7 @@ exports[`Layout should render a NavigationSideMenu with ariaLabel 1`] = `
isIconOnly={true}
isReversed={false}
onClick={[Function]}
text="Terra.actionHeader.back"
text="Test Menu"
type="button"
variant="utility"
/>
Expand Down Expand Up @@ -1176,13 +1182,13 @@ exports[`Layout should render a NavigationSideMenu with ariaLabel 1`] = `
isIconOnly={true}
isReversed={false}
onClick={[Function]}
text="Terra.actionHeader.back"
text="Test Menu"
type="button"
variant="utility"
>
<button
aria-disabled={false}
aria-label="Terra.actionHeader.back"
aria-label="Test Menu"
className="button utility header-button back-button"
data-terra-action-header="back-button"
disabled={false}
Expand All @@ -1192,7 +1198,7 @@ exports[`Layout should render a NavigationSideMenu with ariaLabel 1`] = `
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
title="Terra.actionHeader.back"
title="Test Menu"
type="button"
>
<span
Expand Down
Loading