From 51014a2b906614258bbc4c5db6a918f967d4a84a Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Thu, 21 Apr 2022 12:29:55 -0600 Subject: [PATCH 1/5] Added new sections to writing styles with emotion wiki page --- wiki/writing-styles-with-emotion.md | 84 +++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) diff --git a/wiki/writing-styles-with-emotion.md b/wiki/writing-styles-with-emotion.md index 8770fc4e339..3cc4c7e54e8 100644 --- a/wiki/writing-styles-with-emotion.md +++ b/wiki/writing-styles-with-emotion.md @@ -34,6 +34,74 @@ export const EuiComponent = () => { }; ``` +## CSS-aligned props + +If a prop/value pair maps 1:1 to the CSS property: value, pass the value straight through + +```tsx +position?: CSSProperties['position']; + +const cssStyles = [ + { position } +]; +``` + +## Component props that enable styles + +### Building an array of styles + +_examples from [avatar.tsx](https://github.com/elastic/eui/blob/86c69a69545e12b0ed354be66f5fd3a3a34ff2c9/src/components/avatar/avatar.tsx)_ + +```tsx +export const EuiAvatar: export const EuiAvatar: FunctionComponent = ({...}) => { + // access the theme and compute avatar's styles + const euiTheme = useEuiTheme(); + const styles = euiAvatarStyles(euiTheme); + + ... + + // build the styles array + const cssStyles = [ + styles.euiAvatar, // base styles + styles[size], // styles associated with the `size` prop's value + styles[type], // styles associated with the `type` prop's value + + // optional styles + isPlain && styles.plain, + isSubdued && styles.subdued, + isDisabled && styles.isDisabled, + ]; + + ... + + // pass the styles array to the `css` prop of the target element + return ( +
); ``` + +## FAQ + +### Can the `css` prop be forwarded to a nested element? + +Emotion converts the `css` prop to a computed `className` value, merging it into any existing `className` prop on an element. We do not parse or handle these in any special way, so whichever element the `className` prop is applied to receives the styles created by Emotion. See https://codesandbox.io/s/emotion-css-and-classname-ohmqe7 for a playground demonstration. + +Sometimes we want or need to allow apps to provide styles (or other props) to multiple elements in a component, and + +### Which element in a custom component gets the `css` styling? + +Same as the above answer, whichever element is given the generated `className` is the styles' target. + +### How should `createElement` usages be converted? + +Emotion provides its own `createElement` function; existing uses of `import {createElement} from 'react'` can be converted to `import {createElement} from '@emotion/react'` From 7a773ba5a8e936479826cbc2d56e36c58a5f7e5c Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Thu, 21 Apr 2022 13:25:30 -0600 Subject: [PATCH 2/5] Update wiki/writing-styles-with-emotion.md Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- wiki/writing-styles-with-emotion.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/wiki/writing-styles-with-emotion.md b/wiki/writing-styles-with-emotion.md index 3cc4c7e54e8..d9e277e02fc 100644 --- a/wiki/writing-styles-with-emotion.md +++ b/wiki/writing-styles-with-emotion.md @@ -78,6 +78,9 @@ export const EuiAvatar: export const EuiAvatar: FunctionComponent + ) +} ``` ### If a prop's value renders no styles From a599a44365736c9fbe9461f86a21356e91821fa5 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Thu, 21 Apr 2022 13:29:43 -0600 Subject: [PATCH 3/5] pr feedback --- wiki/writing-styles-with-emotion.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/wiki/writing-styles-with-emotion.md b/wiki/writing-styles-with-emotion.md index d9e277e02fc..3317e843232 100644 --- a/wiki/writing-styles-with-emotion.md +++ b/wiki/writing-styles-with-emotion.md @@ -190,7 +190,7 @@ return ( Emotion converts the `css` prop to a computed `className` value, merging it into any existing `className` prop on an element. We do not parse or handle these in any special way, so whichever element the `className` prop is applied to receives the styles created by Emotion. See https://codesandbox.io/s/emotion-css-and-classname-ohmqe7 for a playground demonstration. -Sometimes we want or need to allow apps to provide styles (or other props) to multiple elements in a component, and +Sometimes apps want or need to provide styles (or other props) to multiple elements in a component, and in these cases we add a prop to the component that captures the extra information, spreading it onto the element. We can continue with this approach, allowing the `css` prop to be added for flexible styling. ### Which element in a custom component gets the `css` styling? From 850ebb70a72338c3918556ada3714f23407f71f2 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Thu, 21 Apr 2022 14:05:07 -0600 Subject: [PATCH 4/5] Update wiki/writing-styles-with-emotion.md Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- wiki/writing-styles-with-emotion.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/wiki/writing-styles-with-emotion.md b/wiki/writing-styles-with-emotion.md index 3317e843232..9610c0a0cdf 100644 --- a/wiki/writing-styles-with-emotion.md +++ b/wiki/writing-styles-with-emotion.md @@ -50,7 +50,7 @@ const cssStyles = [ ### Building an array of styles -_examples from [avatar.tsx](https://github.com/elastic/eui/blob/86c69a69545e12b0ed354be66f5fd3a3a34ff2c9/src/components/avatar/avatar.tsx)_ +_examples from [avatar.tsx](https://github.com/elastic/eui/blob/main/src/components/avatar/avatar.tsx)_ ```tsx export const EuiAvatar: export const EuiAvatar: FunctionComponent = ({...}) => { From aeafbc372b4365b38d4bccd3a720ac9ab055a0a0 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Mon, 25 Apr 2022 15:19:15 -0600 Subject: [PATCH 5/5] clarification from pr --- wiki/writing-styles-with-emotion.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/wiki/writing-styles-with-emotion.md b/wiki/writing-styles-with-emotion.md index 3317e843232..d27fdf0ab58 100644 --- a/wiki/writing-styles-with-emotion.md +++ b/wiki/writing-styles-with-emotion.md @@ -36,7 +36,7 @@ export const EuiComponent = () => { ## CSS-aligned props -If a prop/value pair maps 1:1 to the CSS property: value, pass the value straight through +If a prop/value pair maps 1:1 to the CSS property: value, pass the value straight through. We encounter this scenario when it is apparent that a given css property is core to configuring a component, and it doesn't make sense to use an abstraction. ```tsx position?: CSSProperties['position'];