Copy to Clipboard animation

[michalbe]

Test Plan:

1. Visit about:brave
2. Click Copy to clipboard
3. Verify copy to clipboard button now shows confirmation label when data is copied.

Details

Fixes #6297

• Submitted a ticket for my issue if one did not already exist.
• Used Github auto-closing keywords in the commit message.
• Added/updated tests for this change (for new code or code which already has tests).
• Ran git rebase -i to squash commits (if needed).

New <ClipboardButton /> element was created for this.

[luixxiul]

Great work! Adding another Less file is however not recommended based on our style guideline, Would you please modify the code based on Aphrodite? Thanks!

https://github.com/brave/browser-laptop/wiki/Refactoring-styles-to-Aphrodite

[michalbe]

Fixed.
It would be nice to fix the docs you linked because for instance the first snippet:

const {StyleSheet, css} = require('aphrodite')

...

render () {
  return <a className={css(styles.orangeLink)} href='https://brave.com' />
}

...

const styles = Stylesheet.create({
  orangeLink: {
    color: 'orange',
    textDecoration: 'underline'
  }
})

doesn't work - camelcased StyleSheet was imported and capitalized Stylesheet was called later on.

[michalbe]

BTW, is there a public slack or IRC for contributors? I have plenty of questions and using community.brave.com or GH isn't exactly what I'm looking for.

[bsclifton]

@michalbe absolutely- we have a community Slack 😄 Please shoot me an email at clifton@brave.com and I'll make sure you get an invite

[cezaraugusto]

This looks super cool. Loved the transition, thanks!

Do you mind migrating clipboardButton component to app/renderer/components instead of js/components? This way we can match our new directory structure

Otherwise, LGTM ++

[michalbe]

@cezaraugusto should work as expected now, thanks, I missed those docs somehow.

[cezaraugusto]

++

[bsclifton]

Awesome job, @michalbe 😄 We should be able to use this component anywhere in the app!