Skip to content

Commit d93ac22

Browse files
jzempeljzempel
authored
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
1 parent ad78d8a commit d93ac22

File tree

15 files changed

+860
-543
lines changed

15 files changed

+860
-543
lines changed

‎.eslintrc.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
{
1515
"files": ["*.mjs"],
1616
"rules": {
17-
"node/no-unsupported-features/node-builtins": ["error", { "version": ">=18.0.0" }]
17+
"n/no-unsupported-features/node-builtins": ["error", { "version": ">=18.0.0" }]
1818
}
1919
},
2020
{

‎.lintstagedrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"jest --config=utils/test/jest.config.js --bail --findRelatedTests --passWithNoTests",
66
"prettier --write"
77
],
8-
"!(*CHANGELOG).{md,mdx}": [
8+
"!(*CHANGELOG|docs/changelogs/*).{md,mdx}": [
99
"markdownlint",
1010
"prettier --write"
1111
],

‎docs/changelogs/v8.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,37 @@
99
1010
_Note: Gaps between patch versions are faulty, broken or test releases._
1111

12+
## v8.75.1 (2024-04-04)
13+
14+
#### :bug: Bug Fix
15+
* `grid`
16+
* [#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))
17+
* `forms`
18+
* [#1778](https://github.com/zendeskgarden/react-components/pull/1778) fix(forms): `InputGroup` toggle button stacking ([@jzempel](https://github.com/jzempel))
19+
* `dropdowns.next`
20+
* [#1777](https://github.com/zendeskgarden/react-components/pull/1777) fix(dropdowns.next): prevent combobox `Option` and menu `Item` overflow ([@jzempel](https://github.com/jzempel))
21+
22+
#### :seedling: Internal
23+
* [#1772](https://github.com/zendeskgarden/react-components/pull/1772) chore(deps): update non-major shared dependencies ([@renovate[bot]](https://github.com/apps/renovate))
24+
* [#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))
25+
* [#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))
26+
* [#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))
27+
* [#1765](https://github.com/zendeskgarden/react-components/pull/1765) chore(deps): update non-major shared dependencies ([@renovate[bot]](https://github.com/apps/renovate))
28+
29+
## v8.75.0 (2024-03-28)
30+
31+
#### :rocket: New Feature
32+
* `.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`
33+
* [#1754](https://github.com/zendeskgarden/react-components/pull/1754) feat: adds an internal `getColorV8` utility ([@jzempel](https://github.com/jzempel))
34+
35+
#### :seedling: Internal
36+
* Other
37+
* [#1758](https://github.com/zendeskgarden/react-components/pull/1758) chore(deps): update non-major shared dependencies ([@renovate[bot]](https://github.com/apps/renovate))
38+
* [#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))
39+
* [#1751](https://github.com/zendeskgarden/react-components/pull/1751) chore(deps): bump follow-redirects ([@dependabot[bot]](https://github.com/apps/dependabot))
40+
* `.template`, `accordions`, `avatars`, `buttons`, `chrome`, `colorpickers`, `datepickers`, `drag-drop`, `dropdowns.next`, `dropdowns`, `forms`, `grid`, `loaders`, `modals`, `notifications`, `tables`, `tags`, `theming`, `tooltips`, `typography`
41+
* [#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))
42+
1243
## v8.74.3 (2024-03-07)
1344

1445
#### :bug: Bug Fix

‎package-lock.json‎

Lines changed: 537 additions & 375 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,11 @@
3030
],
3131
"devDependencies": {
3232
"@babel/cli": "7.24.1",
33-
"@babel/core": "7.24.3",
33+
"@babel/core": "7.24.4",
3434
"@babel/eslint-parser": "7.24.1",
3535
"@babel/plugin-transform-object-assign": "7.24.1",
3636
"@babel/plugin-transform-runtime": "7.24.3",
37-
"@babel/preset-env": "7.24.3",
37+
"@babel/preset-env": "7.24.4",
3838
"@babel/preset-react": "7.24.1",
3939
"@babel/preset-typescript": "7.24.1",
4040
"@brodybits/rollup-plugin-size-snapshot": "0.15.0",
@@ -43,27 +43,27 @@
4343
"@rollup/plugin-node-resolve": "15.2.3",
4444
"@rollup/plugin-replace": "5.0.5",
4545
"@storybook/addon-a11y": "7.6.17",
46-
"@storybook/addon-designs": "7.0.9",
46+
"@storybook/addon-designs": "8.0.0",
4747
"@storybook/addon-essentials": "7.6.17",
4848
"@storybook/react": "7.6.17",
4949
"@storybook/react-webpack5": "7.6.17",
5050
"@svgr/rollup": "8.1.0",
5151
"@svgr/webpack": "8.1.0",
52-
"@swc/core": "1.4.11",
52+
"@swc/core": "1.4.12",
5353
"@swc/jest": "0.2.36",
5454
"@testing-library/jest-dom": "6.4.2",
5555
"@testing-library/react": "14.2.2",
5656
"@testing-library/react-hooks": "8.0.1",
5757
"@testing-library/user-event": "14.5.2",
5858
"@types/jest": "29.5.12",
5959
"@types/prop-types": "15.7.12",
60-
"@types/react": "18.2.72",
61-
"@types/react-dom": "18.2.22",
60+
"@types/react": "18.2.74",
61+
"@types/react-dom": "18.2.24",
6262
"@types/styled-components": "5.1.34",
63-
"@typescript-eslint/eslint-plugin": "6.21.0",
64-
"@typescript-eslint/parser": "6.21.0",
63+
"@typescript-eslint/eslint-plugin": "7.5.0",
64+
"@typescript-eslint/parser": "7.5.0",
6565
"@zendeskgarden/css-bedrock": "9.1.1",
66-
"@zendeskgarden/eslint-config": "37.0.0",
66+
"@zendeskgarden/eslint-config": "39.0.1",
6767
"@zendeskgarden/scripts": "2.0.4",
6868
"@zendeskgarden/stylelint-config": "21.0.0",
6969
"@zendeskgarden/svg-icons": "7.0.0",
@@ -79,14 +79,14 @@
7979
"eslint-plugin-garden-local": "file:./utils/eslint",
8080
"eslint-plugin-jest": "27.9.0",
8181
"eslint-plugin-jsx-a11y": "6.8.0",
82-
"eslint-plugin-node": "11.1.0",
82+
"eslint-plugin-n": "16.6.2",
8383
"eslint-plugin-notice": "0.9.10",
8484
"eslint-plugin-react": "7.34.1",
8585
"eslint-plugin-react-hooks": "4.6.0",
8686
"execa": "8.0.1",
8787
"husky": "9.0.11",
8888
"identity-obj-proxy": "3.0.0",
89-
"inquirer": "9.2.16",
89+
"inquirer": "9.2.17",
9090
"jest": "29.7.0",
9191
"jest-environment-jsdom": "29.7.0",
9292
"jest-styled-components": "7.2.0",
@@ -106,7 +106,7 @@
106106
"react-is": "18.2.0",
107107
"react-test-renderer": "18.2.0",
108108
"regenerator-runtime": "0.14.1",
109-
"rollup": "4.13.0",
109+
"rollup": "4.14.0",
110110
"rollup-plugin-analyzer": "4.0.0",
111111
"rollup-plugin-cleanup": "3.2.1",
112112
"rollup-plugin-delete": "2.0.0",

‎packages/dropdowns/src/views/combobox/StyledOption.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export const StyledOption = styled.li.attrs({
8080
position: relative;
8181
transition: color 0.25s ease-in-out;
8282
cursor: ${props => (props.$type === 'group' || props.$type === 'header' ? 'default' : 'pointer')};
83-
word-wrap: break-word;
83+
overflow-wrap: anywhere;
8484
font-weight: ${props =>
8585
props.$type === 'header' || props.$type === 'previous'
8686
? props.theme.fontWeights.semibold

‎packages/forms/demo/inputGroup.stories.mdx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
2-
import { InputGroup, Input } from '@zendeskgarden/react-forms';
2+
import { InputGroup, Input, VALIDATION } from '@zendeskgarden/react-forms';
33
import { InputGroupStory } from './stories/InputGroupStory';
44
import { INPUT_GROUP_ITEMS as ITEMS } from './stories/data';
55
import { commonArgs, commonArgTypes, fieldSubcomponents } from './stories/common';
@@ -32,7 +32,14 @@ import README from '../README.md';
3232
isNeutral: { table: { category: 'Button' } },
3333
isPrimary: { control: 'boolean', table: { category: 'Button' } },
3434
isDanger: { control: 'boolean', table: { category: 'Button' } },
35-
readOnly: { control: 'boolean', table: { category: 'Input' } }
35+
isToggle: { control: 'boolean', name: 'ToggleButton', table: { category: 'Button' } },
36+
readOnly: { control: 'boolean', table: { category: 'Input' } },
37+
inputValidation: {
38+
control: 'radio',
39+
name: 'validation',
40+
options: VALIDATION,
41+
table: { category: 'Input' }
42+
}
3643
}}
3744
parameters={{
3845
design: {

‎packages/forms/demo/stories/InputGroupStory.tsx‎

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,46 @@
55
* found at http://www.apache.org/licenses/LICENSE-2.0.
66
*/
77

8-
import React from 'react';
8+
import React, { PropsWithChildren, useState } from 'react';
99
import { StoryFn } from '@storybook/react';
10-
import { IInputGroupProps, Input, InputGroup } from '@zendeskgarden/react-forms';
10+
import { IInputGroupProps, IInputProps, Input, InputGroup } from '@zendeskgarden/react-forms';
1111
import { FieldStory, IFieldArgs } from './FieldStory';
1212
import { IInputGroupItem } from './types';
13-
import { Button } from '@zendeskgarden/react-buttons';
13+
import { Button, IButtonProps, ToggleButton } from '@zendeskgarden/react-buttons';
14+
15+
interface IGroupButtonProps extends PropsWithChildren {
16+
disabled?: boolean;
17+
isNeutral: boolean;
18+
isPrimary?: boolean;
19+
isDanger?: boolean;
20+
isToggle?: boolean;
21+
size?: IButtonProps['size'];
22+
}
23+
24+
const GroupButton = ({ isToggle, ...props }: IGroupButtonProps) => {
25+
const [isPressed, setIsPressed] = useState(false);
26+
27+
return isToggle ? (
28+
<ToggleButton
29+
focusInset
30+
{...props}
31+
isPressed={isPressed}
32+
onClick={() => setIsPressed(!isPressed)}
33+
/>
34+
) : (
35+
<Button focusInset {...props} />
36+
);
37+
};
1438

1539
interface IArgs extends IInputGroupProps, IFieldArgs {
1640
items: IInputGroupItem[];
1741
disabled?: boolean;
1842
isNeutral: boolean;
1943
isPrimary?: boolean;
2044
isDanger?: boolean;
45+
isToggle?: boolean;
2146
readOnly?: boolean;
47+
inputValidation?: IInputProps['validation'];
2248
}
2349

2450
export const InputGroupStory: StoryFn<IArgs> = ({
@@ -35,7 +61,9 @@ export const InputGroupStory: StoryFn<IArgs> = ({
3561
isNeutral,
3662
isPrimary,
3763
isDanger,
64+
isToggle,
3865
readOnly,
66+
inputValidation,
3967
...args
4068
}) => (
4169
<FieldStory
@@ -52,24 +80,25 @@ export const InputGroupStory: StoryFn<IArgs> = ({
5280
<InputGroup {...args}>
5381
{items.map((item, index) =>
5482
item.isButton ? (
55-
<Button
83+
<GroupButton
5684
key={index}
57-
focusInset
5885
disabled={disabled}
5986
isNeutral={isNeutral}
6087
isPrimary={isPrimary}
6188
isDanger={isDanger}
89+
isToggle={isToggle}
6290
size={args.isCompact ? 'small' : undefined}
6391
>
6492
{item.text}
65-
</Button>
93+
</GroupButton>
6694
) : (
6795
<Input
6896
key={index}
6997
placeholder={item.text}
7098
readOnly={readOnly}
7199
disabled={disabled}
72100
isCompact={args.isCompact}
101+
validation={inputValidation}
73102
/>
74103
)
75104
)}

‎packages/forms/src/styled/input-group/StyledInputGroup.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,9 @@ const itemStyles = (props: ThemeProps<DefaultTheme>) => {
7676
& > ${StyledTextInput}:focus-visible,
7777
& > button:focus-visible,
7878
& > ${StyledTextInput}:active,
79-
& > button:active {
79+
& > button:active,
80+
& > button[aria-pressed='true'],
81+
& > button[aria-pressed='mixed'] {
8082
z-index: 1;
8183
}
8284

‎packages/grid/src/elements/pane/components/Splitter.tsx‎

Lines changed: 3 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,10 @@
55
* found at http://www.apache.org/licenses/LICENSE-2.0.
66
*/
77

8-
import React, {
9-
useContext,
10-
useEffect,
11-
forwardRef,
12-
useMemo,
13-
useState,
14-
useRef,
15-
HTMLAttributes
16-
} from 'react';
8+
import React, { useContext, useEffect, forwardRef, useMemo, useRef, HTMLAttributes } from 'react';
179
import { mergeRefs } from 'react-merge-refs';
1810
import PropTypes from 'prop-types';
1911
import { ThemeContext } from 'styled-components';
20-
import { composeEventHandlers } from '@zendeskgarden/container-utilities';
2112
import { useSplitter } from '@zendeskgarden/container-splitter';
2213
import { usePaneProviderContextData } from '../../../utils/usePaneProviderContext';
2314
import usePaneContext from '../../../utils/usePaneContext';
@@ -43,6 +34,7 @@ const orientationToDimension: Record<string, 'columns' | 'rows'> = {
4334
const SplitterComponent = forwardRef<HTMLDivElement, ISplitterProps>(
4435
(
4536
{
37+
children,
4638
providerId,
4739
layoutKey,
4840
min,
@@ -61,7 +53,6 @@ const SplitterComponent = forwardRef<HTMLDivElement, ISplitterProps>(
6153
const paneContext = usePaneContext();
6254
const themeContext = useContext(ThemeContext);
6355
const environment = useDocument(themeContext);
64-
const [isHovered, setIsHovered] = useState(false);
6556
const isRow = orientationToDimension[orientation!] === 'rows';
6657
const separatorRef = useRef<HTMLDivElement>(null);
6758

@@ -131,14 +122,6 @@ const SplitterComponent = forwardRef<HTMLDivElement, ISplitterProps>(
131122

132123
const size = isRow ? separatorRef.current?.clientWidth : separatorRef.current?.clientHeight;
133124

134-
const onMouseOver = useMemo(
135-
() =>
136-
composeEventHandlers(props.onMouseOver, (event: MouseEvent) =>
137-
setIsHovered(event.target === separatorRef.current)
138-
),
139-
[props.onMouseOver, separatorRef]
140-
);
141-
142125
return (
143126
<PaneSplitterContext.Provider
144127
value={useMemo(
@@ -147,14 +130,13 @@ const SplitterComponent = forwardRef<HTMLDivElement, ISplitterProps>(
147130
)}
148131
>
149132
<StyledPaneSplitter
150-
isHovered={isHovered}
151133
isFixed={isFixed}
152134
orientation={orientation}
153135
{...separatorProps}
154136
{...props}
155-
onMouseOver={onMouseOver}
156137
ref={mergeRefs([separatorRef, ref])}
157138
/>
139+
{children /* Splitter.Button is the only valid child */}
158140
</PaneSplitterContext.Provider>
159141
);
160142
}

0 commit comments

Comments
 (0)