[Large] Create UI for metadata editing workflow

packages/core/components/ChoiceGroup/ChoiceGroup.module.css

@@ -1,4 +1,3 @@
-
 .choice-group input:disabled + label {
   cursor: not-allowed;
   opacity: 0.5;
@@ -9,9 +8,9 @@
 }
 
 .choice-group label > span {
-  font-size: var(--s-paragraph-size);
+  font-size: var(--l-paragraph-size);
   margin-right: 5px;
-  margin-top: 2px;
+  margin-top: 1px;
   padding-left: 24px !important;
 }
 
@@ -24,8 +23,8 @@
   border-color: var(--aqua);
   width: 16px;
   height: 16px;
-  top: 2.1px;
-  left: 2.1px;
+  top: 2px;
+  left: 2px;
 }
 
 .choice-group label::after {
@@ -43,5 +42,5 @@
 }
 
 .choice-group > div > div > div:not(:first-child) {
-  margin-left: 6px;
+  margin-left: var(--margin);
 }

packages/core/components/ComboBox/ComboBox.module.css

@@ -0,0 +1,99 @@
+.combo-box {
+  border: 1px solid var(--border-color);
+  border-radius: var(--small-border-radius);
+}
+
+.combo-box, .combo-box > :is(div, input), .combo-box :is(button, i) {
+  background-color: var(--secondary-background-color) !important;
+  color: var(--secondary-text-color) !important;
+}
+
+.combo-box:focus, .combo-box:focus-visible {
+  outline: none;
+}
+
+.combo-box:hover > button, .combo-box:hover > button i {
+  color: var(--highlight-text-color) !important;
+}
+
+.combo-box > *::placeholder {
+  color: var(--secondary-text-color) !important;
+  font-style: italic;
+}
+
+.combo-box::after {
+  border: unset;
+}
+
+.combo-box:focus-within, .combo-box:focus, .combo-box:active {
+  border: 1px solid var(--aqua);
+}
+
+.combo-box-caret {
+  position: absolute;
+  right: 0;
+}
+
+.combo-box-label {
+  color: var(--primary-text-color) !important;
+  font-size: var(--l-paragraph-size);
+}
+
+.combo-box-callout {
+  background-color: var(--primary-background-color);
+  border-radius: var(--small-border-radius);
+  box-shadow: var(--box-shadow);
+  padding: 8px 0;
+  max-height: 250px !important;
+}
+
+.combo-box-callout > div {
+  background-color: var(--primary-background-color);
+  border-radius: 0;
+}
+
+.combo-box-item :is(input, button, label){
+  color: var(--primary-text-color);
+}
+
+.combo-box-item button:disabled, .combo-box-item-disabled {
+  color: var(--primary-text-color);
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.combo-box-item-disabled > div:hover,
+.combo-box-item-disabled > div:hover :is(input, label) {
+  background-color: var(--primary-background-color) !important;
+  color: unset !important;
+}
+
+.combo-box-item button:not(:disabled):hover,
+.combo-box-item > div:hover,
+.combo-box-item > div:hover :is(input, label) {
+  background-color: var(--highlight-background-color);
+  color: var(--highlight-text-color);
+}
+
+.combo-box-callout button:not(:disabled):active, 
+.combo-box-callout button:not(:disabled):active:hover,
+.combo-box-callout button:not(:disabled):focus,
+.combo-box-item > div:active,
+.combo-box-item > div:active:hover,
+.combo-box-item > div:focus,
+.combo-box-item > div:active :is(input, label),
+.combo-box-item > div:active:hover :is(input, label),
+.combo-box-item > div:focus :is(input, label)  {
+  background-color: var(--secondary-dark);
+  color: var(--highlight-text-color);
+}
+
+/* Remove border and background from checkbox for multiselect */
+.combo-box-item > div :is(i, div) {
+  border: none !important;
+  background: none !important;
+}
+
+.combo-box-item > div:hover :is(i, div) {
+  color: var(--highlight-text-color) !important;
+}

packages/core/components/ComboBox/index.tsx

@@ -0,0 +1,93 @@
+import { ComboBox, IComboBoxOption, IRenderFunction, ISelectableOption } from "@fluentui/react";
+import classNames from "classnames";
+import Fuse from "fuse.js";
+import * as React from "react";
+
+import styles from "./ComboBox.module.css";
+
+const FUZZY_SEARCH_OPTIONS = {
+    // which keys to search on
+    keys: [{ name: "text", weight: 1.0 }],
+
+    // return resulting matches sorted
+    shouldSort: true,
+
+    // arbitrarily tuned; 0.0 requires a perfect match, 1.0 would match anything
+    threshold: 0.3,
+};
+
+interface Props {
+    className?: string;
+    selectedKey?: string;
+    disabled?: boolean;
+    label: string;
+    multiSelect?: boolean;
+    options: IComboBoxOption[];
+    placeholder: string;
+    useComboBoxAsMenuWidth?: boolean;
+    onChange?: (option: IComboBoxOption | undefined, value?: string | undefined) => void;
+}
+
+/**
+ * Custom styled wrapper for default fluentui component
+ */
+export default function BaseComboBox(props: Props) {
+    const { options, label, placeholder } = props;
+
+    const [searchValue, setSearchValue] = React.useState("");
+
+    // Fuse logic borrowed from the ListPicker component
+    const fuse = React.useMemo(() => new Fuse(options, FUZZY_SEARCH_OPTIONS), [options]);
+    const filteredOptions = React.useMemo(() => {
+        const filteredRows = searchValue ? fuse.search(searchValue) : options;
+        return filteredRows.sort((a, b) => {
+            // If disabled, sort to the bottom
+            return a.disabled === b.disabled ? 0 : a.disabled ? 1 : -1;
+        });
+    }, [options, searchValue, fuse]);
+
+    const onRenderItem = (
+        itemProps: ISelectableOption | undefined,
+        defaultRender: IRenderFunction<ISelectableOption> | undefined
+    ): JSX.Element => {
+        if (itemProps && defaultRender) {
+            return (
+                <span
+                    key={`${itemProps.key}-${itemProps.index}`}
+                    className={classNames(styles.comboBoxItem, {
+                        [styles.comboBoxItemDisabled]: !!itemProps.disabled,
+                    })}
+                >
+                    {defaultRender(itemProps)}
+                </span>
+            );
+        }
+        return <></>;
+    };
+
+    return (
+        <ComboBox
+            allowFreeform
+            caretDownButtonStyles={{ root: styles.comboBoxCaret }}
+            className={props?.className}
+            selectedKey={props?.selectedKey}
+            disabled={props?.disabled}
+            placeholder={placeholder}
+            label={label}
+            multiSelect={props?.multiSelect}
+            options={filteredOptions}
+            onChange={(_ev, option, _ind, value) => props.onChange?.(option, value)}
+            onItemClick={(_, option) => props.onChange?.(option)}
+            onInputValueChange={(value) => {
+                setSearchValue(value || "");
+            }}
+            onRenderItem={(props, defaultRender) => onRenderItem(props, defaultRender)}
+            styles={{
+                root: styles.comboBox,
+                label: styles.comboBoxLabel,
+                callout: styles.comboBoxCallout,
+            }}
+            useComboBoxAsMenuWidth={props?.useComboBoxAsMenuWidth}
+        />
+    );
+}

packages/core/components/EditMetadata/EditMetadata.module.css

@@ -0,0 +1,122 @@
+.combo-box {
+  width: 295px;
+  padding-bottom: var(--margin);
+}
+
+.choice-group {
+  padding-bottom: var(--margin);
+}
+
+.chips {
+  padding-left: 5px;
+}
+
+.footer {
+  margin-top: 20px;
+  width: 100%;
+}
+
+.footer-align-right {
+  width: 100%;
+  display: flex;
+}
+
+.footer-align-right > * {
+  margin-left: 10px;
+  width: min-content;
+}
+
+.footer-align-right > *:first-child{
+  margin-left: auto;
+}
+
+.primary-button:disabled {
+  background-color: var(--border-color);
+  color: var(--primary-text-color)
+}
+
+.submit-icon {
+  align-items: center;
+  border-radius: var(--small-border-radius);
+  cursor: pointer;
+  display: flex;
+  padding: 0 0.5em;
+}
+
+.submit-icon.disabled {
+  cursor: default;
+  opacity: 0.8;
+}
+
+.submit-icon:hover:not(.disabled), .submit-icon:focus:not(.disabled) {
+  background-color: var(--highlight-background-color);
+  color: var(--highlight-text-color);
+}
+
+.selected-option-container {
+  display: flex;
+  margin-left: var(--margin);
+}
+
+.selected-option {
+  align-items: center;
+  display: flex;
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: min-content;
+  white-space: nowrap;
+}
+
+.selected-option-button {
+  color: var(--primary-text-color);
+  margin-left: 10px;
+}
+
+.selected-option-button:hover {
+  background-color: unset;
+  color: var(--highlight-text-color);
+}
+
+.text-field {
+  padding-bottom: var(--margin);
+  max-width: 300px;;
+}
+
+.text-field > div > label, .text-field > div > label::after {
+  color: var(--secondary-text-color) !important;
+  font-size: var(--l-paragraph-size);
+}
+
+.text-field :is(input) {
+  background-color: var(--secondary-background-color) !important;
+  color: var(--secondary-text-color) !important;
+  border-radius: 4px;
+}
+
+.text-field > div:focus, .text-field div:focus-visible, .text-field:focus-visible, .text-field > div:active {
+  outline: none;
+}
+
+.text-field > div > div {
+  border-radius: 4px;
+  border: 1px solid var(--border-color);
+  background-color: var(--secondary-background-color) !important;
+  color: var(--secondary-text-color) !important;
+}
+
+.text-field > div > div::after {
+  border: 1px solid var(--aqua);
+  border-radius: 4px;
+  outline: none;
+}
+
+.text-field > div > div > *::placeholder {
+  color: var(--secondary-text-color);
+  font-style: italic;
+}
+
+.text-field > div > div:hover {
+  border: 1px solid var(--border-color)
+}