🧱 Implementing the new design system #2111
Draft
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…in either menu items or component to popover.
Resolve a conflict in: .storybook/preview.js
Components should only be used in JSX. They are intended to be called only by React. React decides when your component function is called during rendering: https://react.dev/reference/rules/components-and-hooks-must-be-pure#how-does-react-run-your-code In React, you do this using JSX. ``` function BlogPost() { // ✅ Good: Only use components in JSX return <Layout><Article /></Layout>; } function BlogPost() { // 🔴 Bad: Never call them directly return <Layout>{Article()}</Layout>; } ``` If a component contains Hooks, it’s easy to violate the Rules of Hooks when components are called directly in a loop or conditionally. https://react.dev/reference/rules/rules-of-hooks Letting React orchestrate rendering also allows a number of benefits: * Components become more than functions. React can augment them with features like local state through Hooks that are tied to the component's identity in the tree. * Component types participate in reconciliation. By letting React call your components, you also tell it more about the conceptual structure of your tree. For example, when you move from rendering `<Feed>` to the `<Profile>` page, React won't attempt to re-use them. * React can enhance your user experience. For example, it can let the browser do some work between component calls so that re-rendering a large component tree doesn't block the main thread. * A better debugging story. If components are first-class citizens that the library is aware of, we can build rich developer tools for introspection in development. * More efficient reconciliation. React can decide exactly which components in the tree need re-rendering and skip over the ones that don't. That makes your app faster and more snappy. https://react.dev/reference/rules/react-calls-components-and-hooks#never-call-component-functions-directly See also fd93d93
…button Refactor zui togglebutton
…m", and sort stories alphabetically.
…t easier for volunteers.
Declare Story to be rendered instead of calling it
…p.zetkin.org into undocumented/new-design-system
…ok interface sidebar, and update how the stories are sorted.
…p.zetkin.org into undocumented/design-system-types
Types for the new design system
ZUI icon component
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR is the main to-do-list of the implementation of the new Zetkin design system, designed by @theo-organism .
Items that are links are ready to be worked on, click the link to get to the issue here on gitHub.