fix(dropdowns.next): active listbox option and menu item styling (#1655)

Author: jzempel

.circleci/config.yml

@@ -25,8 +25,9 @@ jobs:
     steps:
       - checkout
       - node/install-packages:
+          override-ci-command: npm ci --ignore-scripts
           cache-version: '{{ .Environment.CACHE_VERSION }}'
-      - run: npm exec -- lerna run build --concurrency=1 # prevent out-of-memory
+      - run: npm exec -- lerna run build --concurrency=2 # prevent out-of-memory
       - *persist_to_workspace
 
   test:

package-lock.json

@@ -3,7 +3,7 @@
   "name": "@zendeskgarden/react-components",
   "version": "0.0.0",
   "scripts": {
-    "build": "lerna run build --stream --concurrency=1",
+    "build": "lerna run build --stream",
     "build:demo": "storybook build -o ./demo",
     "format": "prettier-package-json --write && npm run -- format:package_json --write && npm run -- format:js --write && npm run -- format:md --write",
     "format:all": "prettier-package-json --list-different && npm run -- format:package_json --list-different && npm run -- format:js --check && npm run -- format:md --check",
@@ -38,10 +38,10 @@
     "@babel/preset-react": "7.22.15",
     "@babel/preset-typescript": "7.23.2",
     "@brodybits/rollup-plugin-size-snapshot": "0.15.0",
-    "@rollup/plugin-babel": "5.3.1",
+    "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-commonjs": "25.0.7",
     "@rollup/plugin-node-resolve": "15.2.3",
-    "@rollup/plugin-replace": "5.0.4",
+    "@rollup/plugin-replace": "5.0.5",
     "@storybook/addon-a11y": "7.4.6",
     "@storybook/addon-designs": "7.0.5",
     "@storybook/addon-essentials": "7.4.6",
@@ -64,7 +64,7 @@
     "@typescript-eslint/parser": "6.8.0",
     "@zendeskgarden/css-bedrock": "9.1.1",
     "@zendeskgarden/eslint-config": "35.0.0",
-    "@zendeskgarden/scripts": "2.0.2",
+    "@zendeskgarden/scripts": "2.0.4",
     "@zendeskgarden/stylelint-config": "20.0.0",
     "@zendeskgarden/svg-icons": "7.0.0",
     "babel-plugin-module-resolver": "5.0.0",
@@ -106,7 +106,7 @@
     "react-is": "18.2.0",
     "react-test-renderer": "18.2.0",
     "regenerator-runtime": "0.14.0",
-    "rollup": "4.1.4",
+    "rollup": "4.4.1",
     "rollup-plugin-analyzer": "4.0.0",
     "rollup-plugin-cleanup": "3.2.1",
     "rollup-plugin-delete": "2.0.0",

package.json

@@ -1,11 +1,11 @@
 {
   "index.cjs.js": {
-    "bundled": 55237,
+    "bundled": 55263,
     "minified": 36325,
     "gzipped": 8536
   },
   "index.esm.js": {
-    "bundled": 51385,
+    "bundled": 51411,
     "minified": 32708,
     "gzipped": 8272,
     "treeshaked": {

packages/colorpickers/.size-snapshot.json

@@ -90,6 +90,7 @@ export const ColorWell: React.FC<IColorWellProps> = React.memo(
     }, [throttledChange]);
 
     return (
+      /* eslint-disable-next-line jsx-a11y/prefer-tag-over-role */
       <StyledColorWell
         hue={hue}
         ref={containerRef}

packages/colorpickers/src/elements/Colorpicker/ColorWell.tsx

@@ -1,20 +1,20 @@
 {
   "index.cjs.js": {
-    "bundled": 73423,
-    "minified": 52141,
-    "gzipped": 11396
+    "bundled": 73611,
+    "minified": 52290,
+    "gzipped": 11443
   },
   "index.esm.js": {
-    "bundled": 67344,
-    "minified": 46316,
-    "gzipped": 10759,
+    "bundled": 67519,
+    "minified": 46452,
+    "gzipped": 10807,
     "treeshaked": {
       "rollup": {
-        "code": 36385,
+        "code": 36514,
         "import_statements": 1174
       },
       "webpack": {
-        "code": 40077
+        "code": 40219
       }
     }
   }

packages/dropdowns.next/.size-snapshot.json

@@ -6,7 +6,7 @@
  */
 
 import React, { HTMLAttributes, InputHTMLAttributes, forwardRef } from 'react';
-import { render } from 'garden-test-utils';
+import { render, renderRtl } from 'garden-test-utils';
 import userEvent from '@testing-library/user-event';
 import { PALETTE } from '@zendeskgarden/react-theming';
 import { IComboboxProps, ISelectedOption } from '../../types';
@@ -147,6 +147,18 @@ describe('Combobox', () => {
     const option = getByTestId('option');
 
     expect(input).toHaveAttribute('aria-activedescendant', option.id);
+    expect(option).toHaveStyleRule('box-shadow', expect.stringContaining('inset 3px'));
+  });
+
+  it('handles active index RTL as expected', () => {
+    const { getByTestId } = renderRtl(
+      <TestCombobox defaultExpanded defaultActiveIndex={0}>
+        <Option data-test-id="option" value="active" />
+      </TestCombobox>
+    );
+    const option = getByTestId('option');
+
+    expect(option).toHaveStyleRule('box-shadow', expect.stringContaining('inset -3px'));
   });
 
   it('applies `id` as expected', () => {

packages/dropdowns.next/src/elements/combobox/Combobox.spec.tsx

@@ -19,16 +19,18 @@ export interface IStyledOptionProps extends ThemeProps<DefaultTheme> {
 }
 
 const colorStyles = (props: IStyledOptionProps) => {
-  const activeBackgroundColor = getColor(
-    props.$type === 'danger' ? 'dangerHue' : 'primaryHue',
-    600,
-    props.theme,
-    0.08
-  );
-  const backgroundColor =
-    props.isActive && props.$type !== 'group' && props.$type !== 'header'
-      ? activeBackgroundColor
-      : undefined;
+  let backgroundColor;
+  let boxShadow;
+
+  if (props.isActive && props.$type !== 'group' && props.$type !== 'header') {
+    const hue = props.$type === 'danger' ? 'dangerHue' : 'primaryHue';
+
+    backgroundColor = getColor(hue, 600, props.theme, 0.08);
+    boxShadow = `inset ${
+      props.theme.rtl ? `-${props.theme.shadowWidths.md}` : props.theme.shadowWidths.md
+    } 0 ${getColor(hue, 600, props.theme)}`;
+  }
+
   const disabledForegroundColor = getColor('neutralHue', 400, props.theme);
   let foregroundColor = props.theme.colors.foreground;
 
@@ -39,6 +41,7 @@ const colorStyles = (props: IStyledOptionProps) => {
   }
 
   return css`
+    box-shadow: ${boxShadow};
     background-color: ${backgroundColor};
     color: ${foregroundColor};