Merge branch 'main' into brooke/sc-label

bruugey · web-flow · commit ac178c22412e · 2023-07-07T20:54:19.000+02:00
diff --git a/.changeset/gentle-shoes-join.md b/.changeset/gentle-shoes-join.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/text-input': patch
+---
+
+Updates valid state icon in dark mode to match Figma spec
diff --git a/.changeset/little-comics-deny.md b/.changeset/little-comics-deny.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/loading-indicator': major
+---
+
+Changing Lottie dependency from @lottie-files/react-lottie-player to react-lottie-player
diff --git a/.changeset/three-lobsters-cough.md b/.changeset/three-lobsters-cough.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/icon': minor
+---
+
+Adds 'Federation' icon to glyph set
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -24,13 +24,13 @@ jobs:
         run: yarn
 
       - name: Build packages
-        run: yarn build:packages
+        run: yarn build
 
       - name: Build typescript
-        run: yarn build:ts
+        run: yarn tsc
 
       - name: Build TSDoc
-        run: yarn docs:tsdoc
+        run: yarn build:docs
 
       - name: Establish Chromatic baseline
         uses: chromaui/action@v1
diff --git a/packages/icon/README.md b/packages/icon/README.md
diff --git a/packages/icon/src/generated/Federation.tsx b/packages/icon/src/generated/Federation.tsx
diff --git a/packages/icon/src/glyphs/Federation.svg b/packages/icon/src/glyphs/Federation.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0C9.6 0 10.8 1.3 10.8 3C10.8 4.5 9.8 5.7 8.5 6V8.1L11.6 10.5C12 10.2 12.6 10 13.1 10C14.7 10 15.9 11.3 15.9 13C15.9 14.7 14.6 16 13.1 16C11.5 16 10.3 14.7 10.3 13C10.3 12.3 10.5 11.7 10.9 11.2L8 9L5.1 11.2C5.5 11.7 5.7 12.3 5.7 13C5.7 14.7 4.4 16 2.9 16C1.4 16 0 14.7 0 13C0 11.3 1.3 10 2.8 10C3.4 10 3.9 10.2 4.3 10.5L7.4 8.1V5.9C6.2 5.7 5.2 4.5 5.2 3C5.2 1.3 6.4 0 8 0ZM8 5C8.8 5 9.9 4.2 9.9 3C9.9 1.9 9 1 8 1C7 1 6.1 1.9 6.1 3C6.1 4.2 7.1 5 8 5ZM2.8 11C1.8 11 0.9 11.9 0.9 13C0.9 14.1 1.7 15 2.8 15C3.9 15 4.7 14.1 4.7 13C4.7 11.9 3.9 11 2.8 11ZM13.2 11C12.2 11 11.3 11.9 11.3 13C11.3 14.1 12.1 15 13.2 15C14.3 15 15.1 14.1 15.1 13C15.1 11.9 14.2 11 13.2 11Z" fill="#000000"/>
+</svg>
diff --git a/packages/icon/src/glyphs/index.ts b/packages/icon/src/glyphs/index.ts
@@ -51,6 +51,7 @@ import Ellipsis from './Ellipsis.svg';
 import Email from './Email.svg';
 import Export from './Export.svg';
 import Favorite from './Favorite.svg';
+import Federation from './Federation.svg';
 import File from './File.svg';
 import Filter from './Filter.svg';
 import Folder from './Folder.svg';
@@ -178,6 +179,7 @@ const _glyphs = {
   Email,
   Export,
   Favorite,
+  Federation,
   File,
   Filter,
   FullScreenEnter,
diff --git a/packages/loading-indicator/package.json b/packages/loading-indicator/package.json
@@ -34,7 +34,7 @@
     "@leafygreen-ui/palette": "^4.0.4",
     "@leafygreen-ui/tokens": "^2.1.1",
     "@leafygreen-ui/typography": "^16.5.1",
-    "@lottiefiles/react-lottie-player": "^3.5.3"
+    "react-lottie-player": "^1.5.4"
   },
   "peerDependencies": {
     "@leafygreen-ui/leafygreen-provider": "^3.1.3"
diff --git a/packages/loading-indicator/src/PageLoader/PageLoader.tsx b/packages/loading-indicator/src/PageLoader/PageLoader.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Player } from '@lottiefiles/react-lottie-player';
+import Lottie from 'react-lottie-player';
 import PropTypes from 'prop-types';
 
 import { cx } from '@leafygreen-ui/emotion';
@@ -24,9 +24,10 @@ const PageLoader = ({
 }: PageLoaderProps) => {
   const { theme } = useDarkMode(darkModeProp);
   const baseFontSize = useUpdatedBaseFontSize(baseFontSizeProp);
+
   return (
     <div className={cx(rootStyles, className)} {...rest}>
-      <Player autoplay loop src={animationJson} style={blobStyles} />
+      <Lottie play loop animationData={animationJson} style={blobStyles} />
       {description && (
         <Body
           className={descriptionThemeColor[theme]}
diff --git a/packages/loading-indicator/src/Spinner/Spinner.tsx b/packages/loading-indicator/src/Spinner/Spinner.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Player } from '@lottiefiles/react-lottie-player';
+import Lottie from 'react-lottie-player';
 import PropTypes from 'prop-types';
 
 import { cx } from '@leafygreen-ui/emotion';
@@ -36,6 +36,7 @@ const Spinner = ({
   const spinnerMarginBottom = SpinnerBottomMargins[displayOption];
   const { darkMode, theme } = useDarkMode(darkModeProp);
   const baseFontSize = useUpdatedBaseFontSize(baseFontSizeProp);
+
   return (
     <div
       className={cx(
@@ -48,10 +49,10 @@ const Spinner = ({
       )}
       {...rest}
     >
-      <Player
-        autoplay
+      <Lottie
+        play
         loop
-        src={animationJson}
+        animationData={animationJson}
         className={cx({
           [darkModeSpinnerStyles]: darkMode,
           [colorOverrideStyles(colorOverride as string)]: !!colorOverride,
diff --git a/packages/text-input/src/TextInput/TextInput.tsx b/packages/text-input/src/TextInput/TextInput.tsx
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import { cx } from '@leafygreen-ui/emotion';
 import { useIdAllocator, useValidation } from '@leafygreen-ui/hooks';
 import CheckmarkIcon from '@leafygreen-ui/icon/dist/Checkmark';
-import CheckmarkWithCircleIcon from '@leafygreen-ui/icon/dist/CheckmarkWithCircle';
 import WarningIcon from '@leafygreen-ui/icon/dist/Warning';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 import { consoleOnce } from '@leafygreen-ui/lib';
@@ -153,10 +152,6 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       );
     }
 
-    const RenderedCheckmarkIcon = darkMode
-      ? CheckmarkWithCircleIcon
-      : CheckmarkIcon;
-
     const shouldRenderOptionalText =
       state === State.None && !disabled && optional;
 
@@ -229,7 +224,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           >
             {/* Render State Icon or Optional text*/}
             {state === State.Valid && (
-              <RenderedCheckmarkIcon
+              <CheckmarkIcon
                 role="presentation"
                 className={stateIndicatorStyles.valid[theme]}
               />
diff --git a/rollup.config.js b/rollup.config.js
@@ -151,6 +151,7 @@ const baseConfigForFormat = format => ({
       'react-dom',
       'react-is',
       'react-keyed-flatten-children',
+      'react-lottie-player',
       'react-transition-group',
       ...getLodashExternals(),
       ...allPackages,
diff --git a/yarn.lock b/yarn.lock
@@ -2928,13 +2928,6 @@
     validate-npm-package-name "5.0.0"
     yargs-parser "20.2.4"
 
-"@lottiefiles/react-lottie-player@^3.5.3":
-  version "3.5.3"
-  resolved "https://registry.yarnpkg.com/@lottiefiles/react-lottie-player/-/react-lottie-player-3.5.3.tgz#e7e848f29577bc4eede87d677a0054de29378127"
-  integrity sha512-6pGbiTMjGnPddR1ur8M/TIDCiogZMc1aKIUbMEKXKAuNeYwZ2hvqwBJ+w5KRm88ccdcU88C2cGyLVsboFlSdVQ==
-  dependencies:
-    lottie-web "^5.10.2"
-
 "@manypkg/find-root@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@manypkg/find-root/-/find-root-1.1.0.tgz#a62d8ed1cd7e7d4c11d9d52a8397460b5d4ad29f"
@@ -12473,10 +12466,10 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
-lottie-web@^5.10.2:
-  version "5.11.0"
-  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.11.0.tgz#04bb9fd6cdfbb10e586985dd666de6c727619d95"
-  integrity sha512-9vSt0AtdOH98GKDXwD5LPfFg9Pcmxt5+1BllAbudKM5iqPxpJnJUfuGaP45OyudDrESCOBgsjnntVUTygBNlzw==
+lottie-web@^5.7.6:
+  version "5.12.2"
+  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.12.2.tgz#579ca9fe6d3fd9e352571edd3c0be162492f68e5"
+  integrity sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==
 
 lower-case@^2.0.2:
   version "2.0.2"
@@ -15077,6 +15070,15 @@ react-keyed-flatten-children@^1.3.0:
   dependencies:
     react-is "^16.8.6"
 
+react-lottie-player@^1.5.4:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/react-lottie-player/-/react-lottie-player-1.5.4.tgz#8205cc334d11b923d9bac78e1d19bcc0d475d751"
+  integrity sha512-eM0g11bAc4EJJuDDfCoNloaAYphfXlIpYnriOt4nRU66PpVmvKhajvP2aif4YflGY2ArAFXhWxs418YzdebK9w==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    lottie-web "^5.7.6"
+    rfdc "^1.3.0"
+
 react-refresh@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
@@ -15624,6 +15626,11 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
+rfdc@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.3.0.tgz#d0b7c441ab2720d05dc4cf26e01c89631d9da08b"
+  integrity sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==
+
 rimraf@2.6.3, rimraf@~2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@leafygreen-ui/text-input': patch
 +---
++
 +Updates valid state icon in dark mode to match Figma spec