Carbon: [code snippet] single line and multi-line bugs

[laurenmrice]

There are a couple different bugs with the single line and multi-line code snippets.

---

Single line:

• The active state is not showing up when clicking on the copy button. It should be active-ui on click.
  

• The horizontal scroll does not have a fade style. (This may be resolved with Andrews fix for horizontal tab scrolling.)
  

  - When the light prop is active, the dark themes have incorrect hover states for the copy button and show more button. They should be using hover-light-ui for hover. (this is also happening for inline code snippet)

Multi-line:

• The active state is not showing up when clicking on the copy button (same problem with single line above^).
• When the light prop is active, the dark themes have incorrect hover states for the copy button and show more button. They should be using hover-light-ui for hover.
• The copy button should have a 8px top and right padding within the field background so that it vertically aligns with the chevron icon in the show more button below it.
  

[tw15egan]

I'm also wondering if we should investigate adding in copy functionality by default (https://github.com/carbon-design-system/carbon/issues/6995)

[emyarod]

makes sense, if we're all on board with it then I can investigate that as well. I guess the biggest thing to look into would be browser and OS support

[tw15egan]

It looks like clipboard has gained quite a bit of native browser support (at least for copy), we may even be able to just handle this natively without an external library:

https://caniuse.com/clipboard

https://stackoverflow.com/questions/39501289/in-reactjs-how-to-copy-text-to-clipboard

[emyarod]

for the light button hover styles, it looks like we are already using the hover-ui-light token https://github.com/carbon-design-system/carbon/blob/master/packages/components/src/components/code-snippet/_code-snippet.scss#L373. Should the value of that token be changed? (draft PR here https://github.com/carbon-design-system/carbon/pull/7214)

and for the overflow indicators, what should the color tokens be? I have this ready to put in a separate PR but just need clarification on the colors

[laurenmrice]

Hover issue:

• The current values for the hover-light-ui token are correct. The color is not displaying correctly on hover for the dark themes.

Example of what is happening now:

---

This is what it should look like:

[laurenmrice]

Overflow issue (horizontal scroll)

• The fade style should be the same as what we currently use for the modal component when a modal scrolls vertically.

Spec: