playbook_ui 15.5.0.pre.rc.2 → 15.5.0.pre.rc.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 33c3f871448ed381e3a35223c4d72ce6f15794928468beab586e281c46b5d5e7
-  data.tar.gz: 46015ad2243722f29271c481b22163c3138cb1834ce33999c1b9459a88bc9908
+  metadata.gz: 66aaf83aa51cc7b34eda01ce9d1f8fbb8f2ec256a8fdc3b08d1172e50a8f33ee
+  data.tar.gz: d4fdcd781745a389240cfe5ca5e7ecad0467ecf25805c13ccfa9dfc7b88c5a88
 SHA512:
-  metadata.gz: e965c14c7e23528961b070c24dcab12edf09e659d80af74690c644c384ad095b57789f779fef1af0eb3f778a6d49568bc059dc088fd7802173334277f93692bf
-  data.tar.gz: ea57133c7daf69d350755427d7a8cc84d56bb0f09db0ed131ef33424c14ce7d3bc6067d386a84633df1c6c4e651ddc336f7a456a2cfdc703fd722a300d848212
+  metadata.gz: 45f0cb1b2ee375e8614fb7fd010e4393ddfd61edd905c55bd5c96b5d6aef34a7a4636be20249cec17418430410193fbe2ee81966fc71fdf09b5edc985863a601
+  data.tar.gz: 366a44951a860c7e3dee437c2e07a94b94bc7098837e19f9b665e7939fd053067fd443e0abd382c8d61477460dac259c574dad30419fbeb431616322d3632f78

data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx

@@ -5,6 +5,7 @@ import { globalProps } from '../utilities/globalProps'
 
 import Button from '../pb_button/_button'
 import Tooltip from '../pb_tooltip/_tooltip'
+import CircleIconButton from '../pb_circle_icon_button/_circle_icon_button'
 
 import usePBCopy from './usePBCopy'
 
@@ -18,6 +19,7 @@ type CopyButtonProps = {
   tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left'
   tooltipText?: string
   value?: string
+  variant?: 'button' | 'icon'
   timeout?: number
 }
 
@@ -28,11 +30,12 @@ const CopyButton = (props: CopyButtonProps) => {
     data = {},
     from = '',
     id,
-    text= 'Copy',
+    text = 'Copy',
     timeout = 1000,
-    tooltipPlacement= 'bottom',
+    tooltipPlacement = 'bottom',
     tooltipText = 'Copied!',
     value = '',
+    variant = 'button',
   } = props
 
   const [copied, copy] = usePBCopy({ value, from, timeout })
@@ -42,7 +45,8 @@ const CopyButton = (props: CopyButtonProps) => {
   const classes = classnames(buildCss('pb_copy_button_kit'), globalProps(props), className)
 
   return (
-    <div {...ariaProps}
+    <div 
+        {...ariaProps}
         {...dataProps}
         className={classes}
         id={id}
@@ -53,11 +57,20 @@ const CopyButton = (props: CopyButtonProps) => {
           showTooltip={false}
           text={tooltipText}
       >
-        <Button icon="copy"
-            onClick={copy}
-        >
-          {text}
-        </Button>
+        {variant === 'icon' ? (
+          <CircleIconButton 
+              icon="copy" 
+              onClick={copy} 
+              variant="link" 
+          />
+        ) : (
+          <Button 
+              icon="copy"
+              onClick={copy}
+          >
+            {text}
+          </Button>
+        )}
       </Tooltip>
     </div>
   )

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_icon_variant.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import CopyButton from '../../pb_copy_button/_copy_button'
+import Textarea from '../../pb_textarea/_textarea'
+
+const CopyIconVariant = (props) => (
+  <div>
+    <CopyButton
+        {...props}
+        text="Copy Text"
+        tooltipPlacement="right"
+        tooltipText="Text copied!"
+        value="Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease."
+        variant="icon"
+    />
+
+    <Textarea
+        {...props}
+        placeholder="Copy and paste here"
+    />
+  </div>
+)
+
+export default CopyIconVariant

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_icon_variant_react.md

@@ -0,0 +1 @@
+Pass in `variant="icon"` to replace the Button with the Circle Icon Button kit.

data/app/pb_kits/playbook/pb_copy_button/docs/example.yml

@@ -8,3 +8,4 @@ examples:
   - copy_button_default: Default
   - copy_button_from: Copy From
   - copy_button_hook: Copy Hook
+  - copy_button_icon_variant: Icon Variant

data/app/pb_kits/playbook/pb_copy_button/docs/index.js

@@ -1,3 +1,4 @@
 export { default as CopyButtonDefault } from './_copy_button_default.jsx'
 export { default as CopyButtonFrom } from './_copy_button_from.jsx' 
 export { default as CopyButtonHook } from './_copy_button_hook.jsx'
+export { default as CopyButtonIconVariant } from './_copy_button_icon_variant.jsx'