Update to include more examples, fix ag grid in

kitchen sink
jpmorganchase · May 3, 2024 · f0ba6b0 · f0ba6b0
1 parent cb3de10
commit f0ba6b0
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 9 deletions.
diff --git a/packages/ag-grid-theme/css/_salt-ag-theme-default-params.scss b/packages/ag-grid-theme/css/_salt-ag-theme-default-params.scss
@@ -3,7 +3,7 @@
 $salt-ag-theme-default-params: (
   row-hover-color: var(--agGrid-row-color-hover),
   row-border-color: var(--agGrid-row-borderColor),
-  header-background-color: var(--salt-palette-neutral-primary-background),
+  header-background-color: var(--salt-container-primary-background),
   header-column-separator: true,
   header-column-separator-width: 1px,
   header-column-separator-color: var(--agGrid-header-column-separator-color),

diff --git a/packages/ag-grid-theme/css/_salt-ag-theme-mixin.scss b/packages/ag-grid-theme/css/_salt-ag-theme-mixin.scss
@@ -11,6 +11,11 @@
     border: none;
   }
 
+  .ag-root-wrapper,
+  .ag-sticky-top {
+    background: var(--ag-background-color, var(--agGrid-background));
+  }
+
   // Because we are using a different border thickness on focus than default
   // we have to adjust height on various elements either using the line-height or height
   // properties.
@@ -344,6 +349,7 @@
 
   .ag-row {
     color: var(--agGrid-foreground);
+    background-color: var(--ag-background-color, var(--agGrid-background));
   }
 
   .ag-row-hover {

diff --git a/packages/ag-grid-theme/stories/examples/HDCompact.tsx b/packages/ag-grid-theme/stories/examples/HDCompact.tsx
@@ -1,4 +1,4 @@
-import { SaltProvider } from "@salt-ds/core";
+import { UNSTABLE_SaltProviderNext } from "@salt-ds/core";
 import { AgGridReact, AgGridReactProps } from "ag-grid-react";
 import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher";
 import dataGridExampleColumns from "../dependencies/dataGridExampleColumns";
@@ -26,7 +26,7 @@ const HDCompact = (props: AgGridReactProps) => {
   });
 
   return (
-    <SaltProvider density="high">
+    <UNSTABLE_SaltProviderNext density="high">
       <div {...containerProps}>
         <AgGridReact
           columnDefs={dataGridExampleColumns}
@@ -47,7 +47,7 @@ const HDCompact = (props: AgGridReactProps) => {
           }}
         />
       </div>
-    </SaltProvider>
+    </UNSTABLE_SaltProviderNext>
   );
 };
 

diff --git a/packages/core/stories/form-field/form-field.stories.tsx b/packages/core/stories/form-field/form-field.stories.tsx
@@ -376,11 +376,18 @@ export const MultipleChildren: StoryFn<typeof FormField> = (props) => {
 
 export const Readonly: StoryFn<typeof FormField> = (props) => {
   return (
-    <FormField style={{ width: "366px" }} readOnly {...props}>
-      <FormLabel>Readonly Form Field</FormLabel>
-      <Input defaultValue="Primary Input value" />
-      <FormHelperText>This Form Field is readonly</FormHelperText>
-    </FormField>
+    <StackLayout>
+      <FormField style={{ width: "366px" }} readOnly {...props}>
+        <FormLabel>Readonly Form Field</FormLabel>
+        <Input defaultValue="Primary Input value" />
+        <FormHelperText>This Form Field is readonly</FormHelperText>
+      </FormField>
+      <FormField style={{ width: "366px" }} readOnly {...props}>
+        <FormLabel>Readonly multiline input</FormLabel>
+        <MultilineInput defaultValue="Input value" />
+        <FormHelperText>This Form Field is readonly</FormHelperText>
+      </FormField>
+    </StackLayout>
   );
 };
 

diff --git a/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx b/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx
@@ -29,6 +29,7 @@ import {
   SaltShakerIcon,
   SaltShakerSolidIcon,
 } from "@salt-ds/icons";
+import { ListNext, ListItemNext } from "@salt-ds/lab";
 import {
   DefaultGroup as AccordionDefault,
   Status as AccordionStatus,
@@ -62,17 +63,24 @@ import {
   WithValidation as FormFieldValidation,
   WithMultilineInputAsQuestion,
   HelperText as FormFieldHelperText,
+  Readonly as FormFieldReadonly,
 } from "../../../core/stories/form-field/form-field.stories";
 import {
   Default as PillDefault,
   Disabled as PillDisabled,
   Closable as PillClosable,
   Icon as PillIcon,
 } from "../../../core/stories/pill/pill.stories";
+import { Default as ListNextDefault } from "../../../lab/stories/list-next/list.stories";
 import { Default as OverlayDefault } from "../../../core/stories/overlay/overlay.stories";
 import AgGridThemeDefault from "../../../ag-grid-theme/stories/examples/Default";
+import AgGridThemeZebra from "../../../ag-grid-theme/stories/examples/VariantZebra";
 import AgGridThemeHDCompact from "../../../ag-grid-theme/stories/examples/HDCompact";
 
+import "ag-grid-community/dist/styles/ag-grid.css";
+import "ag-grid-community/dist/styles/ag-theme-material.css";
+import "../../../../dist/salt-ds-ag-grid-theme/salt-ag-theme.css";
+
 export default {
   title: "Experimental/Kitchen Sink",
 };
@@ -329,6 +337,19 @@ export const Example1 = () => {
             <WithMultilineInputAsQuestion />
           </FlexItem>
         </StackLayout>
+        <StackLayout>
+          <FormFieldReadonly />
+        </StackLayout>
+      </StackLayout>
+      <StackLayout>
+        <ListNext selected="blue">
+          <ListItemNext value="green">Green</ListItemNext>
+          <ListItemNext disabled value="red">
+            Red
+          </ListItemNext>
+          <ListItemNext value="blue">Blue</ListItemNext>
+          <ListItemNext value="purple">Purple</ListItemNext>
+        </ListNext>
       </StackLayout>
       <AgGridThemeDefault
         columnDefs={[
@@ -354,6 +375,8 @@ export const Example1 = () => {
           },
         ]}
       />
+      <H3>Zebra</H3>
+      <AgGridThemeZebra />
       <H3>HD Compact</H3>
       <AgGridThemeHDCompact
         columnDefs={[