Styling updates

.vscode/settings.json

@@ -5,8 +5,8 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "prettier.requireConfig": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.tslint": true,
-    "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": true
+    "source.fixAll.tslint": "explicit",
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
   }
 }

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "13.6.0",
+  "version": "13.7.0",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

src/components/basic-table/__tests__/constants.tsx

@@ -23,7 +23,7 @@ export const COLUMNS: BasicTableColumn[] = [
   },
   {
     label: 'Actions',
-    type: BasicTableColumnType.Custom,
+    type: BasicTableColumnType.Action,
     field: 'actions',
   },
 ];

src/components/basic-table/components/cell/Cell.tsx

@@ -26,6 +26,11 @@ export const renderCell = (row: BasicTableRow, column: BasicTableColumn) => {
         <>{value}</>
       </CellWrapper>
     ),
+    [BasicTableColumnType.Action]: () => (
+      <CellWrapper alignRight>
+        <>{value}</>
+      </CellWrapper>
+    ),
     [BasicTableColumnType.Financial]: () => (
       <CellWrapper alignRight>
         <>

src/components/basic-table/types.ts

@@ -3,6 +3,7 @@ import { TableProps } from 'baseui/table-semantic';
 export enum BasicTableColumnType {
   Text = 'text',
   Custom = 'custom',
+  Action = 'action',
   Financial = 'financial',
 }
 

src/components/form-group/FormGroup.stories.tsx

@@ -35,33 +35,15 @@ const Template: Story<FormGroupProps> = ({ title, subtitle }) => {
           name="name"
           control={control}
           rules={{ required: true }}
-          render={({ field }) => (
-            <Input
-              {...field}
-              testId="name-input"
-              size="compact"
-              placeholder="Name"
-              error={!!errors.name}
-              autoComplete="off"
-            />
-          )}
+          render={({ field }) => <Input {...field} placeholder="Name" error={!!errors.name} autoComplete="off" />}
         />
         <FormRow
           label="This is a label"
           caption="This is a caption"
           name="name"
           control={control}
           rules={{ required: true }}
-          render={({ field }) => (
-            <Input
-              {...field}
-              testId="name-input"
-              size="compact"
-              placeholder="Name"
-              error={!!errors.name}
-              autoComplete="off"
-            />
-          )}
+          render={({ field }) => <Input {...field} placeholder="Name" error={!!errors.name} autoComplete="off" />}
         />
         <FormRow
           label="This is a label"
@@ -70,9 +52,7 @@ const Template: Story<FormGroupProps> = ({ title, subtitle }) => {
           name="name"
           control={control}
           rules={{ required: true }}
-          render={({ field }) => (
-            <Input {...field} testId="name-input" size="compact" placeholder="Name" error autoComplete="off" />
-          )}
+          render={({ field }) => <Input {...field} placeholder="Name" error autoComplete="off" />}
         />
         <TCFormRow
           control={control}
@@ -103,6 +83,14 @@ const Template: Story<FormGroupProps> = ({ title, subtitle }) => {
       </FormGroup>
 
       <FormGroup title={title} subtitle={subtitle}></FormGroup>
+      <FormGroup>
+        <FormRow
+          label="This is a full width form group"
+          name="name"
+          control={control}
+          render={({ field }) => <Input {...field} placeholder="Name" autoComplete="off" />}
+        />
+      </FormGroup>
     </>
   );
 };

src/components/form-group/FormGroup.tsx

@@ -8,19 +8,13 @@ import { FormGroupStack, FormGroupTitleStack } from './styles';
 import { Separator } from '../separator';
 
 export const FormGroup = ({ title, subtitle, children }: FormGroupProps) => {
-  const [dimensions, setDimensions] = useState({
-    width: 0,
-    height: 0,
-  });
+  const [width, setWidth] = useState(0);
 
   const [elementRef, setElementRef] = useState<HTMLElement | null>();
 
   useEffect(() => {
     const onWindowResize = () => {
-      setDimensions({
-        width: elementRef?.offsetWidth || 0,
-        height: elementRef?.offsetHeight || 0,
-      });
+      setWidth(elementRef?.offsetWidth || 0);
     };
 
     if (typeof window !== undefined && elementRef?.offsetWidth) {
@@ -32,9 +26,9 @@ export const FormGroup = ({ title, subtitle, children }: FormGroupProps) => {
     }
   }, [elementRef]);
 
-  const { width } = dimensions;
   const breakpoint = 900;
-  const isLarge = width ? width > breakpoint : true;
+  // Only set large if subtitle or title is present
+  const isLarge = (width > breakpoint && !!(title || subtitle)) ?? false;
 
   const {
     theme: {
@@ -44,7 +38,6 @@ export const FormGroup = ({ title, subtitle, children }: FormGroupProps) => {
       },
     },
   } = useTheme();
-
   const gridGap = useMemo(() => {
     if (isLarge) {
       return scale1200;

src/components/form-group/styles.ts

@@ -3,7 +3,7 @@ import { themedStyled } from '../../theme';
 export const FormGroupStack = themedStyled('div', ({ $theme }) => ({
   display: 'flex',
   flexDirection: 'column',
-  gap: $theme.sizing.scale500,
+  gap: $theme.sizing.scale750,
 }));
 
 export const FormGroupTitleStack = themedStyled('div', ({ $theme }) => ({

src/components/form-row/FormRow.tsx

@@ -43,7 +43,7 @@ export const FormRow = <T extends FieldValues, K extends string>({
   return (
     <Block width={'100%'}>
       {label && (
-        <Block marginBottom={scale300}>
+        <Block marginBottom={scale100}>
           <LabelSmall display="flex" as="label" alignItems="center" gridGap={scale200} for={name as string}>
             {getLabel()}
             {toolTip && (

src/components/side-nav/SideNav.stories.tsx

@@ -24,6 +24,7 @@ const Template: Story<SideNavProps> = () => {
     {
       id: Tab.General,
       title: Tab.General,
+      subtitle: 'Subtitle',
       component: () => <ParagraphSmall>{Tab.General}</ParagraphSmall>,
     },
     {

src/components/side-nav/SideNavListItem.tsx

@@ -35,7 +35,7 @@ export const SideNavListItem = ({
       current: {
         colors: { primary, contentSecondary },
         customColors: { dark3 },
-        sizing: { scale400, scale500 },
+        sizing: { scale100, scale400, scale500, scale600 },
       },
     },
   } = useTheme();
@@ -80,7 +80,7 @@ export const SideNavListItem = ({
     return (
       <>
         {subtitle && (
-          <LabelXSmall color={dark3} marginTop={scale500} marginBottom={scale400}>
+          <LabelXSmall color={dark3} marginTop={scale600} marginBottom={scale100}>
             {subtitle.toUpperCase()}
           </LabelXSmall>
         )}

src/components/switcher/Switcher.tsx

@@ -10,9 +10,10 @@ export interface SwitcherProps {
   onPrev: () => void;
   onNext: () => void;
   value: string | number;
+  color?: string;
 }
 
-export const Switcher = ({ onPrev, onNext, value }: SwitcherProps) => {
+export const Switcher = ({ onPrev, onNext, value, color }: SwitcherProps) => {
   const {
     theme: {
       current: {
@@ -27,7 +28,7 @@ export const Switcher = ({ onPrev, onNext, value }: SwitcherProps) => {
         <Button onClick={onPrev}>
           <CaretLeftIcon size={scale400} />
         </Button>
-        <LabelMedium paddingLeft={scale500} paddingRight={scale500}>
+        <LabelMedium paddingLeft={scale500} paddingRight={scale500} color={color}>
           {value}
         </LabelMedium>
         <Button onClick={onNext}>