refactor: Make the avatar component accept custom sizes #255

OgDev-01 · 2022-08-22T16:53:16Z

What type of PR is this? (check all applicable)

Description

This PR makes the avatar component accept custom sizes
Details:
Firstly, I made an update to the Avatar component props to accept numbers as well as the default of "sm" | "base" | "lg",
The next step was a refactor on the Image component size, I made it layout fill and made the container div position relative to avoid irrelevant size overlap. Long story short, We can now pass custom number values to specify custom width values to the Avatar component

Related Tickets & Documents

Fixes #235

Mobile & Desktop Screenshots/Recordings

Added tests?

👍 yes
🙅 no, because they aren't needed
🙋 no, because I need help

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

netlify · 2022-08-22T16:53:32Z

✅ Deploy Preview for oss-insights ready!

Name	Link
🔨 Latest commit	`3e2039d`
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/6304188ba5d8e700097123ba
😎 Deploy Preview	https://deploy-preview-255--oss-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify · 2022-08-22T16:54:53Z

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	`3e2039d`
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/6304188bab7cc400084e93a0
😎 Deploy Preview	https://deploy-preview-255--design-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

OgDev-01 · 2022-08-23T00:10:18Z

Once this PR is approved, I can then finish up with issue #210 🍕

0-vortex

LGTM! 👍

eryc-cc

Let's add another option in the argTypes for Custom Size... We can change the control type to text instead of select.

That's in line 10 of avatar.stories.tsx.

Not a blocker, more of a nice to have, so we can test it out in storybooks.

OgDev-01 · 2022-08-23T07:06:52Z

Let's add another option in the argTypes for Custom Size... We can change the control type to text instead of select.

That's in line 10 of avatar.stories.tsx.

Not a blocker, more of a nice to have, so we can test it out in storybooks.

Since we already have a size select argTypes, adding a customSize with control type text will not will not affect changes on the size props of the story... you can share more light on how to achieve this 🙌

bdougie

LGTM

bdougie · 2022-08-23T23:16:59Z

Since we already have a size select argTypes, adding a customSize with control type text will not will not affect changes on the size props of the story... you can share more light on how to achieve this 🙌

Let's move this discussion to a new issue. Merging now.

## [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 · 2022-08-23T23:20:32Z

🎉 This PR is included in version 1.3.0-beta.9 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## [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 · 2022-08-29T19:53:08Z

🎉 This PR is included in version 1.3.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## [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)

## [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))

OgDev-01 added 2 commits August 22, 2022 17:43

initial commit

f006bbc

added extra values to size props to accept numbers

77c5e8e

OgDev-01 changed the base branch from main to beta August 22, 2022 16:53

OgDev-01 added 3 commits August 23, 2022 00:53

polishing and testing the added feature

084058f

Added story for Custom avatar

aee224e

polishing and finishing touch

3e2039d

OgDev-01 marked this pull request as ready for review August 23, 2022 00:07

0-vortex approved these changes Aug 23, 2022

View reviewed changes

eryc-cc reviewed Aug 23, 2022

View reviewed changes

bdougie approved these changes Aug 23, 2022

View reviewed changes

bdougie merged commit 9076e91 into beta Aug 23, 2022

bdougie deleted the make-the-avatar-component-accept-custom-sizes branch August 23, 2022 23:17

github-actions bot added the released on @beta label Aug 23, 2022

eryc-cc mentioned this pull request Aug 24, 2022

[Docs] Add "Custom Size" to argTypes for the Avatar component in storybook #261

Closed

github-actions bot added the released label Aug 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: Make the avatar component accept custom sizes #255

refactor: Make the avatar component accept custom sizes #255

OgDev-01 commented Aug 22, 2022 •

edited

Loading

netlify bot commented Aug 22, 2022 •

edited

Loading

netlify bot commented Aug 22, 2022 •

edited

Loading

OgDev-01 commented Aug 23, 2022

0-vortex left a comment

eryc-cc left a comment

OgDev-01 commented Aug 23, 2022

bdougie left a comment

bdougie commented Aug 23, 2022

github-actions bot commented Aug 23, 2022

github-actions bot commented Aug 29, 2022

refactor: Make the avatar component accept custom sizes #255

refactor: Make the avatar component accept custom sizes #255

Conversation

OgDev-01 commented Aug 22, 2022 • edited Loading

What type of PR is this? (check all applicable)

Description

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Added tests?

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

netlify bot commented Aug 22, 2022 • edited Loading

✅ Deploy Preview for oss-insights ready!

netlify bot commented Aug 22, 2022 • edited Loading

✅ Deploy Preview for design-insights ready!

OgDev-01 commented Aug 23, 2022

0-vortex left a comment

Choose a reason for hiding this comment

eryc-cc left a comment

Choose a reason for hiding this comment

OgDev-01 commented Aug 23, 2022

bdougie left a comment

Choose a reason for hiding this comment

bdougie commented Aug 23, 2022

github-actions bot commented Aug 23, 2022

github-actions bot commented Aug 29, 2022

OgDev-01 commented Aug 22, 2022 •

edited

Loading

netlify bot commented Aug 22, 2022 •

edited

Loading

netlify bot commented Aug 22, 2022 •

edited

Loading