From 980b550112433dec267ae59e0c04abe41f3032e8 Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Wed, 20 Nov 2019 07:55:02 +0900
Subject: [PATCH] fix(copy-button): fix type of feedback text (#4677)

Fixes #4606.
---
 .../code-snippet/_code-snippet.scss           | 21 ++++++++++++++++++-
 .../components/copy-button/_copy-button.scss  |  2 +-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/packages/components/src/components/code-snippet/_code-snippet.scss
index dd330557bc10..e52b81b71fb0 100644
--- a/packages/components/src/components/code-snippet/_code-snippet.scss
+++ b/packages/components/src/components/code-snippet/_code-snippet.scss
@@ -191,6 +191,7 @@
 
   .#{$prefix}--btn--copy__feedback {
     @include type-style('body-short-01');
+    @include carbon--font-family('sans'); // Override one in code snippet
     z-index: z('overlay');
     font-weight: 400;
     left: inherit;
@@ -302,9 +303,27 @@
   }
 
   .#{$prefix}--snippet-button .#{$prefix}--btn--copy__feedback {
-    top: rem(25px);
+    top: rem(
+      50.8px
+    ); // (The height of button) + (The height of the tooltip's triangle) + 4px
     left: 50%;
     right: auto;
+
+    &::before {
+      top: 0;
+    }
+
+    &:after {
+      top: rem(-4px);
+    }
+  }
+
+  .#{$prefix}--snippet--multi
+    .#{$prefix}--snippet-button
+    .#{$prefix}--btn--copy__feedback {
+    top: rem(
+      42.8px
+    ); // (The height of button) + (The height of the tooltip's triangle) + 4px
   }
 
   .#{$prefix}--snippet--inline .#{$prefix}--btn--copy__feedback {
diff --git a/packages/components/src/components/copy-button/_copy-button.scss b/packages/components/src/components/copy-button/_copy-button.scss
index 56cfe26539ab..d5224726d0d2 100644
--- a/packages/components/src/components/copy-button/_copy-button.scss
+++ b/packages/components/src/components/copy-button/_copy-button.scss
@@ -36,7 +36,7 @@
 
     &:before {
       @include layer('overlay');
-      @include type-style('label-01');
+      @include type-style('body-short-01');
       top: 1.1rem;
       padding: $spacing-2xs;
       color: $inverse-01;