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

[refactor]: Make the Avatar component accept custom sizes #235

Closed
OgDev-01 opened this issue Aug 19, 2022 · 5 comments · Fixed by #255
Closed

[refactor]: Make the Avatar component accept custom sizes #235

OgDev-01 opened this issue Aug 19, 2022 · 5 comments · Fixed by #255
Assignees
@OgDev-01
Labels
⚡️ easy win An issue that's easy to complete. 🍕 enhancement New feature or request released on @beta released

Comments

@OgDev-01
Copy link
Contributor

OgDev-01 commented Aug 19, 2022 •
edited

Currently, our Avatar component only allows 3 sizes, which are:

  • 16
  • 32
  • 48

Making it accept custom size values will be a plus.✔

Why?

  • In future implementations, we might be required to make an avatar that has a different size than the above-stated sizes
  • Currently on issue feat: Implement waitlist page #210, we are already experiencing difficulty making a custom size on each Avatar in the AvatarRoll component

Suggested Approach

We can make the size props accept numbers as well >> size?: "sm" | "base" | "lg" | number;. then create component instances of each size in the same file. Then finally make a switch statements in the Avatar component to return an avatar based on the size props

Benefit of the Approach
It makes the code cleaner, readable, and easier to update in the future

And that's it... Thanks
@OgDev-01 OgDev-01 added 🍕 enhancement New feature or request ⚡️ easy win An issue that's easy to complete. labels Aug 19, 2022
@OgDev-01
Copy link
Contributor Author

Please anyone can critique my description of this issue, as this happens to be my first issue creation on Github so far... I happen to mostly intend on fixing issues than actually opening one.
I'm open to corrections🙌🙌
Thanks in advance🍕

@0-vortex
Copy link
Contributor

It's awesome, I could work with less description than that! :D

Some small improvements to de-scope issues would be using only 2 categories in the title: feature: or bug:

Our issue templates are currently limited but generally a description of the bug/feature and a suggested resolution is enough. For what it's worth, you can frame your first issue and frame it as a painting, I think my first issue only had a title and no description 😅

@pixelsbyeryc
Copy link
Contributor

@sungoldtech I think it's a great idea to have a custom size available as props for Avatars 👍

I like the way you structured the issue, by the way. It's very scannable.

@OgDev-01 OgDev-01 self-assigned this Aug 22, 2022
This was referenced Aug 22, 2022
Closed
Merged
bdougie pushed a commit that referenced this issue Aug 23, 2022
@OgDev-01
refactor: Make the avatar component accept custom sizes (#255)
9076e91 
* initial commit

* added extra values to size props to accept numbers

* polishing and testing the added feature

* Added story for Custom avatar

* polishing and finishing touch

Fixes #235
github-actions bot pushed a commit that referenced this issue Aug 23, 2022
@OgDev-01 @open-sauced
chore(patch): release 1.3.0-beta.9 on beta channel [skip ci]
0a2b1ca 
## [1.3.0-beta.9](v1.3.0-beta.8...v1.3.0-beta.9) (2022-08-23)

### 🧑‍💻 Code Refactoring

* Make the avatar component accept custom sizes ([#255](#255)) ([9076e91](9076e91)), closes [#235](#235)
@github-actions
Copy link

🎉 This issue has been resolved in version 1.3.0-beta.9 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

github-actions bot pushed a commit that referenced this issue Aug 29, 2022
@bdougie @open-sauced
chore(minor): release 1.3.0 [skip ci]
3d9103f 
## [1.3.0](v1.2.3...v1.3.0) (2022-08-29)

### 🧑‍💻 Code Refactoring

* Improve the `<ComponentCard>` CSS ([#266](#266)) ([9da4d62](9da4d62))
* Make the avatar component accept custom sizes ([#255](#255)) ([9076e91](9076e91)), closes [#235](#235)

### 🍕 Features

* Add Images to Scatter Chart ([#257](#257)) ([20df419](20df419))
* Add item count meta data to Highlight Card ([#254](#254)) ([693479e](693479e))
* Added Reports History component to Reports Page ([#272](#272)) ([c6a56f6](c6a56f6))
* Implement Card Horizontal Bar component ([#237](#237)) ([7bbbe40](7bbbe40))
* Implement Card Table Component ([#243](#243)) ([0cbc6ea](0cbc6ea))
* Implement contribution page ([#263](#263)) ([f41d7f9](f41d7f9))
* Implement Contributor Card Component ([#245](#245)) ([3bd55ea](3bd55ea))
* Implement Reports History Component ([#209](#209)) ([bb531e4](bb531e4))
* Implement the hacktoberfest reports page ([#229](#229)) ([0cfa5e5](0cfa5e5)), closes [#168](#168)
* Implement waitlist page ([#210](#210)) ([0826d07](0826d07)), closes [#152](#152)

### 🐛 Bug Fixes

* adjusted opinion filter on mobile screens ([#264](#264)) ([2d9785c](2d9785c))
* correct login redirect issues in supabase implemetation ([#274](#274)) ([8fcd81e](8fcd81e))
* correct login redirect issues in supabase implemetation x2 ([#275](#275)) ([0239abd](0239abd))
* correct supabase-ui default style for hover ([#267](#267)) ([a23fe4b](a23fe4b)), closes [#226](#226)
* increase truncate string number of words ([#268](#268)) ([ab47a96](ab47a96)), closes [#247](#247)
* max width removed from card ([#250](#250)) ([523969a](523969a)), closes [#249](#249)
* removes unused function ([b37de35](b37de35))
* Repo count ([#244](#244)) ([d59eef8](d59eef8))
* Update GitSense API route for repos ([#270](#270)) ([8f7e1c5](8f7e1c5))
@github-actions
Copy link

🎉 This issue has been resolved in version 1.3.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

ElpisHelle added a commit to ElpisHelle/next.js-tailwindcss that referenced this issue Aug 17, 2023
@ElpisHelle
chore(patch): release 1.3.0-beta.9 on beta channel [skip ci]
c3d9c37 
## [1.3.0-beta.9](open-sauced/app@v1.3.0-beta.8...v1.3.0-beta.9) (2022-08-23)

### 🧑‍💻 Code Refactoring

* Make the avatar component accept custom sizes ([#255](open-sauced/app#255)) ([9076e91](open-sauced/app@9076e91)), closes [#235](open-sauced/app#235)
ElpisHelle added a commit to ElpisHelle/next.js-tailwindcss that referenced this issue Aug 17, 2023
@ElpisHelle
chore(minor): release 1.3.0 [skip ci]
fd90a60 
## [1.3.0](open-sauced/app@v1.2.3...v1.3.0) (2022-08-29)

### 🧑‍💻 Code Refactoring

* Improve the `<ComponentCard>` CSS ([#266](open-sauced/app#266)) ([9da4d62](open-sauced/app@9da4d62))
* Make the avatar component accept custom sizes ([#255](open-sauced/app#255)) ([9076e91](open-sauced/app@9076e91)), closes [#235](open-sauced/app#235)

### 🍕 Features

* Add Images to Scatter Chart ([#257](open-sauced/app#257)) ([20df419](open-sauced/app@20df419))
* Add item count meta data to Highlight Card ([#254](open-sauced/app#254)) ([693479e](open-sauced/app@693479e))
* Added Reports History component to Reports Page ([#272](open-sauced/app#272)) ([c6a56f6](open-sauced/app@c6a56f6))
* Implement Card Horizontal Bar component ([#237](open-sauced/app#237)) ([7bbbe40](open-sauced/app@7bbbe40))
* Implement Card Table Component ([#243](open-sauced/app#243)) ([0cbc6ea](open-sauced/app@0cbc6ea))
* Implement contribution page ([#263](open-sauced/app#263)) ([f41d7f9](open-sauced/app@f41d7f9))
* Implement Contributor Card Component ([#245](open-sauced/app#245)) ([3bd55ea](open-sauced/app@3bd55ea))
* Implement Reports History Component ([#209](open-sauced/app#209)) ([bb531e4](open-sauced/app@bb531e4))
* Implement the hacktoberfest reports page ([#229](open-sauced/app#229)) ([0cfa5e5](open-sauced/app@0cfa5e5)), closes [#168](open-sauced/app#168)
* Implement waitlist page ([#210](open-sauced/app#210)) ([0826d07](open-sauced/app@0826d07)), closes [#152](open-sauced/app#152)

### 🐛 Bug Fixes

* adjusted opinion filter on mobile screens ([#264](open-sauced/app#264)) ([2d9785c](open-sauced/app@2d9785c))
* correct login redirect issues in supabase implemetation ([#274](open-sauced/app#274)) ([8fcd81e](open-sauced/app@8fcd81e))
* correct login redirect issues in supabase implemetation x2 ([#275](open-sauced/app#275)) ([0239abd](open-sauced/app@0239abd))
* correct supabase-ui default style for hover ([#267](open-sauced/app#267)) ([a23fe4b](open-sauced/app@a23fe4b)), closes [#226](open-sauced/app#226)
* increase truncate string number of words ([#268](open-sauced/app#268)) ([ab47a96](open-sauced/app@ab47a96)), closes [#247](open-sauced/app#247)
* max width removed from card ([#250](open-sauced/app#250)) ([523969a](open-sauced/app@523969a)), closes [#249](open-sauced/app#249)
* removes unused function ([b37de35](open-sauced/app@b37de35))
* Repo count ([#244](open-sauced/app#244)) ([d59eef8](open-sauced/app@d59eef8))
* Update GitSense API route for repos ([#270](open-sauced/app#270)) ([8f7e1c5](open-sauced/app@8f7e1c5))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@OgDev-01 OgDev-01

Labels
⚡️ easy win An issue that's easy to complete. 🍕 enhancement New feature or request released on @beta released
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

refactor: Make the avatar component accept custom sizes open-sauced/app
3 participants
@0-vortex @OgDev-01 @pixelsbyeryc