-
Notifications
You must be signed in to change notification settings - Fork 156
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(cloud-mega-menu): add style and polish the Cloud mega menu & keep…
… platform visible on all bps (#5853) ### Related Ticket(s) DDS Ticket: N/A HC JIRA Ticket: https://jsw.ibm.com/browse/HC-1813 ### Description - This PR implements styles and any other remaining polishing items for the Mega Menu design enhancements that are part of the "Unified Cloud Masthead + Mega Menu Project" (see project overview doc - https://ibm.ent.box.com/notes/775640792107). - This is a follow-up PR to @annawen1's work for adding the baseline tabbing functionality to the cloud mega menu component - #5751 ### Design Spec https://ibm.ent.box.com/file/774092317795 ### Changelog  **New Components** - `<dds-cloud-megamenu>` – an extended component of `<dds-megamenu>` that allows us to apply styles to the host component that's cloud design specific. - `<dds-cloud-top-nav-name>` - – an extended component of `<dds-top-nav-name>` that allows us to apply styles to the host component that's cloud design specific, thus making this top nav name visible on all breakpoints. - **Removed** - N/A **Notes** - There's a known issue within the mobile hamburger menu where the regular dropdown menu items are not showing up correctly. @annawen1 has opened a fix PR for this issue and the PR can be reviewed here - #5839 **Testing Instructions** - Visit the `Cloud Masthead` Storybook variant - `/?path=/story/components-cloud-masthead--default` - Ensure that the mega menu component matches with the design specs for all breakpoints. <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "package: styles": Carbon Expressive --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) -->
- Loading branch information
Showing
6 changed files
with
184 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
43 changes: 43 additions & 0 deletions
43
packages/web-components/src/components/masthead/cloud/cloud-megamenu.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| /** | ||
| * @license | ||
| * | ||
| * Copyright IBM Corp. 2020, 2021 | ||
| * | ||
| * This source code is licensed under the Apache-2.0 license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| import { html, customElement } from 'lit-element'; | ||
| import settings from 'carbon-components/es/globals/js/settings'; | ||
| import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; | ||
| import DDSMegaMenu from '../megamenu'; | ||
| import styles from './cloud-masthead.scss'; | ||
|
|
||
| const { prefix } = settings; | ||
| const { stablePrefix: ddsPrefix } = ddsSettings; | ||
|
|
||
| /** | ||
| * Cloud MegaMenu. | ||
| * | ||
| * @element dds-cloud-megamenu | ||
| */ | ||
| @customElement(`${ddsPrefix}-cloud-megamenu`) | ||
| class DDSCloudMegaMenu extends DDSMegaMenu { | ||
| render() { | ||
| return html` | ||
| <div class="${prefix}--masthead__megamenu__container"> | ||
| <div class="${prefix}--masthead__megamenu__container--row"> | ||
| <slot></slot> | ||
| </div> | ||
| </div> | ||
| `; | ||
| } | ||
|
|
||
| static get stableSelector() { | ||
| return `${ddsPrefix}--masthead__megamenu`; | ||
| } | ||
|
|
||
| static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader | ||
| } | ||
|
|
||
| export default DDSCloudMegaMenu; |
27 changes: 27 additions & 0 deletions
27
packages/web-components/src/components/masthead/cloud/cloud-top-nav-name.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| /** | ||
| * @license | ||
| * | ||
| * Copyright IBM Corp. 2021 | ||
| * | ||
| * This source code is licensed under the Apache-2.0 license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| import { customElement } from 'lit-element'; | ||
| import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; | ||
| import DDSTopNavName from '../top-nav-name'; | ||
| import styles from './cloud-masthead.scss'; | ||
|
|
||
| const { stablePrefix: ddsPrefix } = ddsSettings; | ||
|
|
||
| /** | ||
| * Cloud's brand name UI in top nav. | ||
| * | ||
| * @element dds-cloud-top-nav-name | ||
| */ | ||
| @customElement(`${ddsPrefix}-cloud-top-nav-name`) | ||
| class DDSCloudTopNavName extends DDSTopNavName { | ||
| static styles = styles; | ||
| } | ||
|
|
||
| export default DDSCloudTopNavName; |