feat(toast): support two lines label in Toast (#49)

Closes #16

Author: boilund

packages/core/src/Dialog/Dialog.tsx

@@ -22,19 +22,12 @@ import { Header } from './components/Header'
 import { Footer } from './components/Footer'
 import { MainSection } from './components/Content'
 import { BaseDialog, DialogWidth } from './BaseDialog'
+import { twoLinesClamp } from '../utils/twoLinesClamp'
 
 export const HeaderTitle = styled(Typography).attrs({
   variant: 'dialog-heading',
 })`
-  /* stylelint-disable-next-line value-no-vendor-prefix */
-  display: -webkit-box;
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-line-clamp: 2;
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -webkit-box-orient: vertical;
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -moz-box-orient: vertical;
-  overflow: hidden;
+  ${twoLinesClamp}
 `
 
 export interface DialogProps extends ModalProps {

packages/core/src/Toast/toastCreators.tsx

@@ -21,6 +21,7 @@ import {
   BaseToastValue,
 } from './context'
 import { Theme } from '../theme'
+import { twoLinesClamp } from '../utils/twoLinesClamp'
 
 const getIconColor = (theme: Theme, iconType?: ToastIconType) => {
   const { color } = theme
@@ -48,6 +49,7 @@ export const ToastLabel = styled(Typography).attrs({
   readonly hasEmphasis: boolean
 }>`
   height: 100%;
+  ${twoLinesClamp}
 
   ${({ hasCloseButton }) =>
     !hasCloseButton

packages/core/src/utils/index.ts

@@ -1 +1,2 @@
 export * from './withField'
+export * from './twoLinesClamp'

packages/core/src/utils/twoLinesClamp.ts

@@ -0,0 +1,24 @@
+import { css } from 'styled-components'
+
+/**
+ * A styled-components mixin that truncates two-lines text with ellipsis.
+ *
+ * An example:
+ * ```tsx
+ * const Div = styled.div`
+ *   ${twoLinesClamp};
+ * `
+ * ```
+ */
+export const twoLinesClamp = css`
+  /* stylelint-disable-next-line value-no-vendor-prefix */
+  display: -webkit-box;
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-line-clamp: 2;
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-box-orient: vertical;
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -moz-box-orient: vertical;
+  overflow: hidden;
+  white-space: pre-wrap;
+`