style

Author: paula-stacho

packages/compass-components/src/components/accordion.tsx

@@ -50,13 +50,15 @@ const buttonHintStyles = css({
 interface AccordionProps extends React.HTMLProps<HTMLButtonElement> {
   text: string | React.ReactNode;
   hintText?: string;
+  textClassName?: string;
   open?: boolean;
   isDefaultExpanded?: boolean;
   setOpen?: (newValue: boolean) => void;
 }
 function Accordion({
   text,
   hintText,
+  textClassName,
   open: _open,
   setOpen: _setOpen,
   isDefaultExpanded = false,
@@ -82,7 +84,8 @@ function Accordion({
         {...props}
         className={cx(
           darkMode ? buttonDarkThemeStyles : buttonLightThemeStyles,
-          buttonStyles
+          buttonStyles,
+          textClassName
         )}
         id={labelId}
         type="button"

packages/compass-data-modeling/src/components/side-panel/relationship-drawer-content.tsx

@@ -1,16 +1,25 @@
-import React, { useCallback, useMemo, useRef } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { connect } from 'react-redux';
 import type { DataModelingState } from '../../store/reducer';
 import {
   Button,
   Combobox,
   FormFieldContainer,
-  H3,
   ComboboxOption,
   Select,
   Option,
   Accordion,
   TextInput,
+  spacing,
+  css,
+  Icon,
+  palette,
 } from '@mongodb-js/compass-components';
 import {
   deleteRelationship,
@@ -41,6 +50,20 @@ type RelationshipFormFields = {
   foreignCardinality: string;
 };
 
+const formFieldContainerStyles = css({
+  marginBottom: spacing[400],
+  marginTop: spacing[400],
+});
+
+const containerStyles = css({
+  padding: spacing[400],
+});
+
+const accordionTitleStyles = css({
+  fontSize: spacing[300],
+  color: palette.gray.dark1,
+});
+
 const FIELD_DIVIDER = '~~##$$##~~';
 
 function useRelationshipFormFields(
@@ -119,6 +142,13 @@ const RelationshipDrawerContent: React.FunctionComponent<
     return Object.keys(fields);
   }, [fields]);
 
+  const [relationshipName, setRelationshipName] = useState<string>(
+    relationship.name || ''
+  );
+  useEffect(() => {
+    setRelationshipName(relationship.name || '');
+  }, [relationship.name]);
+
   const {
     localCollection,
     localField,
@@ -138,22 +168,47 @@ const RelationshipDrawerContent: React.FunctionComponent<
   }, [fields, foreignCollection]);
 
   return (
-    <div data-relationship-id={relationshipId}>
-      <Accordion text="RELATIONSHIP" isDefaultExpanded={true}>
-        <FormFieldContainer>
+    <div data-relationship-id={relationshipId} className={containerStyles}>
+      <Accordion
+        text="RELATIONSHIP"
+        isDefaultExpanded={true}
+        textClassName={accordionTitleStyles}
+      >
+        <FormFieldContainer className={formFieldContainerStyles}>
           <TextInput
             label="Name"
-            value={relationship.name}
+            sizeVariant="small"
+            value={relationshipName}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setRelationshipName(e.target.value);
+            }}
             onBlur={(e: React.FocusEvent<HTMLInputElement>) => {
               onFieldChange('name', e.target.value);
             }}
           />
         </FormFieldContainer>
+
+        <FormFieldContainer className={formFieldContainerStyles}>
+          <Button
+            variant="dangerOutline"
+            leftGlyph={<Icon glyph="Trash" />}
+            onClick={() => {
+              onDeleteRelationshipClick(relationshipId);
+            }}
+          >
+            Delete reference
+          </Button>
+        </FormFieldContainer>
       </Accordion>
 
-      <Accordion text="CONFIGURATION" isDefaultExpanded={true}>
-        <FormFieldContainer>
+      <Accordion
+        text="CONFIGURATION"
+        isDefaultExpanded={true}
+        textClassName={accordionTitleStyles}
+      >
+        <FormFieldContainer className={formFieldContainerStyles}>
           <Combobox
+            size="small"
             label="Local collection"
             value={localCollection}
             onChange={(val) => {
@@ -177,8 +232,9 @@ const RelationshipDrawerContent: React.FunctionComponent<
           </Combobox>
         </FormFieldContainer>
 
-        <FormFieldContainer>
+        <FormFieldContainer className={formFieldContainerStyles}>
           <Combobox
+            size="small"
             label="Local field"
             value={localField}
             onChange={(val) => {
@@ -201,8 +257,9 @@ const RelationshipDrawerContent: React.FunctionComponent<
           </Combobox>
         </FormFieldContainer>
 
-        <FormFieldContainer>
+        <FormFieldContainer className={formFieldContainerStyles}>
           <Combobox
+            size="small"
             label="Foreign collection"
             value={foreignCollection}
             onChange={(val) => {
@@ -226,8 +283,9 @@ const RelationshipDrawerContent: React.FunctionComponent<
           </Combobox>
         </FormFieldContainer>
 
-        <FormFieldContainer>
+        <FormFieldContainer className={formFieldContainerStyles}>
           <Combobox
+            size="small"
             label="Foreign field"
             value={foreignField}
             onChange={(val) => {
@@ -250,8 +308,9 @@ const RelationshipDrawerContent: React.FunctionComponent<
           </Combobox>
         </FormFieldContainer>
 
-        <FormFieldContainer>
+        <FormFieldContainer className={formFieldContainerStyles}>
           <Select
+            size="small"
             label="Local cardinality"
             value={localCardinality}
             onChange={(val) => {
@@ -270,8 +329,9 @@ const RelationshipDrawerContent: React.FunctionComponent<
           </Select>
         </FormFieldContainer>
 
-        <FormFieldContainer>
+        <FormFieldContainer className={formFieldContainerStyles}>
           <Select
+            size="small"
             label="Foreign cardinality"
             value={foreignCardinality}
             onChange={(val) => {
@@ -289,16 +349,6 @@ const RelationshipDrawerContent: React.FunctionComponent<
             })}
           </Select>
         </FormFieldContainer>
-
-        <FormFieldContainer>
-          <Button
-            onClick={() => {
-              onDeleteRelationshipClick(relationshipId);
-            }}
-          >
-            Delete
-          </Button>
-        </FormFieldContainer>
       </Accordion>
     </div>
   );