feat: add example dir to global filter

carbon-design-system · Nov 15, 2024 · 35ce124 · 35ce124
1 parent 55ef138
commit 35ce124
Show file tree

Hide file tree

Showing 12 changed files with 34 additions and 75 deletions.
diff --git a/react/filterPanel/tsconfig.app.json b/react/filterPanel/tsconfig.app.json
@@ -21,7 +21,7 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
-    "types": [ "./src/customTypings.d.ts" ],
+    "types": ["./src/Example/customTypings.d.ts"],
     "resolveJsonModule": true
   },
   "include": ["./src"]

diff --git a/react/globalFilter/src/Example/Example.tsx b/react/globalFilter/src/Example/Example.tsx
@@ -0,0 +1,11 @@
+import { Grid, Column } from '@carbon/react';
+import { GlobalFilter } from './GlobalFilter';
+import './example.scss';
+
+export const Example = () => (
+  <Grid className="page-grid">
+    <Column sm={4} md={8} lg={16}>
+      <GlobalFilter />
+    </Column>
+  </Grid>
+);
diff --git a/react/globalFilter/src/GlobalFilter.tsx → ...globalFilter/src/Example/GlobalFilter.tsx b/react/globalFilter/src/GlobalFilter.tsx → ...globalFilter/src/Example/GlobalFilter.tsx
@@ -27,9 +27,8 @@ import {
 
 // A TanStack fork of Kent C. Dodds' match-sorter library that provides ranking information
 import { rankItem } from '@tanstack/match-sorter-utils';
-import { ExampleLink } from './ExampleLink';
 import { Launch } from '@carbon/react/icons';
-import * as packageJson from '../package.json';
+import * as packageJson from '../../package.json';
 
 import { makeData, Resource } from './makeData';
 
@@ -112,26 +111,6 @@ export const GlobalFilter = () => {
       <TableContainer
         title="Global filter"
         className="basic-table"
-        description={
-          <span className="flex">
-            <ExampleLink
-              url={`${import.meta.env.VITE_CODE_SANDBOX_URL_ROOT}/${
-                packageJson.name
-              }`}
-              icon={Launch}
-              label="Code sandbox"
-            />
-            <ExampleLink
-              url={`${import.meta.env.VITE_STACK_BLITZ_URL_ROOT}/${
-                packageJson.name
-              }`}
-              icon={Launch}
-              label="StackBlitz"
-            />
-            excludes <CodeSnippet type="inline">Example</CodeSnippet> column
-            from global filtering
-          </span>
-        }
         style={{
           width: table.getCenterTotalSize(),
         }}>

diff --git a/react/globalFilter/src/customTypings.d.ts → ...obalFilter/src/Example/customTypings.d.ts b/react/globalFilter/src/customTypings.d.ts → ...obalFilter/src/Example/customTypings.d.ts
diff --git a/react/globalFilter/src/App.scss → react/globalFilter/src/Example/example.scss b/react/globalFilter/src/App.scss → react/globalFilter/src/Example/example.scss
@@ -56,3 +56,20 @@
 .tanstack-example {
   padding-bottom: 2rem;
 }
+
+.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/globalFilter/src/Example/index.ts b/react/globalFilter/src/Example/index.ts
@@ -0,0 +1 @@
+export { Example } from './Example';
diff --git a/react/globalFilter/src/makeData.ts → react/globalFilter/src/Example/makeData.ts b/react/globalFilter/src/makeData.ts → react/globalFilter/src/Example/makeData.ts
diff --git a/react/globalFilter/src/ExampleLink.tsx b/react/globalFilter/src/ExampleLink.tsx
diff --git a/react/globalFilter/src/index.scss b/react/globalFilter/src/index.scss
@@ -3,38 +3,8 @@
 );
 @use '@carbon/styles/scss/type';
 @use '@carbon/ibm-products/css/index';
-@use './App';
 
 body {
   margin: 0;
   padding: 0;
 }
-
-.example--link {
-  @include type.type-style('label-01');
-
-  display: flex;
-  align-items: center;
-  margin-right: 0.5rem;
-}
-
-.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/globalFilter/src/index.ts b/react/globalFilter/src/index.ts
diff --git a/react/globalFilter/src/main.tsx b/react/globalFilter/src/main.tsx
@@ -2,14 +2,11 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import {
   CodeSnippet,
-  Column,
-  Grid,
   Header,
   HeaderContainer,
   HeaderName,
 } from '@carbon/react';
-
-import { GlobalFilter } from './GlobalFilter';
+import { Example } from './Example';
 
 import './index.scss';
 
@@ -32,10 +29,6 @@ const renderUIShellHeader = () => (
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     {renderUIShellHeader()}
-    <Grid className="page-grid">
-      <Column sm={4} md={8} lg={16}>
-        <GlobalFilter />
-      </Column>
-    </Grid>
+    <Example />
   </StrictMode>
 );
diff --git a/react/globalFilter/tsconfig.app.json b/react/globalFilter/tsconfig.app.json
@@ -21,7 +21,7 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
 
-    "types": [ "./src/customTypings.d.ts" ],
+    "types": ["./src/Example/customTypings.d.ts"],
     "resolveJsonModule": true
   },
   "include": ["./src"]