Replace triple dots

Author: rtritto

src/components/DataTypes/Function.tsx

@@ -86,10 +86,11 @@ export const FunctionType: React.FC<DataItemProps<Function>> = (props) => {
             <Box component='span' className='data-function-body'
                  onClick={() => props.setInspect(true)}
                  sx={{
-                   '&:hover': { cursor: 'pointer' }
+                   '&:hover': { cursor: 'pointer' },
+                   padding: 0.5
                  }}
             >
-              ...
+              …
             </Box>
             )
         }

src/components/DataTypes/Object.tsx

@@ -169,7 +169,7 @@ export const ObjectType: React.FC<DataItemProps<object>> = (props) => {
               key='last'
               onClick={() => setDisplayLength(length => length * 2)}
             >
-              hidden {rest} items...
+              hidden {rest} items…
             </DataBox>
           )
         }
@@ -215,7 +215,7 @@ export const ObjectType: React.FC<DataItemProps<object>> = (props) => {
           key='last'
           onClick={() => setDisplayLength(length => length * 2)}
         >
-          hidden {rest} items...
+          hidden {rest} items…
         </DataBox>
       )
     }
@@ -255,10 +255,11 @@ export const ObjectType: React.FC<DataItemProps<object>> = (props) => {
               <Box component='span' className='data-object-body'
                  onClick={() => props.setInspect(true)}
                  sx={{
-                   '&:hover': { cursor: 'pointer' }
+                   '&:hover': { cursor: 'pointer' },
+                   padding: 0.5
                  }}
               >
-                ...
+                …
               </Box>
                 )
               : null

src/stores/typeRegistry.tsx

@@ -224,7 +224,7 @@ export function predefined (): DataType<any>[] {
             >
               &quot;
               {value}
-              {hasRest && !showRest && (<Box component='span'>...</Box>)}
+              {hasRest && !showRest && (<Box component='span' sx={{ padding: 0.5 }}>…</Box>)}
               &quot;
             </Box>
           )

tests/index.test.tsx

@@ -269,7 +269,7 @@ describe('Expand elements by click on dots', () => {
 
     let elements = container.getElementsByClassName('data-object-body')
     expect(elements.length).eq(1)
-    expect(elements[0].textContent).eq('...')
+    expect(elements[0].textContent).eq('…')
     fireEvent.click(elements[0])
 
     rerender(
@@ -425,7 +425,7 @@ describe('Expand function by click on dots', () => {
 
     let elements = container.getElementsByClassName('data-function-body')
     expect(elements.length).eq(1)
-    expect(elements[0].textContent).eq('...')
+    expect(elements[0].textContent).eq('…')
     fireEvent.click(elements[0])
 
     rerender(
@@ -441,7 +441,7 @@ describe('Expand function by click on dots', () => {
     elements = container.getElementsByClassName('data-function')
     expect(elements.length).eq(1)
     expect(elements[0].children.length).eq(0)
-    expect(elements[0].textContent).not.eq('...')
+    expect(elements[0].textContent).not.eq('…')
   })
 })
 
@@ -631,7 +631,7 @@ describe('Show three dots after string collapsing', () => {
     let elements = container.getElementsByClassName('string-value')
     expect(elements.length).eq(1)
     expect(elements[0].children.length).eq(1)
-    expect(elements[0].textContent).eq('"string..."')
+    expect(elements[0].textContent).eq('"string…"')
     fireEvent.click(elements[0].children[0])
 
     rerender(<Component />)
@@ -645,6 +645,6 @@ describe('Show three dots after string collapsing', () => {
     elements = container.getElementsByClassName('string-value')
     expect(elements.length).eq(1)
     expect(elements[0].children.length).eq(1)
-    expect(elements[0].textContent).eq('"string..."')
+    expect(elements[0].textContent).eq('"string…"')
   })
 })