Fix Alert and AlertInCard typing. Allow empty title (#102)

* Fix Alert and AlertInCard typing. Allow empty title * Update changelog
lightspeed · Jul 6, 2020 · ee3a4b4 · ee3a4b4
1 parent 332a052
commit ee3a4b4
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/packages/flame/CHANGELOG.md b/packages/flame/CHANGELOG.md
@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Refer to the [CONTRIBUTING guide](https://github.com/lightspeed/flame/blob/master/.github/CONTRIBUTING.md) for more info.
 
+## [Unreleased]
+
+### Fixed
+
+- Fix typing for Alert and AlertInCard ([#102](https://github.com/lightspeed/flame/pull/102)
+- Allow empty Alert title and adjust positioning if its the case ([#102](https://github.com/lightspeed/flame/pull/102)
+
 ## 2.0.0-rc.3 - 2020-06-17
 
 - Version bump because lerna

diff --git a/packages/flame/src/Alert/Alert.tsx b/packages/flame/src/Alert/Alert.tsx
@@ -10,7 +10,7 @@ import { Text } from '../Text';
 
 export type AlertTypes = 'info' | 'success' | 'warning' | 'danger' | string;
 
-export interface AlertProps {
+export interface AlertProps extends SpaceProps, React.ComponentPropsWithRef<'div'> {
   /** CSS class name */
   className?: string;
   /** Enum for preset Alert types */
@@ -22,12 +22,12 @@ export interface AlertProps {
   /** Icon for the alert */
   icon?: React.ReactNode;
   /** Text for the alert's title */
-  title: string;
+  title?: string;
 }
 /**
  * An alert can be a warning following an action, a helpful tip or an important update about a system issue. There are four types of alert and each has a different function.
  */
-export const Alert: React.FC<AlertProps & SpaceProps> = ({
+export const Alert: React.FC<AlertProps> = ({
   children,
   type = 'info',
   title,
@@ -72,7 +72,10 @@ export const Alert: React.FC<AlertProps & SpaceProps> = ({
     >
       <Flex flex="1">
         <Box flex="1" css={css({ position: 'relative', pl: 5 })}>
-          <Flex className="fl-alert__icon" css={{ position: 'absolute', left: '0px', top: '2px' }}>
+          <Flex
+            className="fl-alert__icon"
+            css={{ position: 'absolute', left: '0px', top: title ? '2px' : '1px' }}
+          >
             {icon || <AlertIcons type={type} />}
           </Flex>
           {title && (

diff --git a/packages/flame/src/Alert/AlertInCard.tsx b/packages/flame/src/Alert/AlertInCard.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
 import css from '@styled-system/css';
 
+import { SpaceProps } from 'styled-system';
 import { AlertIcons } from './AlertIcons';
 import { CloseButton } from './CloseButton';
 import { Flex } from '../Core';
 import { Text } from '../Text';
 
-interface Props {
+interface Props extends SpaceProps, React.ComponentPropsWithRef<'div'> {
   type?: string;
   noCloseBtn?: boolean;
   /** Function called when Close button is tapped */