fix(copytext): convert to use pds-button

Kajabi · Jul 11, 2023 · caa5f25 · caa5f25
1 parent 58ddc8a
commit caa5f25
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/libs/core/src/components/pds-copytext/pds-copytext.scss b/libs/core/src/components/pds-copytext/pds-copytext.scss
@@ -13,12 +13,12 @@
   --spacing-xs: var(--pine-spacing-xs); // 8px
   --spacing-xxs: var(--pine-spacing-xxs); // 4px
 
-  button {
+  pds-button {
     align-items: center;
     background: var(--background);
     border: 0;
     border-radius: var(--border-radius);
-    display: flex;
+    display: inline-flex;
     font-size: var(--font-size);
     font-weight: var(--font-weight);
     max-width: 100%;
@@ -50,7 +50,7 @@
     border: 0;
     padding: 0;
 
-    button {
+    pds-button {
       padding: 0;
 
       &:hover {
@@ -76,9 +76,11 @@
   // full width
 
   &:host(.pds-copytext--full-width) {
+    display: flex;
     width: 100%;
 
-    button {
+    pds-button {
+      display: flex;
       justify-content: space-between;
       width: 100%;
 
@@ -92,10 +94,16 @@
   // truncated
 
   &:host(.pds-copytext--truncated) {
-    span {
-      overflow: hidden;
-      text-overflow: ellipsis;
+    pds-button {
+      display: flex;
       width: 100%;
+
+      span {
+        overflow: hidden;
+        text-align: left;
+        text-overflow: ellipsis;
+        width: 100%;
+      }
     }
   }
 }
diff --git a/libs/core/src/components/pds-copytext/pds-copytext.tsx b/libs/core/src/components/pds-copytext/pds-copytext.tsx
@@ -57,10 +57,10 @@ export class PdsCopytext {
   render() {
     return (
       <Host class={this.classNames()} id={this.componentId}>
-        <button type="button" onClick={() => this.copyToClipboard(this.value)}>
+        <pds-button type="button" variant="unstyled" onClick={() => this.copyToClipboard(this.value)}>
           <span>{this.value}</span>
           <pds-icon name="copy" size="16px"></pds-icon>
-        </button>
+        </pds-button>
       </Host>
     );
   }

diff --git a/libs/core/src/components/pds-copytext/stories/pds-copytext.docs.stories.mdx b/libs/core/src/components/pds-copytext/stories/pds-copytext.docs.stories.mdx
@@ -44,7 +44,7 @@ A small component to use in places where "copy" text is provided to be copied el
 <Story story={stories.Truncate} />
 
 <Canvas>
-  <div  style={{ width: '350px' }}>
+  <div style={{ width: '350px' }}>
     <pds-copytext value="Copy all of this really long text that should be truncated in the UI, but will still be copied to the clipboard." truncate="true"></pds-copytext>
   </div>
 </Canvas>