@linzjs/step-ag-grid 13.0.0 → 13.1.1

package/src/stories/grid/GridReadOnly.stories.tsx

@@ -23,6 +23,7 @@ import {
   useGridFilter,
   wait,
 } from "../..";
+import { GridFilterColumnsToggle } from "../../components";
 import "../../styles/GridTheme.scss";
 import "../../styles/index.scss";
 
@@ -66,6 +67,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
         headerName: "Id",
         initialWidth: 65,
         maxWidth: 85,
+        lockVisible: true,
       }),
       GridCell({
         field: "position",
@@ -213,10 +215,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
     <GridWrapper maxHeight={300}>
       <GridFilters>
         <GridFilterQuick quickFilterPlaceholder={"Custom placeholder..."} />
-        <div>
-          Custom filter: Age less than:
-          <GridFilterLessThan field={"age"} />
-        </div>
+        <GridFilterLessThan text="Age <" field={"age"} />
         <GridFilterButtons<ITestRow>
           luiButtonProps={{ style: { whiteSpace: "nowrap" } }}
           options={[
@@ -229,8 +228,10 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
             },
           ]}
         />
+        <GridFilterColumnsToggle />
       </GridFilters>
       <Grid
+        data-testid={"readonly"}
         {...props}
         selectable={true}
         autoSelectFirstRow={true}
@@ -243,7 +244,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
   );
 };
 
-const GridFilterLessThan = (props: { field: keyof ITestRow }): JSX.Element => {
+const GridFilterLessThan = (props: { field: keyof ITestRow; text: string }): JSX.Element => {
   const [value, setValue] = useState<number>();
 
   const filter = useCallback(
@@ -261,7 +262,13 @@ const GridFilterLessThan = (props: { field: keyof ITestRow }): JSX.Element => {
     }
   };
 
-  return <input type={"text"} defaultValue={value} onChange={(e) => updateValue(e.target.value)} />;
+  return (
+    <div className={"flex-row-center"}>
+      <div style={{ whiteSpace: "nowrap" }}>{props.text}</div>
+      &#160;
+      <input type={"text"} defaultValue={value} onChange={(e) => updateValue(e.target.value)} style={{ width: 64 }} />
+    </div>
+  );
 };
 
 export const ReadOnlySingleSelection = GridReadOnlyTemplate.bind({});

package/src/styles/Grid.scss

@@ -30,18 +30,21 @@
   margin-bottom: 16px;
   flex: 0;
   display: flex;
+  align-items: center;
   flex-direction: row;
   grid-column-gap: 1em;
+  padding: 0.25rem 0;
 }
 
 
 .Grid-quickFilterBox {
   width: 100%;
-  height: 48px;
+  height: 40px;
   border: 0.06rem solid colors.$silver;
   border-radius: 3px;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
+  font-family: "Open Sans", system-ui, sans-serif;
 }
 
 .Grid-popoverContainer {
@@ -63,7 +66,7 @@
 }
 
 .GridCell-readonly {
-  color: colors.$gray;
+  color: colors.$fuscous;
 }
 
 .Grid-container.ag-theme-alpine .ag-cell {
@@ -81,3 +84,16 @@
 .Grid-container.ag-theme-alpine .ag-cell-wrapper {
   width: 100%;
 }
+
+.flex-col-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.flex-row-center {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+

package/src/styles/GridFilterColumnsToggle.scss

@@ -0,0 +1,4 @@
+.GridFilterColumnsToggle-container {
+  max-height: 280px;
+  overflow: auto;
+}

package/src/styles/GridFilterHeaderIconButton.scss

@@ -0,0 +1,3 @@
+.MenuItem-icon {
+  margin-right: 8px;
+}

package/src/styles/GridTheme.scss

@@ -13,8 +13,8 @@
   @include ag-theme-alpine(
     (
       alpine-active-color: lui.$sea,
-      foreground-color: lui.$grey-80,
-      data-color: lui.$grey-80,
+      foreground-color: lui.$charcoal,
+      data-color: lui.$charcoal,
       // ag-grid-community >=28
       selected-row-background-color: lui.$polar,
       header-foreground-color: lui.$surfie,

package/src/styles/index.scss

@@ -8,3 +8,6 @@
 @use "./GridIcon";
 @use "./GridLoadableCell";
 @use "./GridPopoverMenu";
+@use "./GridFilterColumnsToggle";
+@use "./GridFilterHeaderIconButton";
+