diff --git a/package.json b/package.json index de1a0678..25784200 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@dassana-io/web-components", - "version": "0.10.5", + "version": "0.10.6", "publishConfig": { "registry": "https://npm.pkg.github.com/dassana-io" }, diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index 97a99302..42104699 100644 --- a/src/components/Input/index.tsx +++ b/src/components/Input/index.tsx @@ -36,6 +36,7 @@ const useStyles = createUseStyles({ export interface InputProps extends BaseFormElementProps { addonAfter?: string addonBefore?: string + defaultValue?: string inputRef?: RefObject focused?: boolean onFocus?: () => void @@ -53,6 +54,7 @@ export const Input: FC = (props: InputProps) => { addonBefore, classes = [], dataTag, + defaultValue, disabled = false, focused = false, inputRef, @@ -97,6 +99,7 @@ export const Input: FC = (props: InputProps) => { addonBefore={addonBefore} autoFocus={focused} className={cn(componentClasses.container, inputClasses)} + defaultValue={defaultValue} disabled={disabled} onBlur={onBlur} onFocus={onFocus} diff --git a/src/components/Select/BaseSelect.tsx b/src/components/Select/BaseSelect.tsx index 43d9ae34..e9e71884 100644 --- a/src/components/Select/BaseSelect.tsx +++ b/src/components/Select/BaseSelect.tsx @@ -43,6 +43,7 @@ type BaseSelectProps = CommonBaseSelectProps & export const BaseSelect: FC = (props: BaseSelectProps) => { const { classes = [], + containerClasses = [], dataTag, defaultOpen = false, disabled = false, @@ -56,6 +57,7 @@ export const BaseSelect: FC = (props: BaseSelectProps) => { placeholder = '', popupContainerSelector, showSearch = false, + size, useStyles } = props @@ -122,7 +124,12 @@ export const BaseSelect: FC = (props: BaseSelectProps) => { return loading ? ( ) : ( -
+
= (props: BaseSelectProps) => { placeholder={placeholder} showArrow showSearch={showSearch} + size={size} {...getPopupContainerProps(popupContainerSelector)} {...multiSelectProps} {...singleSelectProps} diff --git a/src/components/Select/SingleSelect/Select.stories.tsx b/src/components/Select/SingleSelect/Select.stories.tsx index f6099d3f..4c9d58a5 100644 --- a/src/components/Select/SingleSelect/Select.stories.tsx +++ b/src/components/Select/SingleSelect/Select.stories.tsx @@ -16,6 +16,12 @@ export default { argTypes: { onChange: { defaultValue: action('onChange') }, popupContainerSelector: { control: { disable: true } }, + size: { + control: { + options: ['small', 'medium', 'large'], + type: 'inline-radio' + } + }, value: { control: { disable: true } } }, component: Select, diff --git a/src/components/Select/SingleSelect/SelectSkeleton.tsx b/src/components/Select/SingleSelect/SelectSkeleton.tsx index 2c1fa375..0be5eb47 100644 --- a/src/components/Select/SingleSelect/SelectSkeleton.tsx +++ b/src/components/Select/SingleSelect/SelectSkeleton.tsx @@ -1,6 +1,7 @@ -import { BaseFormElementProps } from '../../types' +import cn from 'classnames' import { createUseStyles } from 'react-jss' import { defaultFieldWidth } from '../../assets/styles/styleguide' +import { SelectProps } from './types' import { Skeleton } from '../../Skeleton' import React, { FC } from 'react' @@ -11,17 +12,18 @@ const useStyles = createUseStyles({ }) export type SelectSkeletonProps = Pick< - BaseFormElementProps, - 'fullWidth' + SelectProps, + 'containerClasses' | 'fullWidth' > export const SelectSkeleton: FC = ( props: SelectSkeletonProps ) => { + const { containerClasses = [] } = props const classes = useStyles(props) return ( -
+
) diff --git a/src/components/Select/SingleSelect/types.ts b/src/components/Select/SingleSelect/types.ts index 03d08159..a2019f59 100644 --- a/src/components/Select/SingleSelect/types.ts +++ b/src/components/Select/SingleSelect/types.ts @@ -1,6 +1,7 @@ import { BaseFormElementProps } from '../../types' import { CSSProperties } from 'react' import { IconName } from '../../Icon' +import { SizeType } from 'antd/lib/config-provider/SizeContext' export interface SelectOption { iconKey?: IconName @@ -16,14 +17,19 @@ export interface SelectOptionsConfig { export interface SelectProps extends BaseFormElementProps { /** - * Default value for select component. Without this, the select dropdown will be blank until an option is selected + * Array of classes to pass to element's container + * @default [] */ - defaultValue?: string + containerClasses?: string[] /** * Whether or not to menu is open by default * @default false */ defaultOpen?: boolean + /** + * Default value for select component. Without this, the select dropdown will be blank until an option is selected + */ + defaultValue?: string focused?: boolean /** * Sets the width of the select to be same as the selected content width. Can be false or a number which will be used as the minimum width @@ -48,6 +54,11 @@ export interface SelectProps extends BaseFormElementProps { * @default false */ showSearch?: boolean + /** + * Select size — small, medium, large + * @default undefined + */ + size?: SizeType /** * Input content value for controlled inputs. Requires an onChange to be passed */ diff --git a/src/components/TableDrawer/index.tsx b/src/components/TableDrawer/index.tsx index 983865a4..eb4afb4f 100644 --- a/src/components/TableDrawer/index.tsx +++ b/src/components/TableDrawer/index.tsx @@ -60,7 +60,8 @@ export const TableDrawer = ({ data, loading, renderDrawerCmp, - renderTableControls + renderTableControls, + tableContainerClasses }: TableDrawerProps) => { const [rowData, setRowData] = useState({} as DataType) const resetRowData = () => setRowData({} as DataType) @@ -80,7 +81,12 @@ export const TableDrawer = ({ return (
-
+
{renderTableControls && renderTableControls()} activeRowKey={rowData.id}