diff --git a/.changeset/dull-geese-hang.md b/.changeset/dull-geese-hang.md new file mode 100644 index 0000000000..3601d0ae78 --- /dev/null +++ b/.changeset/dull-geese-hang.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/card': patch +--- + +Add children to Card type diff --git a/.changeset/eleven-cars-obey.md b/.changeset/eleven-cars-obey.md new file mode 100644 index 0000000000..8b2c6711ab --- /dev/null +++ b/.changeset/eleven-cars-obey.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/text-input': patch +--- + +Fixes props such that component now accepts a properly typed `ref` diff --git a/.changeset/fine-phones-marry.md b/.changeset/fine-phones-marry.md new file mode 100644 index 0000000000..7c80273a36 --- /dev/null +++ b/.changeset/fine-phones-marry.md @@ -0,0 +1,5 @@ +--- +'@lg-charts/chart-card': minor +--- + +Supports `React.ReactNode` as type for `title` prop diff --git a/.changeset/funny-fans-punch.md b/.changeset/funny-fans-punch.md new file mode 100644 index 0000000000..f286552c46 --- /dev/null +++ b/.changeset/funny-fans-punch.md @@ -0,0 +1,5 @@ +--- +'@lg-chat/message-feedback': minor +--- + +Adds `disabledSend` prop to disable submit button diff --git a/.changeset/light-crabs-stay.md b/.changeset/light-crabs-stay.md new file mode 100644 index 0000000000..0ffe6bbee2 --- /dev/null +++ b/.changeset/light-crabs-stay.md @@ -0,0 +1,5 @@ +--- +'@lg-charts/core': minor +--- + +Updates `ChartHeader` component's `title` prop to accept a `React.ReactNode` rather than a `string` diff --git a/.changeset/soft-horses-fail.md b/.changeset/soft-horses-fail.md new file mode 100644 index 0000000000..fd4e34a26d --- /dev/null +++ b/.changeset/soft-horses-fail.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/banner': minor +--- + +Exports `{ Banner }` as named export diff --git a/.changeset/spotty-socks-leave.md b/.changeset/spotty-socks-leave.md new file mode 100644 index 0000000000..5032bd5227 --- /dev/null +++ b/.changeset/spotty-socks-leave.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/input-option': minor +--- + +Changes wedge y-axsis padding from `8px` to `4px` diff --git a/.changeset/tidy-sloths-nail.md b/.changeset/tidy-sloths-nail.md deleted file mode 100644 index 9c3c530673..0000000000 --- a/.changeset/tidy-sloths-nail.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@lg-chat/message-prompts': minor ---- - -- [LG-5438](https://jira.mongodb.org/browse/LG-5438) add `onClickRefresh` prop which conditionally renders refresh button -- [LG-5440](https://jira.mongodb.org/browse/LG-5440) add `enableHideOnSelect` prop which causes fade/shrink transition when a prompt is selected. This is set to `true` by default. diff --git a/.changeset/upset-seals-leave.md b/.changeset/upset-seals-leave.md new file mode 100644 index 0000000000..3b2fe8ac08 --- /dev/null +++ b/.changeset/upset-seals-leave.md @@ -0,0 +1,5 @@ +--- +'@lg-tools/codemods': patch +--- + +Adds `banner` to list of code-mod-able components for "named-exports" codemod diff --git a/.changeset/useControlled-inferred-types.md b/.changeset/useControlled-inferred-types.md deleted file mode 100644 index 824c233cfc..0000000000 --- a/.changeset/useControlled-inferred-types.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@leafygreen-ui/hooks': patch ---- - -The type of the returned `value` is now inferred from the types of the parameters in `useControlled` diff --git a/charts/chart-card/README.md b/charts/chart-card/README.md index 3a6270763f..bb10b3f400 100644 --- a/charts/chart-card/README.md +++ b/charts/chart-card/README.md @@ -38,7 +38,7 @@ import { Chart } from '@lg-charts/core'; | Name | Description | Type | Default | | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------- | -| `title` | The title to display in the chart header. | `string` | | +| `title` | The title to display in the chart header. | `React.ReactNode` | | | `defaultOpen` _(optional)_ | Defines the default state of the card. | `boolean` | `true` | | `isOpen` _(optional)_ | Forces the card state. | `boolean` | | | `onToggleButtonClick` _(optional)_ | Callback fired when a user clicks the open/close toggle button. | `(event: MouseEventHandler) => void` | | diff --git a/charts/chart-card/src/ChartCard/ChartCard.types.ts b/charts/chart-card/src/ChartCard/ChartCard.types.ts index 0e703e71c6..e52452074c 100644 --- a/charts/chart-card/src/ChartCard/ChartCard.types.ts +++ b/charts/chart-card/src/ChartCard/ChartCard.types.ts @@ -13,7 +13,7 @@ export interface ChartCardProps /** * The title of the card */ - title: string; + title: React.ReactNode; /** * Defines the default state of the card diff --git a/charts/core/README.md b/charts/core/README.md index 3d35168ca3..b3f3d49f0e 100644 --- a/charts/core/README.md +++ b/charts/core/README.md @@ -122,7 +122,7 @@ Component for rendering a header in a chart. | Name | Description | Type | Default | | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ------- | -| `title` | The title to display in the chart header. | `string` | | +| `title` | The title to display in the chart header. | `React.ReactNode` | | | `titleIcon` _(optional)_ | Content rendered immediately right of the title. Useful for quick contextual tooltips or other information concerning the title. | `React.ReactNode` | | | `showDivider` _(optional)_ | When true, renders a dividing line on top of header. Useful when stacking charts, such as in a `ChartGroup`. | `boolean` | | | `headerContent` _(optional)_ | Content that will be rendered to the right of the title. Useful for adding components such as `IconButton`'s that control functionality in the chart. | `React.ReactNode` | | diff --git a/charts/core/src/ChartContext/ChartContext.spec.tsx b/charts/core/src/ChartContext/ChartContext.spec.tsx index 4184dffc24..d8491d9514 100644 --- a/charts/core/src/ChartContext/ChartContext.spec.tsx +++ b/charts/core/src/ChartContext/ChartContext.spec.tsx @@ -3,19 +3,40 @@ import { render } from '@testing-library/react'; import { renderHook } from '@leafygreen-ui/testing-lib'; +import { ChartInstance } from '../Chart/hooks/useChart.types'; + import { ChartContext, ChartProvider, useChartContext } from './ChartContext'; -const chartOptions = {}; -const updateChartOptions = jest.fn(); -const addChartSeries = jest.fn(); +const mockChartInstance: ChartInstance = { + id: 'test-chart', + ref: jest.fn(), + enableGroupTooltipSync: false, + state: undefined, + isChartHovered: false, + setTooltipMounted: jest.fn(), + tooltipPinned: false, + // EChartsInstance methods + _getEChartsInstance: jest.fn(), + _getOptions: jest.fn(), + addSeries: jest.fn(), + addToGroup: jest.fn(), + enableZoom: jest.fn(), + error: null, + hideTooltip: jest.fn(), + off: jest.fn(), + on: jest.fn(), + ready: true, + removeFromGroup: jest.fn(), + removeSeries: jest.fn(), + resize: jest.fn(), + setupZoomSelect: jest.fn(), + showTooltip: jest.fn(), + updateOptions: jest.fn(), +}; const ChartProviderMock = ({ children }: PropsWithChildren<{}>) => { return ( - + {children} ); @@ -25,13 +46,7 @@ describe('lg-chart/core/ChartContext', () => { describe('ChartProvider', () => { test('renders children', async () => { const { getByTestId } = render( - {}} - addChartSeries={() => {}} - removeChartSeries={() => {}} - > +
, ); @@ -46,12 +61,10 @@ describe('lg-chart/core/ChartContext', () => { const { result } = renderHook(useChartContext, { wrapper: ChartProviderMock, }); - // @ts-expect-error - chartOptions is not defined in the ChartContextType - const { chartOptions, updateChartOptions, addChartSeries } = - result.current; - expect(chartOptions).toBe(chartOptions); - expect(updateChartOptions).toBe(updateChartOptions); - expect(addChartSeries).toBe(addChartSeries); + const { chart } = result.current; + expect(chart).toBe(mockChartInstance); + expect(chart.id).toBe('test-chart'); + expect(chart.enableGroupTooltipSync).toBe(false); }); }); }); diff --git a/charts/core/src/ChartHeader/ChartHeader.types.ts b/charts/core/src/ChartHeader/ChartHeader.types.ts index f79b4c43c8..112ac3958d 100644 --- a/charts/core/src/ChartHeader/ChartHeader.types.ts +++ b/charts/core/src/ChartHeader/ChartHeader.types.ts @@ -5,7 +5,7 @@ export interface ChartHeaderProps /** * The title of the chart */ - title: string; + title: React.ReactNode; /** * Icon to be rendered directly to the right of the title. diff --git a/chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.spec.tsx b/chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.spec.tsx index 836855de10..da915c906d 100644 --- a/chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.spec.tsx +++ b/chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.spec.tsx @@ -90,6 +90,15 @@ describe('packages/inline-message-feedback', () => { expect(cancelButton).toHaveAttribute('aria-disabled', 'true'); } }); + + test('disables form elements when disabledSend prop is true', () => { + const { container } = render( + , + ); + + const submitButton = container.querySelector('button[type="submit"]'); + expect(submitButton).toHaveAttribute('aria-disabled', 'true'); + }); }); describe('error state', () => { diff --git a/chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.tsx b/chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.tsx index e8d9cbb99b..418e425582 100644 --- a/chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.tsx +++ b/chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.tsx @@ -12,7 +12,8 @@ import { Variant, } from '@lg-chat/leafygreen-chat-provider'; -import Button, { +import { + Button, Size as ButtonSize, Variant as ButtonVariant, } from '@leafygreen-ui/button'; @@ -52,6 +53,7 @@ export const InlineMessageFeedback = forwardRef( submittedMessage = 'Submitted! Thanks for your feedback.', onSubmit: onSubmitProp, darkMode: darkModeProp, + disabledSend = false, onClose, textareaProps, errorMessage = 'Oops, please try again.', @@ -170,7 +172,9 @@ export const InlineMessageFeedback = forwardRef( type="submit" variant={ButtonVariant[isCompact ? 'Default' : 'Primary']} size={ButtonSize[isCompact ? 'Default' : 'Small']} - disabled={!!hasEmptyTextarea || isSubmitting} + disabled={ + !!hasEmptyTextarea || isSubmitting || disabledSend + } {...submitButtonProps} > {submitButtonText} diff --git a/chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.types.ts b/chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.types.ts index 1edec63751..8a1917b3b5 100644 --- a/chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.types.ts +++ b/chat/message-feedback/src/InlineMessageFeedback/InlineMessageFeedback.types.ts @@ -101,4 +101,10 @@ export type InlineMessageFeedbackProps = Required< * This is mainly for internal use as most instances of InlineMessageFeedback should be closed solely by onCancel. */ onClose?: MouseEventHandler; + + /** + * Whether the submit button should be disabled + * @default false + */ + disabledSend?: boolean; }; diff --git a/chat/message-prompts/CHANGELOG.md b/chat/message-prompts/CHANGELOG.md index c404d325c1..b3c5065d44 100644 --- a/chat/message-prompts/CHANGELOG.md +++ b/chat/message-prompts/CHANGELOG.md @@ -1,5 +1,12 @@ # @lg-chat/message-prompts +## 4.1.0 + +### Minor Changes + +- 9c44076: - [LG-5438](https://jira.mongodb.org/browse/LG-5438) add `onClickRefresh` prop which conditionally renders refresh button + - [LG-5440](https://jira.mongodb.org/browse/LG-5440) add `enableHideOnSelect` prop which causes fade/shrink transition when a prompt is selected. This is set to `true` by default. + ## 4.0.6 ### Patch Changes diff --git a/chat/message-prompts/package.json b/chat/message-prompts/package.json index c4663364e0..cf230becf7 100644 --- a/chat/message-prompts/package.json +++ b/chat/message-prompts/package.json @@ -1,6 +1,6 @@ { "name": "@lg-chat/message-prompts", - "version": "4.0.6", + "version": "4.1.0", "description": "LeafyGreen UI Kit Message Prompts", "main": "./dist/umd/index.js", "module": "./dist/esm/index.js", diff --git a/deprecated-packages/box/src/Box.spec.tsx b/deprecated-packages/box/src/Box.spec.tsx index ff5839f131..650c9e1a90 100644 --- a/deprecated-packages/box/src/Box.spec.tsx +++ b/deprecated-packages/box/src/Box.spec.tsx @@ -1,3 +1,4 @@ +/* eslint-disable jest/expect-expect */ import React from 'react'; import { cleanup, render } from '@testing-library/react'; import { axe } from 'jest-axe'; diff --git a/packages/banner/src/index.ts b/packages/banner/src/index.ts index 6b64a1d321..553f12622a 100644 --- a/packages/banner/src/index.ts +++ b/packages/banner/src/index.ts @@ -1,2 +1,9 @@ -export { bannerChildrenContainerClassName, default } from './Banner'; +export { + bannerChildrenContainerClassName, + /** + * @deprecated Use named export `{ Banner }` instead. See [named-exports codemod documentation](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#named-exports) for migration assistance. + */ + default, +} from './Banner'; +export { default as Banner } from './Banner'; export { type BannerProps, Variant } from './shared.types'; diff --git a/packages/card/README.md b/packages/card/README.md index 0d0330130a..adf7f6801a 100644 --- a/packages/card/README.md +++ b/packages/card/README.md @@ -40,6 +40,7 @@ Card is a styled wrapper for the Box component. Any properties you would pass to | Prop | Type | Description | Default | | -------------- | ----------------------- | ----------------------------------------------------------------- | ----------------------------------------------------------------------- | +| `children` | `React.ReactNode` | Content rendered inside of the `` component | | | `className` | `string` | Adds a className to the class attribute | | | `contentStyle` | `'none'`, `'clickable'` | Whether the card should display as a visually clickable element. | `'clickable'` when a valid `onClick` handler or `href` link is provided | | `darkMode` | `boolean` | Determines whether or not the component will appear in dark mode. | `false` | diff --git a/packages/card/src/Card/types.ts b/packages/card/src/Card/types.ts index 9f942810c3..f3432b2092 100644 --- a/packages/card/src/Card/types.ts +++ b/packages/card/src/Card/types.ts @@ -12,6 +12,11 @@ export const ContentStyle = { export type ContentStyle = (typeof ContentStyle)[keyof typeof ContentStyle]; export interface InternalCardProps extends DarkModeProps { + /** + * The content that will appear inside of the `` component. + */ + children?: React.ReactNode; + /** * Determines whether the Card should be styled as clickable. * diff --git a/packages/confirmation-modal/CHANGELOG.md b/packages/confirmation-modal/CHANGELOG.md index a2a58b1eae..7259eff981 100644 --- a/packages/confirmation-modal/CHANGELOG.md +++ b/packages/confirmation-modal/CHANGELOG.md @@ -1,5 +1,11 @@ # @leafygreen-ui/confirmation-modal +## 10.1.1 + +### Patch Changes + +- fb93ebb: Update `@leafygreen-ui/modal` dependency to use version 20.1.1 + ## 10.1.0 ### Minor Changes diff --git a/packages/confirmation-modal/package.json b/packages/confirmation-modal/package.json index d16c6f7e41..262c4ed8bd 100644 --- a/packages/confirmation-modal/package.json +++ b/packages/confirmation-modal/package.json @@ -1,6 +1,6 @@ { "name": "@leafygreen-ui/confirmation-modal", - "version": "10.1.0", + "version": "10.1.1", "description": "leafyGreen UI Kit Confirmation Modal", "main": "./dist/umd/index.js", "module": "./dist/esm/index.js", diff --git a/packages/hooks/CHANGELOG.md b/packages/hooks/CHANGELOG.md index cef519429a..f88b953b4b 100644 --- a/packages/hooks/CHANGELOG.md +++ b/packages/hooks/CHANGELOG.md @@ -1,5 +1,11 @@ # @leafygreen-ui/hooks +## 9.2.1 + +### Patch Changes + +- bab8e2a: The type of the returned `value` is now inferred from the types of the parameters in `useControlled` + ## 9.2.0 ### Minor Changes diff --git a/packages/hooks/package.json b/packages/hooks/package.json index 6da4b096fb..9dc284cd0e 100644 --- a/packages/hooks/package.json +++ b/packages/hooks/package.json @@ -1,6 +1,6 @@ { "name": "@leafygreen-ui/hooks", - "version": "9.2.0", + "version": "9.2.1", "description": "LeafyGreen UI Kit Custom Hooks", "main": "./dist/umd/index.js", "module": "./dist/esm/index.js", diff --git a/packages/input-option/src/InputOption/InputOption.style.ts b/packages/input-option/src/InputOption/InputOption.style.ts index c4176647c3..1e770247d3 100644 --- a/packages/input-option/src/InputOption/InputOption.style.ts +++ b/packages/input-option/src/InputOption/InputOption.style.ts @@ -89,7 +89,7 @@ export const getInputOptionStyles = ({ /** in px */ const wedgeWidth = spacing[100]; /** in px */ -const wedgePaddingY = spacing[200]; +const wedgePaddingY = spacing[100]; export const getInputOptionWedge = ({ disabled, diff --git a/packages/marketing-modal/CHANGELOG.md b/packages/marketing-modal/CHANGELOG.md index 5749627aea..b9abff9d9c 100644 --- a/packages/marketing-modal/CHANGELOG.md +++ b/packages/marketing-modal/CHANGELOG.md @@ -1,5 +1,11 @@ # @leafygreen-ui/marketing-modal +## 8.1.1 + +### Patch Changes + +- fb93ebb: Update `@leafygreen-ui/modal` dependency to use version 20.1.1 + ## 8.1.0 ### Minor Changes diff --git a/packages/marketing-modal/package.json b/packages/marketing-modal/package.json index 1fe8f863d3..1e2d95cd27 100644 --- a/packages/marketing-modal/package.json +++ b/packages/marketing-modal/package.json @@ -1,6 +1,6 @@ { "name": "@leafygreen-ui/marketing-modal", - "version": "8.1.0", + "version": "8.1.1", "description": "leafyGreen UI Kit Marketing Modal", "main": "./dist/umd/index.js", "module": "./dist/esm/index.js", diff --git a/packages/text-area/src/TextArea/TextArea.spec.tsx b/packages/text-area/src/TextArea/TextArea.spec.tsx index 4f981577dc..23a96caf33 100644 --- a/packages/text-area/src/TextArea/TextArea.spec.tsx +++ b/packages/text-area/src/TextArea/TextArea.spec.tsx @@ -182,9 +182,14 @@ describe('packages/text-area', () => { }); }); - /* eslint-disable jest/no-disabled-tests */ - describe.skip('types behave as expected', () => { - test('TextArea throws error when neither aria-labelledby or label is supplied', () => { + describe('types behave as expected', () => { + test('TextArea takes a ref for a HTMLTextAreaElement', () => { + const ref = React.createRef(); + render(