fix(ellipsis): set the height of ellipsis manually

mochi-sann · Jun 25, 2020 · 228bf62 · 228bf62
1 parent 965654f
commit 228bf62
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/components/shared/__tests__/__snapshots__/ellipsis.test.tsx.snap b/components/shared/__tests__/__snapshots__/ellipsis.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`Ellipsis should render correctly 1`] = `
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
+          line-height: 10px;
           min-width: 0;
         }
       </style></span></div>"

diff --git a/components/shared/__tests__/ellipsis.test.tsx b/components/shared/__tests__/ellipsis.test.tsx
@@ -6,7 +6,7 @@ describe('Ellipsis', () => {
   it('should render correctly', () => {
     const wrapper = mount(
       <div style={{ width: '1px' }}>
-        <Ellipsis>text</Ellipsis>
+        <Ellipsis height="10px">text</Ellipsis>
       </div>,
     )
     expect(wrapper.html()).toMatchSnapshot()

diff --git a/components/shared/ellipsis.tsx b/components/shared/ellipsis.tsx
@@ -1,6 +1,10 @@
 import React from 'react'
 
-const Ellipsis: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
+export type EllipsisProps = {
+  height: string
+}
+
+const Ellipsis: React.FC<React.PropsWithChildren<EllipsisProps>> = ({ children, height }) => {
   return (
     <span>
       {children}
@@ -9,6 +13,7 @@ const Ellipsis: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
+          line-height: ${height};
           min-width: 0;
         }
       `}</style>