feat(masthead-v2): add masthead to document flow #10998
Merged
Conversation
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
jkaeser
added
adopter: AEM
|
Deploy preview created for package Built with commit: 76b6abd1a4ef0d24e15f9162f474379febf0223e |
|
Deploy preview created for package Built with commit: 76b6abd1a4ef0d24e15f9162f474379febf0223e |
|
Deploy preview created for package Built with commit: 76b6abd1a4ef0d24e15f9162f474379febf0223e |
|
Deploy preview created for package Built with commit: 76b6abd1a4ef0d24e15f9162f474379febf0223e |
jkaeser
requested review from
kennylam,
IgnacioBecerra,
m4olivei,
andy-blum,
bruno-amorim and
marcelojcs
and removed request for
a team
andy-blum
suggested changes
Oct 3, 2023
packages/web-components/src/components/masthead/masthead-composite.ts
Outdated
Show resolved
Hide resolved
packages/web-components/src/components/masthead/masthead-composite.ts
Outdated
Show resolved
Hide resolved
packages/web-components/src/components/masthead/masthead-composite.ts
Outdated
Show resolved
Hide resolved
packages/web-components/src/components/masthead/masthead-composite.ts
Outdated
Show resolved
Hide resolved
m4olivei
approved these changes
Oct 4, 2023
packages/web-components/src/components/masthead/masthead-composite.ts
Outdated
Show resolved
Hide resolved
andy-blum
suggested changes
Oct 10, 2023
packages/web-components/src/components/masthead/masthead-composite.ts
Outdated
Show resolved
Hide resolved
jkaeser
force-pushed
the
feat/set-masthead-height
branch
from
9ff1d18 to
ec719e5
Compare
andy-blum
suggested changes
Oct 10, 2023
packages/web-components/src/components/masthead/masthead-composite.ts
Outdated
Show resolved
Hide resolved
|
Deploy preview created for package Built with commit: 76b6abd1a4ef0d24e15f9162f474379febf0223e |
andy-blum
approved these changes
Oct 12, 2023
kennylam
approved these changes
Oct 18, 2023
kennylam
added
the
Ready to merge
kennylam
merged commit e1debd8
into
carbon-design-system:feat/masthead-v2-dev
20 of 23 checks passed
jkaeser
added a commit
to jkaeser/carbon-for-ibm-dotcom
that referenced
this pull request
Dec 1, 2023
…m#10998) * feat(masthead-v2): put container in document flow * feat(masthead-v2): format code * feat(masthead-v2): update height on resize * feat(masthead-v2): accurately describe observer * feat(masthead-v2): debounce resize observer callback * feat(masthead-v2): execute callback once after successive resizes --------- Co-authored-by: Andy Blum <[email protected]>
kodiakhq bot
pushed a commit
that referenced
this pull request
Jan 8, 2024
### Related Ticket(s) none ### Description We made some enhancements to the alpha v2 masthead after we'd integrated its branch into the main C4IBM v2 branch. This PR ports those enhancements over. - **fix(masthead-v2): use more explicit selector in dropdown toggle** (911f802) ([Original PR](#11084)) - **feat(masthead-v2): add masthead to document flow** (e1debd8) ([Original PR](#10998)) - **feat(masthead-v2): Minimize CMApp on megamenu open** (c4a06f3) ([Original PR](#11085)) - **fix(masthead-v2): do not fail if object data does not exist** (c9609f7) ([Original PR](#11205)) - **fix(masthead-v2): ensure L1 dropdown targets exist** (fc65086) ([Original PR](#11254)) - **fix(masthead-v2): provide accessible nav label** (f183d25) ([Original PR](#11269)) - **fix(sticky-header): prevent negative overscroll from hiding stuck elements** (51015ed) ([Original PR](#11266)) <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) -->
kennylam
pushed a commit
to kennylam/carbon-for-ibm-dotcom
that referenced
this pull request
Mar 20, 2024
…ign-system#11183) none We made some enhancements to the alpha v2 masthead after we'd integrated its branch into the main C4IBM v2 branch. This PR ports those enhancements over. - **fix(masthead-v2): use more explicit selector in dropdown toggle** (911f802) ([Original PR](carbon-design-system#11084)) - **feat(masthead-v2): add masthead to document flow** (e1debd8) ([Original PR](carbon-design-system#10998)) - **feat(masthead-v2): Minimize CMApp on megamenu open** (c4a06f3) ([Original PR](carbon-design-system#11085)) - **fix(masthead-v2): do not fail if object data does not exist** (c9609f7) ([Original PR](carbon-design-system#11205)) - **fix(masthead-v2): ensure L1 dropdown targets exist** (fc65086) ([Original PR](carbon-design-system#11254)) - **fix(masthead-v2): provide accessible nav label** (f183d25) ([Original PR](carbon-design-system#11269)) - **fix(sticky-header): prevent negative overscroll from hiding stuck elements** (51015ed) ([Original PR](carbon-design-system#11266)) <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) -->
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related Ticket(s)
Description
The visible parts of the masthead are
position: fixed;, which prevents them from being in the document flow. This forces adopters to manually add spacing to their page content so the masthead doesn't overlap. We provide the--dds-sticky-header-heightvariable via the StickyHeader utility as a value to use, but this changes as the user scrolls, creating a potentially unwanted parallax effect.To overcome this, we force the masthead's container into the document flow by giving it a height equal to its visible parts' height. This avoids the parallax effect, and adopters should only need to add the spacing they want between their content and the masthead, rather than solving for the masthead's height in some way.
Testing
Visit deploy preview Stories for the masthead with and without the L1. In each, use the browser dev tools to inspect the element and find the
<dds-masthead-container>or<dds-masthead-composite>(they are mostly analogous). It should have a CSSheightset on it equal to the<dds-masthead>element's height.Changelog
Changed