chore: setup stylelint with fixes

carbon-design-system · Oct 3, 2024 · 8a52e79 · 8a52e79
1 parent 37e1cf5
commit 8a52e79
Show file tree

Hide file tree

Showing 39 changed files with 268 additions and 324 deletions.
diff --git a/package.json b/package.json
@@ -23,8 +23,9 @@
     "prettier": "^2.8.8",
     "prettier-config-carbon": "^0.11.0",
     "rimraf": "^5.0.0",
-    "stylelint": "^15.0.0",
-    "stylelint-config-carbon": "^1.18.0"
+    "stylelint": "^16.9.0",
+    "stylelint-config-carbon": "^1.19.0-rc.0",
+    "stylelint-config-standard-scss": "^13.1.0"
   },
   "commitlint": {
     "extends": [
@@ -79,15 +80,19 @@
   },
   "stylelint": {
     "extends": [
-      "stylelint-config-carbon"
+      "stylelint-config-standard-scss"
     ],
+    "rules": {
+      "selector-class-pattern": null
+    },
     "overrides": [
       {
         "files": [
           "src/components/**/*.scss"
         ],
         "rules": {
-          "max-nesting-depth": null
+          "max-nesting-depth": null,
+          "selector-class-pattern": null
         }
       }
     ]

diff --git a/react/batch-actions/src/App.scss b/react/batch-actions/src/App.scss
@@ -24,7 +24,7 @@
   top: 0;
   height: 100%;
   width: 5px;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgb(0 0 0 / 50%);
   cursor: col-resize;
   user-select: none;
   touch-action: none;

diff --git a/react/batch-actions/src/index.scss b/react/batch-actions/src/index.scss
@@ -3,7 +3,7 @@
 );
 @use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
-@use './App.scss';
+@use './App';
 
 body {
   margin: 0;

diff --git a/react/customizeColumns/src/App.scss b/react/customizeColumns/src/App.scss
@@ -74,7 +74,6 @@ $horizontal-drag-height: 6rem;
   width: 100%;
   height: $spacing-09;
   border: 2px dashed $focus;
-  /* stylelint-disable-next-line carbon/theme-token-use */
   background-color: colors.$blue-10;
 }
 

diff --git a/react/customizeColumns/src/index.scss b/react/customizeColumns/src/index.scss
@@ -3,7 +3,7 @@
 );
 @use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
-@use './App.scss';
+@use './App';
 
 body {
   margin: 0;

diff --git a/react/editableCells/src/index.scss b/react/editableCells/src/index.scss
@@ -3,7 +3,7 @@
 );
 @use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
-@use './App.scss';
+@use './App';
 
 body {
   margin: 0;

diff --git a/react/filterFlyout/src/App.scss b/react/filterFlyout/src/App.scss
@@ -47,6 +47,7 @@
 
 .filter-checkbox-group-label {
   @include type.type-style('label-01');
+
   color: $text-secondary;
   text-transform: capitalize;
   margin-bottom: 0.5rem;

diff --git a/react/filterFlyout/src/index.scss b/react/filterFlyout/src/index.scss
@@ -3,7 +3,7 @@
 );
 @use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
-@use './App.scss';
+@use './App';
 
 body {
   margin: 0;

diff --git a/react/filterPanel/src/App.scss b/react/filterPanel/src/App.scss
@@ -47,6 +47,7 @@
 
 .filter-checkbox-group-label {
   @include type.type-style('label-01');
+
   color: $text-secondary;
   text-transform: capitalize;
   margin-bottom: 0.5rem;
@@ -74,7 +75,6 @@
 .panel--container {
   min-height: var(--table-height);
   min-width: 320px;
-  // border: 2px solid red;
   border-right: 1px solid $border-subtle;
   border-top: 1px solid $border-subtle;
   position: absolute;
@@ -106,11 +106,13 @@
   position: relative;
   width: 100%;
   height: var(--table-height);
+
   .filter--panel__close-wrapper.cds--popover-container:not(
       .cds--popover--auto-align
     ) {
     position: initial;
   }
+
   .filter--panel__close-wrapper.cds--popover-caret {
     visibility: hidden;
   }
@@ -130,6 +132,7 @@
   position: sticky;
   bottom: 0;
   width: 320px;
+
   button.cds--btn {
     min-width: 50%;
     max-inline-size: 50%;

diff --git a/react/filterPanel/src/index.scss b/react/filterPanel/src/index.scss
@@ -3,7 +3,7 @@
 );
 @use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
-@use './App.scss';
+@use './App';
 
 body {
   margin: 0;

diff --git a/react/gallery/src/App.scss b/react/gallery/src/App.scss
@@ -24,7 +24,7 @@
   top: 0;
   height: 100%;
   width: 5px;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgb(0 0 0 / 50%);
   cursor: col-resize;
   user-select: none;
   touch-action: none;
@@ -85,14 +85,12 @@
 .sortable-button-header {
   color: $text-primary;
   width: 100%;
-  padding-inline-end: 1rem;
-  padding-inline-start: 1rem;
+  padding-inline: 1rem;
   max-inline-size: none;
 }
 
 .sortable-example.cds--data-table th {
-  padding-inline-end: 0;
-  padding-inline-start: 0;
+  padding-inline: 0;
 }
 
 .sortable-example {
@@ -165,7 +163,6 @@ $horizontal-drag-height: 6rem;
   width: 100%;
   height: $spacing-09;
   border: 2px dashed $focus;
-  /* stylelint-disable-next-line carbon/theme-token-use */
   background-color: colors.$blue-10;
 }
 
@@ -240,6 +237,7 @@ $horizontal-drag-height: 6rem;
 
 .filter-checkbox-group-label {
   @include type.type-style('label-01');
+
   color: $text-secondary;
   text-transform: capitalize;
   margin-bottom: 0.5rem;
@@ -269,59 +267,9 @@ $horizontal-drag-height: 6rem;
   margin-top: 1rem;
 }
 
-// Filter panel
-// Flyout
-.flyout--container {
-  padding: 1rem;
-}
-
-.flyout--container .flyout--container__filters {
-  display: grid;
-  grid-template-columns: auto;
-  gap: 1rem;
-}
-
-.flyout--label {
-  @include type.type-style('body-compact-01');
-  @include font-family.font-weight('semibold');
-
-  padding-bottom: 1rem;
-}
-
-.filter-flyout-example .cds--popover-content {
-  max-inline-size: 642px;
-}
-
-.filter-checkbox-group-label {
-  @include type.type-style('label-01');
-  color: $text-secondary;
-  text-transform: capitalize;
-  margin-bottom: 0.5rem;
-}
-
-.filter-flyout-button-set.cds--btn-set .cds--btn {
-  max-width: none;
-  width: 50%;
-}
-
-.tag-overflow-flyout-example {
-  height: 48px;
-  padding-left: 0.5rem;
-}
-
-.filter--summary {
-  display: flex;
-  align-items: center;
-}
-
-.flyout-dropdown-selected-item {
-  text-transform: capitalize;
-}
-
 .panel--container {
   min-height: var(--table-height);
   min-width: 320px;
-  // border: 2px solid red;
   border-right: 1px solid $border-subtle;
   border-top: 1px solid $border-subtle;
   position: absolute;
@@ -353,11 +301,13 @@ $horizontal-drag-height: 6rem;
   position: relative;
   width: 100%;
   height: var(--table-height);
+
   .filter--panel__close-wrapper.cds--popover-container:not(
       .cds--popover--auto-align
     ) {
     position: initial;
   }
+
   .filter--panel__close-wrapper.cds--popover-caret {
     visibility: hidden;
   }
@@ -377,6 +327,7 @@ $horizontal-drag-height: 6rem;
   position: sticky;
   bottom: 0;
   width: 320px;
+
   button.cds--btn {
     min-width: 50%;
     max-inline-size: 50%;

diff --git a/react/gallery/src/index.scss b/react/gallery/src/index.scss
@@ -3,7 +3,7 @@
 );
 @use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
-@use './App.scss';
+@use './App';
 
 body {
   margin: 0;

diff --git a/react/globalFilter/src/App.scss b/react/globalFilter/src/App.scss
@@ -24,7 +24,7 @@
   top: 0;
   height: 100%;
   width: 5px;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgb(0 0 0 / 50%);
   cursor: col-resize;
   user-select: none;
   touch-action: none;

diff --git a/react/globalFilter/src/GlobalFilter.tsx b/react/globalFilter/src/GlobalFilter.tsx
@@ -1,5 +1,8 @@
 import React, { useLayoutEffect, useRef } from 'react';
-import { DataTable } from '@carbon/react';
+import { CodeSnippet, DataTable } from '@carbon/react';
+import { NoDataEmptyState } from '@carbon/ibm-products';
+import cx from 'classnames';
+
 const {
   Table,
   TableBody,
@@ -66,6 +69,7 @@ export const GlobalFilter = () => {
     }),
     columnHelper.accessor('example', {
       header: 'Example',
+      enableGlobalFilter: false,
     }),
   ];
 
@@ -101,6 +105,8 @@ export const GlobalFilter = () => {
     }
   }, [table]);
 
+  console.log(table.getFilteredRowModel().rows.length);
+
   return (
     <div ref={tableWrap} className="tanstack-example">
       <TableContainer
@@ -122,6 +128,8 @@ export const GlobalFilter = () => {
               icon={Launch}
               label="StackBlitz"
             />
+            excludes <CodeSnippet type="inline">Example</CodeSnippet> column
+            from global filtering
           </span>
         }
         style={{
@@ -135,7 +143,14 @@ export const GlobalFilter = () => {
           placeholder="Search all columns..."
           persistent
         />
-        <Table size="lg" useZebraStyles={false} aria-label="sample table">
+        <Table
+          size="lg"
+          useZebraStyles={false}
+          aria-label="sample table"
+          className={cx({
+            ['empty-table-wrapper']:
+              table.getFilteredRowModel().rows.length === 0,
+          })}>
           <TableHead>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
@@ -156,7 +171,23 @@ export const GlobalFilter = () => {
               </TableRow>
             ))}
           </TableHead>
-          <TableBody>
+          <TableBody
+            className={cx({
+              ['empty-table-body']:
+                table.getFilteredRowModel().rows.length === 0,
+            })}>
+            {table.getFilteredRowModel().rows.length === 0 && (
+              <TableRow>
+                <TableCell>
+                  <NoDataEmptyState
+                    title="No results found"
+                    subtitle="Try adjusting your search or filter options to find what you're looking for."
+                    illustrationDescription="Test alt text"
+                    className="empty-table"
+                  />
+                </TableCell>
+              </TableRow>
+            )}
             {table.getRowModel().rows.map((row) => (
               <TableRow key={row.id}>
                 {row.getVisibleCells().map((cell) => (

diff --git a/react/globalFilter/src/index.scss b/react/globalFilter/src/index.scss
@@ -3,7 +3,7 @@
 );
 @use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
-@use './App.scss';
+@use './App';
 
 body {
   margin: 0;
@@ -21,3 +21,20 @@ body {
 .example--link__icon {
   margin-right: 0.25rem;
 }
+
+.cds--data-table.empty-table-wrapper td,
+.cds--data-table.empty-table-wrapper tbody th,
+.cds--data-table.empty-table-wrapper tbody tr:hover td {
+  border-block-end: 0;
+}
+
+.cds--data-table tbody.empty-table-body,
+.cds--data-table tbody.empty-table-body tr:not([data-child-row]):hover,
+.cds--data-table tbody.empty-table-body tr[data-child-row]:hover > td {
+  background-color: transparent;
+}
+
+.cds--data-table td .empty-table {
+  position: absolute;
+  max-width: 265px;
+}
diff --git a/react/infiniteScroll/src/index.scss b/react/infiniteScroll/src/index.scss
@@ -3,7 +3,7 @@
 );
 @use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
-@use './App.scss';
+@use './App';
 
 body {
   margin: 0;