review updates

docs/content/Truncate.md

@@ -24,21 +24,36 @@ You can override the maximum width of the truncated text with the `maxWidth` pro
 </Truncate>
 ```
 
-## Target example
+## Inline example
 
-You can use the `target` variant for inline (or inline-block) elements with a fixed maximum width (default: 125px).
+You can use the `inline` boolean prop for inline (or inline-block) elements with a fixed maximum width (default: 125px).
 
 ```jsx live
   Some text with a{' '}
-  <Truncate as="strong" variant="target" title="branch-name-that-is-really-long">
+  <Truncate as="strong" inline title="branch-name-that-is-really-long">
     branch-name-that-is-really-long
   </Truncate>
 ```
 
+## Expandable example
+
+You can use the `expandable` boolean prop to display the truncated text on hover.
+
+```jsx live
+<Truncate expandable title="Some text with a branch-name-that-is-really-long">
+  Some text with a branch-name-that-is-really-long
+</Truncate>
+```
+
+## System props
+
+Truncate components get `TYPOGRAPHY` and `COMMON` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
 ## Component props
 
-| Name     | Type   | Default | Description                         |
-| :------- | :----- | :-----: | :---------------------------------- |
-| as       | String |  `div`  | Sets the HTML tag for the component |
-| maxWidth | Number |   125   | Sets the max-width of the text      |
-| variant  | String |         | `target`                            |
+| Name       | Type    | Default | Description                                                  |
+| :--------- | :------ | :-----: | :----------------------------------------------------------- |
+| as         | String  |  `div`  | Sets the HTML tag for the component                          |
+| maxWidth   | Number  |   125   | Sets the max-width of the text                               |
+| inline     | Boolean |  false  | displays text as inline block and vertical aligns to the top |
+| expandable | Boolean |  false  | allows the truncated text to be displayed on hover           |

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -79,7 +79,5 @@
       url: /Tooltip
     - title: Truncate
       url: /Truncate
-    - title: TruncateExpandable
-      url: /TruncateExpandable
     - title: UnderlineNav
       url: /UnderlineNav

index.d.ts

@@ -272,14 +272,13 @@ declare module '@primer/components' {
   }
 
   export interface TruncateProps extends StyledSystem.MaxWidthProps, TextProps {
+    expandable: boolean
+    inline: boolean
     title: string
-    variant: 'target'
   }
 
   export const Truncate: React.FunctionComponent<TruncateProps>
 
-  export const TruncateExpandable: React.FunctionComponent<TruncateProps>
-
   export interface UnderlineNavLinkProps
     extends CommonProps,
       Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {

src/Truncate.js

@@ -1,41 +1,37 @@
 import styled from 'styled-components'
-import {variant, maxWidth} from 'styled-system'
+import {maxWidth} from 'styled-system'
 import PropTypes from 'prop-types'
 import {TYPOGRAPHY, COMMON} from './constants'
 import theme from './theme'
 
-const truncateVariants = variant({
-  variants: {
-    target: {
-      display: 'inline-block',
-      verticalAlign: 'top'
-    }
-  }
-})
-
 const Truncate = styled('div')`
   ${TYPOGRAPHY}
   ${COMMON}
+  display: ${props => (props.inline ? 'inline-block' : 'inherit')};
   overflow: hidden;
   text-overflow: ellipsis;
+  vertical-align: ${props => (props.inline ? 'top' : 'initial')};
   white-space: nowrap;
-  ${truncateVariants}
   ${maxWidth}
+  ${props => (props.expandable ? `&:hover { max-width: 10000px; }` : '')}
 `
 
 Truncate.defaultProps = {
   as: 'div',
+  expandable: false,
+  inline: false,
   maxWidth: 125,
   theme
 }
 
 Truncate.propTypes = {
   ...TYPOGRAPHY.propTypes,
   ...COMMON.propTypes,
+  expandable: PropTypes.bool,
+  inline: PropTypes.bool,
   maxWidth: PropTypes.number,
   theme: PropTypes.object,
-  title: PropTypes.string.isRequired,
-  variant: PropTypes.oneOf(['target'])
+  title: PropTypes.string.isRequired
 }
 
 export default Truncate

src/__tests__/Truncate.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import Truncate from '../Truncate'
-import TruncateExpandable from '../TruncateExpandable'
 import {COMMON, TYPOGRAPHY} from '../constants'
 import {render} from '../utils/testing'
 import {render as HTMLRender, cleanup} from '@testing-library/react'
@@ -37,57 +36,13 @@ describe('Truncate', () => {
     expect(render(<Truncate maxWidth={250} title="a-long-branch-name" />)).toHaveStyleRule('max-width', '250px')
   })
 
-  it('respects the variant prop', () => {
-    expect(render(<Truncate variant="target" title="a-long-branch-name" />)).toHaveStyleRule('display', 'inline-block')
-  })
-})
-
-describe('TruncateExpandable', () => {
-  it('renders a <div> by default', () => {
-    expect(render(<TruncateExpandable title="a-long-branch-name" />).type).toEqual('div')
-  })
-
-  it('implements system props', () => {
-    expect(TruncateExpandable).toImplementSystemProps(COMMON)
-    expect(TruncateExpandable).toImplementSystemProps(TYPOGRAPHY)
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(
-      <TruncateExpandable title="a-long-branch-name">a-long-branch-name</TruncateExpandable>
-    )
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('has default theme', () => {
-    expect(TruncateExpandable).toSetDefaultTheme()
-  })
-
-  it('has the correct default styles', () => {
-    expect(render(<TruncateExpandable title="a-long-branch-name" />)).toHaveStyleRule(
-      'max-width',
-      '10000px !important',
-      {modifier: ':hover'}
-    )
-  })
-
-  it('respects the "as" prop', () => {
-    expect(render(<TruncateExpandable as="strong" title="a-long-branch-name" />).type).toEqual('strong')
-  })
-
-  it('respects the maxWidth prop', () => {
-    expect(render(<TruncateExpandable maxWidth={250} title="a-long-branch-name" />)).toHaveStyleRule(
-      'max-width',
-      '250px'
-    )
+  it('respects the inline prop', () => {
+    expect(render(<Truncate inline title="a-long-branch-name" />)).toHaveStyleRule('display', 'inline-block')
   })
 
-  it('respects the variant prop', () => {
-    expect(render(<TruncateExpandable variant="target" title="a-long-branch-name" />)).toHaveStyleRule(
-      'display',
-      'inline-block'
-    )
+  it('respects the expandable prop', () => {
+    expect(render(<Truncate expandable title="a-long-branch-name" />)).toHaveStyleRule('max-width', '10000px', {
+      modifier: ':hover'
+    })
   })
 })

src/index.js

@@ -43,5 +43,4 @@ export {default as TextInput} from './TextInput'
 export {default as Text} from './Text'
 export {default as Tooltip} from './Tooltip'
 export {default as Truncate} from './Truncate'
-export {default as TruncateExpandable} from './TruncateExpandable'
 export {default as UnderlineNav} from './UnderlineNav'