Merge branch 'main' into adam/menu-refactor-LG-4120

.changeset/few-pugs-raise.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/chip': minor
+---
+
+Updates dismiss button to include `type="button"` so that component dismissal does not submit forms

.changeset/honest-buses-explode.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/copyable': minor
+---
+
+Exposes `onCopy` callback so that consuming applications can respond to successful clipboard events

.changeset/clever-squids-bake.md → .changeset/shiny-jobs-pump.md

@@ -2,4 +2,4 @@
 '@leafygreen-ui/icon': patch
 ---
 
-Adds args to Icon meta for .design
+Updates Federation icon

.gitignore

@@ -28,6 +28,7 @@ yarn-error.log
 
 # TypeScript type-checking artifact
 tsconfig.tsbuildinfo
+ts-trace/
 
 # Environment variables
 .env
@@ -49,7 +50,7 @@ parsed-docs.json
 build-storybook.log
 
 .turbo
-scripts/tmp.*.ts
+scripts/tmp.*
 
 # 
 .npmrc
@@ -59,3 +60,4 @@ TODO.md
 
 # PR train config (https://github.com/realyze/pr-train)
 .pr-train.yml
+

package.json

@@ -16,10 +16,12 @@
     "build": "turbo run build tsc",
     "build:cli": "turbo run build tsc --filter=@lg-tools/cli",
     "build-storybook": "npx storybook build",
+    "build:tsc": "turbo run tsc",
     "chromatic": "npx chromatic",
     "clean": "npm-run-all --parallel clean:*",
     "clean:builds": "rm -rf {packages,tools,chat}/*/{dist,tsconfig.tsbuildinfo,stories.js,.turbo}",
     "clean:modules": "rm -rf node_modules {packages,tools,chat}/*/node_modules",
+    "clean:ts": "rm -rf {packages,tools,chat}/*/{dist/**/*.ts,dist/**/*.ts.map,tsconfig.tsbuildinfo,ts-trace,.turbo}",
     "fix": "lg lint --fix",
     "link": "lg link",
     "lint": "lg lint",

packages/chip/src/DismissButton/DismissButton.tsx

@@ -30,6 +30,7 @@ export function DismissButton({
 
   return (
     <button
+      type="button"
       data-testid="chip-dismiss-button"
       aria-label={ariaLabel}
       aria-disabled={disabled}

packages/copyable/src/Copyable/Copyable.spec.tsx

@@ -9,7 +9,7 @@ import {
 import ClipboardJS from 'clipboard';
 import { axe } from 'jest-axe';
 
-import { Context, jest } from '@leafygreen-ui/testing-lib';
+import { Context, jest as localJest } from '@leafygreen-ui/testing-lib';
 
 import Copyable from '.';
 
@@ -29,7 +29,7 @@ describe('packages/copyable', () => {
   describe('a11y', () => {
     test('does not have basic accessibility issues', async () => {
       const { container, getByText } = Context.within(
-        jest.spyContext(ClipboardJS, 'isSupported'),
+        localJest.spyContext(ClipboardJS, 'isSupported'),
         spy => {
           spy.mockReturnValue(true);
 
@@ -54,9 +54,42 @@ describe('packages/copyable', () => {
   });
 
   describe('copy button', () => {
+    test('fires onCopy callback when clicked', async () => {
+      const onCopy = jest.fn();
+
+      await Context.within(
+        localJest.spyContext(ClipboardJS, 'isSupported'),
+        async spy => {
+          spy.mockReturnValue(true);
+
+          const { getByText, queryByText } = render(
+            <Copyable label="Label" description="Description" onCopy={onCopy}>
+              Hello world
+            </Copyable>,
+          );
+
+          expect(queryByText('Copied!')).not.toBeInTheDocument();
+
+          const copyButton = getByText('Copy');
+          expect(copyButton).toBeVisible();
+
+          await Context.within(
+            localJest.spyContext(ClipboardJS.prototype, 'onClick'),
+            async spy => {
+              expect(spy).not.toHaveBeenCalled();
+              fireEvent.click(copyButton);
+              await waitFor(() => expect(spy).toHaveBeenCalled());
+            },
+          );
+
+          await waitFor(() => expect(onCopy).toHaveBeenCalled());
+        },
+      );
+    });
+
     test('has tooltip when clicked', async () => {
       await Context.within(
-        jest.spyContext(ClipboardJS, 'isSupported'),
+        localJest.spyContext(ClipboardJS, 'isSupported'),
         async spy => {
           spy.mockReturnValue(true);
 
@@ -72,7 +105,7 @@ describe('packages/copyable', () => {
           expect(copyButton).toBeVisible();
 
           await Context.within(
-            jest.spyContext(ClipboardJS.prototype, 'onClick'),
+            localJest.spyContext(ClipboardJS.prototype, 'onClick'),
             async spy => {
               expect(spy).not.toHaveBeenCalled();
               fireEvent.click(copyButton);
@@ -104,7 +137,7 @@ describe('packages/copyable', () => {
 
     test('is shown by default when clipboard API is supported', () => {
       const { queryByText } = Context.within(
-        jest.spyContext(ClipboardJS, 'isSupported'),
+        localJest.spyContext(ClipboardJS, 'isSupported'),
         spy => {
           spy.mockReturnValue(true);
 
@@ -121,7 +154,7 @@ describe('packages/copyable', () => {
 
     test('is not shown when clipboard API is not supported', () => {
       const { queryByText } = Context.within(
-        jest.spyContext(ClipboardJS, 'isSupported'),
+        localJest.spyContext(ClipboardJS, 'isSupported'),
         spy => {
           spy.mockReturnValue(false);
 

packages/copyable/src/Copyable/Copyable.tsx

@@ -38,14 +38,15 @@ import {
 import { CopyableProps, Size } from './Copyable.types';
 
 export default function Copyable({
-  darkMode: darkModeProp,
   children,
-  label,
-  description,
   className,
   copyable = true,
-  size: SizeProp,
+  darkMode: darkModeProp,
+  description,
+  label,
+  onCopy,
   shouldTooltipUsePortal = true,
+  size: SizeProp,
 }: CopyableProps) {
   const { theme, darkMode } = useDarkMode(darkModeProp);
   const [copied, setCopied] = useState(false);
@@ -85,6 +86,14 @@ export default function Copyable({
       container: portalContainer,
     });
 
+    clipboard.on('success', (event: React.ClipboardEvent<HTMLDivElement>) => {
+      onCopy?.(event);
+    });
+
+    clipboard.on('error', (event: React.ClipboardEvent<HTMLDivElement>) => {
+      onCopy?.(event);
+    });
+
     if (copied) {
       const timeoutId = setTimeout(() => {
         setCopied(false);
@@ -165,7 +174,9 @@ export default function Copyable({
                   variant="default"
                   darkMode={darkMode}
                   className={buttonStyle}
-                  onClick={() => setCopied(true)}
+                  onClick={() => {
+                    setCopied(true);
+                  }}
                   leftGlyph={<CopyIcon size="large" className={iconStyle} />}
                 >
                   Copy

packages/icon/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @leafygreen-ui/icon
 
+## 12.5.3
+
+### Patch Changes
+
+- 838a95b73: Slight tweaks for .design story
+
+## 12.5.2
+
+### Patch Changes
+
+- df0d6faee: Adds args to Icon meta for .design
+
 ## 12.5.1
 
 ### Patch Changes

packages/icon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/icon",
-  "version": "12.5.1",
+  "version": "12.5.3",
   "description": "LeafyGreen UI Kit Icons",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",

packages/icon/src/Icon.stories.tsx

@@ -23,7 +23,7 @@ const meta: StoryMetaType<typeof Icon> = {
     },
   },
   args: {
-    fill: 'black',
+    fill: palette.gray.base,
     size: Size.Default,
   },
   argTypes: {
@@ -87,7 +87,7 @@ export const LiveExample: StoryFn<IconProps> = (
     className={css`
       width: 100%;
       display: grid;
-      grid-template-columns: repeat(5, 1fr);
+      grid-template-columns: repeat(4, 1fr);
     `}
   >
     {Object.keys(glyphs).map(glyph => {

packages/polymorphic/package.json

@@ -31,7 +31,7 @@
   },
   "devDependencies": {
     "@emotion/styled": "^11.10.5",
-    "@lg-tools/build": "^0.5.0",
+    "@lg-tools/build": "^0.6.0",
     "@lg-tools/storybook-utils": "^0.1.0",
     "next": "^13.1.6"
   }

packages/testing-lib/package.json

@@ -17,10 +17,7 @@
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@emotion/react": "^11.11.4",
-    "@lg-tools/build": "0.5.1",
-    "@types/react-transition-group": "^4.4.5",
-    "react-transition-group": "^4.4.5"
+    "@lg-tools/build": "0.6.0"
   },
   "peerDependencies": {
     "@testing-library/react": "^12.0.0 || ^13.1.0 || ^14.0.0"