@innovaccer/design-system 2.6.0 → 2.7.0-0

package/core/components/atoms/message/Message.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Icon, Heading, Text } from '@/index';
 import { BaseProps, extractBaseProps } from '@/utils/types';
+import { MessageAppearance } from '@/common.type';
 
-export type Appearance = 'default' | 'alert' | 'info' | 'success' | 'warning';
 const IconMapping = {
   success: 'check_circle',
   info: 'info',
@@ -15,7 +15,7 @@ export interface MessageProps extends BaseProps {
   /**
    * Color of `Message`
    */
-  appearance: Appearance;
+  appearance: MessageAppearance;
   /**
    * Title of the `Message`
    */
@@ -38,7 +38,9 @@ export interface MessageProps extends BaseProps {
 }
 
 export const Message = (props: MessageProps) => {
-  const { appearance, actions, title, className } = props;
+  const { actions, title, className } = props;
+  let { appearance } = props;
+  appearance = appearance === 'default' ? 'info' : appearance;
 
   const baseProps = extractBaseProps(props);
 
@@ -88,14 +90,12 @@ export const Message = (props: MessageProps) => {
 
   return (
     <div data-test="DesignSystem-Message" {...baseProps} className={MessageClass}>
-      {appearance !== 'default' && (
-        <Icon
-          data-test="DesignSystem-Message--Icon"
-          name={IconMapping[appearance]}
-          appearance={appearance}
-          className={IconClass}
-        />
-      )}
+      <Icon
+        data-test="DesignSystem-Message--Icon"
+        name={IconMapping[appearance]}
+        appearance={appearance}
+        className={IconClass}
+      />
       <div>
         {title && (
           <Heading data-test="DesignSystem-Message--Title" size="s" className={TitleClass}>
@@ -115,7 +115,7 @@ export const Message = (props: MessageProps) => {
 
 Message.displayName = 'Message';
 Message.defaultProps = {
-  appearance: 'default',
+  appearance: 'info',
   description: '',
 };
 

package/core/components/atoms/message/__stories__/index.story.tsx

@@ -4,7 +4,7 @@ import { Message, Text } from '@/index';
 
 // CSF format story
 export const all = () => {
-  const appearance = select('appearance', ['default', 'alert', 'info', 'success', 'warning'], undefined);
+  const appearance = select('appearance', ['alert', 'info', 'success', 'warning'], undefined);
 
   const title = text('title', 'Design System');
 

package/core/components/atoms/message/__stories__/variants/Appearance.story.tsx

@@ -4,7 +4,7 @@ import { MessageProps } from '@/index.type';
 
 // CSF format story
 export const appearanceWithoutTitle = () => {
-  const appearances: MessageProps['appearance'][] = ['default', 'alert', 'info', 'success', 'warning'];
+  const appearances: MessageProps['appearance'][] = ['alert', 'info', 'success', 'warning'];
   const innerStyle = {
     display: 'flex',
     'align-items': 'center',

package/core/components/atoms/message/__stories__/variants/AppearanceTitle.story.tsx

@@ -5,7 +5,7 @@ import { MessageProps } from '@/index.type';
 
 // CSF format story
 export const appearanceWithTitle = () => {
-  const appearances: MessageProps['appearance'][] = ['default', 'alert', 'info', 'success', 'warning'];
+  const appearances: MessageProps['appearance'][] = ['alert', 'info', 'success', 'warning'];
   const innerStyle = {
     display: 'flex',
     'align-items': 'center',

package/core/components/atoms/message/__tests__/Message.test.tsx

@@ -4,7 +4,7 @@ import { Message, Text } from '@/index';
 import { MessageProps as Props } from '@/index.type';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
 
-const appearances: Props['appearance'][] = ['default', 'alert', 'info', 'warning', 'success'];
+const appearances: Props['appearance'][] = ['alert', 'info', 'warning', 'success'];
 const title = 'Title goes here';
 const description = 'Description goes here';
 const actions = (
@@ -73,11 +73,6 @@ describe('Message component with prop:appearance', () => {
       expect(getByTestId('DesignSystem-Message')).toHaveClass(`Message--${appearance}`);
     });
   });
-
-  it('should not render icon if appearance is default', () => {
-    const { queryByTestId } = render(<Message appearance="default" description={description} />);
-    expect(queryByTestId('DesignSystem-Message--Icon')).not.toBeInTheDocument();
-  });
 });
 
 describe('Message component with prop: actions', () => {

package/core/components/atoms/message/__tests__/__snapshots__/Message.test.tsx.snap

@@ -52,51 +52,6 @@ exports[`Message component
 </body>
 `;
 
-exports[`Message component 
-  appearance: "default", title: "Title goes here", description: "Description goes here", actions: "[ReactNode]"
- 1`] = `
-<body>
-  <div>
-    <div
-      class="Message Message--default"
-      data-test="DesignSystem-Message"
-    >
-      <div>
-        <h5
-          class="Heading Heading--s Heading--default Message-heading Message-heading--default"
-          data-test="DesignSystem-Message--Title"
-        >
-          Title goes here
-        </h5>
-        <span
-          class="Text Text--default Text--regular Message-text Message-text--default"
-          data-test="DesignSystem-Message--Description"
-        >
-          Description goes here
-        </span>
-        <div
-          class="Message-actions"
-          data-test="DesignSystem-Message--actions"
-        >
-          <span
-            class="Text Text--link Text--regular mr-5 cursor-pointer"
-            data-test="DesignSystem-Text"
-          >
-            Action 1
-          </span>
-          <span
-            class="Text Text--link Text--regular cursor-pointer"
-            data-test="DesignSystem-Text"
-          >
-            Action 2
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-`;
-
 exports[`Message component 
   appearance: "info", title: "Title goes here", description: "Description goes here", actions: "[ReactNode]"
  1`] = `

package/core/components/atoms/metaList/__tests__/MetaList.test.tsx

@@ -3,8 +3,8 @@ import { render } from '@testing-library/react';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
 import { MetaList } from '@/index';
 import { MetaListProps as Props } from '@/index.type';
-import { Appearance as IconAppearance } from '../../icon';
-import { Appearance as TextAppearance } from '../../text';
+import { IconAppearance } from '../../icon';
+import { TextAppearance } from '../../text';
 
 const appearance: IconAppearance[] = [
   'primary',

package/core/components/atoms/metricInput/MetricInput.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Icon, Text } from '@/index';
 import { BaseHtmlProps, BaseProps, extractBaseProps } from '@/utils/types';
+import { AutoComplete } from '@/common.type';
 
-export type AutoComplete = 'on' | 'off';
-export type Size = 'regular' | 'large';
+export type MetricInputSize = 'regular' | 'large';
 
 export interface MetricInputProps extends BaseProps, BaseHtmlProps<HTMLInputElement> {
   /**
@@ -27,7 +27,7 @@ export interface MetricInputProps extends BaseProps, BaseHtmlProps<HTMLInputElem
    * Size of the `MetricInput`
    * @default "regular"
    */
-  size?: Size;
+  size?: MetricInputSize;
   /**
    * Material icon name
    */
@@ -92,10 +92,10 @@ const sizeMapping = {
   large: 20,
 };
 
-const capMin = (min: number = -Infinity, value: number) =>
+const capMin = (min = -Infinity, value: number) =>
   isNaN(min) || (!min && min !== 0) || isNaN(value) || (!value && value !== 0) ? value : Math.max(min, value);
 
-const capMax = (max: number = +Infinity, value: number) =>
+const capMax = (max = +Infinity, value: number) =>
   isNaN(max) || (!max && max !== 0) || isNaN(value) || (!value && value !== 0) ? value : Math.min(max, value);
 
 /**

package/core/components/atoms/multiSlider/SliderUtils.tsx

@@ -59,9 +59,6 @@ export function fillValues<T>(values: T[], startIndex: number, endIndex: number,
   }
 }
 
-export function isElementOfType<P = {}>(
-  element: any,
-  _ComponentType: React.ComponentType<P>
-): element is React.ReactElement<P> {
+export function isElementOfType(element: React.ReactElement) {
   return element != null && element.type != null;
 }

package/core/components/atoms/multiSlider/index.tsx

@@ -13,8 +13,7 @@ import {
   fillValues,
   isElementOfType,
 } from './SliderUtils';
-
-type NumberRange = [number, number];
+import { NumberRange } from '@/common.type';
 
 export interface MultiSliderProps extends BaseProps {
   /**
@@ -130,8 +129,8 @@ export class MultiSlider extends React.Component<InternalMultiSliderProps, Multi
   };
 
   getHandleValues = (props: React.PropsWithChildren<InternalMultiSliderProps>) => {
-    const maybeHandles = React.Children.map(props.children, (child) =>
-      isElementOfType(child, MultiSlider.Handle) ? child.props : null
+    const maybeHandles = React.Children.map(props.children as React.ReactElement, (child) =>
+      isElementOfType(child) ? child.props : null
     );
 
     let handles = maybeHandles != null ? maybeHandles : [];

package/core/components/atoms/outsideClick/OutsideClick.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { BaseHtmlProps, BaseProps } from '@/utils/types';
 import classNames from 'classnames';
 
@@ -35,7 +34,7 @@ export const OutsideClick = React.forwardRef<HTMLDivElement, OutsideClickProps>(
       return;
     }
 
-    if (!ReactDOM.findDOMNode(element.current)!.contains(event.target as HTMLElement)) {
+    if (!element.current!.contains(event.target as HTMLElement)) {
       onOutsideClick(event);
     }
   }, []);

package/core/components/atoms/paragraph/Paragraph.tsx

@@ -3,7 +3,7 @@ import GenericText from '../_text';
 import classNames from 'classnames';
 import { BaseHtmlProps, BaseProps } from '@/utils/types';
 
-export type Appearance = 'default' | 'white' | 'destructive' | 'subtle' | 'disabled';
+export type ParagraphAppearance = 'default' | 'white' | 'destructive' | 'subtle' | 'disabled';
 
 export interface ParagraphProps extends BaseProps, BaseHtmlProps<HTMLParagraphElement> {
   /**
@@ -14,7 +14,7 @@ export interface ParagraphProps extends BaseProps, BaseHtmlProps<HTMLParagraphEl
   /**
    * Color of `Paragraph`
    */
-  appearance: Appearance;
+  appearance: ParagraphAppearance;
 }
 
 export const Paragraph = (props: ParagraphProps) => {

package/core/components/atoms/paragraph/__stories__/variants/Appearance.story.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import Paragraph, { Appearance } from '../../index';
+import Paragraph, { ParagraphAppearance } from '../../index';
 import Text from '@/components/atoms/text';
 
 // CSF format story
 export const appearance = () => {
-  const appearances: Appearance[] = ['default', 'white', 'destructive', 'subtle', 'disabled'];
+  const appearances: ParagraphAppearance[] = ['default', 'white', 'destructive', 'subtle', 'disabled'];
   return (
     <div className="d-flex">
       {appearances.map((appear, ind) => {

package/core/components/atoms/paragraph/__tests__/Paragraph.test.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import Paragraph, { ParagraphProps as Props, Appearance } from '../Paragraph';
+import Paragraph, { ParagraphProps as Props, ParagraphAppearance } from '../Paragraph';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
 
-const appearance: Appearance[] = ['default', 'white', 'destructive', 'subtle', 'disabled'];
+const appearance: ParagraphAppearance[] = ['default', 'white', 'destructive', 'subtle', 'disabled'];
 
 const mapper = {
   appearance: valueHelper(appearance, { required: true, iterate: true }),

package/core/components/atoms/pills/Pills.tsx

@@ -1,23 +1,13 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
-
-export type Appearance =
-  | 'primary'
-  | 'secondary'
-  | 'alert'
-  | 'warning'
-  | 'success'
-  | 'accent1'
-  | 'accent2'
-  | 'accent3'
-  | 'accent4';
+import { AccentAppearance } from '@/common.type';
 
 export interface PillsProps extends BaseProps {
   /**
    * Color of the `Pills`
    */
-  appearance: Appearance;
+  appearance: AccentAppearance;
   /**
    * Makes `Pills` appearance subtle
    */

package/core/components/atoms/pills/__stories__/variants/Appearance.story.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { text } from '@storybook/addon-knobs';
-import Pills, { Appearance } from '../../Pills';
+import Pills from '../../Pills';
 import Text from '@/components/atoms/text';
+import { AccentAppearance } from '@/common.type';
 
 // CSF format story
 export const appearance = () => {
@@ -10,7 +11,7 @@ export const appearance = () => {
 
   const children = text('children', 'Pills');
 
-  const appearances: Appearance[] = [
+  const appearances: AccentAppearance[] = [
     'primary',
     'secondary',
     'alert',

package/core/components/atoms/pills/__stories__/variants/Subtle.story.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { text } from '@storybook/addon-knobs';
-import Pills, { Appearance } from '../../Pills';
+import Pills from '../../Pills';
 import Text from '@/components/atoms/text';
+import { AccentAppearance } from '@/common.type';
 
 // CSF format story
 export const subtle = () => {
@@ -10,7 +11,7 @@ export const subtle = () => {
 
   const children = text('children', 'Pills');
 
-  const appearances: Appearance[] = [
+  const appearances: AccentAppearance[] = [
     'primary',
     'secondary',
     'alert',

package/core/components/atoms/pills/__tests__/Pills.test.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import Pills, { PillsProps as Props, Appearance } from '../Pills';
+import Pills, { PillsProps as Props } from '../Pills';
 import { testHelper, filterUndefined, valueHelper, testMessageHelper } from '@/utils/testHelper';
+import { AccentAppearance } from '@/common.type';
 
-const appearances: Appearance[] = [
+const appearances: AccentAppearance[] = [
   'primary',
   'alert',
   'warning',

package/core/components/atoms/placeholderImage/PlaceholderImage.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 
-export type Size = 'small' | 'medium' | 'large';
+export type PlaceholderImageSize = 'small' | 'medium' | 'large';
 
 export interface PlaceholderImageProps extends BaseProps {
   /**
@@ -12,7 +12,7 @@ export interface PlaceholderImageProps extends BaseProps {
   /**
    * Specifies dimension of `Placeholder`
    */
-  size: Size;
+  size: PlaceholderImageSize;
 }
 
 export const PlaceholderImage = (props: PlaceholderImageProps) => {

package/core/components/atoms/placeholderImage/__stories__/variants/Size.story.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { boolean } from '@storybook/addon-knobs';
-import PlaceholderImage, { Size } from '../../PlaceholderImage';
+import PlaceholderImage, { PlaceholderImageSize } from '../../PlaceholderImage';
 import Text from '@/components/atoms/text';
 
 export const size = () => {
   const round = boolean('round', false);
-  const sizes: Size[] = ['small', 'medium', 'large'];
+  const sizes: PlaceholderImageSize[] = ['small', 'medium', 'large'];
   const options = {
     round,
   };

package/core/components/atoms/placeholderParagraph/PlaceholderParagraph.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 
 export type Length = 'small' | 'medium' | 'large';
-export type Size = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
+export type PlaceholderParagraphSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';
 
 export interface PlaceholderParagraphProps extends BaseProps {
   /**
@@ -31,7 +31,7 @@ export interface PlaceholderParagraphProps extends BaseProps {
    *
    * xxxl: `Heading` size: xxl
    */
-  size?: Size;
+  size?: PlaceholderParagraphSize;
 }
 
 export const PlaceholderParagraph = (props: PlaceholderParagraphProps) => {

package/core/components/atoms/placeholderParagraph/__stories__/variants/Size.story.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import PlaceholderParagraph, { Size } from '../../PlaceholderParagraph';
+import PlaceholderParagraph, { PlaceholderParagraphSize } from '../../PlaceholderParagraph';
 import Text from '@/components/atoms/text';
 
 export const size = () => {
-  const sizes: Size[] = ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'];
+  const sizes: PlaceholderParagraphSize[] = ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'];
 
   return (
     <div>

package/core/components/atoms/popperWrapper/PopperWrapper.tsx

@@ -142,7 +142,7 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
     if (prevProps.open !== this.props.open) {
       this._throttleWait = false;
       if (this.props.open) {
-        const triggerElement = this.findDOMNode(this.triggerRef);
+        const triggerElement = this.triggerRef.current;
         const zIndex = this.getZIndexForLayer(triggerElement);
 
         this.setState({
@@ -216,12 +216,8 @@ export class PopperWrapper extends React.Component<PopperWrapperProps, PopperWra
     onToggle(newValue === undefined ? !open : newValue, type);
   };
 
-  findDOMNode = (ref: React.RefObject<HTMLElement>) => {
-    return ReactDOM.findDOMNode(ref.current!) as Element | null;
-  };
-
   doesEventContainsElement = (event: Event, ref: React.RefObject<any>) => {
-    const el = this.findDOMNode(ref);
+    const el = ref.current;
     return el && el.contains(event.target as HTMLElement);
   };
 

package/core/components/atoms/progressRing/ProgressRing.tsx

@@ -2,13 +2,13 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 
-export type Size = 'small' | 'regular';
+export type ProgressRingSize = 'small' | 'regular';
 
 export interface ProgressRingProps extends BaseProps {
   /**
    * Size of `Progress Ring`
    */
-  size: Size;
+  size: ProgressRingSize;
   /**
    * Specifies how much of the task that has been completed. Value should lie between 0 to max.
    */

package/core/components/atoms/progressRing/__stories__/variants/Size.story.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ProgressRing, { Size } from '../../ProgressRing';
+import ProgressRing, { ProgressRingSize as Size } from '../../ProgressRing';
 import Text from '@/components/atoms/text';
 
 // CSF format story

package/core/components/atoms/radio/Radio.tsx

@@ -3,17 +3,16 @@ import classNames from 'classnames';
 import Text from '@/components/atoms/text';
 import { BaseProps, OmitNativeProps } from '@/utils/types';
 import uidGenerator from '@/utils/uidGenerator';
+import { ChangeEvent } from '@/common.type';
 
-export type Size = 'regular' | 'tiny';
-
-type MouseEvent = React.ChangeEvent<HTMLInputElement>;
+export type RadioSize = 'regular' | 'tiny';
 
 export interface RadioProps extends BaseProps, OmitNativeProps<HTMLInputElement, 'onChange'> {
   /**
    * Size of `Radio`
    * @default "regular"
    */
-  size?: Size;
+  size?: RadioSize;
   /**
    * Disables the `Radio`, making it unable to be pressed
    */
@@ -45,7 +44,7 @@ export interface RadioProps extends BaseProps, OmitNativeProps<HTMLInputElement,
   /**
    * Callback function called when user the selects an option
    */
-  onChange?: (event: MouseEvent) => void;
+  onChange?: (event: ChangeEvent) => void;
 }
 
 export const Radio = React.forwardRef<HTMLInputElement, RadioProps>((props, forwardedRef) => {

package/core/components/atoms/rangeSlider/RangeSlider.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import MultiSlider, { MultiSliderProps } from '@/components/atoms/multiSlider';
-
-export type NumberRange = [number, number];
+import { NumberRange } from '@/common.type';
 
 enum RangeIndex {
   START = 0,

package/core/components/atoms/rangeSlider/__stories__/index.story.tsx

@@ -2,8 +2,7 @@ import * as React from 'react';
 import { text, boolean, number } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import RangeSlider from '../RangeSlider';
-
-type NumberRange = [number, number];
+import { NumberRange } from '@/common.type';
 
 // CSF format story
 export const all = () => {

package/core/components/atoms/rangeSlider/__stories__/variants/Controlled.story.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { RangeSlider } from '@/index';
-
-type NumberRange = [number, number];
+import { NumberRange } from '@/common.type';
 
 // CSF format story
 export const controlledSlider = () => {

package/core/components/atoms/rangeSlider/__stories__/variants/CustomLabels.story.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { RangeSlider } from '@/index';
-
-type NumberRange = [number, number];
+import { NumberRange } from '@/common.type';
 
 // CSF format story
 export const cutsomLabels = () => {

package/core/components/atoms/spinner/Spinner.tsx

@@ -2,18 +2,18 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 
-export type Appearance = 'primary' | 'secondary' | 'white';
-export type Size = 'small' | 'medium' | 'large';
+export type SpinnerAppearance = 'primary' | 'secondary' | 'white';
+export type SpinnerSize = 'small' | 'medium' | 'large';
 
 export interface SpinnerProps extends BaseProps {
   /**
    * Color of `Spinner`
    */
-  appearance: Appearance;
+  appearance: SpinnerAppearance;
   /**
    * Size of `Spinner`
    */
-  size: Size;
+  size: SpinnerSize;
 }
 
 export const Spinner = (props: SpinnerProps) => {

package/core/components/atoms/spinner/__stories__/variants/Appearance.story.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import Spinner, { Appearance } from '../../Spinner';
+import Spinner, { SpinnerAppearance } from '../../Spinner';
 import Text from '@/components/atoms/text';
 
 // CSF format story
 export const appearance = () => {
-  const appearances: Appearance[] = ['primary', 'secondary', 'white'];
+  const appearances: SpinnerAppearance[] = ['primary', 'secondary', 'white'];
   return (
     <div className="d-flex">
       {appearances.map((appear, ind) => {

package/core/components/atoms/spinner/__stories__/variants/Size.story.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Spinner, { Size } from '../../Spinner';
+import Spinner, { SpinnerSize as Size } from '../../Spinner';
 import Text from '@/components/atoms/text';
 
 // CSF format story

package/core/components/atoms/statusHint/StatusHint.tsx

@@ -2,8 +2,7 @@ import * as React from 'react';
 import Text from '@/components/atoms/text';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
-
-export type Appearance = 'info' | 'alert' | 'warning' | 'success' | 'default';
+import { MessageAppearance } from '@/common.type';
 
 export interface StatusHintProps extends BaseProps {
   /**
@@ -13,7 +12,7 @@ export interface StatusHintProps extends BaseProps {
   /**
    * Color of Icon
    */
-  appearance: Appearance;
+  appearance: MessageAppearance;
   /**
    * Handler to be called when `Status Hint` is clicked
    */