Skip to content

(Draft) Research into line height for buttons w/ CSS solution? - Dev #3088

Open
@LWWright7

Description

@LWWright7

Description

The line height on buttons is such that when the text wraps to 2 or more lines the text ascenders and descenders touch or nearly touch.
Screen Shot 2024-07-25 at 10 31 09 AM

After researching line height options that USWDS uses and discussing the options with Matthew D., the decision was made to go with the 1.15 rem spacing when text wraps to 2 or more lines:
Screen Shot 2024-07-25 at 10 32 27 AM

However, if we assign that 1.15 rem value to the button as default, it makes the height of the button larger:
Screen Shot 2024-07-25 at 10 35 32 AM

Details

Matthew said that a solution to this issue might involve some creative CSS and to reach out to dev team. He suggested that a container query or a property on the button container might make this solvable on the dev side.

This ticket is to do the research to determine if that "creative CSS" via container query or prop would be a viable solution

Tasks

  • Research the above topic to determine if the solution is viable from a dev perspective

Acceptance Criteria

  • ?????

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions