conform to BEM

primer · Feb 21, 2025 · 99e8df2 · 99e8df2
1 parent 55eac0e
commit 99e8df2
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 13 deletions.
diff --git a/packages/react/src/DataTable/Table.module.css b/packages/react/src/DataTable/Table.module.css
@@ -197,14 +197,14 @@
 }
 
 /* The ASC icon is visible if the header is sortable and is hovered or focused */
-.TableHeader:hover .TableSortIcon-ascending,
-.TableHeader .TableSortButton:focus .TableSortIcon-ascending {
+.TableHeader:hover .TableSortIcon--ascending,
+.TableHeader .TableSortButton:focus .TableSortIcon--ascending {
   visibility: visible;
 }
 
 /* Each sort icon is visible if the TableHeader is currently in the corresponding sort state */
-.TableHeader[aria-sort='ascending'] .TableSortIcon-ascending,
-.TableHeader[aria-sort='descending'] .TableSortIcon-descending {
+.TableHeader[aria-sort='ascending'] .TableSortIcon--ascending,
+.TableHeader[aria-sort='descending'] .TableSortIcon--descending {
   visibility: visible;
 }
 

diff --git a/packages/react/src/DataTable/Table.tsx b/packages/react/src/DataTable/Table.tsx
@@ -394,15 +394,15 @@ function TableSortHeader({align, children, direction, onToggleSort, ...rest}: Ta
           <SortAscIcon
             className={clsx('TableSortIcon', 'TableSortIcon--ascending', {
               [classes.TableSortIcon]: enabled,
-              [classes['TableSortIcon-ascending']]: enabled,
+              [classes['TableSortIcon--ascending']]: enabled,
             })}
           />
         ) : null}
         {direction === SortDirection.DESC ? (
           <SortDescIcon
             className={clsx('TableSortIcon', 'TableSortIcon--descending', {
               [classes.TableSortIcon]: enabled,
-              [classes['TableSortIcon-descending']]: enabled,
+              [classes['TableSortIcon--descending']]: enabled,
             })}
           />
         ) : null}

diff --git a/packages/react/src/SideNav.module.css b/packages/react/src/SideNav.module.css
@@ -29,7 +29,7 @@
     border-bottom: none;
   }
 
-  .SideNav.SideNavVariant-normal > & {
+  .SideNav.SideNavVariant--normal > & {
     padding: var(--base-size-16);
     color: var(--fgColor-default);
     border: 0;
@@ -83,7 +83,7 @@
     }
   }
 
-  .SideNav.SideNavVariant-lightweight > & {
+  .SideNav.SideNavVariant--lightweight > & {
     padding: var(--base-size-4) 0;
     color: var(--fgColor-accent);
 

diff --git a/packages/react/src/SideNav.tsx b/packages/react/src/SideNav.tsx
@@ -64,7 +64,7 @@ function SideNav({
     {
       [classes.SideNav]: enabled,
       [classes.SideNavBordered]: enabled && bordered,
-      [classes[`SideNavVariant-${variantClassName}`]]: enabled,
+      [classes[`SideNavVariant--${variantClassName}`]]: enabled,
       sidenav: !enabled,
       [`variant-${variantClassName}`]: !enabled,
     },

diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.module.css b/packages/react/src/experimental/SelectPanel2/SelectPanel.module.css
@@ -105,6 +105,7 @@
 .TextInput {
   padding-left: var(--base-size-8) !important;
 
+  /* stylelint-disable-next-line selector-class-pattern */
   &:has(input:placeholder-shown) :global(.TextInput-action) {
     display: none;
   }

diff --git a/packages/react/src/internal/components/TextInputWrapper.module.css b/packages/react/src/internal/components/TextInputWrapper.module.css
@@ -166,8 +166,8 @@
     margin-right: var(--base-size-8);
   }
 
-  & :global(.TextInput-icon),
-  & :global(.TextInput-action) {
+  & :global(.TextInput-icon) /* stylelint-disable-line selector-class-pattern */,
+  & :global(.TextInput-action)  /* stylelint-disable-line selector-class-pattern */ {
     align-self: center;
     color: var(--fgColor-muted);
     flex-shrink: 0;

diff --git a/stylelint.config.mjs b/stylelint.config.mjs
@@ -7,10 +7,10 @@ export default {
     // We want to allow type selectors like `svg`
     'selector-max-type': 1,
     'selector-class-pattern': [
-      '^(focus-visible|[A-Z][a-zA-Z0-9]+(-[a-zA-Z0-9]+)*)$',
+      '^(focus-visible|[A-Z][a-zA-Z0-9]+(__[a-z]+(-[a-z]+)*)?(--[a-z]+(-[a-z]+)*)?)$',
       {
         resolveNestedSelectors: true,
-        message: '"%s" selector should be written in PascalCase, allowing for modifiers (e.g. ComponentName-modifier)',
+        message: '"%s" selector should be written in PascalCase or BEM format (e.g. block__element--modifier)',
       },
     ],
   },