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.

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

feat: List component #446

Merged
merged 31 commits into from
Aug 27, 2024
Merged

feat: List component #446

merged 31 commits into from
Aug 27, 2024

Conversation

jordmccord
Copy link
Collaborator

Adds the List, ListHeading, ListItem including parts and Skeleton components.

https://www.figma.com/design/c16vqWI6QZNOPYKeLm2ysz/UWDS-2581---Button-color-alignments-with-web?node-id=2692-3920&m=dev

Copy link

vercel bot commented Aug 12, 2024

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

Name Status Preview Updated (UTC)
web-ui ✅ Ready (Inspect) Visit Preview Aug 22, 2024 2:33pm
1 Skipped Deployment
Name Status Preview Updated (UTC)
native-ui ⬜️ Ignored (Inspect) Aug 22, 2024 2:33pm

Copy link

changeset-bot bot commented Aug 12, 2024

🦋 Changeset detected

Latest commit: f62a716

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

This PR includes changesets to release 1 package
Name Type
@utilitywarehouse/native-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

Copy link

linear bot commented Aug 12, 2024

Copy link
Contributor

github-actions bot commented Aug 12, 2024

🖥️ Native UI - Storybook Preview

Visit the Storybook preview URL to see the changes in action.

📱 Appetize Previews

You can view the apps using the link above and choosing the device from the top action bar. Alternatively you can use the direct links below.


Last updated from commit bd7ed69

}
trailingContent={
<Radio value="option1" aria-label="Label 1">
<RadioIndicator />
Copy link
Collaborator

Choose a reason for hiding this comment

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

Not sure if this is a mistake 🤔 but the RadioIndicator seems to have a colour override when is checked=true

Screenshot 2024-08-27 at 13 41 08

Initially I thought it was only in the context of List Item but it seems that the RadioIndicator has this colour override as well

Screenshot 2024-08-27 at 13 42 34

Figma 👇

Screenshot 2024-08-27 at 13 43 57

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

It's a weird issue with storybook, sometimes it builds like that for the web version. Not sure why. It will be resolved when we move away from Gluestack style and it doesn't affect the actual native output se
Screenshot 2024-08-27 at 14 26 18
e the Apptetize output:

Copy link
Collaborator

Choose a reason for hiding this comment

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

Thanks for the feedback, I will use this view as well to QA

},
},
variants: {
divider: {
Copy link
Collaborator

@noeliacabane noeliacabane Aug 27, 2024

Choose a reason for hiding this comment

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

@jordmccord need for aligment here 👇
In Figma the divider is theDivider component which has it's built in custom props and customisations.

Screenshot 2024-08-27 at 13 47 36

instead of using a border for the List Item, we should flag all dependencies and create tasks for them 🙏 before we create the "bigger"component. In this case we knew about Card and Switch dependency missing, but not Divider. Using a Divider component preserves flexibility and maintains a connection to the actual component. If a designer modifies the Divider props in a List, the engineer can directly change those props instead of overriding these "divider" styles.

Let's ensure this isn't a blocker for release in our app ui alignments. However, we'll need to update the dependency when the Divider becomes a code library component in code and create follow-up tasks accordingly to replace this.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Agreed, I will replace it when we have the divider component 👍

Copy link
Collaborator

@noeliacabane noeliacabane left a comment

Choose a reason for hiding this comment

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

Great work, we can align on the follow up task regarding Divider, Card and more dependencies 🙏

@jordmccord jordmccord merged commit 9748b7b into main Aug 27, 2024
7 checks passed
@jordmccord jordmccord deleted the uwds-1869 branch August 27, 2024 14:39
@github-actions github-actions bot mentioned this pull request Aug 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants