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.

Sign up for GitHub

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

Jump to bottom

fix(hero): set a max width for header buttons when there are 2 buttons #2002

Merged
merged 3 commits into from
Oct 25, 2021
Merged

fix(hero): set a max width for header buttons when there are 2 buttons #2002

merged 3 commits into from
Oct 25, 2021

Conversation

akegan
Copy link
Contributor

@akegan akegan commented Oct 14, 2021

Pull Request Template

Issue

Addresses #1967

  • This change addresses the issue in full
  • This change addresses only certain aspects of the issue
  • This change is a dependency for another issue
  • This change has a dependency from another issue

Description

This PR stops the hero buttons from growing past the width they have at a large screen size

Demo: https://user-images.githubusercontent.com/11825994/137377565-8531789a-47eb-41d2-8445-581037e4be9a.mp4

I did not end up changing the font size because tailwind jumps from 3.5rem to 4.5rem font sizes, and we're looking for 4rem.

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Prototype/POC (not to merge)
  • This change is a refactor/addresses technical debt
  • This change requires a documentation update
  • This change requires a SQL Script

How Can This Be Tested/Reviewed?

  • Look at styles for ?path=/story/headers-hero--with-secondary-button at all screen sizes and verify that the new styles look OK.
  • Double check that other versions of the hero are not affected

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have reviewed the changes in a desktop view
  • I have reviewed the changes in a mobile view
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged and published in downstream modules
  • I have assigned reviewers
  • I have updated the changelog to include a description of my changes
  • I have run yarn generate:client if I made backend changes
  • I have exported any new pieces in ui-components

@netlify
Copy link

netlify bot commented Oct 14, 2021 •
edited
Loading

✔️ Deploy Preview for dev-partners-bloom ready!

🔨 Explore the source changes: ebf1c88

🔍 Inspect the deploy log: https://app.netlify.com/sites/dev-partners-bloom/deploys/6169d0ec8690140007b17a5b

😎 Browse the preview: https://deploy-preview-2002--dev-partners-bloom.netlify.app

@netlify
Copy link

netlify bot commented Oct 14, 2021 •
edited
Loading

✔️ Deploy Preview for dev-bloom ready!

🔨 Explore the source changes: ebf1c88

🔍 Inspect the deploy log: https://app.netlify.com/sites/dev-bloom/deploys/6169d0ec48001b000871172d

😎 Browse the preview: https://deploy-preview-2002--dev-bloom.netlify.app

@netlify
Copy link

netlify bot commented Oct 14, 2021 •
edited
Loading

✔️ Deploy Preview for dev-storybook-bloom ready!

🔨 Explore the source changes: ebf1c88

🔍 Inspect the deploy log: https://app.netlify.com/sites/dev-storybook-bloom/deploys/6169d0ec8690140007b17a5d

😎 Browse the preview: https://deploy-preview-2002--dev-storybook-bloom.netlify.app

akegan
akegan commented Oct 14, 2021
View reviewed changes
ui-components/src/headers/Hero.tsx
@@ -43,7 +43,7 @@ const Hero = (props: HeroProps) => {
{props.buttonTitle && props.buttonLink && (
<>
{props.secondaryButtonTitle && props.secondaryButtonLink ? (
<div className="grid md:grid-cols-6 gap-5 ">
<div className="grid md:grid-cols-6 gap-5 max-w-screen-lg m-auto">
Copy link
Contributor Author

Choose a reason for hiding this comment

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

@emilyjablonski I just ended up making a super small change to try to make the button widths look a bit more balanced, but wasn't sure if there was a cleaner way to do it.

This just prevents the buttons from continuing to grow when the screen size goes above the large width.

@akegan
Copy link
Contributor Author

akegan commented Oct 14, 2021

@emilyjablonski not sure if you all have strong feelings about keeping font sizes pinned to the options available through tailwind. We'd ideally like our header to be 4rem instead of 3.5 rem, but the next size up in tailwind is text-7xl at 4.5rem which is too large.

akegan
akegan commented Oct 15, 2021
View reviewed changes
ui-components/src/headers/Hero.tsx
@@ -37,13 +38,15 @@ const Hero = (props: HeroProps) => {
}
return (
<div className={`hero ${classNames}`} style={styles}>
<h1 className="hero__title">{props.title}</h1>
<h1 className={`hero__title ${props.extraLargeTitle ? "lg:text-6.5xl" : ""}`}>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I ended up adding an optional prop to make the title 4rem, open to feedback on it!

@akegan akegan marked this pull request as ready for review October 15, 2021 18:16
@akegan
Copy link
Contributor Author

akegan commented Oct 15, 2021

I'm not sure why tests are failing, it looks like a version issue? are they failing on dev too?

@emilyjablonski
Copy link
Collaborator

@akegan are you rebased off of latest dev? that was an old build issue that should be resolved

@akegan akegan force-pushed the 1967/homepage-header-styling branch from f5efded to ebf1c88 Compare October 15, 2021 19:05
@emilyjablonski
Copy link
Collaborator

LGTM! The only small thing is that technically the style tag is reserved for style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) and this would be a fix. Once we get @slowbot eyes good to merge.

@akegan
Copy link
Contributor Author

akegan commented Oct 15, 2021

oh! code style not site style. I'll change the PR title

@akegan akegan changed the title style(hero): set a max width for header buttons when there are 2 buttons fix(hero): set a max width for header buttons when there are 2 buttons Oct 15, 2021
@emilyjablonski
Copy link
Collaborator

@slowbot

1 similar comment
@emilyjablonski
Copy link
Collaborator

@slowbot

slowbot
slowbot approved these changes Oct 25, 2021
View reviewed changes
Copy link
Collaborator

@slowbot slowbot left a comment

Choose a reason for hiding this comment

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

LGTM

@emilyjablonski emilyjablonski merged commit d3d4141 into dev Oct 25, 2021
@emilyjablonski emilyjablonski deleted the 1967/homepage-header-styling branch October 25, 2021 16:08
seanmalbert pushed a commit to CityOfDetroit/bloom that referenced this pull request Jun 23, 2022
@akegan
fix: set a max width for header buttons when there are 2 buttons (blo…
64d2670 
…om-housing#2002)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@slowbot slowbot slowbot approved these changes

@emilyjablonski emilyjablonski Awaiting requested review from emilyjablonski

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@akegan @emilyjablonski @slowbot