Merge release/2.8.0 into main branch (#1200)

github-actions[bot] · web-flow · commit 6735c1863945 · 2024-04-30T12:12:54.000-07:00
* Updates FontAwesome peer deps (#1189) * remove non-synth colors, add borderedMultiValue styles SingleSelect (#1196) * Add default containerClassName to loading skeleton (#1195)
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@user-interviews/ui-design-system",
-  "version": "2.7.2",
+  "version": "2.8.0",
   "dependencies": {
     "@tiptap/core": "^2.0.3",
     "@tiptap/extension-bold": "^2.0.3",
@@ -61,10 +61,10 @@
     ]
   },
   "peerDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.28",
-    "@fortawesome/free-brands-svg-icons": "^5.15.3",
-    "@fortawesome/pro-regular-svg-icons": "^6.4.0",
-    "@fortawesome/pro-solid-svg-icons": "^6.4.0",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/pro-regular-svg-icons": "^6.5.1",
+    "@fortawesome/pro-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@popperjs/core": "^2.5.3",
     "bootstrap": "5.1",
diff --git a/src/LoadingSkeleton/LoadingSkeleton.jsx b/src/LoadingSkeleton/LoadingSkeleton.jsx
@@ -8,10 +8,11 @@ import colors from '../Styles/colors/palette';
 
 import './LoadingSkeleton.scss';
 
-const LoadingSkeleton = ({ className, ...props }) => (
+const LoadingSkeleton = ({ className, containerClassName, ...props }) => (
   <SkeletonTheme baseColor={colors.UX_GRAY_300}>
     <Skeleton
       className={classNames('LoadingSkeleton', className)}
+      containerClassName={classNames('loadingSkeletonContainer', containerClassName)}
       {...props}
     />
   </SkeletonTheme>
diff --git a/src/LoadingSkeleton/LoadingSkeleton.scss b/src/LoadingSkeleton/LoadingSkeleton.scss
@@ -8,6 +8,11 @@
   }
 }
 
+// Per https://github.com/dvtng/react-loading-skeleton/issues/23#issuecomment-939231878
+.loadingSkeletonContainer {
+  line-height: 1;
+}
+
 .react-loading-skeleton {
   --base-color: #ebebeb;
   --highlight-color: #f5f5f5;
diff --git a/src/Select/SingleSelect.jsx b/src/Select/SingleSelect.jsx
@@ -4,13 +4,15 @@ import Select from 'react-select';
 import propTypes from 'prop-types';
 
 import zStack from 'src/Styles/zStack';
-import './select.scss';
 
-import { defaultTheme, defaultStyles, SELECT_SIZES } from './styles';
+import {
+ borderedMultiValueStyles, defaultTheme, defaultStyles, SELECT_SIZES,
+} from './styles';
 
 const SingleSelect = ({
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
+  borderedMultiValue,
   className,
   closeMenuOnSelect,
   components,
@@ -57,6 +59,7 @@ const SingleSelect = ({
     placeholder={placeholder}
     styles={{
       ...defaultStyles({ menuWidth, size }),
+      ...borderedMultiValueStyles(borderedMultiValue),
       menuPortal: (base) => (
         modal ?
         { ...base, zIndex: zStack.zIndexModalBackdrop + 1 } :
@@ -72,6 +75,7 @@ const SingleSelect = ({
 SingleSelect.propTypes = {
   'aria-label': propTypes.string,
   'aria-labelledby': propTypes.string,
+  borderedMultiValue: propTypes.bool,
   className: propTypes.string,
   closeMenuOnSelect: propTypes.bool,
   components: propTypes.any,
@@ -103,6 +107,7 @@ SingleSelect.propTypes = {
 SingleSelect.defaultProps = {
   'aria-label': undefined,
   'aria-labelledby': undefined,
+  borderedMultiValue: undefined,
   className: undefined,
   closeMenuOnSelect: true,
   components: undefined,
diff --git a/src/Select/SingleSelect.mdx b/src/Select/SingleSelect.mdx
diff --git a/src/Select/SingleSelect.stories.jsx b/src/Select/SingleSelect.stories.jsx
@@ -12,18 +12,11 @@ import Option from './Option';
 import OptionWithDescription from './OptionWithDescription';
 import ValueContainer from './ValueContainer';
 
-import mdx from './SingleSelect.mdx';
-
 const onChange = () => action('Change');
 
 export default {
   title: 'Components/Selects/Single',
   component: SingleSelect,
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
 };
 
 const options = [
@@ -33,6 +26,13 @@ const options = [
   { label: 'Unmoderated task', value: 4 },
 ];
 
+const peopleOptions = [
+  { label: 'Riley Researcher', value: 5 },
+  { label: 'Mickey Moderator', value: 6 },
+  { label: 'Connie Collaborator', value: 7 },
+  { label: 'Ozzy Observer', value: 8 },
+];
+
 export const Default = () => (
   <FormGroup
     label="Default select"
@@ -74,6 +74,21 @@ export const MultipleSelect = () => (
   </FormGroup>
 );
 
+export const MultipleSelectBorderedPill = () => (
+  <FormGroup
+    label="Multiple select bordered pill"
+    labelHtmlFor="multi-select-bordered-pill"
+  >
+    <SingleSelect
+      borderedMultiValue
+      inputId="multi-select-bordered-pill"
+      isMulti
+      options={peopleOptions}
+      onChange={onChange}
+    />
+  </FormGroup>
+);
+
 export const InModal = () => {
   const [isOpen, setIsOpen] = useState(false);
 
diff --git a/src/Select/select.scss b/src/Select/select.scss
diff --git a/src/Select/styles.js b/src/Select/styles.js
@@ -51,8 +51,8 @@ const defaultStyles = ({ menuWidth, size }) => ({
     indicatorSeparator: (styles) => ({ ...styles, display: 'none' }),
     multiValue: (styles) => ({
       ...styles,
-      backgroundColor: systemColors.UX_BLUE_100,
-      color: systemColors.UX_BLUE_700,
+      backgroundColor: systemColors.SYNTH_HOVER_STATE,
+      color: systemColors.SYNTH_SUCCESS_GREEN_DARK,
       borderRadius: '4px',
     }),
     menu: (styles) => ({
@@ -61,20 +61,20 @@ const defaultStyles = ({ menuWidth, size }) => ({
     }),
     multiValueLabel: (styles) => ({
       ...styles,
-      color: systemColors.UX_BLUE_700,
+      color: systemColors.SYNTH_SUCCESS_GREEN_DARK,
       fontSize: '0.875rem',
       fontWeight: 400,
       lineHeight: '1.25rem',
       paddingLeft: '8px',
     }),
     multiValueRemove: (styles) => ({
       ...styles,
-      color: systemColors.UX_BLUE,
+      color: systemColors.SYNTH_SUCCESS_GREEN_DARK,
       cursor: 'pointer',
       ':hover': {
         ...styles[':hover'],
-        backgroundColor: systemColors.selectOptionFocusedBg,
-        color: systemColors.UX_BLUE_700,
+        backgroundColor: systemColors.SYNTH_SELECTED_STATE_GREEN,
+        color: systemColors.SYNTH_SUCCESS_GREEN_DARK,
       },
     }),
     placeholder: (styles) => ({
@@ -91,10 +91,12 @@ const defaultStyles = ({ menuWidth, size }) => ({
     }),
     option: (styles, {
       isDisabled,
+      isFocused,
       isSelected,
     }) => ({
         ...styles,
-        backgroundColor: isSelected ? systemColors.UX_BLUE_200 : styles.backgroundColor,
+        backgroundColor: isSelected || isFocused ?
+          systemColors.SYNTH_HOVER_STATE : styles.backgroundColor,
         color: systemColors.UX_GRAY_900,
         fontWeight: fontWeights.light,
         fontSize: '0.875rem',
@@ -108,11 +110,39 @@ const defaultStyles = ({ menuWidth, size }) => ({
 
         ':hover': {
           ...styles[':hover'],
-          backgroundColor: isSelected ? systemColors.UX_BLUE_200 : systemColors.UX_BLUE_100,
+          backgroundColor: isSelected ?
+            systemColors.SYNTH_SELECTED_STATE_GREEN : systemColors.SYNTH_HOVER_STATE,
         },
       }),
 });
 
+const borderedMultiValueStyles = (borderedMultiValue) => borderedMultiValue ? {
+  multiValue: (styles) => (
+    {
+      ...styles,
+      border: `1px solid ${systemColors.SYNTH_DARK_BACKGROUND_SELECTED_BLUE}`,
+      borderRadius: '4px',
+      backgroundColor: systemColors.UX_WHITE,
+    }
+  ),
+  multiValueLabel: (styles) => (
+    {
+      ...styles,
+      color: systemColors.SYNTH_DARK_BACKGROUND_SELECTED_BLUE,
+    }
+  ),
+  multiValueRemove: (styles) => (
+    {
+      ...styles,
+      color: systemColors.SYNTH_DARK_BACKGROUND_SELECTED_BLUE,
+      ':hover': {
+        backgroundColor: systemColors.UX_NAVY_500,
+        color: systemColors.UX_WHITE,
+      },
+    }
+  ),
+} : {};
+
 const defaultTheme = (theme) => ({
   ...theme,
   colors: {
@@ -122,6 +152,7 @@ const defaultTheme = (theme) => ({
 });
 
 export {
+  borderedMultiValueStyles,
   defaultStyles,
   defaultTheme,
 };
diff --git a/yarn.lock b/yarn.lock
@@ -11815,9 +11815,9 @@ tar-stream@^2.1.4:
     readable-stream "^3.1.1"
 
 tar@^6.0.2, tar@^6.1.11, tar@^6.1.13, tar@^6.1.2:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-6.2.0.tgz#b14ce49a79cb1cd23bc9b016302dea5474493f73"
-  integrity sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-6.2.1.tgz#717549c541bc3c2af15751bea94b1dd068d4b03a"
+  integrity sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==
   dependencies:
     chownr "^2.0.0"
     fs-minipass "^2.0.0"

Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,11 @@`
`8`	`8`	`}`
`9`	`9`	`}`
`10`	`10`
	`11`	`+// Per https://github.com/dvtng/react-loading-skeleton/issues/23#issuecomment-939231878`
	`12`	`+.loadingSkeletonContainer {`
	`13`	`+ line-height: 1;`
	`14`	`+}`
	`15`	`+`
`11`	`16`	`.react-loading-skeleton {`
`12`	`17`	`--base-color: #ebebeb;`
`13`	`18`	`--highlight-color: #f5f5f5;`