@sproutsocial/racine 19.0.1 → 20.1.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # Change Log
 
+## 20.1.0
+
+### Minor Changes
+
+- 1a52bdb4: Adds footerContent prop to Menu/Listbox to improve keyboard accessibility
+  - Currently, the `children` prop is the only way to pass content to be rendered inside a Menu. Menu implicitly expects the only interactive elements in `children` to be `Menu.Item`s. When interactive, non-`Menu.Item` content is included in `children`, it will not be accessible to keyboard users, because any keydown events will be applied to the active `Menu.Item`s instead.
+  - The new `footerContent` prop allows content that should be shown below the Menu Items to be passed and focused separately. When the focus is on the footer, `Menu.Item` keyboard events will be suppressed, allowing interaction with the `footerContent`.
+  - Listbox is a variant of Menu, so the explanation and changes described apply equally to Listbox.
+- cfab3798: - Avatar now accepts `type="auto"` to automatically and randomly apply a background color
+  - Deprecated `variant` prop. Avatar now handles darkmode automatically
+  - A border is now applied by default to Avatars that have not been given an image
+  - Fixed a bug where the `color` prop was needlessly appending 'px' to color values
+- fd96bb33: The Tooltip component has undergone several updates with a focus on accessibility
+  - The tooltip component now keeps the tooltip open when the mouse hovers over the tooltip content. Previously, the tooltip would close as soon as the mouse left the tooltip trigger.
+  - The tooltip component now closes when the user presses the escape key on the keyboard.
+  - The tooltip content now has the `role='tooltip'` attribute, improving accessibility.
+  - `Tooltip` and subsequently `Popout` component no longer propagate `id` throughout all of their children
+
+### Patch Changes
+
+- 2167e323: - Changed the manner in which we were handling a transparent color on LoaderButton from using the polishedjs rgba() to hexadecimal.
+
+## 20.0.0
+
+### Major Changes
+
+- d3b6122f: **Breaking Change**: Uses @sproutsocial/seeds-icons for Icon assets
+
+  - Icon assets are now stored in a new package called @sproutsocial/seeds-icons.
+  - @sproutsocial/seeds-icons is now a peer and dev dependency of Racine.
+  - All icons now have solid and outline variants, with outline being the default. Variants are specified as a part of the icon name (e.g., `bell-solid`); if omitted, the outline version will be rendered by default.
+
+  To recap the migration steps from our announcement of these changes:
+
+  - Sprites: Instead of using icon.svg from Racine’s dist/ directory, the sprites should be imported from @sproutsocial/seeds-icons for each category of icons you want to include. Attach these spritesheets to the DOM in the same way you do icon.svg.
+  - Dependencies: Add @sproutsocial/seeds-icons to your application’s dependencies.
+  - Icons: Most icon names are changing as a part of this refactor. Run the 'icon-library' codemod to automatically update as many icon names as possible. The codemod cannot fix Icon components where the name prop is not a string, but the codemod will (by default) add a code comment when this occurs, to help you find cases where you need to manually update icon names.
+  - Icon variants: The codemod may not always map to the correct variant for your use case. In these cases, manually update the variant by updating the icon `name` prop.
+
+- d3b6122f: Removes reddit-alien PartnerLogo in favor of reddit
+  - The `reddit` PartnerLogo is also updated to look like the `reddit-alien` PartnerLogo did
+
 ## 19.0.1
 
 ### Patch Changes

package/README.md

@@ -124,7 +124,7 @@ $ yarn start
 /* ~/YourCodeFolder/web-app-core/YourFile.js */
 import {Icon} from '@sproutsocial/racine';
 // ...
-<Icon name="compose" />;
+<Icon name="pencil-outline" />;
 ```
 
 4. **When you are done, be sure to unlink Racine so you are using the app's version of the package**
@@ -179,7 +179,7 @@ Cut a feature branch off `dev` and start coding! As updates are merged into `dev
 
 _Need to make an urgent update? Branch off `main` instead of dev, and open your PR later against `main`. We consider this a hotfix and only support it for critical time-sensitive updates, so check with the Design Systems team prior to making this kind of contribution._
 
-We use a [visual regression testing](https://racine.netlify.app/?path=/story/welcome-visual-regression-testing--page) suite to capture any unintended changes during development.  After running `yarn build` you can run the suite locally with `yarn backstop-test`, which will open a report in your browser to show you what passed and what failed.  If any fails are actually intentional visual changes you can run `yarn backstop-approve` to approve those changes as new reference images and include them in your PR.
+We use a [visual regression testing](https://racine.netlify.app/?path=/story/welcome-visual-regression-testing--page) suite to capture any unintended changes during development. After running `yarn build` you can run the suite locally with `yarn backstop-test`, which will open a report in your browser to show you what passed and what failed. If any fails are actually intentional visual changes you can run `yarn backstop-approve` to approve those changes as new reference images and include them in your PR.
 
 As you develop you'll want to track the scope of the changes you make. Racine supports this with a tool called [changesets](https://github.com/atlassian/changesets) to automatically pick new version numbers and update the changelog whenever we publish a new version of the package.
 
@@ -193,7 +193,7 @@ When running this command, you will be asked to select whether your change is a
 - **minor** changes are for new features or improvements, and they bump the middle digit in the version number (`x.0.x`)
 - **major** changes are _breaking changes_, and they bump the first digit (`0.x.x`). These types of changes are rare and should be coordinated in advance with the Design Systems team.
 
-The changeset CLI will also ask you to input a message detailing your changes. The completion of the command will generate a new changeset markdown file. You are more than welcome to edit this file after it has been generated, so don't get hung up on trying to write the perfect text from the command line. Aim to make the text of the changeset file(s) as descriptive and informative as possible, as they will be used to build a changelog file when the new version is released.  Check out our documentation for the [Seeds Release Process](https://sprout.atlassian.net/wiki/spaces/SEEDS/pages/3522756609/DS+Seeds+Release+Process#Changesets) for examples of what makes a good or bad changeset.
+The changeset CLI will also ask you to input a message detailing your changes. The completion of the command will generate a new changeset markdown file. You are more than welcome to edit this file after it has been generated, so don't get hung up on trying to write the perfect text from the command line. Aim to make the text of the changeset file(s) as descriptive and informative as possible, as they will be used to build a changelog file when the new version is released. Check out our documentation for the [Seeds Release Process](https://sprout.atlassian.net/wiki/spaces/SEEDS/pages/3522756609/DS+Seeds+Release+Process#Changesets) for examples of what makes a good or bad changeset.
 
 **You can add as many changesets to a PR as you would like.** If your PR makes several distinct changes to Racine, you should create a changeset detailing each one individually.
 
@@ -207,7 +207,7 @@ Once you're ready to submit your changes for review, open a PR against the `dev`
 - Netlify will create a preview deploy of Racine's Storybook and include a link to it in a comment on the PR so you can see your changes and share them with others.
 - A Racine package snapshot including your changes will be published to Artifactory and included in a comment on the PR so you can install it locally or in a web app PR/snapshot in order to test your changes.
 
-You may be asked to make changes to match Racine's contribution guidelines, so expect to keep attention on your PR for a little bit. Once your tests are passing and you have at least one approving Design Systems review, a member of the Design Systems team will merge your changes for inclusion in a future release of Racine!  Please **do NOT** merge your own PR unless expressly told to, since commits to `dev` end up in the next release, and the Design Systems team needs to make sure they have the bandwidth to validate any contribution before it releases.
+You may be asked to make changes to match Racine's contribution guidelines, so expect to keep attention on your PR for a little bit. Once your tests are passing and you have at least one approving Design Systems review, a member of the Design Systems team will merge your changes for inclusion in a future release of Racine! Please **do NOT** merge your own PR unless expressly told to, since commits to `dev` end up in the next release, and the Design Systems team needs to make sure they have the bandwidth to validate any contribution before it releases.
 
 ### **☁️ Step 5: Changes get published to Artifactory**
 
@@ -217,4 +217,4 @@ When the PR is merged, [GitHub will kick off a publish of the new version](https
 
 ### **✍ Step 6: Document your changes**
 
-Racine components are documented in [Seeds](https://sproutsocial.com/seeds/components), Sprout's design system. You can open a PR to the [Seeds repository](https://github.com/sproutsocial/seeds) to add or edit component documentation.  It's a good idea to have documentation changes ready to go at the same time your Racine contributions are deployed, so start early!  Reach out to the Design Systems team if you need help getting started.
+Racine components are documented in [Seeds](https://sproutsocial.com/seeds/components), Sprout's design system. You can open a PR to the [Seeds repository](https://github.com/sproutsocial/seeds) to add or edit component documentation. It's a good idea to have documentation changes ready to go at the same time your Racine contributions are deployed, so start early! Reach out to the Design Systems team if you need help getting started.

package/__flow__/Avatar/Avatar.flow.js

@@ -8,6 +8,7 @@ export type TypeAvatarProps = {
   /** URL of the avatar image. If a URL is not provided, the component will fall back to showing the user's initials */
   src?: string,
   type?: 'neutral' | 'purple' | 'green' | 'blue' | 'yellow' | 'red' | 'orange',
+  /** @deprecated Avatar now uses the theme by default and using `variant` is no longer needed */
   variant?: 'dark' | 'light',
   bg?: string,
   color?: string,

package/__flow__/Avatar/constants.flow.js

@@ -0,0 +1,11 @@
+// @flow
+export const AvatarColorOptions = Object.freeze({
+  auto: 'auto',
+  neutral: 'neutral',
+  purple: 'purple',
+  green: 'green',
+  blue: 'blue',
+  yellow: 'yellow',
+  red: 'red',
+  orange: 'orange'
+});

package/__flow__/Avatar/index.flow.js

@@ -1,2 +1,3 @@
 // @flow
-export * from "./Avatar.flow";
+export * from "./Avatar.flow";
+export { AvatarColorOptions } from "./constants.flow";

package/__flow__/EnumLogoNames.flow.js

@@ -1,2 +1,2 @@
 // @flow
-export type EnumLogoNames = "adobe-experience-manager" | "android" | "apple-app-store" | "apple" | "bigcommerce" | "bitly" | "bynder" | "canva" | "dropbox" | "facebook-audience-network" | "facebook" | "facebook-groups" | "facebook-shops" | "feedly" | "github" | "glassdoor" | "google-analytics" | "google-business-messages" | "google-drive" | "google-my-business" | "google-play-store" | "hubspot" | "instagram" | "linkedin-audience-network" | "linkedin" | "marketo" | "messenger" | "microsoft-dynamics" | "pinterest" | "reddit-alien" | "reddit" | "salesforce-cloud" | "salesforce" | "shopify" | "slack" | "sproutsocial" | "tableau" | "tiktok" | "tripadvisor" | "tumblr" | "twitter-audience-network" | "twitter" | "whatsapp" | "woocommerce" | "yelp" | "youtube" | "zendesk";
+export type EnumLogoNames = "adobe-experience-manager" | "android" | "apple-app-store" | "apple" | "bigcommerce" | "bitly" | "bynder" | "canva" | "dropbox" | "facebook-audience-network" | "facebook" | "facebook-groups" | "facebook-shops" | "feedly" | "github" | "glassdoor" | "google-analytics" | "google-business-messages" | "google-drive" | "google-my-business" | "google-play-store" | "hubspot" | "instagram" | "linkedin-audience-network" | "linkedin" | "marketo" | "messenger" | "microsoft-dynamics" | "pinterest" | "reddit" | "salesforce-cloud" | "salesforce" | "shopify" | "slack" | "sproutsocial" | "tableau" | "tiktok" | "tripadvisor" | "tumblr" | "twitter-audience-network" | "twitter" | "whatsapp" | "woocommerce" | "yelp" | "youtube" | "zendesk";

package/__flow__/Icon/Icon.flow.js

@@ -1,11 +1,10 @@
 // @flow
 import * as React from 'react';
 import type { StyledComponent } from 'styled-components';
-import type { EnumIconNames } from "../EnumIconNames.flow";
+import type { EnumIconNames } from '@sproutsocial/seeds-icons';
 import type { EnumLogoNames } from "../EnumLogoNames.flow";
 import type { TypeWithDisplayName } from "../types/shared.flow";
 import type { TypeTheme } from "../types/theme.flow";
-import deprecatedIcons from "./deprecatedIcons.flow";
 export type TypeIconSize = 'mini' // 12x12
 // TODO: deprecate default  in favor of small in future release
 | 'default' // 16x16
@@ -14,7 +13,8 @@ export type TypeIconSize = 'mini' // 12x12
 | 'large' // 32x32
 | 'jumbo'; // 64x64
 
-export type TypeIconName = EnumIconNames | $Keys<typeof deprecatedIcons> | EnumLogoNames;
+export type TypeIconNames = EnumIconNames;
+export type TypeIconName = TypeIconNames | EnumLogoNames;
 export type TypeIconProps = {
   /** Name of the icon in the svg sprite */
   name: TypeIconName,
@@ -28,9 +28,9 @@ export type TypeIconProps = {
 };
 export type TypeToggleProps = {
   /** Name of the icon to be shown in the active state */
-  activeName: EnumIconNames,
+  activeName: TypeIconName,
   /** Name of the icon to be shown in the inactive state */
-  inactiveName: EnumIconNames,
+  inactiveName: TypeIconName,
   /** Whether the active icon should be shown or not */
   isActive: boolean,
   /** The size of the icon. `small` is the default */

package/__flow__/Icon/index.flow.js

@@ -1,2 +1,4 @@
 // @flow
+import Icon from "./Icon.flow";
+export { Icon };
 export * from "./Icon.flow";

package/__flow__/LogoViewBoxes.js

@@ -63,10 +63,8 @@ module.exports = {
   "microsoft-dynamics": "0 0 140 227",
   "pinterest-dark": "0 0 140 141",
   "pinterest": "0 0 140 141",
-  "reddit-alien-dark": "0 0 18 18",
-  "reddit-alien": "0 0 18 18",
-  "reddit-dark": "0 0 140 140",
-  "reddit": "0 0 140 140",
+  "reddit-dark": "0 0 18 17",
+  "reddit": "0 0 18 17",
   "salesforce-cloud-dark": "0 0 20 18",
   "salesforce-cloud": "0 0 20 18",
   "salesforce-dark": "0 0 140 99",

package/__flow__/Menu/Menu.flow.js

@@ -17,6 +17,7 @@ export type TypeMenuState = {|
   filterQuery: string,
   filteredItems: ?number[],
   isFilterInputFocused: boolean,
+  isFooterFocused: boolean,
 |};
 export type TypeMenuSharedProps = {|
   multiselect?: boolean,
@@ -40,6 +41,8 @@ export type TypeMenuProps = {
   ...TypeMenuSharedProps,
   children?: React.Node,
   innerRef?: React.Ref<any>,
+  // Any interactive elements that you want to display below the menu should be passed here, not as children
+  footerContent?: React.Node,
   ...
 };
 export type TypeMenuItemProps = {

package/__flow__/Popout/Popout.flow.js

@@ -30,6 +30,11 @@ export type TypePopoutProps = {
    * Is the popout open? This prop is optional. By using it, you will lose some automatic handling of the logic for opening and closing the popout.
    */
   isOpen?: boolean,
+  /**
+   * Whether Popout should automatically add aria-attributes to its wrapped elements
+   */
+  disableWrapperAria?: boolean,
+  /**
   /**
    * If you use the isOpen prop you will need to pass a handler to change the state of the popout
    */

package/__flow__/index.flow.js

@@ -1,7 +1,7 @@
 // @flow
 
 /* Asset types */
-export type { EnumIconNames } from "./EnumIconNames.flow";
+export type { EnumIconNames } from '@sproutsocial/seeds-icons';
 export type { EnumIllustrationNames } from "./EnumIllustrationNames.flow";
 export type { EnumLogoNames } from "./EnumLogoNames.flow";
 
@@ -35,7 +35,7 @@ export { default as Drawer } from "./Drawer/index.flow";
 export { default as EmptyState } from "./EmptyState/index.flow";
 export { default as Fieldset } from "./Fieldset/index.flow";
 export { default as FormField } from "./FormField/index.flow";
-export { default as Icon } from "./Icon/index.flow";
+export * from "./Icon/index.flow";
 export { default as Image } from "./Image/index.flow";
 export { default as Indicator } from "./Indicator/index.flow";
 export { default as Input } from "./Input/index.flow";
@@ -89,7 +89,6 @@ export type { TypeDrawerProps, TypeDrawerCloseButtonProps, TypeDrawerHeaderProps
 export type { TypeEmptyStateProps } from "./EmptyState/index.flow";
 export type { TypeFieldsetProps } from "./Fieldset/index.flow";
 export type { TypeFormFieldProps } from "./FormField/index.flow";
-export type { TypeIconProps, TypeIconName, TypeToggleProps } from "./Icon/index.flow";
 export type { TypeImageProps } from "./Image/index.flow";
 export type { TypeIndicatorProps } from "./Indicator/index.flow";
 export type { TypeInputProps } from "./Input/index.flow";

package/__flow__/types/theme.colors.flow.js

@@ -200,6 +200,20 @@ type TypeTextColors = {|
       highlight: string,
       ...
     },
+    decorative: {
+      green: string,
+      blue: string,
+      purple: string,
+      yellow: string,
+      orange: string,
+      red: string,
+      neutral: string,
+      magenta: string,
+      pink: string,
+      aqua: string,
+      teal: string,
+      ...
+    },
     ...
   }
 |};

package/bin/racine-codemod.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-// racine-codemod name-of-transform path/to/src
+// to run codemod: node bin/racine-codemod name-of-transform path/to/src
 // Respectfully adapted from https://github.com/reactjs/react-codemod/blob/master/bin/react-codemod.js
 
 const childProcess = require('child_process');
@@ -61,18 +61,16 @@ const filePath = path.join('../codemods', transform + '.js');
 const relativePath = path.join(currentDir, dest);
 const userArgs = [...process.argv]
   .slice(4)
-  .map((arg) => arg.replace(/\s/g, ''))
-  .join(' ');
+  .map((arg) => arg.replace(/\s/g, ''));
 
 const args = [
   'jscodeshift',
   '--',
-  '--parser=flow',
   '-t',
   filePath,
   relativePath,
   '--ignore-pattern=**/node_modules/**',
-  userArgs,
+  ...userArgs,
 ];
 
 childProcess.execFileSync('npx', args, {stdio: 'inherit'});

package/codemods/__tests__/icon-library.test.js

@@ -38,7 +38,7 @@ describe('icon-library codemod', () => {
   );
 
   createTest(
-    'ssiconsvg regex replacements',
+    'ssiconsvg icon regex replacements',
     `<use
     xlink:href="#ssiconsvg-rejected"
     xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -49,6 +49,18 @@ describe('icon-library codemod', () => {
   />`
   );
 
+  createTest(
+    'ssiconsvg logo regex replacements',
+    `<use
+    xlink:href="#ssiconsvg-facebook"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  />`,
+    `<use
+    xlink:href="#sslogosvg-facebook"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  />`
+  );
+
   createTest(
     'icon/iconName regex replacements',
     `expect(queryByDataQaLabel({icon: 'dashboard'})).toBeFalsy();
@@ -82,7 +94,8 @@ import { Badge, Icon } from '@sproutsocial/racine';
   // Test shim component adding behavior with a mix of cases.
   // The valid name Icon is migrated.
   // The invalid string name Icon prompts a comment. The shim would not help map an invalid string name.
-  // The variable name Icon is converted to IconShim and does not contribute to the count of issues in the comment.
+  // A partner name is left as-is and does not contribute to the count of issues.
+  // The variable name Icon is converted to IconShim and does not contribute to the count of issues.
   createTest(
     'Add shim component and add comments',
     `import { Icon } from '@sproutsocial/racine';
@@ -90,6 +103,7 @@ import { Badge, Icon } from '@sproutsocial/racine';
 <>
   <Icon name='dashboard' />
   <Icon name='not-a-real-name' />
+  <Icon name='facebook' />
   <Icon name={iconName} />
 </>`,
     `/*TODO (icon-library codemod): Please manually migrate icon names passed to 1 component(s) in this file.
@@ -101,6 +115,7 @@ import { IconShim } from 'script/core/react/IconShim';
 <>
   <Icon name='gauge-outline' />
   <Icon name='not-a-real-name' />
+  <Icon name='facebook' />
   <IconShim name={iconName} />
 </>`,
     {

package/codemods/artifacts/deprecated-icon-map.json

@@ -0,0 +1,38 @@
+{
+  "backtotop": "back-to-top",
+  "circle-check-filled": "circle-check",
+  "circle-check-no-fill": "circle-check",
+  "circle-check-inverse-outline": "circle-check-outline",
+  "circle-check-inverse": "circle-check-outline",
+  "circle+-filled": "plus-outline",
+  "circlex-filled": "circle-x-outline",
+  "circle+-nofill": "plus-outline",
+  "circlex-nofill": "circle-x-outline",
+  "creditcard": "credit-card",
+  "direct-message": "messages",
+  "facebook-nofill": "facebook",
+  "googleanalytics": "google-analytics",
+  "instagram-brand-keyword": "hashtag",
+  "help-white": "help",
+  "info-white": "info",
+  "instagram-nofill": "instagram",
+  "key-circle": "key",
+  "key-square": "key",
+  "linkedin-nofill": "linkedin",
+  "listening-home": "listening",
+  "location-pub": "location",
+  "location-pub-outline": "location-outline",
+  "publishing-calendar": "calendar",
+  "qrcode": "qr-code",
+  "sparkles-solid": "sparkles",
+  "star-inverse": "star-outline",
+  "triangle-white": "triangle",
+  "triangle-nofill": "triangle",
+  "tripadvisor-circle-filled": "tripadvisor-circle",
+  "tripadvisor-circle-empty": "tripadvisor-circle-outline",
+  "tumblr-square": "tumblr",
+  "tumblr-nofill": "tumblr",
+  "twitter-business-mention": "search",
+  "verified-nofill": "verified",
+  "window-maximize-solid": "window-maximize"
+}