Repository: marigold-ui/marigold
Pull request #2478 (2022-09-17 12:11:25)

feat: improve `&:hover` selector to adhere CSS specificity

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: 91cf6e2a6b054662225f5be107808172ff9ba44f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/master/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/marigold-ui/marigold/new/hover-fix?filename=.changeset/selfish-sheep-confess.md&value=---%0A%22%40marigold%2Fsystem%22%3A%20patch%0A---%0A%0Afeat%3A%20improve%20%60%26%3Ahover%60%20selector%20to%20adhere%20CSS%20specificity%0A)



Patch:
diff --git a/.changeset/selfish-sheep-confess.md b/.changeset/selfish-sheep-confess.md
new file mode 100644
index 000000000..71a30ff13
--- /dev/null
+++ b/.changeset/selfish-sheep-confess.md
@@ -0,0 +1,5 @@
+---
+"@marigold/system": patch
+---
+
+feat: improve `&:hover` selector to adhere CSS specificity
diff --git a/docs/plugins/navigation.mjs b/docs/plugins/navigation.mjs
index a4d73d380..3e10ea9c2 100644
--- a/docs/plugins/navigation.mjs
+++ b/docs/plugins/navigation.mjs
@@ -6,10 +6,19 @@ import { matter } from 'vfile-matter';
 
 const toSlug = (file, from) => path.relative(from, file.replace(/\.mdx?$/, ''));
 
+/**
+ * @typedef {object} Frontmatter
+ * @prop [title] string
+ * @prop [group] string
+ */
+
+/**
+ * @param {string} filePath
+ * @return {Promise<Frontmatter>} frontmatter
+ */
 const getFrontmatter = async filePath => {
   const file = await read(filePath);
   matter(file);
-
   return file.data.matter || {};
 };
 
@@ -34,7 +43,6 @@ const createNavigationTree = async ({ pages, order }) => {
     files.map(async filePath => {
       const frontmatter = await getFrontmatter(filePath);
       return {
-        // @ts-ignore
         ...frontmatter,
         slug: toSlug(filePath, pages),
       };
@@ -70,7 +78,6 @@ const createNavigationTree = async ({ pages, order }) => {
       });
       itemCategory = categories[categories.length - 1];
     }
-
     if (!group) {
       itemCategory.items.push(item);
       return;
@@ -109,7 +116,7 @@ const createNavigationTree = async ({ pages, order }) => {
     // Sort groups based on config
     const config = order.find(c => c.name === category.name);
 
-    if (config?.groups) {
+    if (!config?.groups) {
       return;
     }
 
diff --git a/packages/system/src/components/Box/selector.ts b/packages/system/src/components/Box/selector.ts
index 3df58a404..6dcc4da30 100644
--- a/packages/system/src/components/Box/selector.ts
+++ b/packages/system/src/components/Box/selector.ts
@@ -20,7 +20,7 @@ const selector = {
 
 const state = {
   none: [''],
-  hover: [':hover', '[data-hover]'],
+  hover: [':hover:not([disabled])', '[data-hover]'],
   focus: [':focus', '[data-focus]'],
   focusVisible: [':focus-visible', '[data-focus-visible]'],
   active: [':active', '[data-active]'],


Test patch:
diff --git a/packages/system/src/components/Box/selector.test.ts b/packages/system/src/components/Box/selector.test.ts
index d78e6387d..97f9ca721 100644
--- a/packages/system/src/components/Box/selector.test.ts
+++ b/packages/system/src/components/Box/selector.test.ts
@@ -23,7 +23,7 @@ describe('transform states', () => {
         '&:hover': {},
       },
       expected: {
-        '&:hover, &[data-hover]': {},
+        '&:hover:not([disabled]), &[data-hover]': {},
       },
     },
     {
@@ -131,7 +131,7 @@ describe('transform states', () => {
         '&:hover-group': {},
       },
       expected: {
-        '[role=group]:hover &, [role=group][data-hover] &, [data-group]:hover &, [data-group][data-hover] &':
+        '[role=group]:hover:not([disabled]) &, [role=group][data-hover] &, [data-group]:hover:not([disabled]) &, [data-group][data-hover] &':
           {},
       },
     },
@@ -182,7 +182,7 @@ describe('transform states', () => {
       })
     ).toMatchInlineSnapshot(`
       {
-        "&:hover, &[data-hover]": {
+        "&:hover:not([disabled]), &[data-hover]": {
           "&:focus, &[data-focus]": {
             "outline": "1px solid #228be6",
           },