Feature/avatar component #129

Twonarly1 · 2023-09-27T02:43:20Z

Description

Task link: https://trello.com/c/Fvz98TFA/216-avatar-component

Added Avatar component

Test Steps

Ensure the component's structure, stories, and testing suite are robust.
Confirm that all tests are successful.
Check that the Avatar component displays correctly in both storybook and sample downstream applications.

changeset-bot · 2023-09-27T02:43:23Z

🦋 Changeset detected

Latest commit: 81f884d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@animareflection/ui	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2023-09-27T02:43:27Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ui-storybook	✅ Ready (Inspect)	Visit Preview	Sep 28, 2023 2:50am
ui-studio	✅ Ready (Inspect)	Visit Preview	Sep 28, 2023 2:50am

Twonarly1 · 2023-09-27T02:53:19Z

this seems redundant with the panda.div inside the fallback, but it was a struggle to get content aligned without doing this. If anyone cares to give it a go and see what they can do, please do!

 <AvatarFallback className={classNames.fallback}>
        <panda.div
          height="inherit"
          justifyContent="center"
          alignItems="center"
          display="flex"
        >
          {fallback}
        </panda.div>
      </AvatarFallback>
      ```

hobbescodes · 2023-09-27T02:57:53Z

this seems redundant with the panda.div inside the fallback, but it was a struggle to get content aligned without doing this. If anyone cares to give it a go and see what they can do, please do!

 <AvatarFallback className={classNames.fallback}>
        <panda.div
          height="inherit"
          justifyContent="center"
          alignItems="center"
          display="flex"
        >
          {fallback}
        </panda.div>
      </AvatarFallback>
      ```

Close! Make sure that the closing dashes are on the same indent level as the opening, example:

 <AvatarFallback className={classNames.fallback}>
        <panda.div
          height="inherit"
          justifyContent="center"
          alignItems="center"
          display="flex"
        >
          {fallback}
        </panda.div>
  </AvatarFallback>

hobbescodes · 2023-09-27T02:58:34Z

this seems redundant with the panda.div inside the fallback, but it was a struggle to get content aligned without doing this. If anyone cares to give it a go and see what they can do, please do!

 <AvatarFallback className={classNames.fallback}>
        <panda.div
          height="inherit"
          justifyContent="center"
          alignItems="center"
          display="flex"
        >
          {fallback}
        </panda.div>
      </AvatarFallback>
      ```

Will check it out in PR! Ty for the grind man. You are killing it

coopbri · 2023-09-28T01:06:41Z

src/components/core/Avatar/Avatar.stories.tsx

+// TODO remove explicit type annotation, required due to `pnpm` bug (and therefore Yarn with `pnpm` linker); https://github.com/microsoft/TypeScript/issues/47663
+const meta: Meta<typeof Avatar> = {


Should be able to remove this now!

Yup, I saw my branch was behind again and caught that! Thanks for the heads up.

coopbri · 2023-09-28T01:51:38Z

examples/next/src/components/AvatarDemo.tsx

+        {isLoaded ? (
+          <Avatar src="/img/logo.png" alt="avatar" />
+        ) : (
+          <Avatar src="" alt="" />
+        )}


This could be simplified to checking isLoaded in the props themselves, that way there wouldn't need to be 2 <Avatar ... lines

coopbri · 2023-09-28T01:52:06Z

examples/vite-react/src/components/AvatarDemo.tsx

+          <Avatar src="/img/logo.png" alt="avatar" />
+        ) : (
+          <Avatar src="" alt="" />
+        )}


Same as previous comment (can reduce Avatar lines)

coopbri · 2023-09-28T01:52:26Z

src/components/core/Avatar/Avatar.stories.tsx

+      {isLoaded ? (
+        <Avatar src="/img/logo.png" alt="avatar" />
+      ) : (
+        <Avatar src="" />
+      )}


Same as previous comment

coopbri

I am currently unable to see the fallback avatar content on dark mode:

Twonarly1 · 2023-09-28T02:48:38Z

Had some inspiration with the text being offset in the fallback and added a margin to counterbalance the borderWidth which was affecting it.

Twonarly1 added 11 commits September 26, 2023 14:56

feat: add avatar primitives

3e706ba

feat: add initial avatar component

f6af536

feat: add recipes

b72e957

feat: add initial storybook examples

70a86c0

Merge branch 'master' into feature/avatar-component

3b84f0c

feat: add spec file and update storybook with toggle example

f6a6e26

feat: update recipe styles and base avatar file

eb747d7

feat: add demo to example apps

6216140

chore: add justify content prop

2cbec0f

chore: add changesets

4b8bb35

chore: remove duplicate props

2baa2a3

vercel bot deployed to Preview – ui-storybook September 27, 2023 02:44 View deployment

vercel bot had a problem deploying to Preview – ui-studio September 27, 2023 02:46 Failure

Merge branch 'master' into feature/avatar-component

86ff82c

vercel bot had a problem deploying to Preview – ui-studio September 27, 2023 23:51 Failure

vercel bot deployed to Preview – ui-storybook September 27, 2023 23:54 View deployment

coopbri reviewed Sep 28, 2023

View reviewed changes

Twonarly1 added 2 commits September 27, 2023 20:31

Merge branch 'master' into feature/avatar-component

4803cc4

refactor: update sorybook meta

d3358bc

vercel bot deployed to Preview – ui-storybook September 28, 2023 01:37 View deployment

vercel bot deployed to Preview – ui-studio September 28, 2023 01:39 View deployment

chore: omit required prop id

9faa4ec

vercel bot deployed to Preview – ui-storybook September 28, 2023 01:45 View deployment

vercel bot deployed to Preview – ui-studio September 28, 2023 01:46 View deployment

coopbri reviewed Sep 28, 2023

View reviewed changes

coopbri requested changes Sep 28, 2023

View reviewed changes

chore: requested changes and update recipe to simplify component file

81f884d

vercel bot deployed to Preview – ui-storybook September 28, 2023 02:48 View deployment

vercel bot deployed to Preview – ui-studio September 28, 2023 02:50 View deployment

coopbri approved these changes Sep 28, 2023

View reviewed changes

Twonarly1 merged commit 95be098 into master Sep 28, 2023

Twonarly1 deleted the feature/avatar-component branch September 28, 2023 02:56

github-actions bot mentioned this pull request Sep 28, 2023

feature(release): version packages #131

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/avatar component #129

Feature/avatar component #129

Twonarly1 commented Sep 27, 2023

changeset-bot bot commented Sep 27, 2023 •

edited

Loading

vercel bot commented Sep 27, 2023 •

edited

Loading

Twonarly1 commented Sep 27, 2023 •

edited

Loading

hobbescodes commented Sep 27, 2023

hobbescodes commented Sep 27, 2023

coopbri Sep 28, 2023

Twonarly1 Sep 28, 2023

coopbri Sep 28, 2023

coopbri Sep 28, 2023

coopbri Sep 28, 2023

coopbri left a comment

Twonarly1 commented Sep 28, 2023

		// TODO remove explicit type annotation, required due to `pnpm` bug (and therefore Yarn with `pnpm` linker); https://github.com/microsoft/TypeScript/issues/47663
		const meta: Meta<typeof Avatar> = {

Feature/avatar component #129

Feature/avatar component #129

Conversation

Twonarly1 commented Sep 27, 2023

Description

Task link: https://trello.com/c/Fvz98TFA/216-avatar-component

Test Steps

changeset-bot bot commented Sep 27, 2023 • edited Loading

🦋 Changeset detected

vercel bot commented Sep 27, 2023 • edited Loading

Twonarly1 commented Sep 27, 2023 • edited Loading

hobbescodes commented Sep 27, 2023

hobbescodes commented Sep 27, 2023

coopbri Sep 28, 2023

Choose a reason for hiding this comment

Twonarly1 Sep 28, 2023

Choose a reason for hiding this comment

coopbri Sep 28, 2023

Choose a reason for hiding this comment

coopbri Sep 28, 2023

Choose a reason for hiding this comment

coopbri Sep 28, 2023

Choose a reason for hiding this comment

coopbri left a comment

Choose a reason for hiding this comment

Twonarly1 commented Sep 28, 2023

changeset-bot bot commented Sep 27, 2023 •

edited

Loading

vercel bot commented Sep 27, 2023 •

edited

Loading

Twonarly1 commented Sep 27, 2023 •

edited

Loading