From f75a8aa96d2755fc86496198da7d688eb1894a08 Mon Sep 17 00:00:00 2001 From: Peter Ling Date: Wed, 9 Aug 2023 15:38:22 +0100 Subject: [PATCH 01/15] VUU-17: Save Layout panel --- vuu-ui/packages/vuu-icons/index.css | 4 +- .../packages/vuu-popups/src/dialog/Dialog.css | 1 - .../packages/vuu-popups/src/dialog/Dialog.tsx | 14 +- .../src/layout-management/SaveLayoutPanel.css | 128 +++++++++++++++++- .../src/layout-management/SaveLayoutPanel.tsx | 120 +++++++++++++++- .../src/combo-box/ComboBox.tsx | 4 + vuu-ui/packages/vuu-ui-controls/src/index.ts | 1 + .../vuu-ui-controls/src/inputs/Checkbox.css | 11 ++ .../vuu-ui-controls/src/inputs/Checkbox.tsx | 25 ++++ .../src/inputs/RadioButton.css | 26 ++++ .../src/inputs/RadioButton.tsx | 27 ++++ .../vuu-ui-controls/src/inputs/index.ts | 2 + .../src/list/ChevronDownIcon.css | 23 ++++ .../src/list/ChevronDownIcon.tsx | 9 ++ .../vuu-ui-controls/src/list/RadioIcon.css | 33 +++++ .../vuu-ui-controls/src/list/RadioIcon.tsx | 19 +++ .../vuu-ui-controls/src/list/index.ts | 2 + .../src/examples/Apps/NewTheme.examples.css | 14 ++ .../src/examples/Apps/NewTheme.examples.tsx | 14 +- .../examples/Layout/SavePanel.examples.css | 13 ++ .../examples/Layout/SavePanel.examples.tsx | 18 +++ vuu-ui/showcase/src/examples/Layout/index.ts | 1 + 22 files changed, 492 insertions(+), 17 deletions(-) create mode 100644 vuu-ui/packages/vuu-ui-controls/src/inputs/Checkbox.css create mode 100644 vuu-ui/packages/vuu-ui-controls/src/inputs/Checkbox.tsx create mode 100644 vuu-ui/packages/vuu-ui-controls/src/inputs/RadioButton.css create mode 100644 vuu-ui/packages/vuu-ui-controls/src/inputs/RadioButton.tsx create mode 100644 vuu-ui/packages/vuu-ui-controls/src/inputs/index.ts create mode 100644 vuu-ui/packages/vuu-ui-controls/src/list/ChevronDownIcon.css create mode 100644 vuu-ui/packages/vuu-ui-controls/src/list/ChevronDownIcon.tsx create mode 100644 vuu-ui/packages/vuu-ui-controls/src/list/RadioIcon.css create mode 100644 vuu-ui/packages/vuu-ui-controls/src/list/RadioIcon.tsx create mode 100644 vuu-ui/showcase/src/examples/Layout/SavePanel.examples.css create mode 100644 vuu-ui/showcase/src/examples/Layout/SavePanel.examples.tsx diff --git a/vuu-ui/packages/vuu-icons/index.css b/vuu-ui/packages/vuu-icons/index.css index 2f37eb8a8..c5d4dcac1 100644 --- a/vuu-ui/packages/vuu-icons/index.css +++ b/vuu-ui/packages/vuu-icons/index.css @@ -49,7 +49,9 @@ --vuu-svg-more-vert: url('data:image/svg+xml;utf8,'); --vuu-svg-tick: url('data:image/svg+xml;utf8,'); --vuu-svg-triangle-right: url('data:image/svg+xml;utf8,'); - + --vuu-svg-chevron-down: url('data:image/svg+xml;utf8,'); + --vuu-svg-radio: url('data:image/svg+xml;utf8,'); + } diff --git a/vuu-ui/packages/vuu-popups/src/dialog/Dialog.css b/vuu-ui/packages/vuu-popups/src/dialog/Dialog.css index eeeaba8a4..8c5bf7494 100644 --- a/vuu-ui/packages/vuu-popups/src/dialog/Dialog.css +++ b/vuu-ui/packages/vuu-popups/src/dialog/Dialog.css @@ -14,7 +14,6 @@ --saltToolbar-background: transparent; --saltToolbar-height: calc(var(--salt-size-base) + 5px); - border-bottom: solid 1px var(--salt-container-primary-borderColor); } .vuuDialog-header > .Responsive-inner { diff --git a/vuu-ui/packages/vuu-popups/src/dialog/Dialog.tsx b/vuu-ui/packages/vuu-popups/src/dialog/Dialog.tsx index 0d95d81af..76b38f3ad 100644 --- a/vuu-ui/packages/vuu-popups/src/dialog/Dialog.tsx +++ b/vuu-ui/packages/vuu-popups/src/dialog/Dialog.tsx @@ -1,5 +1,5 @@ import { Scrim } from "@salt-ds/lab"; -import { Button, Text } from "@salt-ds/core"; +import { Button, Text, TextProps } from "@salt-ds/core"; import cx from "classnames"; import { HTMLAttributes, useCallback, useRef, useState } from "react"; import { Portal } from "../portal"; @@ -11,6 +11,8 @@ const classBase = "vuuDialog"; export interface DialogProps extends HTMLAttributes { isOpen?: boolean; onClose?: () => void; + headerProps?: TextProps<"div">; + hideCloseButton?: boolean; } export const Dialog = ({ @@ -19,6 +21,8 @@ export const Dialog = ({ isOpen = false, onClose, title, + hideCloseButton = false, + headerProps, ...props }: DialogProps) => { const root = useRef(null); @@ -46,16 +50,16 @@ export const Dialog = ({ return ( - +
- {title} -
{children}
diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css index 3d00f7423..74c379b5c 100644 --- a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css +++ b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css @@ -1,5 +1,125 @@ -.vuuSaveLayoutPanel { - background-color: aqua; - height: 400px; - width: 600px; +* { + --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; +} + +.panelContainer { + display: flex; + padding: 16px; + flex-direction: column; + align-items: flex-start; + gap: 16px; +} + +.panelContent { + display: flex; + align-items: flex-start; + gap: 32px; +} + +.formContainer { + display: flex; + width: 217px; + flex-direction: column; + align-items: flex-start; + gap: 16px; +} + +.settingsGroup { + display: flex; + flex-wrap: wrap; + 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; +} + +.screenshotContainer { + display: flex; + width: 304px; + height: 208px; + padding: 11px 15.5px; + justify-content: center; + align-items: center; + border: 1px solid #E8E8E8; + background: var(--dark-text-primary, #FFF); +} + +.screenshot { + background: url(), lightgray 50% / cover no-repeat; + width: 273px; + height: 186px; + flex-shrink: 0; +} + +.buttonsContainer { + display: flex; + padding-top: 8px; + justify-content: flex-end; + align-items: flex-start; + gap: 8px; + align-self: stretch; +} + +.cancelButton, +.saveButton { + display: flex; + height: fit-content; + padding: 4px 8px; + align-items: flex-start; + gap: 8px; + border-radius: 6px; + font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off; + font-size: 12px; + font-style: normal; + font-weight: 700; + line-height: 133.333%; + letter-spacing: 0.48px; + text-transform: uppercase; +} + +.cancelButton { + color: var(--actionable-primary-foreground-default, #606477); + background: var(--actionable-primary-background-default, #FFF); +} + +.cancelButton.saveButton.saltButton:hover { + border: none; +} + +.saveButton { + background: #6D18BD; + border-color: #6D18BD; + color: white; +} + +.saveButton.saltButton:disabled { + background: #6D18BD; + border-color: #6D18BD; + color: white; + opacity: 0.3; +} + +.saveButton.saltButton:hover { + background: #F37880; + border-color: #F37880; + color: white; } \ No newline at end of file diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx index 33d1d3537..9f47889d4 100644 --- a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx +++ b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx @@ -1,5 +1,119 @@ +import { ChangeEvent, useState } from "react"; +import { Input, Button, FormField, FormFieldLabel } from "@salt-ds/core"; +import { ComboBox, Checkbox, RadioButton, RadioIcon } from "@finos/vuu-ui-controls"; + import "./SaveLayoutPanel.css"; -export const SaveLayoutPanel = () => { - const classBase = "vuuSaveLayoutPanel"; - return
save layout
; + +const groups = [ + "Group 1", + "Group 2", + "Group 3", + "Group 4", + "Group 5" +]; + +const checkboxValues = [ + "Value 1", + "Value 2", + "Value 3" +]; + +const radioValues = [ + "Value 1", + "Value 2", + "Value 3" +] as const; + +type RadioValue = typeof radioValues[number] | undefined; + +type SaveLayoutPanelProps = { + onCancel: () => void, + onSave: (layoutName: string, group: string, checkValues: string[], radioValue: string) => void +}; + +export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => { + const { onCancel, onSave } = props; + + const [layoutName, setLayoutName] = useState(""); + const [group, setGroup] = useState(""); + const [checkValues, setCheckValues] = useState([]); + const [radioValue, setRadioValue] = useState(radioValues[0]); + + return ( +
+
+
+ + Group + ) => setGroup(event.target.value), + }, + }} + width={120} + onSelectionChange={(_, value) => setGroup(value || "")} + /> + + + Layout Name + ) => setLayoutName(event.target.value)} + value={layoutName} + /> + + + Some Layout Setting +
+ {checkboxValues.map(value => + setCheckValues((prev) => prev.includes(value) ? prev.filter(entry => entry !== value) : [...prev, value])} + checked={checkValues.includes(value)} + label={value} + /> + )} +
+ + + Some Layout Setting +
+ {radioValues.map((value, i) => + setRadioValue(value)} + checked={radioValue === value} + label={value} + groupName="radioGroup" + /> + )} +
+ +
+
+
+
+
+
+ + +
+
+ ); }; diff --git a/vuu-ui/packages/vuu-ui-controls/src/combo-box/ComboBox.tsx b/vuu-ui/packages/vuu-ui-controls/src/combo-box/ComboBox.tsx index cfb9a6560..a71ff75e8 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/combo-box/ComboBox.tsx +++ b/vuu-ui/packages/vuu-ui-controls/src/combo-box/ComboBox.tsx @@ -12,6 +12,7 @@ import { import { DropdownBase, DropdownBaseProps } from "../dropdown"; import { List, ListProps } from "../list"; import { useCombobox } from "./useCombobox"; +import { ChevronDownIcon } from "../list/ChevronDownIcon"; export interface ComboBoxProps< Item = string, @@ -156,6 +157,9 @@ export const ComboBox = forwardRef(function Combobox< disabled={disabled} // ref={useForkRef(setInputRef, setHookInputRef)} {...controlProps} + endAdornment={ + {onOpenChange(!isOpen)}} /> + } /> diff --git a/vuu-ui/packages/vuu-ui-controls/src/index.ts b/vuu-ui/packages/vuu-ui-controls/src/index.ts index 94a86745e..641d46f82 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/index.ts +++ b/vuu-ui/packages/vuu-ui-controls/src/index.ts @@ -6,3 +6,4 @@ export * from "./editable-label"; export * from "./list"; export * from "./tabstrip"; export * from "./tree"; +export * from "./inputs"; diff --git a/vuu-ui/packages/vuu-ui-controls/src/inputs/Checkbox.css b/vuu-ui/packages/vuu-ui-controls/src/inputs/Checkbox.css new file mode 100644 index 000000000..a627219cb --- /dev/null +++ b/vuu-ui/packages/vuu-ui-controls/src/inputs/Checkbox.css @@ -0,0 +1,11 @@ +.vuuCheckbox { + 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; + cursor: pointer; +} \ No newline at end of file diff --git a/vuu-ui/packages/vuu-ui-controls/src/inputs/Checkbox.tsx b/vuu-ui/packages/vuu-ui-controls/src/inputs/Checkbox.tsx new file mode 100644 index 000000000..4c2e6d284 --- /dev/null +++ b/vuu-ui/packages/vuu-ui-controls/src/inputs/Checkbox.tsx @@ -0,0 +1,25 @@ +import { CheckboxIcon } from "@finos/vuu-ui-controls/src/list/CheckboxIcon"; + +import "./Checkbox.css"; + +type CheckboxProps = { + onToggle: () => void, + className?: string, + checked: boolean, + label: string +} + +export const Checkbox = (props: CheckboxProps): JSX.Element => { + const {onToggle, className, checked, label} = props; + + return ( +
e.key === " " && onToggle()} + > + + {label} +
+ ) +} diff --git a/vuu-ui/packages/vuu-ui-controls/src/inputs/RadioButton.css b/vuu-ui/packages/vuu-ui-controls/src/inputs/RadioButton.css new file mode 100644 index 000000000..cce2a9b55 --- /dev/null +++ b/vuu-ui/packages/vuu-ui-controls/src/inputs/RadioButton.css @@ -0,0 +1,26 @@ +.vuuRadioButton { + 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; + cursor: pointer; +} + +.radio { + position: relative; + height: 14px; +} + +input[type="radio"] { + position: absolute; + appearance: none; + width: 100%; + height: 100%; + border-radius: 50%; + margin: 0; + top: 0; +} \ No newline at end of file diff --git a/vuu-ui/packages/vuu-ui-controls/src/inputs/RadioButton.tsx b/vuu-ui/packages/vuu-ui-controls/src/inputs/RadioButton.tsx new file mode 100644 index 000000000..5eeda6a68 --- /dev/null +++ b/vuu-ui/packages/vuu-ui-controls/src/inputs/RadioButton.tsx @@ -0,0 +1,27 @@ +import { RadioIcon } from "@finos/vuu-ui-controls"; + +import "./RadioButton.css"; + +type RadioButtonProps = { + onClick: () => void, + checked: boolean, + label: string, + groupName: string +} + +export const RadioButton = (props: RadioButtonProps): JSX.Element => { + const { onClick, checked, label, groupName } = props; + + return ( +
+
+ + +
+ {label} +
+ ) +} diff --git a/vuu-ui/packages/vuu-ui-controls/src/inputs/index.ts b/vuu-ui/packages/vuu-ui-controls/src/inputs/index.ts new file mode 100644 index 000000000..800fa75ac --- /dev/null +++ b/vuu-ui/packages/vuu-ui-controls/src/inputs/index.ts @@ -0,0 +1,2 @@ +export * from "./Checkbox"; +export * from "./RadioButton"; diff --git a/vuu-ui/packages/vuu-ui-controls/src/list/ChevronDownIcon.css b/vuu-ui/packages/vuu-ui-controls/src/list/ChevronDownIcon.css new file mode 100644 index 000000000..4b20be93c --- /dev/null +++ b/vuu-ui/packages/vuu-ui-controls/src/list/ChevronDownIcon.css @@ -0,0 +1,23 @@ +.vuuChevronDownIcon { + --vuu-icon-size: 14px; + --vuu-icon-left: -1px; + --vuu-icon-top: -1px; + --vuu-icon-svg: var(--vuu-svg-chevron-down); + height: var(--vuuChevronDownIcon-size, 14px); + position: relative; + width: var(--vuuChevronDownIcon-size, 14px); +} + +.vuuChevronDownIcon:after { + content: ""; + background-color: #777C94; + left: var(--vuu-icon-left, auto); + height: var(--vuu-icon-height, var(--vuu-icon-size, 12px)); + -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size); + mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + position: absolute; + top: var(--vuu-icon-top, auto); + width: var(--vuu-icon-width, var(--vuu-icon-size, 12px)); +} diff --git a/vuu-ui/packages/vuu-ui-controls/src/list/ChevronDownIcon.tsx b/vuu-ui/packages/vuu-ui-controls/src/list/ChevronDownIcon.tsx new file mode 100644 index 000000000..7b5cfb322 --- /dev/null +++ b/vuu-ui/packages/vuu-ui-controls/src/list/ChevronDownIcon.tsx @@ -0,0 +1,9 @@ +import "./ChevronDownIcon.css"; + +const classBase = "vuuChevronDownIcon"; + +export const ChevronDownIcon = ({ + ...htmlAttributes +}) => ( + +); diff --git a/vuu-ui/packages/vuu-ui-controls/src/list/RadioIcon.css b/vuu-ui/packages/vuu-ui-controls/src/list/RadioIcon.css new file mode 100644 index 000000000..94680bfe6 --- /dev/null +++ b/vuu-ui/packages/vuu-ui-controls/src/list/RadioIcon.css @@ -0,0 +1,33 @@ +.vuuRadioIcon { + --vuu-icon-size: 12px; + --vuu-icon-left: -1px; + --vuu-icon-top: -1px; + --vuu-icon-svg: var(--vuu-svg-radio); + border-style: solid; + border-color: var(--vuuRadioIcon-borderColor, var(--salt-selectable-borderColor)); + border-radius: 50%; + border-width: 1px; + display: inline-block; + height: var(--vuuRadioIcon-size, 14px); + position: relative; + width: var(--vuuRadioIcon-size, 14px); +} + +.vuuRadioIcon-checked { + background-color: var(--vuuRadioIcon-background-checked, var(--salt-selectable-background-selected)); + background-image: var(--vuu-svg-radio); + border-color: var(--vuuRadioIcon-borderColor-checked, var(--salt-selectable-borderColor-selected)); +} + +.vuuRadioIcon-checked:after { + content: ""; + left: var(--vuu-icon-left, auto); + height: var(--vuu-icon-height, var(--vuu-icon-size, 12px)); + -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size); + mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + position: absolute; + top: var(--vuu-icon-top, auto); + width: var(--vuu-icon-width, var(--vuu-icon-size, 12px)); +} diff --git a/vuu-ui/packages/vuu-ui-controls/src/list/RadioIcon.tsx b/vuu-ui/packages/vuu-ui-controls/src/list/RadioIcon.tsx new file mode 100644 index 000000000..fb1216ff1 --- /dev/null +++ b/vuu-ui/packages/vuu-ui-controls/src/list/RadioIcon.tsx @@ -0,0 +1,19 @@ +import { HTMLAttributes } from "react"; +import cx from "classnames"; + +import "./RadioIcon.css"; + +const classBase = "vuuRadioIcon"; + +export interface RadioIconProps extends HTMLAttributes { + checked?: boolean; +} +export const RadioIcon = ({ + checked = false, + ...htmlAttributes +}: RadioIconProps) => ( + +); diff --git a/vuu-ui/packages/vuu-ui-controls/src/list/index.ts b/vuu-ui/packages/vuu-ui-controls/src/list/index.ts index b5ceca09d..4d5515d99 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/list/index.ts +++ b/vuu-ui/packages/vuu-ui-controls/src/list/index.ts @@ -6,3 +6,5 @@ export * from "./ListItemHeader"; export * from "./ListItemGroup"; export * from "./useList"; export * from "./VirtualizedList"; +export * from "./CheckboxIcon" +export * from "./RadioIcon" diff --git a/vuu-ui/showcase/src/examples/Apps/NewTheme.examples.css b/vuu-ui/showcase/src/examples/Apps/NewTheme.examples.css index fe7359b20..f56130380 100644 --- a/vuu-ui/showcase/src/examples/Apps/NewTheme.examples.css +++ b/vuu-ui/showcase/src/examples/Apps/NewTheme.examples.css @@ -92,3 +92,17 @@ body { height: 29px; padding: 0 24px; } + + .dialogHeader { + display: flex; + padding-bottom: 0px; + padding-top: 16px; + padding-left: 16px; + flex-direction: column; + align-items: flex-start; + align-self: stretch; + color: var(--light-text-primary, #15171B); + font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off; + font-size: 16px; + font-weight: 600; + } diff --git a/vuu-ui/showcase/src/examples/Apps/NewTheme.examples.tsx b/vuu-ui/showcase/src/examples/Apps/NewTheme.examples.tsx index b2b940e59..ed0a5ca7b 100644 --- a/vuu-ui/showcase/src/examples/Apps/NewTheme.examples.tsx +++ b/vuu-ui/showcase/src/examples/Apps/NewTheme.examples.tsx @@ -61,7 +61,7 @@ export const ShellWithNewTheme = () => { action, }); if (action.menuId === "save-layout") { - setDialogContent(); + setDialogContent(); return true; } return false; @@ -73,6 +73,13 @@ export const ShellWithNewTheme = () => { setDialogContent(undefined); }, []); + const handleSave = useCallback((layoutName: string, layoutGroup: string, checkValues: string[], radioValues: string) => { + console.log("Save layout as \"" + layoutName + "\"" + + " to group \"" + layoutGroup + "\"" + + " with settings [" + checkValues + "]" + + " and " + radioValues); + }, []); + //TODO what the App actually receives is an array of layouts const layout = useMemo(() => { return { @@ -149,11 +156,12 @@ export const ShellWithNewTheme = () => { } > {dialogContent} diff --git a/vuu-ui/showcase/src/examples/Layout/SavePanel.examples.css b/vuu-ui/showcase/src/examples/Layout/SavePanel.examples.css new file mode 100644 index 000000000..351d8502e --- /dev/null +++ b/vuu-ui/showcase/src/examples/Layout/SavePanel.examples.css @@ -0,0 +1,13 @@ +.dialogHeader { + display: flex; + padding-bottom: 0px; + padding-top: 16px; + padding-left: 16px; + flex-direction: column; + align-items: flex-start; + align-self: stretch; + color: var(--light-text-primary, #15171B); + font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off; + font-size: 16px; + font-weight: 600; +} \ No newline at end of file diff --git a/vuu-ui/showcase/src/examples/Layout/SavePanel.examples.tsx b/vuu-ui/showcase/src/examples/Layout/SavePanel.examples.tsx new file mode 100644 index 000000000..c22c877df --- /dev/null +++ b/vuu-ui/showcase/src/examples/Layout/SavePanel.examples.tsx @@ -0,0 +1,18 @@ +import { SaveLayoutPanel } from "@finos/vuu-shell"; +import { Dialog } from "@finos/vuu-popups"; + +import "./SavePanel.examples.css"; + +export const SavePanel = () => { + return ( + + { }} onSave={() => { }} /> + + ); +}; diff --git a/vuu-ui/showcase/src/examples/Layout/index.ts b/vuu-ui/showcase/src/examples/Layout/index.ts index 047dfe8a4..9aa3a5eb8 100644 --- a/vuu-ui/showcase/src/examples/Layout/index.ts +++ b/vuu-ui/showcase/src/examples/Layout/index.ts @@ -9,3 +9,4 @@ export * as OverflowContainer from "./OverflowContainer.examples"; export * as Palette from "./Palette.examples"; export * as Stack from "./Stack.examples"; export * as View from "./View.examples"; +export * as SavePanel from "./SavePanel.examples"; From 19d91de17871368513cc9796398be045ca96996b Mon Sep 17 00:00:00 2001 From: Peter Ling Date: Fri, 25 Aug 2023 15:08:47 +0100 Subject: [PATCH 02/15] VUU-17: Add index to lists --- .../vuu-shell/src/layout-management/SaveLayoutPanel.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx index 9f47889d4..7110d4270 100644 --- a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx +++ b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx @@ -77,8 +77,9 @@ export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => { Some Layout Setting
- {checkboxValues.map(value => + {checkboxValues.map((value, i) => setCheckValues((prev) => prev.includes(value) ? prev.filter(entry => entry !== value) : [...prev, value])} checked={checkValues.includes(value)} @@ -92,6 +93,7 @@ export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => {
{radioValues.map((value, i) => setRadioValue(value)} checked={radioValue === value} label={value} @@ -109,7 +111,7 @@ export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => { - From 828a995df60f082568b2536bdfdfeac6f2b21b24 Mon Sep 17 00:00:00 2001 From: Peter Ling Date: Tue, 29 Aug 2023 10:37:12 +0100 Subject: [PATCH 03/15] VUU-17: Remove unused CSS property --- .../vuu-shell/src/layout-management/SaveLayoutPanel.css | 4 ---- .../vuu-shell/src/layout-management/SaveLayoutPanel.tsx | 4 +++- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css index 74c379b5c..0c7854952 100644 --- a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css +++ b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css @@ -101,10 +101,6 @@ background: var(--actionable-primary-background-default, #FFF); } -.cancelButton.saveButton.saltButton:hover { - border: none; -} - .saveButton { background: #6D18BD; border-color: #6D18BD; diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx index 7110d4270..25b106aec 100644 --- a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx +++ b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx @@ -111,7 +111,9 @@ export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => { - From e7dfc528f91ba2e618c5c9beaa01fcce292fb830 Mon Sep 17 00:00:00 2001 From: Peter Ling Date: Tue, 29 Aug 2023 10:42:59 +0100 Subject: [PATCH 04/15] VUU-17: Disable screenshot in CSS - Temporary change to fix build until screenshot functionality is implemented --- .../vuu-shell/src/layout-management/SaveLayoutPanel.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css index 0c7854952..86d069b6c 100644 --- a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css +++ b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css @@ -64,7 +64,8 @@ } .screenshot { - background: url(), lightgray 50% / cover no-repeat; + /* Uncomment once screenshot functionality is implemented */ + /* background: url(), lightgray 50% / cover no-repeat; */ width: 273px; height: 186px; flex-shrink: 0; From 7250cc582c2eb6e2b98863660db523a0c6dbc4ee Mon Sep 17 00:00:00 2001 From: Peter Ling Date: Wed, 30 Aug 2023 09:39:24 +0100 Subject: [PATCH 05/15] VUU-17: Sort Vuu icons --- vuu-ui/packages/vuu-icons/index.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/vuu-ui/packages/vuu-icons/index.css b/vuu-ui/packages/vuu-icons/index.css index c5d4dcac1..71e8250c2 100644 --- a/vuu-ui/packages/vuu-icons/index.css +++ b/vuu-ui/packages/vuu-icons/index.css @@ -41,16 +41,16 @@ --svg-connecting-status: url('data:image/svg+xml;utf8,'); --svg-disconnected-status: url('data:image/svg+xml;utf8,'); /* JK icons, these are icons created for VUU and will gradually replace all the icons above */ + --vuu-svg-chevron-down: url('data:image/svg+xml;utf8,'); --vuu-svg-chevron-left: url('data:image/svg+xml;utf8,'); - --vuu-svg-cross: url('data:image/svg+xml;utf8,'); - --vuu-svg-plus: url('data:image/svg+xml;utf8,'); --vuu-svg-chevron-right: url('data:image/svg+xml;utf8,'); + --vuu-svg-cross: url('data:image/svg+xml;utf8,'); --vuu-svg-more-horiz: url('data:image/svg+xml;utf8,'); --vuu-svg-more-vert: url('data:image/svg+xml;utf8,'); + --vuu-svg-plus: url('data:image/svg+xml;utf8,'); + --vuu-svg-radio: url('data:image/svg+xml;utf8,'); --vuu-svg-tick: url('data:image/svg+xml;utf8,'); --vuu-svg-triangle-right: url('data:image/svg+xml;utf8,'); - --vuu-svg-chevron-down: url('data:image/svg+xml;utf8,'); - --vuu-svg-radio: url('data:image/svg+xml;utf8,'); } From 2c200840700f112a805808cbd52eedc401c1ede1 Mon Sep 17 00:00:00 2001 From: Peter Ling Date: Wed, 30 Aug 2023 09:51:44 +0100 Subject: [PATCH 06/15] VUU-17: Make RadioValue required --- .../vuu-shell/src/layout-management/SaveLayoutPanel.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx index 25b106aec..966b7cb89 100644 --- a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx +++ b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx @@ -1,6 +1,6 @@ import { ChangeEvent, useState } from "react"; import { Input, Button, FormField, FormFieldLabel } from "@salt-ds/core"; -import { ComboBox, Checkbox, RadioButton, RadioIcon } from "@finos/vuu-ui-controls"; +import { ComboBox, Checkbox, RadioButton } from "@finos/vuu-ui-controls"; import "./SaveLayoutPanel.css"; @@ -24,7 +24,7 @@ const radioValues = [ "Value 3" ] as const; -type RadioValue = typeof radioValues[number] | undefined; +type RadioValue = typeof radioValues[number]; type SaveLayoutPanelProps = { onCancel: () => void, @@ -113,7 +113,7 @@ export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => { From 120c7d31fc736006fbb859916c9dc839f51ffc43 Mon Sep 17 00:00:00 2001 From: Peter Ling Date: Wed, 30 Aug 2023 10:51:20 +0100 Subject: [PATCH 07/15] VUU-17: Default ChevronDownIcon to pointer cursor --- vuu-ui/packages/vuu-ui-controls/src/combo-box/ComboBox.tsx | 2 +- vuu-ui/packages/vuu-ui-controls/src/list/ChevronDownIcon.css | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/vuu-ui/packages/vuu-ui-controls/src/combo-box/ComboBox.tsx b/vuu-ui/packages/vuu-ui-controls/src/combo-box/ComboBox.tsx index a71ff75e8..574f2b3a1 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/combo-box/ComboBox.tsx +++ b/vuu-ui/packages/vuu-ui-controls/src/combo-box/ComboBox.tsx @@ -158,7 +158,7 @@ export const ComboBox = forwardRef(function Combobox< // ref={useForkRef(setInputRef, setHookInputRef)} {...controlProps} endAdornment={ - {onOpenChange(!isOpen)}} /> + {onOpenChange(!isOpen)}} /> } /> diff --git a/vuu-ui/packages/vuu-ui-controls/src/list/ChevronDownIcon.css b/vuu-ui/packages/vuu-ui-controls/src/list/ChevronDownIcon.css index 4b20be93c..831726b78 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/list/ChevronDownIcon.css +++ b/vuu-ui/packages/vuu-ui-controls/src/list/ChevronDownIcon.css @@ -6,6 +6,7 @@ height: var(--vuuChevronDownIcon-size, 14px); position: relative; width: var(--vuuChevronDownIcon-size, 14px); + cursor: pointer; } .vuuChevronDownIcon:after { From 667f07ff24d83fe5f1f0fc7165602b206e84b9b7 Mon Sep 17 00:00:00 2001 From: Peter Ling Date: Wed, 30 Aug 2023 12:13:37 +0100 Subject: [PATCH 08/15] VUU-17: Give ChevronIcon configurable direction --- vuu-ui/packages/vuu-icons/index.css | 1 + .../src/combo-box/ComboBox.tsx | 7 ++++-- .../src/list/ChevronDownIcon.tsx | 9 ------- .../{ChevronDownIcon.css => ChevronIcon.css} | 25 +++++++++++++++---- .../vuu-ui-controls/src/list/ChevronIcon.tsx | 19 ++++++++++++++ 5 files changed, 45 insertions(+), 16 deletions(-) delete mode 100644 vuu-ui/packages/vuu-ui-controls/src/list/ChevronDownIcon.tsx rename vuu-ui/packages/vuu-ui-controls/src/list/{ChevronDownIcon.css => ChevronIcon.css} (60%) create mode 100644 vuu-ui/packages/vuu-ui-controls/src/list/ChevronIcon.tsx diff --git a/vuu-ui/packages/vuu-icons/index.css b/vuu-ui/packages/vuu-icons/index.css index 71e8250c2..7ac602ef0 100644 --- a/vuu-ui/packages/vuu-icons/index.css +++ b/vuu-ui/packages/vuu-icons/index.css @@ -44,6 +44,7 @@ --vuu-svg-chevron-down: url('data:image/svg+xml;utf8,'); --vuu-svg-chevron-left: url('data:image/svg+xml;utf8,'); --vuu-svg-chevron-right: url('data:image/svg+xml;utf8,'); + --vuu-svg-chevron-up: url('data:image/svg+xml;utf8,'); --vuu-svg-cross: url('data:image/svg+xml;utf8,'); --vuu-svg-more-horiz: url('data:image/svg+xml;utf8,'); --vuu-svg-more-vert: url('data:image/svg+xml;utf8,'); diff --git a/vuu-ui/packages/vuu-ui-controls/src/combo-box/ComboBox.tsx b/vuu-ui/packages/vuu-ui-controls/src/combo-box/ComboBox.tsx index 574f2b3a1..85f1fec90 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/combo-box/ComboBox.tsx +++ b/vuu-ui/packages/vuu-ui-controls/src/combo-box/ComboBox.tsx @@ -12,7 +12,7 @@ import { import { DropdownBase, DropdownBaseProps } from "../dropdown"; import { List, ListProps } from "../list"; import { useCombobox } from "./useCombobox"; -import { ChevronDownIcon } from "../list/ChevronDownIcon"; +import { ChevronIcon } from "../list/ChevronIcon"; export interface ComboBoxProps< Item = string, @@ -158,7 +158,10 @@ export const ComboBox = forwardRef(function Combobox< // ref={useForkRef(setInputRef, setHookInputRef)} {...controlProps} endAdornment={ - {onOpenChange(!isOpen)}} /> + { onOpenChange(!isOpen) }} + /> } /> diff --git a/vuu-ui/packages/vuu-ui-controls/src/list/ChevronDownIcon.tsx b/vuu-ui/packages/vuu-ui-controls/src/list/ChevronDownIcon.tsx deleted file mode 100644 index 7b5cfb322..000000000 --- a/vuu-ui/packages/vuu-ui-controls/src/list/ChevronDownIcon.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import "./ChevronDownIcon.css"; - -const classBase = "vuuChevronDownIcon"; - -export const ChevronDownIcon = ({ - ...htmlAttributes -}) => ( - -); diff --git a/vuu-ui/packages/vuu-ui-controls/src/list/ChevronDownIcon.css b/vuu-ui/packages/vuu-ui-controls/src/list/ChevronIcon.css similarity index 60% rename from vuu-ui/packages/vuu-ui-controls/src/list/ChevronDownIcon.css rename to vuu-ui/packages/vuu-ui-controls/src/list/ChevronIcon.css index 831726b78..2bc2a1fcf 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/list/ChevronDownIcon.css +++ b/vuu-ui/packages/vuu-ui-controls/src/list/ChevronIcon.css @@ -1,15 +1,14 @@ -.vuuChevronDownIcon { +.vuuChevronIcon { --vuu-icon-size: 14px; --vuu-icon-left: -1px; --vuu-icon-top: -1px; - --vuu-icon-svg: var(--vuu-svg-chevron-down); - height: var(--vuuChevronDownIcon-size, 14px); + height: var(--vuuChevronIcon-size, 14px); position: relative; - width: var(--vuuChevronDownIcon-size, 14px); + width: var(--vuuChevronIcon-size, 14px); cursor: pointer; } -.vuuChevronDownIcon:after { +.vuuChevronIcon:after { content: ""; background-color: #777C94; left: var(--vuu-icon-left, auto); @@ -22,3 +21,19 @@ top: var(--vuu-icon-top, auto); width: var(--vuu-icon-width, var(--vuu-icon-size, 12px)); } + +.vuuChevronIcon.up { + --vuu-icon-svg: var(--vuu-svg-chevron-up); +} + +.vuuChevronIcon.down { + --vuu-icon-svg: var(--vuu-svg-chevron-down); +} + +.vuuChevronIcon.left { + --vuu-icon-svg: var(--vuu-svg-chevron-left); +} + +.vuuChevronIcon.right { + --vuu-icon-svg: var(--vuu-svg-chevron-right); +} diff --git a/vuu-ui/packages/vuu-ui-controls/src/list/ChevronIcon.tsx b/vuu-ui/packages/vuu-ui-controls/src/list/ChevronIcon.tsx new file mode 100644 index 000000000..25e060d61 --- /dev/null +++ b/vuu-ui/packages/vuu-ui-controls/src/list/ChevronIcon.tsx @@ -0,0 +1,19 @@ +import cx from "classnames"; +import { HTMLAttributes } from "react"; + +import "./ChevronIcon.css"; + +const classBase = "vuuChevronIcon"; + +type Direction = "up" | "down" | "left" | "right"; + +interface ChevronProps extends HTMLAttributes { + direction: Direction; +} + +export const ChevronIcon = (props: ChevronProps) => { + const { direction, ...htmlAttributes } = props; + return ( + + ) +}; From e48a4a111a84a5c5c4029f7a9c1dea9bf9f48be6 Mon Sep 17 00:00:00 2001 From: Peter Ling Date: Wed, 30 Aug 2023 13:53:31 +0100 Subject: [PATCH 09/15] VUU-17: Move dialog header properties to Dialog.css --- vuu-ui/packages/vuu-popups/src/dialog/Dialog.css | 14 +++++++++++++- vuu-ui/packages/vuu-popups/src/dialog/Dialog.tsx | 2 +- .../src/examples/Apps/NewTheme.examples.css | 14 -------------- .../src/examples/Apps/NewTheme.examples.tsx | 1 - .../src/examples/Layout/SavePanel.examples.css | 13 ------------- .../src/examples/Layout/SavePanel.examples.tsx | 3 --- 6 files changed, 14 insertions(+), 33 deletions(-) delete mode 100644 vuu-ui/showcase/src/examples/Layout/SavePanel.examples.css diff --git a/vuu-ui/packages/vuu-popups/src/dialog/Dialog.css b/vuu-ui/packages/vuu-popups/src/dialog/Dialog.css index 8c5bf7494..089204ede 100644 --- a/vuu-ui/packages/vuu-popups/src/dialog/Dialog.css +++ b/vuu-ui/packages/vuu-popups/src/dialog/Dialog.css @@ -24,4 +24,16 @@ right: 2px; } - +.dialogHeader { + display: flex; + padding-bottom: 0px; + padding-top: 16px; + padding-left: 16px; + flex-direction: column; + align-items: flex-start; + align-self: stretch; + color: var(--light-text-primary, #15171B); + font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off; + font-size: 16px; + font-weight: 600; +} diff --git a/vuu-ui/packages/vuu-popups/src/dialog/Dialog.tsx b/vuu-ui/packages/vuu-popups/src/dialog/Dialog.tsx index 76b38f3ad..8728eb830 100644 --- a/vuu-ui/packages/vuu-popups/src/dialog/Dialog.tsx +++ b/vuu-ui/packages/vuu-popups/src/dialog/Dialog.tsx @@ -53,7 +53,7 @@ export const Dialog = ({
- {title} + {title} {!hideCloseButton &&
{children}
From 9380d5c95cc374c74521785f49cea9f7d802f1cf Mon Sep 17 00:00:00 2001 From: Peter Ling Date: Wed, 30 Aug 2023 15:33:48 +0100 Subject: [PATCH 12/15] VUU-17: Remove RadioIconProps interface --- vuu-ui/packages/vuu-ui-controls/src/list/RadioIcon.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/vuu-ui/packages/vuu-ui-controls/src/list/RadioIcon.tsx b/vuu-ui/packages/vuu-ui-controls/src/list/RadioIcon.tsx index fb1216ff1..db2423404 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/list/RadioIcon.tsx +++ b/vuu-ui/packages/vuu-ui-controls/src/list/RadioIcon.tsx @@ -1,17 +1,13 @@ -import { HTMLAttributes } from "react"; import cx from "classnames"; import "./RadioIcon.css"; const classBase = "vuuRadioIcon"; -export interface RadioIconProps extends HTMLAttributes { - checked?: boolean; -} export const RadioIcon = ({ checked = false, ...htmlAttributes -}: RadioIconProps) => ( +}) => ( Date: Wed, 30 Aug 2023 15:43:40 +0100 Subject: [PATCH 13/15] VUU-17: Prefix class names with "saveLayoutPanel" --- .../src/layout-management/SaveLayoutPanel.css | 26 +++++++++---------- .../src/layout-management/SaveLayoutPanel.tsx | 22 +++++++++------- 2 files changed, 25 insertions(+), 23 deletions(-) diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css index d254c44c9..797e498a4 100644 --- a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css +++ b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.css @@ -10,7 +10,7 @@ font-family: Nunito Sans; } -.panelContainer { +.saveLayoutPanel-panelContainer { display: flex; padding: 16px; flex-direction: column; @@ -18,13 +18,13 @@ gap: 16px; } -.panelContent { +.saveLayoutPanel-panelContent { display: flex; align-items: flex-start; gap: 32px; } -.formContainer { +.saveLayoutPanel-formContainer { display: flex; width: 217px; flex-direction: column; @@ -32,7 +32,7 @@ gap: 16px; } -.settingsGroup { +.saveLayoutPanel-settingsGroup { display: flex; flex-wrap: wrap; align-items: flex-end; @@ -41,7 +41,7 @@ line-height: 16px; } -.screenshotContainer { +.saveLayoutPanel-screenshotContainer { display: flex; width: 304px; height: 208px; @@ -52,7 +52,7 @@ background: var(--dark-text-primary, #FFF); } -.screenshot { +.saveLayoutPanel-screenshot { /* Uncomment once screenshot functionality is implemented */ /* background: url(), lightgray 50% / cover no-repeat; */ width: 273px; @@ -60,7 +60,7 @@ flex-shrink: 0; } -.buttonsContainer { +.saveLayoutPanel-buttonsContainer { display: flex; padding-top: 8px; justify-content: flex-end; @@ -69,8 +69,8 @@ align-self: stretch; } -.cancelButton, -.saveButton { +.saveLayoutPanel-cancelButton, +.saveLayoutPanel-saveButton { display: flex; height: fit-content; padding: 4px 8px; @@ -86,25 +86,25 @@ text-transform: uppercase; } -.cancelButton { +.saveLayoutPanel-cancelButton { color: var(--actionable-primary-foreground-default, #606477); background: var(--actionable-primary-background-default, #FFF); } -.saveButton { +.saveLayoutPanel-saveButton { background: #6D18BD; border-color: #6D18BD; color: white; } -.saveButton.saltButton:disabled { +.saveLayoutPanel-saveButton.saltButton:disabled { background: #6D18BD; border-color: #6D18BD; color: white; opacity: 0.3; } -.saveButton.saltButton:hover { +.saveLayoutPanel-saveButton.saltButton:hover { background: #F37880; border-color: #F37880; color: white; diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx index b9d3267cd..27afd51df 100644 --- a/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx +++ b/vuu-ui/packages/vuu-shell/src/layout-management/SaveLayoutPanel.tsx @@ -4,6 +4,8 @@ import { ComboBox, Checkbox, RadioButton } from "@finos/vuu-ui-controls"; import "./SaveLayoutPanel.css"; +const classBase = "saveLayoutPanel"; + const groups = [ "Group 1", "Group 2", @@ -40,9 +42,9 @@ export const SaveLayoutPanel = (props: SaveLayoutPanelProps) => { const [radioValue, setRadioValue] = useState(radioValues[0]); return ( -
-
-
+
+
+
Group { Some Layout Setting -
+
{checkboxValues.map((value, i) => { Some Layout Setting -
+
{radioValues.map((value, i) => {
-
-
+
+
-
-