feat(addon-doc): improve active zone for copy button (#9510)

taiga-family · Oct 17, 2024 · 424496b · 424496b
1 parent 14ea986
commit 424496b
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/projects/addon-doc/components/code/index.html b/projects/addon-doc/components/code/index.html
@@ -12,8 +12,8 @@
     <div class="t-code-actions">
         <button type="button"
             tuiIconButton
-            appearance="icon"
-            size="xs"
+            appearance="whiteblock"
+            size="s"
             class="t-copy-button"
             [iconStart]="icon()"
             [cdkCopyToClipboard]="content"

diff --git a/projects/addon-doc/components/code/tests/code.component.spec.ts b/projects/addon-doc/components/code/tests/code.component.spec.ts
@@ -55,7 +55,7 @@ describe('TuiDocCodeComponent', () => {
         expect(fixture.nativeElement.querySelector('.t-code')?.innerHTML.trim()).toEqual(
             `<code class="hljs"><span class="hljs-keyword">const</span> a = <span class="hljs-number">5</span>;</code>
     <div class="t-code-actions">
-        <button tuiappearance="" tuiicons="" type="button" tuiiconbutton="" appearance="icon" size="xs" class="t-copy-button" data-appearance="icon" style="--t-icon-start: url(assets/taiga-ui/icons/copy.svg);" data-size="xs">
+        <button tuiappearance="" tuiicons="" type="button" tuiiconbutton="" appearance="whiteblock" size="s" class="t-copy-button" data-appearance="whiteblock" style="--t-icon-start: url(assets/taiga-ui/icons/copy.svg);" data-size="s">
         </button>
 \t
     </div>`.replace('\t', '        '), // prettier problem
@@ -71,7 +71,7 @@ describe('TuiDocCodeComponent', () => {
         expect(fixture.nativeElement.querySelector('.t-code')?.innerHTML.trim()).toEqual(
             `<code class="hljs"><span class="hljs-keyword">const</span> a = <span class="hljs-number">10</span>;</code>
     <div class="t-code-actions">
-        <button tuiappearance="" tuiicons="" type="button" tuiiconbutton="" appearance="icon" size="xs" class="t-copy-button" data-appearance="icon" style="--t-icon-start: url(assets/taiga-ui/icons/copy.svg);" data-size="xs">
+        <button tuiappearance="" tuiicons="" type="button" tuiiconbutton="" appearance="whiteblock" size="s" class="t-copy-button" data-appearance="whiteblock" style="--t-icon-start: url(assets/taiga-ui/icons/copy.svg);" data-size="s">
         </button>
 \t
     </div>`.replace('\t', '        '), // prettier problem
@@ -89,7 +89,7 @@ describe('TuiDocCodeComponent', () => {
         expect(fixture.nativeElement.querySelector('.t-code')?.innerHTML.trim()).toEqual(
             `<code class="hljs"><span class="hljs-keyword">const</span> a = <span class="hljs-number">15</span>;</code>
     <div class="t-code-actions">
-        <button tuiappearance="" tuiicons="" type="button" tuiiconbutton="" appearance="icon" size="xs" class="t-copy-button" data-appearance="icon" style="--t-icon-start: url(assets/taiga-ui/icons/copy.svg);" data-size="xs">
+        <button tuiappearance="" tuiicons="" type="button" tuiiconbutton="" appearance="whiteblock" size="s" class="t-copy-button" data-appearance="whiteblock" style="--t-icon-start: url(assets/taiga-ui/icons/copy.svg);" data-size="s">
         </button>
 \t
     </div>`.replace('\t', '        '), // prettier problem