chore(next): updates from main (#1781)

* chore(deps): update non-major shared dependencies (#1765) * chore(deps): update typescript-eslint monorepo to v7 (#1769) * chore(deps): update dependency @storybook/addon-designs to v8 (#1766) * chore(deps): update dependency @zendeskgarden/eslint-config to v39 (#1767) * fix(dropdowns.next): prevent combobox `Option` and menu `Item` overflow (#1777) * chore(deps): update non-major shared dependencies (#1772) * fix(forms): `InputGroup` toggle button stacking (#1778) * fix(grid): ensure `Pane.SplitterButton` is rendered as a sibling, rather than child, of `Pane.Splitter` (#1776) * chore(changelog): add v8.75.1
zendeskgarden · Apr 4, 2024 · d93ac22 · d93ac22
1 parent ad78d8a
commit d93ac22
Show file tree

Hide file tree

Showing 15 changed files with 860 additions and 543 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -14,7 +14,7 @@
     {
       "files": ["*.mjs"],
       "rules": {
-        "node/no-unsupported-features/node-builtins": ["error", { "version": ">=18.0.0" }]
+        "n/no-unsupported-features/node-builtins": ["error", { "version": ">=18.0.0" }]
       }
     },
     {

diff --git a/.lintstagedrc b/.lintstagedrc
@@ -5,7 +5,7 @@
     "jest --config=utils/test/jest.config.js --bail --findRelatedTests --passWithNoTests",
     "prettier --write"
   ],
-  "!(*CHANGELOG).{md,mdx}": [
+  "!(*CHANGELOG|docs/changelogs/*).{md,mdx}": [
     "markdownlint",
     "prettier --write"
   ],

diff --git a/docs/changelogs/v8.md b/docs/changelogs/v8.md
@@ -9,6 +9,37 @@
 
 _Note: Gaps between patch versions are faulty, broken or test releases._
 
+## v8.75.1 (2024-04-04)
+
+#### :bug: Bug Fix
+* `grid`
+  * [#1776](https://github.com/zendeskgarden/react-components/pull/1776) fix(grid): ensure `Pane.SplitterButton` is rendered as a sibling, rather than child, of `Pane.Splitter` ([@jzempel](https://github.com/jzempel))
+* `forms`
+  * [#1778](https://github.com/zendeskgarden/react-components/pull/1778) fix(forms): `InputGroup` toggle button stacking ([@jzempel](https://github.com/jzempel))
+* `dropdowns.next`
+  * [#1777](https://github.com/zendeskgarden/react-components/pull/1777) fix(dropdowns.next): prevent combobox `Option` and menu `Item` overflow ([@jzempel](https://github.com/jzempel))
+
+#### :seedling: Internal
+* [#1772](https://github.com/zendeskgarden/react-components/pull/1772) chore(deps): update non-major shared dependencies ([@renovate[bot]](https://github.com/apps/renovate))
+* [#1767](https://github.com/zendeskgarden/react-components/pull/1767) chore(deps): update dependency @zendeskgarden/eslint-config to v39 ([@renovate[bot]](https://github.com/apps/renovate))
+* [#1766](https://github.com/zendeskgarden/react-components/pull/1766) chore(deps): update dependency @storybook/addon-designs to v8 ([@renovate[bot]](https://github.com/apps/renovate))
+* [#1769](https://github.com/zendeskgarden/react-components/pull/1769) chore(deps): update typescript-eslint monorepo to v7 (major) ([@renovate[bot]](https://github.com/apps/renovate))
+* [#1765](https://github.com/zendeskgarden/react-components/pull/1765) chore(deps): update non-major shared dependencies ([@renovate[bot]](https://github.com/apps/renovate))
+
+## v8.75.0 (2024-03-28)
+
+#### :rocket: New Feature
+* `.template`, `accordions`, `avatars`, `breadcrumbs`, `buttons`, `chrome`, `colorpickers`, `datepickers`, `drag-drop`, `dropdowns.next`, `dropdowns`, `forms`, `grid`, `loaders`, `modals`, `notifications`, `pagination`, `tables`, `tabs`, `tags`, `theming`, `tooltips`, `typography`
+  * [#1754](https://github.com/zendeskgarden/react-components/pull/1754) feat: adds an internal `getColorV8` utility ([@jzempel](https://github.com/jzempel))
+
+#### :seedling: Internal
+* Other
+  * [#1758](https://github.com/zendeskgarden/react-components/pull/1758) chore(deps): update non-major shared dependencies ([@renovate[bot]](https://github.com/apps/renovate))
+  * [#1753](https://github.com/zendeskgarden/react-components/pull/1753) chore(deps-dev): bump webpack-dev-middleware from 6.1.1 to 6.1.2 ([@dependabot[bot]](https://github.com/apps/dependabot))
+  * [#1751](https://github.com/zendeskgarden/react-components/pull/1751) chore(deps): bump follow-redirects ([@dependabot[bot]](https://github.com/apps/dependabot))
+* `.template`, `accordions`, `avatars`, `buttons`, `chrome`, `colorpickers`, `datepickers`, `drag-drop`, `dropdowns.next`, `dropdowns`, `forms`, `grid`, `loaders`, `modals`, `notifications`, `tables`, `tags`, `theming`, `tooltips`, `typography`
+  * [#1756](https://github.com/zendeskgarden/react-components/pull/1756) chore: remove all `colors.background` and `colors.foreground` theme object references ([@jzempel](https://github.com/jzempel))
+
 ## v8.74.3 (2024-03-07)
 
 #### :bug: Bug Fix

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,11 +30,11 @@
   ],
   "devDependencies": {
     "@babel/cli": "7.24.1",
-    "@babel/core": "7.24.3",
+    "@babel/core": "7.24.4",
     "@babel/eslint-parser": "7.24.1",
     "@babel/plugin-transform-object-assign": "7.24.1",
     "@babel/plugin-transform-runtime": "7.24.3",
-    "@babel/preset-env": "7.24.3",
+    "@babel/preset-env": "7.24.4",
     "@babel/preset-react": "7.24.1",
     "@babel/preset-typescript": "7.24.1",
     "@brodybits/rollup-plugin-size-snapshot": "0.15.0",
@@ -43,27 +43,27 @@
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-replace": "5.0.5",
     "@storybook/addon-a11y": "7.6.17",
-    "@storybook/addon-designs": "7.0.9",
+    "@storybook/addon-designs": "8.0.0",
     "@storybook/addon-essentials": "7.6.17",
     "@storybook/react": "7.6.17",
     "@storybook/react-webpack5": "7.6.17",
     "@svgr/rollup": "8.1.0",
     "@svgr/webpack": "8.1.0",
-    "@swc/core": "1.4.11",
+    "@swc/core": "1.4.12",
     "@swc/jest": "0.2.36",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.2.2",
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.12",
     "@types/prop-types": "15.7.12",
-    "@types/react": "18.2.72",
-    "@types/react-dom": "18.2.22",
+    "@types/react": "18.2.74",
+    "@types/react-dom": "18.2.24",
     "@types/styled-components": "5.1.34",
-    "@typescript-eslint/eslint-plugin": "6.21.0",
-    "@typescript-eslint/parser": "6.21.0",
+    "@typescript-eslint/eslint-plugin": "7.5.0",
+    "@typescript-eslint/parser": "7.5.0",
     "@zendeskgarden/css-bedrock": "9.1.1",
-    "@zendeskgarden/eslint-config": "37.0.0",
+    "@zendeskgarden/eslint-config": "39.0.1",
     "@zendeskgarden/scripts": "2.0.4",
     "@zendeskgarden/stylelint-config": "21.0.0",
     "@zendeskgarden/svg-icons": "7.0.0",
@@ -79,14 +79,14 @@
     "eslint-plugin-garden-local": "file:./utils/eslint",
     "eslint-plugin-jest": "27.9.0",
     "eslint-plugin-jsx-a11y": "6.8.0",
-    "eslint-plugin-node": "11.1.0",
+    "eslint-plugin-n": "16.6.2",
     "eslint-plugin-notice": "0.9.10",
     "eslint-plugin-react": "7.34.1",
     "eslint-plugin-react-hooks": "4.6.0",
     "execa": "8.0.1",
     "husky": "9.0.11",
     "identity-obj-proxy": "3.0.0",
-    "inquirer": "9.2.16",
+    "inquirer": "9.2.17",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-styled-components": "7.2.0",
@@ -106,7 +106,7 @@
     "react-is": "18.2.0",
     "react-test-renderer": "18.2.0",
     "regenerator-runtime": "0.14.1",
-    "rollup": "4.13.0",
+    "rollup": "4.14.0",
     "rollup-plugin-analyzer": "4.0.0",
     "rollup-plugin-cleanup": "3.2.1",
     "rollup-plugin-delete": "2.0.0",

diff --git a/packages/dropdowns/src/views/combobox/StyledOption.ts b/packages/dropdowns/src/views/combobox/StyledOption.ts
@@ -80,7 +80,7 @@ export const StyledOption = styled.li.attrs({
   position: relative;
   transition: color 0.25s ease-in-out;
   cursor: ${props => (props.$type === 'group' || props.$type === 'header' ? 'default' : 'pointer')};
-  word-wrap: break-word;
+  overflow-wrap: anywhere;
   font-weight: ${props =>
     props.$type === 'header' || props.$type === 'previous'
       ? props.theme.fontWeights.semibold

diff --git a/packages/forms/demo/inputGroup.stories.mdx b/packages/forms/demo/inputGroup.stories.mdx
@@ -1,5 +1,5 @@
 import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
-import { InputGroup, Input } from '@zendeskgarden/react-forms';
+import { InputGroup, Input, VALIDATION } from '@zendeskgarden/react-forms';
 import { InputGroupStory } from './stories/InputGroupStory';
 import { INPUT_GROUP_ITEMS as ITEMS } from './stories/data';
 import { commonArgs, commonArgTypes, fieldSubcomponents } from './stories/common';
@@ -32,7 +32,14 @@ import README from '../README.md';
       isNeutral: { table: { category: 'Button' } },
       isPrimary: { control: 'boolean', table: { category: 'Button' } },
       isDanger: { control: 'boolean', table: { category: 'Button' } },
-      readOnly: { control: 'boolean', table: { category: 'Input' } }
+      isToggle: { control: 'boolean', name: 'ToggleButton', table: { category: 'Button' } },
+      readOnly: { control: 'boolean', table: { category: 'Input' } },
+      inputValidation: {
+        control: 'radio',
+        name: 'validation',
+        options: VALIDATION,
+        table: { category: 'Input' }
+      }
     }}
     parameters={{
       design: {

diff --git a/packages/forms/demo/stories/InputGroupStory.tsx b/packages/forms/demo/stories/InputGroupStory.tsx
@@ -5,20 +5,46 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React from 'react';
+import React, { PropsWithChildren, useState } from 'react';
 import { StoryFn } from '@storybook/react';
-import { IInputGroupProps, Input, InputGroup } from '@zendeskgarden/react-forms';
+import { IInputGroupProps, IInputProps, Input, InputGroup } from '@zendeskgarden/react-forms';
 import { FieldStory, IFieldArgs } from './FieldStory';
 import { IInputGroupItem } from './types';
-import { Button } from '@zendeskgarden/react-buttons';
+import { Button, IButtonProps, ToggleButton } from '@zendeskgarden/react-buttons';
+
+interface IGroupButtonProps extends PropsWithChildren {
+  disabled?: boolean;
+  isNeutral: boolean;
+  isPrimary?: boolean;
+  isDanger?: boolean;
+  isToggle?: boolean;
+  size?: IButtonProps['size'];
+}
+
+const GroupButton = ({ isToggle, ...props }: IGroupButtonProps) => {
+  const [isPressed, setIsPressed] = useState(false);
+
+  return isToggle ? (
+    <ToggleButton
+      focusInset
+      {...props}
+      isPressed={isPressed}
+      onClick={() => setIsPressed(!isPressed)}
+    />
+  ) : (
+    <Button focusInset {...props} />
+  );
+};
 
 interface IArgs extends IInputGroupProps, IFieldArgs {
   items: IInputGroupItem[];
   disabled?: boolean;
   isNeutral: boolean;
   isPrimary?: boolean;
   isDanger?: boolean;
+  isToggle?: boolean;
   readOnly?: boolean;
+  inputValidation?: IInputProps['validation'];
 }
 
 export const InputGroupStory: StoryFn<IArgs> = ({
@@ -35,7 +61,9 @@ export const InputGroupStory: StoryFn<IArgs> = ({
   isNeutral,
   isPrimary,
   isDanger,
+  isToggle,
   readOnly,
+  inputValidation,
   ...args
 }) => (
   <FieldStory
@@ -52,24 +80,25 @@ export const InputGroupStory: StoryFn<IArgs> = ({
     <InputGroup {...args}>
       {items.map((item, index) =>
         item.isButton ? (
-          <Button
+          <GroupButton
             key={index}
-            focusInset
             disabled={disabled}
             isNeutral={isNeutral}
             isPrimary={isPrimary}
             isDanger={isDanger}
+            isToggle={isToggle}
             size={args.isCompact ? 'small' : undefined}
           >
             {item.text}
-          </Button>
+          </GroupButton>
         ) : (
           <Input
             key={index}
             placeholder={item.text}
             readOnly={readOnly}
             disabled={disabled}
             isCompact={args.isCompact}
+            validation={inputValidation}
           />
         )
       )}

diff --git a/packages/forms/src/styled/input-group/StyledInputGroup.ts b/packages/forms/src/styled/input-group/StyledInputGroup.ts
@@ -76,7 +76,9 @@ const itemStyles = (props: ThemeProps<DefaultTheme>) => {
     & > ${StyledTextInput}:focus-visible,
     & > button:focus-visible,
     & > ${StyledTextInput}:active,
-    & > button:active {
+    & > button:active,
+    & > button[aria-pressed='true'],
+    & > button[aria-pressed='mixed'] {
       z-index: 1;
     }
 

diff --git a/packages/grid/src/elements/pane/components/Splitter.tsx b/packages/grid/src/elements/pane/components/Splitter.tsx
@@ -5,19 +5,10 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, {
-  useContext,
-  useEffect,
-  forwardRef,
-  useMemo,
-  useState,
-  useRef,
-  HTMLAttributes
-} from 'react';
+import React, { useContext, useEffect, forwardRef, useMemo, useRef, HTMLAttributes } from 'react';
 import { mergeRefs } from 'react-merge-refs';
 import PropTypes from 'prop-types';
 import { ThemeContext } from 'styled-components';
-import { composeEventHandlers } from '@zendeskgarden/container-utilities';
 import { useSplitter } from '@zendeskgarden/container-splitter';
 import { usePaneProviderContextData } from '../../../utils/usePaneProviderContext';
 import usePaneContext from '../../../utils/usePaneContext';
@@ -43,6 +34,7 @@ const orientationToDimension: Record<string, 'columns' | 'rows'> = {
 const SplitterComponent = forwardRef<HTMLDivElement, ISplitterProps>(
   (
     {
+      children,
       providerId,
       layoutKey,
       min,
@@ -61,7 +53,6 @@ const SplitterComponent = forwardRef<HTMLDivElement, ISplitterProps>(
     const paneContext = usePaneContext();
     const themeContext = useContext(ThemeContext);
     const environment = useDocument(themeContext);
-    const [isHovered, setIsHovered] = useState(false);
     const isRow = orientationToDimension[orientation!] === 'rows';
     const separatorRef = useRef<HTMLDivElement>(null);
 
@@ -131,14 +122,6 @@ const SplitterComponent = forwardRef<HTMLDivElement, ISplitterProps>(
 
     const size = isRow ? separatorRef.current?.clientWidth : separatorRef.current?.clientHeight;
 
-    const onMouseOver = useMemo(
-      () =>
-        composeEventHandlers(props.onMouseOver, (event: MouseEvent) =>
-          setIsHovered(event.target === separatorRef.current)
-        ),
-      [props.onMouseOver, separatorRef]
-    );
-
     return (
       <PaneSplitterContext.Provider
         value={useMemo(
@@ -147,14 +130,13 @@ const SplitterComponent = forwardRef<HTMLDivElement, ISplitterProps>(
         )}
       >
         <StyledPaneSplitter
-          isHovered={isHovered}
           isFixed={isFixed}
           orientation={orientation}
           {...separatorProps}
           {...props}
-          onMouseOver={onMouseOver}
           ref={mergeRefs([separatorRef, ref])}
         />
+        {children /* Splitter.Button is the only valid child */}
       </PaneSplitterContext.Provider>
     );
   }

diff --git a/packages/grid/src/elements/pane/components/SplitterButton.tsx b/packages/grid/src/elements/pane/components/SplitterButton.tsx
@@ -8,7 +8,7 @@
 import React, { forwardRef, useCallback } from 'react';
 import { Tooltip } from '@zendeskgarden/react-tooltips';
 import { composeEventHandlers } from '@zendeskgarden/container-utilities';
-import { StyledPaneSplitterButton } from '../../../styled';
+import { StyledPaneSplitterButton, StyledPaneSplitterButtonContainer } from '../../../styled';
 import { ISplitterButtonProps } from '../../../types';
 import usePaneSplitterContext from '../../../utils/usePaneSplitterContext';
 import { usePaneProviderContextData } from '../../../utils/usePaneProviderContext';
@@ -62,20 +62,29 @@ const SplitterButtonComponent = forwardRef<HTMLButtonElement, ISplitterButtonPro
     );
 
     return (
-      <Tooltip content={label} style={{ cursor: 'default' }} onMouseDown={e => e.stopPropagation()}>
-        <StyledPaneSplitterButton
-          aria-label={label}
-          {...props}
-          placement={placement!}
-          orientation={orientation!}
-          isRotated={isMin}
-          splitterSize={size || 0}
-          ref={ref}
-          onClick={onClick}
-          onKeyDown={onKeyDown}
-          onMouseDown={onMouseDown}
-        />
-      </Tooltip>
+      <StyledPaneSplitterButtonContainer
+        orientation={orientation!}
+        placement={placement!}
+        splitterSize={size || 0}
+      >
+        <Tooltip
+          content={label}
+          zIndex={2}
+          style={{ cursor: 'default' }}
+          onMouseDown={e => e.stopPropagation()}
+        >
+          <StyledPaneSplitterButton
+            aria-label={label}
+            {...props}
+            orientation={orientation!}
+            isRotated={isMin}
+            ref={ref}
+            onClick={onClick}
+            onKeyDown={onKeyDown}
+            onMouseDown={onMouseDown}
+          />
+        </Tooltip>
+      </StyledPaneSplitterButtonContainer>
     );
   }
 );

diff --git a/packages/grid/src/styled/index.ts b/packages/grid/src/styled/index.ts
@@ -13,3 +13,4 @@ export * from './pane/StyledPane';
 export * from './pane/StyledPaneContent';
 export * from './pane/StyledPaneSplitter';
 export * from './pane/StyledPaneSplitterButton';
+export * from './pane/StyledPaneSplitterButtonContainer';