@prismicio/editor-ui

editor-ui

radix-ui GOTCHAS

• When passing a React Node as children to a radix primitive that has the asChild prop, you must spread all unused props into that React Node, even if at the type level there doesn't seem to be any remaining props. This is because radix secretly set a lot of extra props on the React Node you gave it. For an example of this, see BaseInput's otherProps. We favor using asChild to reduce the number of DOM nodes and make it easy to size children.

vanilla-extract GOTCHAS

• You can not reference a parent selector that is made of ONLY sprinkles generated classNames. See Field.css.ts -> labelPosition to see a workaround: An empty object is passed to styleVariant which is equivalent to having an empty className generated with style({}).

How to add a new SVG icon

1. Export the SVG icon from Figma. It should always be the variant with a viewbox of 24x24.
2. Move the file to src/icons and rename it with the official Material name: https://fonts.google.com/icons but with a lower camel case name.
3. You can repeat 1. and 2. as many times as needed.
4. Run deno task update-icons (it does not matter where in the monorepo you run this from)
5. Check that your icon is visible in Storybook.

Mark components or functions as private.

In some cases a subset of functions are only used within editor-ui and should not be available outside of the package. By using TSDoc we can mark our these functions as private, thereby showing intent. If you were to export this function from the package, there would greater sentiment to evaluate if that is indeed the desired outcome.

/**
 * @private
 * This is an internal component we will always use this within the context of a xyz component.
 */