enables TextInputWithTokens to accept leading and trailing visuals

primer · Feb 23, 2022 · 683bac0 · 683bac0
1 parent 6d0dd57
commit 683bac0
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 2 deletions.
diff --git a/src/TextInputWithTokens.tsx b/src/TextInputWithTokens.tsx
@@ -66,6 +66,8 @@ const overflowCountFontSizeMap: Record<TokenSizeKeys, number> = {
 function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactComponent>(
   {
     icon: IconComponent,
+    leadingVisual: LeadingVisual,
+    trailingVisual: TrailingVisual,
     contrast,
     className,
     block,
@@ -248,7 +250,8 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
       className={className}
       contrast={contrast}
       disabled={disabled}
-      hasLeadingVisual={Boolean(IconComponent)}
+      hasLeadingVisual={Boolean(LeadingVisual)}
+      hasTrailingVisual={Boolean(TrailingVisual)}
       theme={theme}
       width={widthProp}
       minWidth={minWidthProp}
@@ -300,7 +303,12 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
           }
         }}
       >
-        {IconComponent && <IconComponent className="TextInput-icon" />}
+        {IconComponent && !LeadingVisual && <IconComponent className="TextInput-icon" />}
+        {LeadingVisual && !IconComponent && (
+          <span className="TextInput-icon">
+            {typeof LeadingVisual === 'function' ? <LeadingVisual /> : LeadingVisual}
+          </span>
+        )}
         <Box
           sx={{
             order: 1,
@@ -344,6 +352,11 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
           </Text>
         ) : null}
       </Box>
+      {TrailingVisual && (
+        <span className="TextInput-icon">
+          {typeof TrailingVisual === 'function' ? <TrailingVisual /> : TrailingVisual}
+        </span>
+      )}
     </TextInputWrapper>
   )
 }

diff --git a/src/__tests__/TextInputWithTokens.test.tsx b/src/__tests__/TextInputWithTokens.test.tsx
@@ -6,6 +6,7 @@ import 'babel-polyfill'
 import {TokenSizeKeys, tokenSizes} from '../Token/TokenBase'
 import {IssueLabelToken} from '../Token'
 import TextInputWithTokens, {TextInputWithTokensProps} from '../TextInputWithTokens'
+import {MarkGithubIcon} from '@primer/octicons-react'
 expect.extend(toHaveNoViolations)
 
 const mockTokens = [
@@ -94,6 +95,20 @@ describe('TextInputWithTokens', () => {
     ).toMatchSnapshot()
   })
 
+  it('renders a leadingVisual and trailingVisual', () => {
+    const onRemoveMock = jest.fn()
+    expect(
+      render(
+        <TextInputWithTokens
+          leadingVisual={MarkGithubIcon}
+          trailingVisual={MarkGithubIcon}
+          tokens={mockTokens}
+          onTokenRemove={onRemoveMock}
+        />
+      )
+    ).toMatchSnapshot()
+  })
+
   it('focuses the previous token when keying ArrowLeft', () => {
     const onRemoveMock = jest.fn()
     const {getByLabelText, getByText} = HTMLRender(

diff --git a/src/stories/TextInputWithTokens.stories.tsx b/src/stories/TextInputWithTokens.stories.tsx
@@ -1,5 +1,6 @@
 import React, {useCallback, useState} from 'react'
 import {Meta} from '@storybook/react'
+import {CheckIcon, NumberIcon} from '@primer/octicons-react'
 
 import {BaseStyles, Box, ThemeProvider} from '..'
 import TextInputWithTokens, {TextInputWithTokensProps} from '../TextInputWithTokens'
@@ -98,6 +99,28 @@ export const Default = (args: TextInputWithTokensProps) => {
 
 Default.parameters = {controls: {exclude: [excludedControls, 'maxHeight']}}
 
+export const WithLeadingVisual = (args: TextInputWithTokensProps) => {
+  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))
+  const onTokenRemove: (tokenId: string | number) => void = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId))
+  }
+
+  return <TextInputWithTokens leadingVisual={NumberIcon} tokens={tokens} onTokenRemove={onTokenRemove} {...args} />
+}
+
+WithLeadingVisual.parameters = {controls: {exclude: [excludedControls, 'maxHeight']}}
+
+export const WithTrailingVisual = (args: TextInputWithTokensProps) => {
+  const [tokens, setTokens] = useState([...mockTokens].slice(0, 3))
+  const onTokenRemove: (tokenId: string | number) => void = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId))
+  }
+
+  return <TextInputWithTokens trailingVisual={CheckIcon} tokens={tokens} onTokenRemove={onTokenRemove} {...args} />
+}
+
+WithTrailingVisual.parameters = {controls: {exclude: [excludedControls, 'maxHeight']}}
+
 export const UsingIssueLabelTokens = (args: TextInputWithTokensProps) => {
   const [tokens, setTokens] = useState([
     {text: 'enhancement', id: 1, fillColor: '#a2eeef'},