feat(FormGroupLabel, GridForm): assorted embedded user-form features

adds assorted features including: - ToolTip positioning for FormGroupLabel - Full Size button for GridForm Submit button
Codecademy · Jan 4, 2023 · 5528b76 · 5528b76
1 parent 06d0bed
commit 5528b76
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 24 deletions.
diff --git a/packages/gamut/src/Form/FormGroupLabel.tsx b/packages/gamut/src/Form/FormGroupLabel.tsx
@@ -26,15 +26,30 @@ const labelSizeVariants = variant({
   },
 });
 
+const labelPaddingVariants = variant({
+  prop: 'tooltipPadding',
+  variants: {
+    'right-align': {
+      mr: 16,
+    },
+    'left-align': {
+      mr: 4,
+    },
+  },
+});
+
 const labelStates = states({
   disabled: formFieldTextDisabledStyles,
-  tooltipPadding: { mr: 16 },
 });
 
 export interface LabelVariants
   extends StyleProps<typeof labelSizeVariants>,
+    StyleProps<typeof labelPaddingVariants>,
     StyleProps<typeof labelStates> {}
 
+export type FormToolTipProps = ToolTipProps & {
+  position?: 'left-align' | 'right-align';
+};
 export type FormGroupLabelProps = HTMLAttributes<HTMLDivElement> &
   HTMLAttributes<HTMLLabelElement> &
   LabelVariants & {
@@ -47,7 +62,41 @@ export type FormGroupLabelProps = HTMLAttributes<HTMLDivElement> &
     size?: 'small' | 'large';
   };
 
-const Label = styled.label<FormGroupLabelProps>(labelSizeVariants, labelStates);
+const Label = styled.label<FormGroupLabelProps>(
+  labelSizeVariants,
+  labelPaddingVariants,
+  labelStates
+);
+
+const getToolTip = (tooltip: FormToolTipProps) => {
+  const isToolTipRightAlign = tooltip.position !== 'left-align';
+
+  const targetProps = isToolTipRightAlign
+    ? ({ size: '0.8rem', 'aria-hidden': 'false', mb: 4 } as const)
+    : ({ size: '1rem', 'aria-hidden': 'false' } as const);
+
+  const ToolTipComponent = (
+    <ToolTip
+      alignment="bottom-right"
+      focusable
+      target={<MiniInfoOutlineIcon {...targetProps} />}
+      {...tooltip}
+    />
+  );
+
+  if (isToolTipRightAlign) {
+    return (
+      <Box as="span" position="absolute" left="calc(100% - 1.1rem)">
+        {ToolTipComponent}
+      </Box>
+    );
+  }
+
+  return <>{ToolTipComponent}</>;
+};
+
+const getToolTipPadding = (tooltip: FormToolTipProps) =>
+  tooltip?.position || 'right-align';
 
 export const FormGroupLabel: React.FC<FormGroupLabelProps> = ({
   children,
@@ -65,26 +114,15 @@ export const FormGroupLabel: React.FC<FormGroupLabelProps> = ({
         {...rest}
         htmlFor={htmlFor}
         disabled={disabled}
-        tooltipPadding={Boolean(tooltip)}
+        tooltipPadding={tooltip ? getToolTipPadding(tooltip) : undefined}
         className={className}
         size={size}
         as={htmlFor ? 'label' : 'div'}
       >
         {children}
         {showRequired ? ' *' : ''}
       </Label>
-      {tooltip && (
-        <Box as="span" position="absolute" left="calc(100% - 1.1rem)">
-          <ToolTip
-            alignment="bottom-right"
-            focusable
-            target={
-              <MiniInfoOutlineIcon size="0.8rem" aria-hidden="false" mb={4} />
-            }
-            {...tooltip}
-          />
-        </Box>
-      )}
+      {tooltip && getToolTip(tooltip)}
     </FlexBox>
   );
 };
diff --git a/packages/gamut/src/GridForm/GridFormButtons/index.tsx b/packages/gamut/src/GridForm/GridFormButtons/index.tsx
@@ -37,6 +37,7 @@ const positions = {
   center: 'center',
   right: 'flex-end',
   stretch: 'stretch',
+  fill: 'fill',
 };
 
 const buttonMap = {
@@ -46,13 +47,18 @@ const buttonMap = {
 
 export const GridFormButtons: React.FC<
   GridFormSubmitProps & CancelButtonProps
-> = ({ type = 'fill', ...props }) => {
+> = ({ type = 'fill', position, ...props }) => {
+  const fillWidth = position === 'fill' ? '100%' : undefined;
+
   return (
     <Column size={props.size}>
       <Box
         mb={8}
         alignSelf="center"
-        justifySelf={positions[props.position || 'left']}
+        justifySelf={
+          positions[!position || position === 'fill' ? 'left' : position]
+        }
+        width={fillWidth}
       >
         {props.cancel && (
           <TextButton {...props.cancel} mr={32} data-testid="cancel-button" />
@@ -62,6 +68,7 @@ export const GridFormButtons: React.FC<
           mode={props.mode}
           disabled={props.disabled}
           loading={props.loading}
+          width={fillWidth}
         >
           {props.contents}
         </SubmitButton>

diff --git a/packages/gamut/src/GridForm/types.ts b/packages/gamut/src/GridForm/types.ts
@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
 import { RegisterOptions, UseFormReturn } from 'react-hook-form';
 
+import { FormToolTipProps } from '../Form';
 import { CheckboxPaddingProps } from '../Form/types';
 import { ColumnProps } from '../Layout';
-import { ToolTipProps } from '../ToolTip';
 import { TextProps } from '../Typography/Text';
 
 export interface BaseFormInputProps {
@@ -28,7 +28,7 @@ export type BaseFormField<Value> = {
    */
   id?: string;
 
-  tooltip?: ToolTipProps;
+  tooltip?: FormToolTipProps;
 
   name: string;
   onUpdate?: (value: Value) => void;

diff --git a/packages/styleguide/stories/Atoms/FormElements/FormGroup.stories.mdx b/packages/styleguide/stories/Atoms/FormElements/FormGroup.stories.mdx
@@ -110,15 +110,15 @@ A field can include [our existing `ToolTip`](/?path=/docs/atoms-tooltip--tool-ti
       </FormGroup>
     )}
   </Story>
-  <Story name="FormGroupTooltipDark">
+  <Story name="FormGroupToolTipLeft">
     {() => (
       <FormGroup
-        label="dark mode"
+        label="left align"
         tooltip={{
-          id: 'dark-mode-tooltip',
-          mode: 'dark',
+          id: 'tooltip-left',
           children:
             'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+          position: 'left-align',
         }}
       >
         <Input />

diff --git a/packages/styleguide/stories/Organisms/GridForm.stories.mdx b/packages/styleguide/stories/Organisms/GridForm.stories.mdx
@@ -42,7 +42,10 @@ GridForm provides the following benefits:
 4. **Visual Consistency**: Aligns all input elements with the correct vertical rhythms and grid spacing
 
 <Canvas>
-  <Story name="GridForm" args={{ validation: 'onSubmit', resetOnSubmit: true }}>
+  <Story
+    name="GridForm"
+    args={{ validation: 'onSubmit', resetOnSubmit: true, target: '_parent' }}
+  >
     {(args) => (
       <GridForm
         {...args}
@@ -380,6 +383,22 @@ value of left, center, right, or stretch.
               position: 'stretch',
             }}
           />
+          <GridForm
+            fields={[
+              {
+                label: 'Simple text',
+                name: 'fill-sub-simple-text',
+                type: 'text',
+              },
+            ]}
+            onSubmit={async (values) => {
+              action('Form Submitted')(values);
+            }}
+            submit={{
+              contents: 'Fill Submit!?',
+              position: 'fill',
+            }}
+          />
         </Column>
       </LayoutGrid>
     )}