WIP Save Layout

vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css

@@ -1,10 +1,21 @@
+* {
+  --salt-selectable-foreground-hover: #6d18bdc3;
+  --salt-selectable-foreground-selected: #6D18BD;
+  --salt-selectable-borderColor-selected: #6D18BD;
+  --saltInputLegacy-fontFamily: Nunito Sans;
+  --salt-text-fontFamily: Nunito Sans;
+  --saltInputLegacy-fontSize: 12px;
+  --salt-text-label-fontSize: 10px;
+  --saltFormFieldLegacy-label-paddingLeft: 0;
+  font-family: Nunito Sans;
+}
+
 .vuuSaveLayoutPanel {
   display: flex;
   padding: 16px;
   flex-direction: column;
   align-items: flex-start;
   gap: 16px;
-  max-width: 585px;
   border-radius: 6px;
   border: 1px solid var(--accent-2, #6D18BD);
   background: #FFF;
@@ -19,11 +30,8 @@
   align-self: stretch;
   color: var(--light-text-primary, #15171B);
   font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;
-  font-family: Nunito Sans;
   font-size: 16px;
-  font-style: normal;
   font-weight: 600;
-  line-height: 16px;
 }
 
 .screenshotContainer {
@@ -66,6 +74,26 @@
   align-self: stretch;
 }
 
+.settingsGroup {
+  display: flex;
+  flex-direction: unset;
+  align-items: flex-end;
+  gap: 10px;
+  width: 100%;
+  line-height: 16px;
+}
+
+.setting {
+  display: flex;
+  height: 24px;
+  align-items: center;
+  gap: 6px;
+  color: var(--light-text-primary, #15171B);
+  font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;
+  font-size: 12px;
+  font-weight: 400;
+}
+
 .buttonsContainer {
   display: flex;
   padding-top: 8px;
@@ -84,7 +112,6 @@
   gap: 8px;
   border-radius: 6px;
   font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;
-  font-family: Nunito Sans;
   font-size: 12px;
   font-style: normal;
   font-weight: 700;

vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx

@@ -1,34 +1,52 @@
-import {Input, FormField, FormLabel, ComboBox} from "@salt-ds/lab";
-import {Button} from "@salt-ds/core";
+import { Input, FormField, FormLabel, ComboBox, Dialog, DropdownPlaceholder } from "@salt-ds/lab";
+import { Button, Checkbox, CheckboxGroup, RadioButton, RadioButtonGroup } from "@salt-ds/core";
+import { ChevronDownIcon } from "@salt-ds/icons";
 
 import "./SaveLayoutPanel.css";
-import {useState} from "react";
+import { useState } from "react";
 
 // TODO: replace
 const groups = [
-  "Alabama",
-  "Alaska",
-  "Arizona",
-  "Arkansas",
-  "California"
+  "Group 1",
+  "Group 2",
+  "Group 3",
+  "Group 4",
+  "Group 5"
 ];
 
-export const SaveLayoutPanel = () => {
+type RadioValue = "radioValue1" | "radioValue2" | "radioValue3" | undefined;
+
+type SaveLayoutPanelProps = {
+  onCancel: () => void,
+  onSave: (layoutName: string) => void
+};
+
+export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {
+  const {onCancel, onSave} = props;
+
   const [layoutName, setLayoutName] = useState<string>("");
   const [group, setGroup] = useState<string>("");
+  const [radioValue, setRadioValue] = useState<RadioValue>();
+  const [checkValues, setCheckValues] = useState<string[]>([]);
+  const [dialogOpen, setDialogOpen] = useState<boolean>();
 
   const classBase = "vuuSaveLayoutPanel";
-  return <div className={classBase}>
+  return <Dialog className={classBase} open>
     <div className="header">Save Layout</div>
     <div className="dialogContent">
       <div className="formContainer">
         <FormField className="formField" label="Group" labelPlacement="top">
           <ComboBox
             source={groups}
-            defaultValue="Select Group or Enter New Name"
+            InputProps={{
+              inputProps: {
+                placeholder:"Select Group or Enter New Name"
+              },
+              endAdornment: <ChevronDownIcon style={{cursor:"pointer"}}/>
+            }}
             width={120}
             onSelectionChange={(_, value) => setGroup(value || "")}
-            selectionStrategy="deselectable"/>
+            selectionStrategy="deselectable" />
         </FormField>
         <FormField className="formField" label="Layout Name" labelPlacement="top">
           <FormLabel></FormLabel>
@@ -37,19 +55,41 @@ export const SaveLayoutPanel = () => {
             value={layoutName}
           />
         </FormField>
+        <FormField className="formField" label="Some Layout Setting" labelPlacement="top">
+          <CheckboxGroup
+            className="settingsGroup"
+            checkedValues={checkValues}
+            onChange={(event) => setCheckValues((prev) => prev.includes(event.target.value) ? prev.filter(entry => entry !== event.target.value) : [...prev, event.target.value])}
+          >
+            <Checkbox className="setting" label="Value 1" value="checkValue1"></Checkbox>
+            <Checkbox className="setting" label="Value 2" value="checkValue2"></Checkbox>
+            <Checkbox className="setting" label="Value 3" value="checkValue3"></Checkbox>
+          </CheckboxGroup>
+        </FormField>
+        <FormField className="formField" label="Some Layout Setting" labelPlacement="top">
+          <RadioButtonGroup
+            className="settingsGroup"
+            value={radioValue}
+            onChange={(event) => setRadioValue(event.target.value as RadioValue)}
+          >
+            <RadioButton className="setting" label="Value 1" value="radioValue1"></RadioButton>
+            <RadioButton className="setting" label="Value 2" value="radioValue2"></RadioButton>
+            <RadioButton className="setting" label="Value 3" value="radioValue3"></RadioButton>
+          </RadioButtonGroup>
+        </FormField>
       </div>
       <div className="screenshotContainer">
-        <div className="screenshot"/>
+        <div className="screenshot" />
       </div>
     </div>
     <div className="buttonsContainer">
-      <Button className="cancelButton" onClick={() => console.log("cancel clicked")}>
+      <Button className="cancelButton" onClick={onCancel}>
         Cancel
       </Button>
-      <Button className="saveButton" onClick={() => console.log("save clicked")}
-              disabled={layoutName === "" || group === ""}>
+      <Button className="saveButton" onClick={() => onSave(layoutName)}
+        disabled={layoutName === "" || group === ""}>
         Save
       </Button>
     </div>
-  </div>;
+  </Dialog>;
 };

vuu-ui/showcase/src/examples/Apps/NewTheme.examples.tsx

@@ -59,7 +59,7 @@ export const ShellWithNewTheme = () => {
           action,
         });
         if (action.menuId === "save-layout") {
-          setDialogContent(<SaveLayoutPanel />);
+          setDialogContent(<SaveLayoutPanel onCancel={handleCloseDialog} onSave={handleSave}/>);
           return true;
         }
         return false;
@@ -71,6 +71,10 @@ export const ShellWithNewTheme = () => {
     setDialogContent(undefined);
   }, []);
 
+  const handleSave = useCallback((layoutName: string) => {
+    console.log("Save layout as " + layoutName);
+  }, []);
+
   //TODO what the App actually receives is an array of layouts
   const layout = useMemo(() => {
     return {