diff --git a/.vscode/settings.json b/.vscode/settings.json
index 855027d3d..2a15e971b 100755
--- a/.vscode/settings.json
+++ b/.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"
}
}
diff --git a/package-lock.json b/package-lock.json
index 663e98b49..b0f4210cb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@timechimp/tacugama",
- "version": "13.6.0",
+ "version": "13.7.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@timechimp/tacugama",
- "version": "13.6.0",
+ "version": "13.7.0",
"license": "MIT",
"dependencies": {
"@ag-grid-community/client-side-row-model": "25.0.1",
diff --git a/package.json b/package.json
index 63c13f086..bca56e153 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/basic-table/__tests__/constants.tsx b/src/components/basic-table/__tests__/constants.tsx
index eff513656..31c48342a 100644
--- a/src/components/basic-table/__tests__/constants.tsx
+++ b/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',
},
];
diff --git a/src/components/basic-table/components/cell/Cell.tsx b/src/components/basic-table/components/cell/Cell.tsx
index 7d3eecaec..e0cc9713f 100644
--- a/src/components/basic-table/components/cell/Cell.tsx
+++ b/src/components/basic-table/components/cell/Cell.tsx
@@ -26,6 +26,11 @@ export const renderCell = (row: BasicTableRow, column: BasicTableColumn) => {
<>{value}>
),
+ [BasicTableColumnType.Action]: () => (
+
+ <>{value}>
+
+ ),
[BasicTableColumnType.Financial]: () => (
<>
diff --git a/src/components/basic-table/types.ts b/src/components/basic-table/types.ts
index a84273a04..391afae28 100644
--- a/src/components/basic-table/types.ts
+++ b/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',
}
diff --git a/src/components/form-group/FormGroup.stories.tsx b/src/components/form-group/FormGroup.stories.tsx
index 97788df23..197e86514 100644
--- a/src/components/form-group/FormGroup.stories.tsx
+++ b/src/components/form-group/FormGroup.stories.tsx
@@ -35,16 +35,7 @@ const Template: Story = ({ title, subtitle }) => {
name="name"
control={control}
rules={{ required: true }}
- render={({ field }) => (
-
- )}
+ render={({ field }) => }
/>
= ({ title, subtitle }) => {
name="name"
control={control}
rules={{ required: true }}
- render={({ field }) => (
-
- )}
+ render={({ field }) => }
/>
= ({ title, subtitle }) => {
name="name"
control={control}
rules={{ required: true }}
- render={({ field }) => (
-
- )}
+ render={({ field }) => }
/>
= ({ title, subtitle }) => {
+
+ }
+ />
+
>
);
};
diff --git a/src/components/form-group/FormGroup.tsx b/src/components/form-group/FormGroup.tsx
index c196c265f..d83745640 100644
--- a/src/components/form-group/FormGroup.tsx
+++ b/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();
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;
diff --git a/src/components/form-group/styles.ts b/src/components/form-group/styles.ts
index 55c7db40c..9af780d77 100644
--- a/src/components/form-group/styles.ts
+++ b/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 }) => ({
diff --git a/src/components/form-row/FormRow.tsx b/src/components/form-row/FormRow.tsx
index b264cab5b..850653914 100644
--- a/src/components/form-row/FormRow.tsx
+++ b/src/components/form-row/FormRow.tsx
@@ -43,7 +43,7 @@ export const FormRow = ({
return (
{label && (
-
+
{getLabel()}
{toolTip && (
diff --git a/src/components/side-nav/SideNav.stories.tsx b/src/components/side-nav/SideNav.stories.tsx
index 729aa8f0e..43b836f1d 100755
--- a/src/components/side-nav/SideNav.stories.tsx
+++ b/src/components/side-nav/SideNav.stories.tsx
@@ -24,6 +24,7 @@ const Template: Story = () => {
{
id: Tab.General,
title: Tab.General,
+ subtitle: 'Subtitle',
component: () => {Tab.General},
},
{
diff --git a/src/components/side-nav/SideNavListItem.tsx b/src/components/side-nav/SideNavListItem.tsx
index 3ac74111b..635880576 100644
--- a/src/components/side-nav/SideNavListItem.tsx
+++ b/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 && (
-
+
{subtitle.toUpperCase()}
)}
diff --git a/src/components/switcher/Switcher.tsx b/src/components/switcher/Switcher.tsx
index dc40ad373..9e89bcaa0 100644
--- a/src/components/switcher/Switcher.tsx
+++ b/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) => {
-
+
{value}