Avoid nested classes #11

elizabetdev · 2022-10-19T15:46:37Z

Summary

This PR tries to avoid nested classes like the following one in favor of a more JS approach.

euiTab: css`
  .euiTab__content {
    color: ${euiTheme.colors.text};

    &:hover {
      text-decoration: underline;
    }
  }

elizabetdev · 2022-10-19T15:53:34Z

src/components/tabs/tabs.tsx

+    const tabItems = React.Children.map(children, (child) => {
+      if (React.isValidElement(child)) {
+        return cloneElementWithCss(child, {
+          // we're passing the parent `size` and `expand` down to the children
+          size: size,
+          expand: expand,
+          ...child.props,
+        });
+      }
+    });


Basically, I'm copying some props from the parent to the children because it makes it easier to apply the styles.

elizabetdev added 3 commits October 19, 2022 16:29

Avoid nested classes

cba2c93

Small fixes

dd56933

Better comment

0cfebb8

elizabetdev commented Oct 19, 2022

View reviewed changes

elizabetdev mentioned this pull request Oct 19, 2022

[Emotion] EuiTabs elastic/eui#6311

Merged

38 tasks

daveyholler merged commit 18914f8 into daveyholler:emotional-tabs Oct 19, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Avoid nested classes #11

Avoid nested classes #11

elizabetdev commented Oct 19, 2022

elizabetdev Oct 19, 2022

Avoid nested classes #11

Avoid nested classes #11

Conversation

elizabetdev commented Oct 19, 2022

Summary

elizabetdev Oct 19, 2022

Choose a reason for hiding this comment