c3ecf75 · bridge · git.iko.soy

git.iko.soy/bridge

ux: add tooltip to copy button

- extract CopyButtonWide to its own component - address PR feedback in test

commitc3ecf75f4cbb3d44eaa07d6bbce09896277ef1f3 authortomholford <tomholford@users.noreply.github.com> dateTue 27 Jul 2021, 14:27 (5 years ago) parent08176cf

5 files changed+31−27

compare with master

unifiedsplit

src/components/Buttons.js+7−2 src/components/CopyButton.js−19 src/components/CopyButtonWide.tsx+17 src/views/UrbitOS/AccessCode.test.tsx+2−4 src/views/UrbitOS/AccessCode.tsx+5−2

src/components/Buttons.js+7−2

@@ -3,6 +3,7 @@ import { Button } from 'indigo-react';

33import { Icon } from '@tlon/indigo-react';

55import { blinkIf } from './Blinky';

6+import WithTooltip from './WithTooltip';

78// NOTE: the -> is correct because inter recognizes the pair

89export const ForwardButton = ({ loading, ...props }) => (

@@ -25,9 +26,13 @@ export const OfflineButton = props => (

2526 </OutButton>

2627);

2728

28−export const CopyButton = props => (

29+export const CopyButton = ({ didCopy = false, ...props }) => (

2930 <Button

30− accessory={<Icon icon="Copy" size="18px" color={'black'} />}

31+ accessory={

32+ <WithTooltip content={didCopy ? 'Copied!' : 'Copy'}>

33+ <Icon icon="Copy" size="18px" color={'black'} />

34+ </WithTooltip>

35+ }

3136 {...props}

3237 />

3338);

src/components/CopyButton.js−19

@@ -2,8 +2,6 @@ import React from 'react';

22import cn from 'classnames';

33import { LinkButton } from 'indigo-react';

5−import { CopyButton as BaseCopyButton } from 'components/Buttons';

6−

75import useCopiable from 'lib/useCopiable';

97const renderDefaultCopyText = didCopy => (didCopy ? 'Copied!' : 'Copy');

@@ -29,20 +27,3 @@ export default function CopyButton({

2927 </As>

3028 );

3129}

32−

33−export function CopyButtonWide({ text, children, ...rest }) {

34− const [doCopy, didCopy] = useCopiable(text);

35− return (

36− <BaseCopyButton

37− as="span"

38− onClick={doCopy}

39− text={text}

40− className={cn({

41− black: !didCopy,

42− green3: didCopy,

43− })}

44− {...rest}>

45− {children}

46− </BaseCopyButton>

47− );

48−}

src/components/CopyButtonWide.tsxnew file+17

@@ -0,0 +1,17 @@

1+import React from 'react';

2+import { CopyButton as BaseCopyButton } from 'components/Buttons';

3+import useCopiable from 'lib/useCopiable';

5+export function CopyButtonWide({ text, children, ...rest }) {

6+ const [doCopy, didCopy] = useCopiable(text);

7+ return (

8+ <BaseCopyButton

9+ as="span"

10+ onClick={doCopy}

11+ didCopy={didCopy}

12+ text={text}

13+ {...rest}>

14+ {children}

15+ </BaseCopyButton>

16+ );

17+}

src/views/UrbitOS/AccessCode.test.tsx+2−4

@@ -9,10 +9,8 @@ describe('AccessCode', () => {

1010 it('does not render the component', () => {

1111 render(<AccessCode code={testCode} />);

12− const accessCode = screen.queryByText(

13− 'This is your code to access Urbit OS'

14− );

15− expect(accessCode).not.toBeInTheDocument()

12+ const element = screen.queryByTestId('custom-element');

13+ expect(element).not.toBeInTheDocument();

1614 });

1715 });

1816

src/views/UrbitOS/AccessCode.tsx+5−2

@@ -1,4 +1,4 @@

1−import { CopyButtonWide } from 'components/CopyButton';

1+import { CopyButtonWide } from 'components/CopyButtonWide';

22import { Grid } from 'indigo-react';

44type AccessCodeArgs = {

@@ -13,7 +13,10 @@ const AccessCode = ({ code }: AccessCodeArgs) => {

1313 full

1414 detail="This is your code to access Urbit OS"

1515 as={CopyButtonWide}

16− text={code}>

16+ text={code}

17+ data-testid="access-code"

18+ // Allow the Copy Button Tooltip to flow over the Grid border

19+ style={{ overflow: 'unset' }}>

1720 Access Key

1821 </Grid.Item>

1922 </>