Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SideNav::List::Title: wrap text of long strings (HDS-3047) #1899

Merged
merged 7 commits into from
Jan 24, 2024

Conversation

KristinLBradley
Copy link
Contributor

@KristinLBradley KristinLBradley commented Jan 22, 2024

📌 Summary

If merged, this PR restructures the SidNav ListTitle DOM and updates styles so long unbroken text strings will wrap. It also updates css for SideNav::List::BackLink so long text strings will wrap.

📸 Screenshots

image image

🔗 External links

Jira ticket: HDS-3047


👀 Component checklist

  • Percy was checked for any visual regression
  • A11y tests have been run locally (yarn test:a11y --filter="COMPONENT-NAME")
  • If documenting a new component, an acceptance test that includes the a11yAudit has been added
  • A changelog entry was added via Changesets if needed (see templates here)

💬 Please consider using conventional comments when reviewing this PR.

…s will wrap, update css for backlink so long strings will wrap
Copy link

vercel bot commented Jan 22, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
hds-showcase ✅ Ready (Inspect) Visit Preview Jan 24, 2024 6:23pm
hds-website ✅ Ready (Inspect) Visit Preview Jan 24, 2024 6:23pm

Copy link
Contributor

@heatherlarsen heatherlarsen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice ✨

Copy link
Contributor

@didoo didoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@KristinLBradley left a couple of suggestions

@KristinLBradley
Copy link
Contributor Author

Made refinements from feedback.

@@ -616,12 +624,16 @@
</SG.Item>
<SG.Item @label="Icon + text + yielded content">
<Hds::SideNav::List::Link @icon="boundary" @text="Boundary">
<Shw::Placeholder @height="20px" @text="yielded content" />
{{! template-lint-disable no-inline-styles }}
<Shw::Placeholder @height="20px" @width="auto" style="flex-grow: 1;" @text="yielded content" />

This comment was marked as outdated.

Copy link
Contributor

@didoo didoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a suggestion for the codemod. Apart from that, all good 👍

.changeset/few-emus-walk.md Outdated Show resolved Hide resolved
Co-authored-by: Cristiano Rastelli <cristiano.rastelli@hashicorp.com>
@KristinLBradley KristinLBradley merged commit 6a903ef into main Jan 24, 2024
15 checks passed
@KristinLBradley KristinLBradley deleted the hds-3047-fix-sidenav-list-title-text-wrapping branch January 24, 2024 18:28
@hashibot-hds hashibot-hds mentioned this pull request Jan 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants