enhancement #269 - Updates for alert manager risk rules (#270)

Closes #269

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"
 	},

src/components/Input/index.tsx

@@ -36,6 +36,7 @@ const useStyles = createUseStyles({
 export interface InputProps extends BaseFormElementProps<HTMLInputElement> {
 	addonAfter?: string
 	addonBefore?: string
+	defaultValue?: string
 	inputRef?: RefObject<AntDInput>
 	focused?: boolean
 	onFocus?: () => void
@@ -53,6 +54,7 @@ export const Input: FC<InputProps> = (props: InputProps) => {
 		addonBefore,
 		classes = [],
 		dataTag,
+		defaultValue,
 		disabled = false,
 		focused = false,
 		inputRef,
@@ -97,6 +99,7 @@ export const Input: FC<InputProps> = (props: InputProps) => {
 			addonBefore={addonBefore}
 			autoFocus={focused}
 			className={cn(componentClasses.container, inputClasses)}
+			defaultValue={defaultValue}
 			disabled={disabled}
 			onBlur={onBlur}
 			onFocus={onFocus}

src/components/Select/BaseSelect.tsx

@@ -43,6 +43,7 @@ type BaseSelectProps = CommonBaseSelectProps &
 export const BaseSelect: FC<BaseSelectProps> = (props: BaseSelectProps) => {
 	const {
 		classes = [],
+		containerClasses = [],
 		dataTag,
 		defaultOpen = false,
 		disabled = false,
@@ -56,6 +57,7 @@ export const BaseSelect: FC<BaseSelectProps> = (props: BaseSelectProps) => {
 		placeholder = '',
 		popupContainerSelector,
 		showSearch = false,
+		size,
 		useStyles
 	} = props
 
@@ -122,7 +124,12 @@ export const BaseSelect: FC<BaseSelectProps> = (props: BaseSelectProps) => {
 	return loading ? (
 		<SelectSkeleton {...props} />
 	) : (
-		<div className={componentClasses.container}>
+		<div
+			className={cn(
+				{ [componentClasses.container]: true },
+				containerClasses
+			)}
+		>
 			<AntDSelect
 				autoFocus={focused}
 				className={inputClasses}
@@ -134,6 +141,7 @@ export const BaseSelect: FC<BaseSelectProps> = (props: BaseSelectProps) => {
 				placeholder={placeholder}
 				showArrow
 				showSearch={showSearch}
+				size={size}
 				{...getPopupContainerProps(popupContainerSelector)}
 				{...multiSelectProps}
 				{...singleSelectProps}

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,

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<HTMLSelectElement>,
-	'fullWidth'
+	SelectProps,
+	'containerClasses' | 'fullWidth'
 >
 
 export const SelectSkeleton: FC<SelectSkeletonProps> = (
 	props: SelectSkeletonProps
 ) => {
+	const { containerClasses = [] } = props
 	const classes = useStyles(props)
 
 	return (
-		<div className={classes.container}>
+		<div className={cn({ [classes.container]: true }, containerClasses)}>
 			<Skeleton height={30} />
 		</div>
 	)

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<HTMLSelectElement> {
 	/**
-	 * 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<HTMLSelectElement> {
 	 * @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
 	 */

src/components/TableDrawer/index.tsx

@@ -60,7 +60,8 @@ export const TableDrawer = <DataType extends DataId>({
 	data,
 	loading,
 	renderDrawerCmp,
-	renderTableControls
+	renderTableControls,
+	tableContainerClasses
 }: TableDrawerProps<DataType>) => {
 	const [rowData, setRowData] = useState({} as DataType)
 	const resetRowData = () => setRowData({} as DataType)
@@ -80,7 +81,12 @@ export const TableDrawer = <DataType extends DataId>({
 
 	return (
 		<div className={classes.container}>
-			<div className={classes.tableContainer}>
+			<div
+				className={cn(
+					{ [classes.tableContainer]: true },
+					tableContainerClasses
+				)}
+			>
 				{renderTableControls && renderTableControls()}
 				<Table<DataType>
 					activeRowKey={rowData.id}