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

feat: Improve wrapping behavior of actions in header #1386

Merged
merged 6 commits into from
Sep 11, 2023

Conversation

timogasda
Copy link
Member

@timogasda timogasda commented Jul 28, 2023

Description

The header component contains three main parts: a mandatory title, as well as optional description and actions. The actions are displayed in the top right corner of the header, but currently they wrap below the title and description very early. This takes up unnecessary vertical space, especially when the header contains a description text.

This change swaps the order of elements and reorganizes them so that the title and actions now build one block, followed by the description block.

More details: 2m0RALROKrfO

Related links, issue #, if available: AWSUI-19066

How has this been tested?

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines.

Security

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@timogasda timogasda requested a review from a team as a code owner July 28, 2023 10:56
@timogasda timogasda requested review from pan-kot and removed request for a team July 28, 2023 10:56
@timogasda timogasda marked this pull request as draft July 28, 2023 10:57
@timogasda timogasda removed the request for review from pan-kot July 28, 2023 10:57
@codecov
Copy link

codecov bot commented Jul 28, 2023

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (4df7f8d) 93.98% compared to head (22462d2) 93.98%.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #1386   +/-   ##
=======================================
  Coverage   93.98%   93.98%           
=======================================
  Files         642      642           
  Lines       17334    17334           
  Branches     5695     5695           
=======================================
  Hits        16291    16291           
  Misses        973      973           
  Partials       70       70           
Files Changed Coverage Δ
src/header/internal.tsx 100.00% <100.00%> (ø)

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@timogasda timogasda changed the title [WIP] Header responsiveness explorations feat: Improve wrapping behavior of actions in header Sep 5, 2023
Copy link
Member

@avinashbot avinashbot left a comment

Choose a reason for hiding this comment

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

Changes look good at first glance, I'll leave checking pixel changes and screenshot tests to you, have fun!

gap on flex is not supported on Safari 14.0, but given that we're on the cusp of a new Safari release and this won't block anything, I'm okay with it, after a double-check with the dev team.

@timogasda timogasda merged commit c4747b2 into main Sep 11, 2023
23 of 24 checks passed
@timogasda timogasda deleted the gasda/header-responsiveness branch September 11, 2023 07:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants