Skip to content

Add user profile subheader components + button group#668

Merged
aaronxsu merged 11 commits into
developfrom
feature/asu/user-profile-subheader
Jul 1, 2025
Merged

Add user profile subheader components + button group#668
aaronxsu merged 11 commits into
developfrom
feature/asu/user-profile-subheader

Conversation

@aaronxsu

@aaronxsu aaronxsu commented Jun 24, 2025

Copy link
Copy Markdown
Member

Overview

This PR:

  • re-organizes the components subdirectory structure
  • adds svg icons needed in user profile subheader and compare favorites button group
  • customizes toggle button group and button group components based on react aria components
  • creates examples of the user profile subheader and the compare favorites components using these customized base components

Tagging @philippschmitt here for design and styling care.

Checklist

  • fixup! commits have been squashed
  • CHANGELOG.md updated with summary of features or fixes, following
    Keep a Changelog guidelines
  • README.md updated if necessary to reflect the changes
  • Run ./scripts/format to lint, format, and fix the application source code.
  • CI passes after rebase

Demo

Screenshot 2025-06-23 at 8 09 03 PM

Screenshot 2025-06-24 at 4 19 43 PM

Testing Instructions

  • Go to the components page
  • Make sure the button groups look and work well
  • Make sure the user profile subheader section includes both mobile and desktop versions
  • Use the Map/List toggle and make sure it works as expected

Resolves #648

@aaronxsu aaronxsu force-pushed the feature/asu/frontend-themes branch from f37c2e2 to f22ba16 Compare June 24, 2025 16:44
Base automatically changed from feature/asu/frontend-themes to develop June 24, 2025 16:49
@aaronxsu aaronxsu force-pushed the feature/asu/user-profile-subheader branch from 7c4bae2 to 751e6fe Compare June 24, 2025 16:54
@aaronxsu aaronxsu force-pushed the feature/asu/user-profile-subheader branch from 751e6fe to 43b93d7 Compare June 24, 2025 20:23
@aaronxsu aaronxsu force-pushed the feature/asu/user-profile-subheader branch from 43b93d7 to 7bef8ed Compare June 24, 2025 20:39
@aaronxsu aaronxsu changed the title [WIP] Add user profile subheader components Add user profile subheader components + button group Jun 24, 2025
@aaronxsu aaronxsu requested a review from rachelekm June 24, 2025 20:55
],
variants: {
variant: {
orange: "bg-orange-200 text-orange-800 hover:bg-orange-300 not-first:border-orange-800/25",

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

There may be variants of this in other places. This orange one implements the styles for the "Compare favorites" button group

orange: "bg-orange-200 text-orange-800 hover:bg-orange-300 not-first:border-orange-800/25",
},
size: {
...buttonSizes,

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

I think the button sizes are the same, so re-using the definitions from the styled buttons

@@ -0,0 +1,55 @@
import {

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

This isn't a brand new component. It's moved over from components into components/base with additional props like label, leftIcon, rightIcon, info, etc

/>
);

const GroupedButton = ({

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

This is very similar to the styled Button component. There might be a chance to re-use the button component, and also parameterize groupedButtonStyles and buttonStyles as a function input?

@philippschmitt

Copy link
Copy Markdown
Collaborator

Looks great! I made a few small tweaks. The last commit, 6b7c5b9, changes the User profile subheader so that the icon size relates to the component size prop. Not sure if there's an easier way to achieve this but I took a stab at it.
I realized that the SVG icons I provided weren't responsive so I updated those as well in 771de82

@rachelekm rachelekm left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This looks great! Good to go on the development side, I really like the components dir structure so far and the CompareFavoritesButton and UserProfileSubheader component props will be nice to have upfront 👍

@aaronxsu

aaronxsu commented Jul 1, 2025

Copy link
Copy Markdown
Member Author

Thank you both for the reviews!

The styling changes look awesome ✨

I updated changelog and will merge after CI

@aaronxsu aaronxsu merged commit ee9c71a into develop Jul 1, 2025
6 checks passed
@aaronxsu aaronxsu deleted the feature/asu/user-profile-subheader branch July 1, 2025 15:56
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.

Create mobile user profile subheader

3 participants