enhancement #260 - Updates for alert manager (#261)

Closes #260

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dassana-io/web-components",
-	"version": "0.10.2",
+	"version": "0.10.3",
 	"publishConfig": {
 		"registry": "https://npm.pkg.github.com/dassana-io"
 	},

src/__snapshots__/storybook.test.ts.snap

@@ -2273,6 +2273,7 @@ exports[`Storyshots Select Full Width 1`] = `
           >
             <div
               className="option-0-2-123"
+              style={Object {}}
             >
               <span
                 className="optionText-0-2-124"
@@ -2382,6 +2383,7 @@ exports[`Storyshots Select Icon 1`] = `
           >
             <div
               className="option-0-2-123"
+              style={Object {}}
             >
               <span
                 className="icon-0-2-122"

src/components/Input/InputSkeleton.tsx

@@ -32,7 +32,8 @@ const useInputStyles = createUseStyles({
 	}
 })
 
-interface InputSkeletonProps extends Pick<BaseFormElementProps, 'fullWidth'> {
+interface InputSkeletonProps
+	extends Pick<BaseFormElementProps<HTMLInputElement>, 'fullWidth'> {
 	width?: string | number
 }
 

src/components/Input/index.tsx

@@ -33,7 +33,7 @@ const useStyles = createUseStyles({
 	}
 })
 
-export interface InputProps extends BaseFormElementProps {
+export interface InputProps extends BaseFormElementProps<HTMLInputElement> {
 	addonAfter?: string
 	addonBefore?: string
 	inputRef?: RefObject<AntDInput>

src/components/MultipleChoice/types.ts

@@ -7,7 +7,10 @@ export interface MultipleChoiceItemConfig {
 }
 
 export interface SharedProps
-	extends Pick<BaseFormElementProps, 'classes' | 'dataTag' | 'loading'> {
+	extends Pick<
+		BaseFormElementProps<HTMLSelectElement>,
+		'classes' | 'dataTag' | 'loading'
+	> {
 	/**
 	 * Optional callback that returns ref of element to which attach event listener to. By default, it's attached to the window
 	 */

src/components/Select/BaseSelect.tsx

@@ -138,7 +138,7 @@ export const BaseSelect: FC<BaseSelectProps> = (props: BaseSelectProps) => {
 				{...multiSelectProps}
 				{...singleSelectProps}
 			>
-				{options.map(({ iconKey, text, value }) => (
+				{options.map(({ iconKey, text, style, value }) => (
 					<Option
 						className={componentClasses.option}
 						key={value}
@@ -155,7 +155,7 @@ export const BaseSelect: FC<BaseSelectProps> = (props: BaseSelectProps) => {
 						<OptionChildren
 							iconKey={iconKey}
 							key={value}
-							optionsConfig={optionsConfig}
+							optionsConfig={{ ...optionsConfig, style }}
 							text={text}
 						/>
 					</Option>

src/components/Select/OptionChildren.tsx

@@ -40,6 +40,7 @@ export const OptionChildren: FC<OptionChildrenProps> = ({
 }: OptionChildrenProps) => {
 	const [hasTooltip, setHasTooltip] = useState(false)
 	const classes = useOptionChildrenStyles()
+	const { style = {} } = optionsConfig
 
 	const renderIcon = (
 		iconKey: IconName,
@@ -63,7 +64,7 @@ export const OptionChildren: FC<OptionChildrenProps> = ({
 	}
 
 	return (
-		<div className={classes.option}>
+		<div className={classes.option} style={style}>
 			{children && children}
 			{iconKey && renderIcon(iconKey, optionsConfig)}
 			<span

src/components/Select/SingleSelect/SelectSkeleton.tsx

@@ -10,7 +10,10 @@ const useStyles = createUseStyles({
 	}
 })
 
-export type SelectSkeletonProps = Pick<BaseFormElementProps, 'fullWidth'>
+export type SelectSkeletonProps = Pick<
+	BaseFormElementProps<HTMLSelectElement>,
+	'fullWidth'
+>
 
 export const SelectSkeleton: FC<SelectSkeletonProps> = (
 	props: SelectSkeletonProps

src/components/Select/SingleSelect/types.ts

@@ -1,17 +1,20 @@
 import { BaseFormElementProps } from '../../types'
+import { CSSProperties } from 'react'
 import { IconName } from '../../Icon'
 
 export interface SelectOption {
 	iconKey?: IconName
+	style?: CSSProperties
 	text: string
 	value: string
 }
 
 export interface SelectOptionsConfig {
 	iconMap?: Record<string, string>
+	style?: CSSProperties
 }
 
-export interface SelectProps extends BaseFormElementProps {
+export interface SelectProps extends BaseFormElementProps<HTMLSelectElement> {
 	/**
 	 * Default value for select component. Without this, the select dropdown will be blank until an option is selected
 	 */

src/components/Select/SingleSelect/utils.ts

@@ -24,6 +24,9 @@ const generateThemedSelectedItemStyles = (themeType: ThemeType) => {
 	} = themedStyles[themeType]
 
 	return {
+		'&.ant-select-single .ant-select-selector .ant-select-selection-item > div:first-child': {
+			paddingLeft: '0 !important'
+		},
 		'&.ant-select-single.ant-select-open .ant-select-selection-item': {
 			color
 		}

src/components/TableDrawer/index.tsx

@@ -48,9 +48,11 @@ const useStyles = createUseStyles({
 export interface TableDrawerProps<DataType> {
 	columns: ColumnType[]
 	data: DataType[]
+	drawerContainerClasses?: string[]
 	loading: boolean
 	renderDrawerCmp: (id: Key, rowData: DataType) => ReactNode
 	renderTableControls?: () => ReactNode
+	tableContainerClasses?: string[]
 }
 
 export const TableDrawer = <DataType extends DataId>({

src/components/TimeInput/index.tsx

@@ -14,7 +14,10 @@ import React, { FC, FocusEvent } from 'react'
 export type TimeFormat = 'unix' | 'hours'
 
 export interface TimeInputProps
-	extends Omit<BaseFormElementProps, 'fullWidth' | 'onChange' | 'value'> {
+	extends Omit<
+		BaseFormElementProps<HTMLElement>,
+		'fullWidth' | 'onChange' | 'value'
+	> {
 	defaultValue?: number
 	/** moment display format to format date. Defaults to 'hh:mm A' which will display 08:54 PM
 	 * @default 'hh:mm A'
@@ -102,6 +105,7 @@ export const TimeInput: FC<TimeInputProps> = (props: TimeInputProps) => {
 			minuteStep={minuteStep}
 			onBlur={onBlur}
 			onFocus={(e: FocusEvent<HTMLInputElement>) => {
+				1
 				onTimeInputFocus(e)
 				onFocus(e)
 			}}

src/components/assets/styles/styleguide.ts

@@ -52,7 +52,16 @@ export const styleguide = {
 		h1: { fontSize: 32, lineHeight: '40px' }
 	},
 	fontWeight: { light: 300, regular: 400, bold: 500 },
-	spacing: { xs: 4, s: 8, m: 16, l: 24, xl: 32 },
+	spacing: {
+		xs: 4,
+		s: 8,
+		's+': 12,
+		m: 16,
+		'm+': 20,
+		l: 24,
+		'l+': 28,
+		xl: 32
+	},
 	/* eslint-enable sort-keys */
 	topNavHeight: 64
 }

src/components/types.ts

@@ -1,6 +1,6 @@
 import { ChangeEventHandler } from 'react'
 
-export interface BaseFormElementProps extends CommonComponentProps {
+export interface BaseFormElementProps<Element> extends CommonComponentProps {
 	/**
 	 * Array of classes to pass to element
 	 * @default []
@@ -30,12 +30,12 @@ export interface BaseFormElementProps extends CommonComponentProps {
 	 * Callback that runs when element loses focus
 	 * @default () => {}
 	 */
-	onBlur?: ChangeEventHandler
+	onBlur?: ChangeEventHandler<Element>
 	/**
 	 * Callback that runs when element is updated
 	 * @default () => {}
 	 */
-	onChange?: ChangeEventHandler
+	onChange?: ChangeEventHandler<Element>
 	/**
 	 * Describes expected value of element
 	 */