feat(variant): ✨ add base `lib` variant #32

navin-moorthy · 2021-01-05T09:47:40Z

No description provided.

* feat(avatar): initial avatar api * feat(avatar): added badge & fallback support both * chore: remove rfc file * chore: remove extra div layer * chore: types refactor & export all types * feat(avatar): added initial AvatarGroup * feat(avatar): added AvatarGroup component * refactor(avatar): extracted out AvatarImage * chore: added tooltip storybook to avatar * test(avatar): added test for avatar component * test(avatar): added test for AvatarGroup * style(avatar): match avatar size with figma file * chore(avatar): fix avatar icon prop * feat(avatar): added responsive badges and statuses * test(avatar): added avatar image load tests * chore: cleanups

* test: added a11y test util * chore: test naming change * test: improved & extracted out mockImage

vercel · 2021-01-05T09:47:42Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/timelessco/renderlesskit-react-tailwind/7hsd5fa2u
✅ Preview: https://renderlesskit-react-tailwind-git-specificity-fix-with-variant.timelessco.vercel.app

… classes

anuraghazra · 2021-01-07T07:38:35Z

src/theme.tsx

 const theme = {
  alert: {
    base:
-      "lib:font-sans lib:flex lib:items-center lib:w-full lib:overflow-hidden lib:p-4 lib:bg-blue-50",


I believe that not using lib:bg-blue-50 on the base styles is optimal because in the component it will always get fallback to "info" variant which would apply that anyways.

This will prevent eliminate the need of using bg-blue-50 to override the base styles in the variants

Understood, we need to see and fix them.

Need to remove the size & variants from base.

…elessco/renderlesskit-react-tailwind into specificity-fix-with-variant

anuraghazra · 2021-01-07T11:51:53Z

tailwind.config.js

+        addVariant(variantName, ({ modifySelectors, separator }) => {
+          modifySelectors(({ className }) => {
+            const selector = selectorClass => {
+              // `.${e(`is-range-selection${separator}${className}`)}[data-is-range-selection]`
+              if (dataBool)
+                return `.${e(`${selectorClass}`)}[data-${dataName}]`;
+              // `.${e(`aria-selected${separator}${className}`)}[aria-selected="true"]`
+              return `.${e(`${selectorClass}`)}[${dataName}="true"]`;
+            };
+            // `aria-selected${separator}${className}`
+            const dataClass = `${dataName}${separator}${className}`;
+            // `lib${separator}aria-selected${separator}${className}`
+            const variantDataClass = variant
+              ? `${variant}${separator}${dataClass}`
+              : dataClass;
+
+            return selector(variantDataClass);
+          });
+        });
+      }


Can we clean this up a just a bit?

addVariant(variantName, ({ modifySelectors, separator }) => { modifySelectors(({ className }) => { const selector = selectorClass => { if (dataBool) { return `.${e(`${selectorClass}`)}[data-${dataName}]`; } return `.${e(`${selectorClass}`)}[${dataName}="true"]`; }; const dataClass = `${dataName}${separator}${className}`; const variantDataClass = variant ? `${variant}${separator}${dataClass}` : dataClass; return selector(variantDataClass); }); }); }

Oh, I thought the comments will help us whats happening since everything is now within string literal

Oh, I thought the comments will help us whats happening since everything is now within string literal

yes but it's kinda messy. i would rather like to see actual string values instead of the same template interpolations for example

// [aria-selected=true]

anuraghazra · 2021-01-07T11:53:25Z

tailwind.config.js

+    /* =========================================================================
+      Variants
+      ========================================================================== */


Can we just use

/* Variants */

Those banner comments takes up too much attention.

anuraghazra · 2021-01-07T12:12:08Z

src/alert/stories/Alert.stories.tsx

-            "h-5 px-0 bg-transparent min-w-5 ml-2",
-            `hover:${buttonBg[status]}`,
-          )}
+          className={`h-5 px-0 bg-transparent min-w-5 ml-2 hover:${buttonBg[status]}`}


🤔 hopefully it will get properly purged. because we are concatenating here.

Hope not 🤔

Yeah, Oh well it would not affect too much since it's on storybook anyways.

* feat(context): ✨ add themecontext exp * feat(theme): ✨ finish theme provider experiment * chore: remove themeType file and added ts types for extend * test: fixed all tests * feat(theme): ✨ provide ocx through context by getting the properties generated * build(theme): 👷 fix build error & variant override issue * feat: added typescript support for extended theme values * feat(theme): ✨ add support for overridding pseudo variants aswell * feat(cli): ✨ add a cli for generating tailwind propertie npx https://gist.github.com/navin-moorthy/3f9dabd6b6c3aa0f8808a15883df7737 * fix(cli): 🐛 fix cli silent bug in window because of unix command * refactor(theme): ♻️ update types for theme file * feat(variant): ✨ add base `lib` variant (#32) * test(avatar): added avatar image loading/error tests (#27) * feat(avatar): initial avatar api * feat(avatar): added badge & fallback support both * chore: remove rfc file * chore: remove extra div layer * chore: types refactor & export all types * feat(avatar): added initial AvatarGroup * feat(avatar): added AvatarGroup component * refactor(avatar): extracted out AvatarImage * chore: added tooltip storybook to avatar * test(avatar): added test for avatar component * test(avatar): added test for AvatarGroup * style(avatar): match avatar size with figma file * chore(avatar): fix avatar icon prop * feat(avatar): added responsive badges and statuses * test(avatar): added avatar image load tests * chore: cleanups * test: added common test utils (#29) * test: added a11y test util * chore: test naming change * test: improved & extracted out mockImage * feat(variant): ✨ add before variant * feat(stack): ✨ stack with other variants * feat(variants): ✨ add missing variants with proper variant order * refactor(variants): ✨ use the base variants in the themes with pseudo classes * chore: theme css fixes * refactor(variants): ♻️ simplify config file * refactor(override): ♻️ remove overrides & fix tests * refactor(config): ♻️ remove attention seeking comments Co-authored-by: Anurag Hazra <[email protected]> * feat(button): ✨ improved the button with latest design * fix(scripts): 🐛 remove scripts * build(purge): 💚 add purge to the storybook * Improved storybook performance & migrate to forwardRefSimple (#33) * chore: improved storybook performance * chore: migrate rest of the components to forwardRefAsSimple * chore: added jsdoc comments in forwardRefWithAsSimple * build(purge): 💚 fix storybook missing styles * feat: added support for typesafe theming (#34) * feat: added support for typesafe theming * chore: global namespace instead of local, migrated all components to use getThemeValue * chore: added MergeTheme utility * feat: added theme preset support (#35) * feat: theme presert support for end users * chore: use generics to get the tailwind type from userland * chore: resolve default tailwindconfig from userland * feat: improved preset support * chore: fix test utils render types * chore: added tailwind default autocomplete support in preset * chore: migrate components to forwardRefWithAs * build(purge): 💚 update purge & improve variant generation * style(tag): matched tag styles to figma file * chore(deps): ⬆️ update deps & refactor storybook preview * test(icon): added test for Icon (#36) * test(icon): added tests for icon * chore: update snapshots * test: removed snapshot tests * build(styles): 💚 fix build by moving tailwind css to src Co-authored-by: Navin <[email protected]> Co-authored-by: Anurag <[email protected]>

anuraghazra and others added 3 commits December 29, 2020 17:29

test: added common test utils (#29)

fb2ad25

* test: added a11y test util * chore: test naming change * test: improved & extracted out mockImage

feat(variant): ✨ add before variant

764012a

navin-moorthy self-assigned this Jan 5, 2021

feat(stack): ✨ stack with other variants

75c7e09

vercel bot deployed to Preview January 5, 2021 11:29 View deployment

feat(variants): ✨ add missing variants with proper variant order

1633912

vercel bot deployed to Preview January 6, 2021 08:34 View deployment

refactor(variants): ✨ use the base variants in the themes with pseudo…

3b8942e

… classes

vercel bot deployed to Preview January 6, 2021 10:10 View deployment

navin-moorthy changed the title ~~feat(variant): ✨ add before variant~~ feat(variant): ✨ add base lib variant Jan 6, 2021

chore: theme css fixes

134528b

vercel bot deployed to Preview January 7, 2021 07:34 View deployment

anuraghazra reviewed Jan 7, 2021

View reviewed changes

navin-moorthy added 2 commits January 7, 2021 13:35

refactor(variants): ♻️ simplify config file

80cf967

Merge branch 'specificity-fix-with-variant' of https://github.com/tim…

d138505

…elessco/renderlesskit-react-tailwind into specificity-fix-with-variant

vercel bot deployed to Preview January 7, 2021 08:05 View deployment

navin-moorthy changed the base branch from main to theming-experiment January 7, 2021 08:48

navin-moorthy changed the base branch from theming-experiment to theme-provider-exp January 7, 2021 08:55

navin-moorthy added 2 commits January 7, 2021 15:09

Merge branch 'theme-provider-exp' into specificity-fix-with-variant

2f01bb8

refactor(override): ♻️ remove overrides & fix tests

8106c08

vercel bot deployed to Preview January 7, 2021 09:59 View deployment

anuraghazra mentioned this pull request Jan 7, 2021

fix: CSS override POC #31

Closed

anuraghazra reviewed Jan 7, 2021

View reviewed changes

anuraghazra approved these changes Jan 7, 2021

View reviewed changes

refactor(config): ♻️ remove attention seeking comments

ef857d1

vercel bot deployed to Preview January 7, 2021 14:01 View deployment

navin-moorthy merged commit 090a6dd into theme-provider-exp Jan 7, 2021

navin-moorthy deleted the specificity-fix-with-variant branch January 7, 2021 14:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(variant): ✨ add base `lib` variant #32

feat(variant): ✨ add base `lib` variant #32

Uh oh!

navin-moorthy commented Jan 5, 2021

Uh oh!

vercel bot commented Jan 5, 2021 •

edited

Loading

Uh oh!

anuraghazra Jan 7, 2021

Uh oh!

navin-moorthy Jan 7, 2021

Uh oh!

anuraghazra Jan 7, 2021

Uh oh!

navin-moorthy Jan 7, 2021

Uh oh!

anuraghazra Jan 7, 2021

Uh oh!

anuraghazra Jan 7, 2021

Uh oh!

navin-moorthy Jan 7, 2021

Uh oh!

anuraghazra Jan 7, 2021

Uh oh!

navin-moorthy Jan 7, 2021

Uh oh!

anuraghazra Jan 7, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat(variant): ✨ add base lib variant #32

feat(variant): ✨ add base lib variant #32

Uh oh!

Conversation

navin-moorthy commented Jan 5, 2021

Uh oh!

vercel bot commented Jan 5, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat(variant): ✨ add base `lib` variant #32

feat(variant): ✨ add base `lib` variant #32

vercel bot commented Jan 5, 2021 •

edited

Loading