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

Component/4080-badge #4841

Merged
merged 18 commits into from
Aug 18, 2022
Merged

Component/4080-badge #4841

merged 18 commits into from
Aug 18, 2022

Conversation

brianacnguyen
Copy link
Contributor

@brianacnguyen brianacnguyen commented Aug 11, 2022 •
edited

Description

  • Componentize Badge Component
  • Add Badge capability to Avatar Base

Screenshots/Recordings
Simulator Screen Shot - iPhone 11 Pro - 2022-08-11 at 20 52 59

Issue

Progresses #???

Checklist

  • There is a related GitHub issue
  • Tests are included if applicable
  • Any added code is fully documented

@brianacnguyen brianacnguyen requested a review from a team as a code owner August 11, 2022 19:07
@github-actions
Copy link
Contributor

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@brianacnguyen brianacnguyen self-assigned this Aug 11, 2022
@brianacnguyen brianacnguyen added the needs-dev-review PR needs reviews from other engineers (in order to receive required approvals) label Aug 11, 2022
Cal-L
Cal-L approved these changes Aug 11, 2022
View reviewed changes
Copy link
Contributor

@Cal-L Cal-L left a comment

Choose a reason for hiding this comment

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

Left some comments - LGTM after!

app/component-library/components/Avatars/AvatarBase/AvatarBase.types.ts Outdated Show resolved Hide resolved
app/component-library/components/Badge/Badge.styles.ts Outdated Show resolved Hide resolved
app/component-library/components/Badge/Badge.tsx Outdated Show resolved Hide resolved
app/component-library/components/Avatars/AvatarBase/AvatarBase.tsx Outdated Show resolved Hide resolved
app/component-library/components/Badge/Badge.tsx Outdated Show resolved Hide resolved
app/component-library/components/Avatars/AvatarBase/AvatarBase.styles.ts Outdated Show resolved Hide resolved
app/component-library/components/Avatars/AvatarBase/AvatarBase.types.ts Outdated Show resolved Hide resolved
app/component-library/components/Avatars/AvatarBase/AvatarBase.styles.ts Outdated Show resolved Hide resolved
app/component-library/components/Avatars/AvatarBase/AvatarBase.styles.ts Outdated Show resolved Hide resolved
app/component-library/components/Badge/README.md Outdated Show resolved Hide resolved
@jpcloureiro
Copy link
Contributor

I see that only the AvatarBase has the ability to position the badge. Is BadgeWrapper not allowed to position the badge other than on Top Right corner?

@brianacnguyen
Copy link
Contributor Author

As of right now, the positioning preset for the badge can only apply to avatar badges. In the design spec, the positioning of top: -4 and right: -4 for TopRight and bottom: -4 and right: -4, can ONLY apply to an XS size avatar. If you place a Tag as a badge with badgeWrapper with the preset positioning, it does not look good and requires different positioning. As such, I've decided to keep the current positioning logic with the AvatarBadge until the designers can fully figure out a positioning logic/formula that can be applied to ANY badge.

jpcloureiro
jpcloureiro approved these changes Aug 12, 2022
View reviewed changes
Copy link
Contributor

@jpcloureiro jpcloureiro left a comment

Choose a reason for hiding this comment

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

Thanks for the explanation @brianacnguyen

Looks good to me! :shipit:

Cal-L
Cal-L approved these changes Aug 17, 2022
View reviewed changes
Copy link
Contributor

@Cal-L Cal-L left a comment

Choose a reason for hiding this comment

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

1 or 2 comments - LGTM!

app/component-library/components/Avatars/AvatarBase/AvatarBase.styles.ts Outdated Show resolved Hide resolved
app/component-library/components/Avatars/AvatarBase/README.md Outdated Show resolved Hide resolved
app/component-library/components/Badges/Badge/variants/BadgeNetwork/README.md Outdated Show resolved Hide resolved
@brianacnguyen brianacnguyen merged commit e71f221 into main Aug 18, 2022
@brianacnguyen brianacnguyen deleted the component/4080-badge branch August 18, 2022 17:29
@github-actions github-actions bot locked and limited conversation to collaborators Aug 18, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@jpcloureiro jpcloureiro jpcloureiro approved these changes

@Cal-L Cal-L Cal-L approved these changes

Assignees

@brianacnguyen brianacnguyen

Labels
needs-dev-review PR needs reviews from other engineers (in order to receive required approvals)
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@brianacnguyen @jpcloureiro @Cal-L