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}