diff --git a/package-lock.json b/package-lock.json index 628f64631..871489359 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@timechimp/tacugama", - "version": "13.7.2", + "version": "13.8.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@timechimp/tacugama", - "version": "13.7.2", + "version": "13.8.0", "license": "MIT", "dependencies": { "@ag-grid-community/client-side-row-model": "25.0.1", diff --git a/package.json b/package.json index 3997a04e1..996454f65 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "13.7.2", + "version": "13.8.0", "license": "MIT", "main": "dist/cjs/index.js", "module": "dist/esm/index.js", diff --git a/src/components/edit-page/EditPageContainer.stories.tsx b/src/components/edit-page/EditPageContainer.stories.tsx index 678f9fe1e..a88943754 100644 --- a/src/components/edit-page/EditPageContainer.stories.tsx +++ b/src/components/edit-page/EditPageContainer.stories.tsx @@ -22,7 +22,7 @@ const Template: Story = (args) => { export const Default = Template.bind({}); Default.args = { title: 'Edit Page', - footerButtonTitle: 'Save', + submitButtonText: 'Save', onFooterButtonClick: () => console.log('Save'), footerButtonIsLoading: false, }; diff --git a/src/components/edit-page/EditPageContainer.tsx b/src/components/edit-page/EditPageContainer.tsx index c2c4d6aeb..5a6ade414 100644 --- a/src/components/edit-page/EditPageContainer.tsx +++ b/src/components/edit-page/EditPageContainer.tsx @@ -11,9 +11,8 @@ import { Separator } from '../separator'; import { AddLineIcon } from '../icons'; const BOX_HEIGHT = '90vh'; -const TOP_BOTTOM_PADDING = 50; -const TOTAL_PADDING = TOP_BOTTOM_PADDING * 2; -const SMALL_CONTAINER_HEIGHT = `calc(${BOX_HEIGHT} - ${TOTAL_PADDING}px)`; +const TOTAL_PADDING = 98; +const SMALL_CONTAINER_HEIGHT = `calc(100% - ${TOTAL_PADDING}px)`; export const EditPageContainer = ({ title, @@ -24,6 +23,7 @@ export const EditPageContainer = ({ updating = false, headerButtonType = HeaderButtonTypeEditPageContainer.Add, updatingHeaderButton, + height, }: EditPageContainerProps) => { const { theme: { @@ -59,7 +59,7 @@ export const EditPageContainer = ({ }; return ( - + { - const { - theme: { - current: { - sizing: { scale500, scale550, scale600 }, - customSizing: { scale975 }, - borders, - colors, - customColors, - }, +export const Input = ({ + value, + testId, + type, + uppercase, + noBorder = false, + success = false, + disabled, + width = '100%', + startEnhancer = null, + endEnhancer = null, + overrides, + showSkeleton = false, + autoComplete = 'off', + name, + align = Align.left, + ...rest +}: InputProps) => { + const { + theme: { + current: { + sizing: { scale500, scale550, scale600 }, + customSizing: { scale975 }, + borders, + colors, + customColors, }, - } = useTheme(); - const { border300 } = borders; - const { primaryB } = colors; + }, + } = useTheme(); + const { border300 } = borders; + const { primaryB } = colors; - // Password input requires the default padding - const rootPadding = () => { - if (type !== 'password') { - return { ...padding() }; - } - }; - const { - Root: RootOverrides, - StartEnhancer: StartEnhancerOverrides, - EndEnhancer: EndEnhancerOverrides, - MaskToggleButton: MaskToggleButtonOverrides, - Input: InputOverrides, - InputContainer: InputContainerOverrides, - ...styleOverrides - } = overrides ?? {}; + // Password input requires the default padding + const rootPadding = () => { + if (type !== 'password') { + return { ...padding() }; + } + }; + const { + Root: RootOverrides, + StartEnhancer: StartEnhancerOverrides, + EndEnhancer: EndEnhancerOverrides, + MaskToggleButton: MaskToggleButtonOverrides, + Input: InputOverrides, + InputContainer: InputContainerOverrides, + ...styleOverrides + } = overrides ?? {}; - const baseOverrides: InputOverrides = { - Input: { - style: (opts) => { - const { $disabled, $isFocused, $theme } = opts; - const backgroundColor = getInputBackgroundColor({ disabled: $disabled, customColors, colors }); - const color = getInputTextColor({ isFocused: $isFocused, hasValue: !!value, customColors, colors }); - return { - backgroundColor, - ...border(), - ...padding('0', endEnhancer ? scale500 : scale600, '0', startEnhancer ? scale500 : scale600), - textTransform: uppercase ? 'uppercase' : 'inherit', - textAlign: align, - color, - '::placeholder': { - color: customColors.dark4, - }, - fontSize: $theme.typography.LabelSmall.fontSize, - ...getStyleOverrides(opts, InputOverrides?.style), - }; - }, - props: { - [DATA_TEST_ID]: testId, - }, - }, - InputContainer: { - style: (opts) => ({ + const baseOverrides: InputOverrides = { + Input: { + style: (opts) => { + const { $disabled, $isFocused, $theme } = opts; + const backgroundColor = getInputBackgroundColor({ disabled: $disabled, customColors, colors }); + const color = getInputTextColor({ isFocused: $isFocused, hasValue: !!value, customColors, colors }); + return { + backgroundColor, ...border(), - backgroundColor: primaryB, - ...getStyleOverrides(opts, InputContainerOverrides?.style), - }), + ...padding('0', endEnhancer ? scale500 : scale600, '0', startEnhancer ? scale500 : scale600), + textTransform: uppercase ? 'uppercase' : 'inherit', + textAlign: align, + color, + '::placeholder': { + color: customColors.dark4, + }, + fontSize: $theme.typography.LabelSmall.fontSize, + ...getStyleOverrides(opts, InputOverrides?.style), + }; }, - Root: { - style: (opts) => { - const { $error, $isFocused } = opts; - return { - height: scale975, - width, + props: { + [DATA_TEST_ID]: testId, + }, + }, + InputContainer: { + style: (opts) => ({ + ...border(), + backgroundColor: primaryB, + ...getStyleOverrides(opts, InputContainerOverrides?.style), + }), + }, + Root: { + style: (opts) => { + const { $error, $isFocused } = opts; + return { + height: scale975, + width, + ...border( + !noBorder + ? { + ...border300, + borderColor: getInputBorderColor({ + error: $error, + success, + isFocused: $isFocused, + customColors, + colors, + }), + } + : undefined, + ), + ...borderRadius(borders.radius200), + backgroundColor: primaryB, + ...margin('0'), + ...rootPadding(), + ':hover': { ...border( !noBorder ? { @@ -111,82 +129,62 @@ export const Input = forwardRef( isFocused: $isFocused, customColors, colors, + hover: true, + disabled, }), } : undefined, ), - ...borderRadius(borders.radius200), - backgroundColor: primaryB, - ...margin('0'), - ...rootPadding(), - ':hover': { - ...border( - !noBorder - ? { - ...border300, - borderColor: getInputBorderColor({ - error: $error, - success, - isFocused: $isFocused, - customColors, - colors, - hover: true, - disabled, - }), - } - : undefined, - ), - }, - ...getStyleOverrides(opts, RootOverrides?.style), - }; - }, + }, + ...getStyleOverrides(opts, RootOverrides?.style), + }; }, - StartEnhancer: { - style: (opts) => { - const { $disabled } = opts; - return { - backgroundColor: getInputBackgroundColor({ disabled: $disabled, customColors, colors }), - ...padding('0', '0', '0', scale600), - ...getStyleOverrides(opts, StartEnhancerOverrides?.style), - }; - }, + }, + StartEnhancer: { + style: (opts) => { + const { $disabled } = opts; + return { + backgroundColor: getInputBackgroundColor({ disabled: $disabled, customColors, colors }), + ...padding('0', '0', '0', scale600), + ...getStyleOverrides(opts, StartEnhancerOverrides?.style), + }; }, - EndEnhancer: { - style: (opts) => { - const { $disabled } = opts; - return { - backgroundColor: getInputBackgroundColor({ disabled: $disabled, customColors, colors }), - ...padding('0', scale600, '0', '0'), - ...getStyleOverrides(opts, EndEnhancerOverrides?.style), - }; - }, + }, + EndEnhancer: { + style: (opts) => { + const { $disabled } = opts; + return { + backgroundColor: getInputBackgroundColor({ disabled: $disabled, customColors, colors }), + ...padding('0', scale600, '0', '0'), + ...getStyleOverrides(opts, EndEnhancerOverrides?.style), + }; }, - MaskToggleButton: { - style: (opts) => { - return { - ...padding('0', '0', '0', scale550), - outline: 'none', - ...getStyleOverrides(opts, MaskToggleButtonOverrides?.style), - }; - }, + }, + MaskToggleButton: { + style: (opts) => { + return { + ...padding('0', '0', '0', scale550), + outline: 'none', + ...getStyleOverrides(opts, MaskToggleButtonOverrides?.style), + }; }, - ...styleOverrides, - }; + }, + ...styleOverrides, + }; - return showSkeleton ? ( - - ) : ( - - ); - }, -); + return showSkeleton ? ( + + ) : ( + + ); +}; diff --git a/src/components/select/index.ts b/src/components/select/index.ts index f2359f0ca..d7f0ec797 100755 --- a/src/components/select/index.ts +++ b/src/components/select/index.ts @@ -1,5 +1,5 @@ export * from './multi-select'; export * from './single-select/SingleSelect'; -export { Option as SingleSelectOption } from './single-select/types'; +export { Option as SingleSelectOption, SingleSelectProps } from './single-select/types'; export * from './types'; export { Option } from 'baseui/select';