From 228bf62fc39ee5123810eae7727605a840ea3f04 Mon Sep 17 00:00:00 2001
From: unix <unix.bio@gmail.com>
Date: Fri, 26 Jun 2020 07:52:32 +0800
Subject: [PATCH 1/2] fix(ellipsis): set the height of ellipsis manually

---
 .../shared/__tests__/__snapshots__/ellipsis.test.tsx.snap  | 1 +
 components/shared/__tests__/ellipsis.test.tsx              | 2 +-
 components/shared/ellipsis.tsx                             | 7 ++++++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/shared/__tests__/__snapshots__/ellipsis.test.tsx.snap b/components/shared/__tests__/__snapshots__/ellipsis.test.tsx.snap
index 55de572..e29bb1d 100644
--- 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
index 9a064d6..293d68a 100644
--- 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
index 6a6f218..9ec8c1b 100644
--- 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>

From e05195ab4877e85ed386fbf6eb2e4f42a9517af1 Mon Sep 17 00:00:00 2001
From: unix <unix.bio@gmail.com>
Date: Fri, 26 Jun 2020 07:53:16 +0800
Subject: [PATCH 2/2] refactor: migrate to new ellipsis component

---
 components/auto-complete/auto-complete-item.tsx        |  6 +++---
 .../select/__tests__/__snapshots__/index.test.tsx.snap | 10 ++++++++++
 .../__tests__/__snapshots__/multiple.test.tsx.snap     |  1 +
 components/select/select-option.tsx                    |  2 +-
 components/select/select.tsx                           |  2 +-
 5 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/components/auto-complete/auto-complete-item.tsx b/components/auto-complete/auto-complete-item.tsx
index 6d6fb08..a78c315 100644
--- a/components/auto-complete/auto-complete-item.tsx
+++ b/components/auto-complete/auto-complete-item.tsx
@@ -39,7 +39,7 @@ const AutoCompleteItem: React.FC<React.PropsWithChildren<AutoCompleteItemProps>>
 
   return (
     <div className={`item ${isActive ? 'active' : ''}`} onClick={selectHandler}>
-      <Ellipsis>{children}</Ellipsis>
+      <Ellipsis height={`calc(1.688 * ${theme.layout.gap})`}>{children}</Ellipsis>
       <style jsx>{`
         .item {
           display: flex;
@@ -48,8 +48,8 @@ const AutoCompleteItem: React.FC<React.PropsWithChildren<AutoCompleteItemProps>>
           font-weight: normal;
           white-space: pre;
           font-size: ${fontSize};
-          padding: ${theme.layout.gapHalf};
-          line-height: 1.2;
+          padding: 0 ${theme.layout.gapHalf};
+          height: calc(1.688 * ${theme.layout.gap});
           background-color: ${theme.palette.background};
           color: ${theme.palette.foreground};
           user-select: none;
diff --git a/components/select/__tests__/__snapshots__/index.test.tsx.snap b/components/select/__tests__/__snapshots__/index.test.tsx.snap
index e3213eb..bbe80b0 100644
--- a/components/select/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/select/__tests__/__snapshots__/index.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`Select should render correctly 1`] = `
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
+          line-height: calc(1.688 * 16pt);
           min-width: 0;
         }
       </style></span></span><div class=\\"icon\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.25em\\" height=\\"1.25em\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\"><path d=\\"M6 9l6 6 6-6\\"></path><style>
@@ -93,6 +94,7 @@ exports[`Select should render correctly 1`] = `
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
+          line-height: calc(1 * 16pt);
           min-width: 0;
         }
       </style></span></span><div class=\\"icon\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.25em\\" height=\\"1.25em\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\"><path d=\\"M6 9l6 6 6-6\\"></path><style>
@@ -180,6 +182,7 @@ exports[`Select should render correctly 1`] = `
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
+          line-height: calc(1.344 * 16pt);
           min-width: 0;
         }
       </style></span></span><div class=\\"icon\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.25em\\" height=\\"1.25em\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\"><path d=\\"M6 9l6 6 6-6\\"></path><style>
@@ -267,6 +270,7 @@ exports[`Select should render correctly 1`] = `
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
+          line-height: calc(2 * 16pt);
           min-width: 0;
         }
       </style></span></span><div class=\\"icon\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.25em\\" height=\\"1.25em\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\"><path d=\\"M6 9l6 6 6-6\\"></path><style>
@@ -358,6 +362,7 @@ exports[`Select should work correctly with labels 1`] = `
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
+          line-height: calc(1.688 * 16pt);
           min-width: 0;
         }
       </style></span></span><div class=\\"icon\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.25em\\" height=\\"1.25em\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\"><path d=\\"M6 9l6 6 6-6\\"></path><style>
@@ -467,6 +472,7 @@ initialize {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
+          line-height: calc(1.688 * 16pt);
           min-width: 0;
         }
       ",
@@ -708,6 +714,7 @@ initialize {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
+          line-height: calc(1.688 * 16pt);
           min-width: 0;
         }
       ",
@@ -817,6 +824,7 @@ initialize {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
+          line-height: calc(1.688 * 16pt);
           min-width: 0;
         }
       ",
@@ -1130,6 +1138,7 @@ initialize {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
+          line-height: calc(1.688 * 16pt);
           min-width: 0;
         }
       ",
@@ -1316,6 +1325,7 @@ initialize {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
+          line-height: calc(1.688 * 16pt);
           min-width: 0;
         }
       ",
diff --git a/components/select/__tests__/__snapshots__/multiple.test.tsx.snap b/components/select/__tests__/__snapshots__/multiple.test.tsx.snap
index 171bea8..9a2b50b 100644
--- a/components/select/__tests__/__snapshots__/multiple.test.tsx.snap
+++ b/components/select/__tests__/__snapshots__/multiple.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`Select Multiple should render correctly 1`] = `
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
+          line-height: calc(1.688 * 16pt);
           min-width: 0;
         }
       </style></span></span><div class=\\"item  mock \\"><style>
diff --git a/components/select/select-option.tsx b/components/select/select-option.tsx
index 67d0824..abc8ddf 100644
--- a/components/select/select-option.tsx
+++ b/components/select/select-option.tsx
@@ -81,7 +81,7 @@ const SelectOption: React.FC<React.PropsWithChildren<SelectOptionProps>> = ({
         className={`option ${divider ? 'divider' : ''} ${label ? 'label' : ''} ${className}`}
         onClick={clickHandler}
         {...props}>
-        <Ellipsis>{children}</Ellipsis>
+        <Ellipsis height={`calc(1.688 * ${theme.layout.gap})`}>{children}</Ellipsis>
       </div>
 
       <style jsx>{`
diff --git a/components/select/select.tsx b/components/select/select.tsx
index 8f27829..b9e6306 100644
--- a/components/select/select.tsx
+++ b/components/select/select.tsx
@@ -139,7 +139,7 @@ const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
         {...props}>
         {isEmpty && (
           <span className="value placeholder">
-            <Ellipsis>{placeholder}</Ellipsis>
+            <Ellipsis height={sizes.height}>{placeholder}</Ellipsis>
           </span>
         )}
         {value && !multiple && <span className="value">{selectedChild}</span>}