From 9ee209ba03f5d6144ba581ef53812b8d4ea95d7c Mon Sep 17 00:00:00 2001 From: Riddhi Bansal <41935566+riddhybansal@users.noreply.github.com> Date: Thu, 12 Sep 2024 20:23:22 +0530 Subject: [PATCH 1/7] Added typescript types to fluid search and its skeleton state (#17383) * fix: rename js files to tsx * fix: added typescript types to FluidSearch --------- Co-authored-by: Alison Joseph Co-authored-by: Gururaj J <89023023+Gururajj77@users.noreply.github.com> Co-authored-by: Taylor Jones --- ...h.Skeleton.js => FluidSearch.Skeleton.tsx} | 15 +++- .../{FluidSearch.js => FluidSearch.tsx} | 70 +++++++++++++++++-- .../FluidSearch/{index.js => index.tsx} | 4 +- 3 files changed, 81 insertions(+), 8 deletions(-) rename packages/react/src/components/FluidSearch/{FluidSearch.Skeleton.js => FluidSearch.Skeleton.tsx} (79%) rename packages/react/src/components/FluidSearch/{FluidSearch.js => FluidSearch.tsx} (57%) rename packages/react/src/components/FluidSearch/{index.js => index.tsx} (63%) diff --git a/packages/react/src/components/FluidSearch/FluidSearch.Skeleton.js b/packages/react/src/components/FluidSearch/FluidSearch.Skeleton.tsx similarity index 79% rename from packages/react/src/components/FluidSearch/FluidSearch.Skeleton.js rename to packages/react/src/components/FluidSearch/FluidSearch.Skeleton.tsx index 7661dee8d15b..19e3b3948958 100644 --- a/packages/react/src/components/FluidSearch/FluidSearch.Skeleton.js +++ b/packages/react/src/components/FluidSearch/FluidSearch.Skeleton.tsx @@ -11,9 +11,18 @@ import classnames from 'classnames'; import { usePrefix } from '../../internal/usePrefix'; import { FormContext } from '../FluidForm/FormContext'; -function FluidSearchSkeleton({ className, ...other }) { - const prefix = usePrefix(); +export interface FluidSearchSkeletonProps { + /** + * Specify an optional className to be applied to the outer FluidForm wrapper + */ + className?: string; +} +const FluidSearchSkeleton: React.FC = ({ + className, + ...other +}) => { + const prefix = usePrefix(); return (
); -} +}; FluidSearchSkeleton.propTypes = { /** diff --git a/packages/react/src/components/FluidSearch/FluidSearch.js b/packages/react/src/components/FluidSearch/FluidSearch.tsx similarity index 57% rename from packages/react/src/components/FluidSearch/FluidSearch.js rename to packages/react/src/components/FluidSearch/FluidSearch.tsx index 18c209a5ba8f..9e81ebc10e01 100644 --- a/packages/react/src/components/FluidSearch/FluidSearch.js +++ b/packages/react/src/components/FluidSearch/FluidSearch.tsx @@ -12,10 +12,72 @@ import Search from '../Search'; import { usePrefix } from '../../internal/usePrefix'; import { FormContext } from '../FluidForm/FormContext'; -const FluidSearch = React.forwardRef(function FluidSearch( - { className, ...other }, - ref -) { +export interface FluidSearchProps { + /** + * Specify an optional value for the `autocomplete` property on the underlying + * ``, defaults to "off" + */ + autoComplete?: string; + /** + * Specify an optional className to be applied to the container node + */ + className?: string; + /** + * Specify a label to be read by screen readers on the "close" button + */ + closeButtonLabelText?: string; + /** + * Optionally provide the default value of the `` + */ + defaultValue?: string | number; + /** + * Specify whether the `` should be disabled + */ + disabled?: boolean; + /** + * Specify a custom `id` for the input + */ + id?: string; + /** + * Provide the label text for the Search icon + */ + labelText: React.ReactNode; + /** + * Optional callback called when the search value changes. + */ + onChange?(e: { target: HTMLInputElement; type: 'change' }): void; + /** + * Optional callback called when the search value is cleared. + */ + onClear?: () => void; + /** + * Provide a handler that is invoked on the key down event for the input + */ + onKeyDown?: React.KeyboardEventHandler; + /** + * Provide an optional placeholder text for the Search. + * Note: if the label and placeholder differ, + * VoiceOver on Mac will read both + */ + placeholder?: string; + /** + * Specify the role for the underlying ``, defaults to `searchbox` + */ + role?: string; + /** + * Optional prop to specify the type of the `` + */ + type?: string; + /** + * Specify the value of the `` + */ + value?: string | number; +} + +const FluidSearch: React.FC = React.forwardRef< + HTMLInputElement, + FluidSearchProps +>(function FluidSearch({ className, ...other }, ref) { const prefix = usePrefix(); const classNames = classnames(`${prefix}--search--fluid`, className); diff --git a/packages/react/src/components/FluidSearch/index.js b/packages/react/src/components/FluidSearch/index.tsx similarity index 63% rename from packages/react/src/components/FluidSearch/index.js rename to packages/react/src/components/FluidSearch/index.tsx index a2d1ed73877d..1898ea9253b4 100644 --- a/packages/react/src/components/FluidSearch/index.js +++ b/packages/react/src/components/FluidSearch/index.tsx @@ -5,6 +5,8 @@ * LICENSE file in the root directory of this source tree. */ +import { FluidSearchProps } from './FluidSearch'; +import { FluidSearchSkeletonProps } from './FluidSearch.Skeleton'; export { default, default as FluidSearch } from './FluidSearch'; - +export { type FluidSearchProps, type FluidSearchSkeletonProps }; export { default as FluidSearchSkeleton } from './FluidSearch.Skeleton'; From c49b590297411af79f17be770258a531674a86e4 Mon Sep 17 00:00:00 2001 From: Riddhi Bansal <41935566+riddhybansal@users.noreply.github.com> Date: Thu, 12 Sep 2024 20:25:49 +0530 Subject: [PATCH 2/7] Add typescript types to fluid number input (#17373) * fix: rename js files to tsx files * fix: added typescript types to fluid numberinput and skeleton --------- Co-authored-by: Gururaj J <89023023+Gururajj77@users.noreply.github.com> Co-authored-by: Taylor Jones --- ...leton.js => FluidNumberInput.Skeleton.tsx} | 15 ++- ...uidNumberInput.js => FluidNumberInput.tsx} | 113 +++++++++++++++++- .../FluidNumberInput/{index.js => index.tsx} | 4 +- 3 files changed, 124 insertions(+), 8 deletions(-) rename packages/react/src/components/FluidNumberInput/{FluidNumberInput.Skeleton.js => FluidNumberInput.Skeleton.tsx} (79%) rename packages/react/src/components/FluidNumberInput/{FluidNumberInput.js => FluidNumberInput.tsx} (56%) rename packages/react/src/components/FluidNumberInput/{index.js => index.tsx} (61%) diff --git a/packages/react/src/components/FluidNumberInput/FluidNumberInput.Skeleton.js b/packages/react/src/components/FluidNumberInput/FluidNumberInput.Skeleton.tsx similarity index 79% rename from packages/react/src/components/FluidNumberInput/FluidNumberInput.Skeleton.js rename to packages/react/src/components/FluidNumberInput/FluidNumberInput.Skeleton.tsx index 7de75db1d488..f44aa840e323 100644 --- a/packages/react/src/components/FluidNumberInput/FluidNumberInput.Skeleton.js +++ b/packages/react/src/components/FluidNumberInput/FluidNumberInput.Skeleton.tsx @@ -11,9 +11,18 @@ import classnames from 'classnames'; import { usePrefix } from '../../internal/usePrefix'; import { FormContext } from '../FluidForm/FormContext'; -function FluidNumberInputSkeleton({ className, ...other }) { - const prefix = usePrefix(); +export interface FluidNumberInputSkeletonProps { + /** + * Specify an optional className to be applied to the outer FluidForm wrapper + */ + className?: string; +} +const FluidNumberInputSkeleton: React.FC = ({ + className, + ...other +}) => { + const prefix = usePrefix(); return (
); -} +}; FluidNumberInputSkeleton.propTypes = { /** diff --git a/packages/react/src/components/FluidNumberInput/FluidNumberInput.js b/packages/react/src/components/FluidNumberInput/FluidNumberInput.tsx similarity index 56% rename from packages/react/src/components/FluidNumberInput/FluidNumberInput.js rename to packages/react/src/components/FluidNumberInput/FluidNumberInput.tsx index ed45d60fadb9..a04e26d46b55 100644 --- a/packages/react/src/components/FluidNumberInput/FluidNumberInput.js +++ b/packages/react/src/components/FluidNumberInput/FluidNumberInput.tsx @@ -12,10 +12,115 @@ import { NumberInput } from '../NumberInput'; import { usePrefix } from '../../internal/usePrefix'; import { FormContext } from '../FluidForm/FormContext'; -const FluidNumberInput = React.forwardRef(function FluidNumberInput( - { className, ...other }, - ref -) { +export interface FluidNumberInputProps { + /** + * `true` to allow empty string. + */ + allowEmpty?: boolean; + + /** + * Specify an optional className to be applied to the wrapper node + */ + className?: string; + + /** + * Optional starting value for uncontrolled state + */ + defaultValue?: number | string; + + /** + * Specify if the wheel functionality for the input should be disabled, or not + */ + disableWheel?: boolean; + + /** + * Specify if the control should be disabled, or not + */ + disabled?: boolean; + + /** + * Provide a description for up/down icons that can be read by screen readers + */ + iconDescription?: string; + + /** + * Specify a custom `id` for the input + */ + id: string; + + /** + * Specify if the currently value is invalid. + */ + invalid?: boolean; + + /** + * Message which is displayed if the value is invalid. + */ + invalidText?: React.ReactNode; + + /** + * Generic `label` that will be used as the textual representation of what + * this field is for + */ + label?: React.ReactNode; + + /** + * The maximum value. + */ + max?: number; + + /** + * The minimum value. + */ + min?: number; + + onChange?: ( + event: React.MouseEvent, + state: { value: number | string; direction: string } + ) => void; + + /** + * Provide an optional function to be called when the up/down button is clicked + */ + onClick?: ( + event: React.MouseEvent, + state?: { value: number | string; direction: string } + ) => void; + /** + * Provide an optional function to be called when a key is pressed in the number input + */ + onKeyUp?: React.KeyboardEventHandler; + + /** + * Specify how much the values should increase/decrease upon clicking on up/down button + */ + step?: number; + + /** + * Provide custom text for the component for each translation id + */ + translateWithId?: (id: string) => string; + + /** + * Specify the value of the input + */ + value?: number | string; + + /** + * Specify whether the control is currently in warning state + */ + warn?: boolean; + + /** + * Provide the text that is displayed when the control is in warning state + */ + warnText?: React.ReactNode; +} + +const FluidNumberInput: React.FC = React.forwardRef< + HTMLInputElement, + FluidNumberInputProps +>(function FluidNumberInput({ className, ...other }, ref) { const prefix = usePrefix(); const classNames = classnames(`${prefix}--number-input--fluid`, className); diff --git a/packages/react/src/components/FluidNumberInput/index.js b/packages/react/src/components/FluidNumberInput/index.tsx similarity index 61% rename from packages/react/src/components/FluidNumberInput/index.js rename to packages/react/src/components/FluidNumberInput/index.tsx index f74405e5134c..8ff834291761 100644 --- a/packages/react/src/components/FluidNumberInput/index.js +++ b/packages/react/src/components/FluidNumberInput/index.tsx @@ -4,7 +4,9 @@ * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ - +import { FluidNumberInputProps } from './FluidNumberInput'; +import { FluidNumberInputSkeletonProps } from './FluidNumberInput.Skeleton'; +export { type FluidNumberInputProps, type FluidNumberInputSkeletonProps }; export { default, default as FluidNumberInput } from './FluidNumberInput'; export { default as FluidNumberInputSkeleton } from './FluidNumberInput.Skeleton'; From 2a1cc0f98d518c702f6989072fed1db804f98a30 Mon Sep 17 00:00:00 2001 From: Riddhi Bansal <41935566+riddhybansal@users.noreply.github.com> Date: Thu, 12 Sep 2024 20:26:11 +0530 Subject: [PATCH 3/7] Add typescript types to fluidTextInput, FluidPasswordInput, FluidTextInputSkeleton (#17368) * fix: renamed .js files * fix: fluidTextInput skeleton and fluidPasswordInput to .tsx --------- Co-authored-by: Gururaj J <89023023+Gururajj77@users.noreply.github.com> Co-authored-by: Taylor Jones --- ...asswordInput.js => FluidPasswordInput.tsx} | 98 ++++++++++++++++++- ...keleton.js => FluidTextInput.Skeleton.tsx} | 14 ++- .../{FluidTextInput.js => FluidTextInput.tsx} | 82 +++++++++++++++- .../FluidTextInput/{index.js => index.tsx} | 13 ++- 4 files changed, 197 insertions(+), 10 deletions(-) rename packages/react/src/components/FluidTextInput/{FluidPasswordInput.js => FluidPasswordInput.tsx} (57%) rename packages/react/src/components/FluidTextInput/{FluidTextInput.Skeleton.js => FluidTextInput.Skeleton.tsx} (79%) rename packages/react/src/components/FluidTextInput/{FluidTextInput.js => FluidTextInput.tsx} (60%) rename packages/react/src/components/FluidTextInput/{index.js => index.tsx} (51%) diff --git a/packages/react/src/components/FluidTextInput/FluidPasswordInput.js b/packages/react/src/components/FluidTextInput/FluidPasswordInput.tsx similarity index 57% rename from packages/react/src/components/FluidTextInput/FluidPasswordInput.js rename to packages/react/src/components/FluidTextInput/FluidPasswordInput.tsx index 8b54460d3687..688cf5bdc8be 100644 --- a/packages/react/src/components/FluidTextInput/FluidPasswordInput.js +++ b/packages/react/src/components/FluidTextInput/FluidPasswordInput.tsx @@ -12,7 +12,101 @@ import { PasswordInput } from '../PasswordInput'; import { usePrefix } from '../../internal/usePrefix'; import { FormContext } from '../FluidForm/FormContext'; -function FluidPasswordInput({ className, ...other }) { +export interface FluidPasswordInputProps { + /** + * Specify an optional className to be applied to the outer FluidForm wrapper + */ + className?: string; + + /** + * Optionally provide the default value of the `` + */ + defaultValue?: string | number; + + /** + * Specify whether the `` should be disabled + */ + disabled?: boolean; + + /** + * "Hide password" tooltip text on password visibility toggle + */ + hidePasswordLabel?: string; + + /** + * Specify a custom `id` for the `` + */ + id: string; + + /** + * Specify whether the control is currently invalid + */ + invalid?: boolean; + + /** + * Provide the text that is displayed when the control is in an invalid state + */ + invalidText?: React.ReactNode; + + /** + * Specify whether the control is a password input + */ + isPassword?: boolean; + + /** + * Provide the text that will be read by a screen reader when visiting this + * control + */ + labelText: React.ReactNode; + + /** + * Optionally provide an `onChange` handler that is called whenever `` + * is updated + */ + onChange?: React.ChangeEventHandler; + + /** + * Optionally provide an `onClick` handler that is called whenever the + * `` is clicked + */ + onClick?: React.MouseEventHandler; + + /** + * Callback function that is called whenever the toggle password visibility + * button is clicked + */ + onTogglePasswordVisibility?: React.MouseEventHandler; + + /** + * Specify the placeholder attribute for the `` + */ + placeholder?: string; + + /** + * "Show password" tooltip text on password visibility toggle + */ + showPasswordLabel?: string; + + /** + * Specify the value of the `` + */ + value?: string | number; + + /** + * Specify whether the control is currently in warning state + */ + warn?: boolean; + + /** + * Provide the text that is displayed when the control is in warning state + */ + warnText?: React.ReactNode; +} + +const FluidPasswordInput: React.FC = ({ + className, + ...other +}) => { const prefix = usePrefix(); const classNames = classnames(className, `${prefix}--text-input--fluid`); @@ -21,7 +115,7 @@ function FluidPasswordInput({ className, ...other }) { ); -} +}; FluidPasswordInput.propTypes = { /** diff --git a/packages/react/src/components/FluidTextInput/FluidTextInput.Skeleton.js b/packages/react/src/components/FluidTextInput/FluidTextInput.Skeleton.tsx similarity index 79% rename from packages/react/src/components/FluidTextInput/FluidTextInput.Skeleton.js rename to packages/react/src/components/FluidTextInput/FluidTextInput.Skeleton.tsx index 38e7e42c944a..a81c1767fa73 100644 --- a/packages/react/src/components/FluidTextInput/FluidTextInput.Skeleton.js +++ b/packages/react/src/components/FluidTextInput/FluidTextInput.Skeleton.tsx @@ -11,7 +11,17 @@ import classnames from 'classnames'; import { usePrefix } from '../../internal/usePrefix'; import { FormContext } from '../FluidForm/FormContext'; -function FluidTextInputSkeleton({ className, ...other }) { +export interface FluidTextInputSkeletonProps { + /** + * Specify an optional className to be applied to the outer FluidForm wrapper + */ + className?: string; +} + +const FluidTextInputSkeleton: React.FC = ({ + className, + ...other +}) => { const prefix = usePrefix(); return ( @@ -27,7 +37,7 @@ function FluidTextInputSkeleton({ className, ...other }) {
); -} +}; FluidTextInputSkeleton.propTypes = { /** diff --git a/packages/react/src/components/FluidTextInput/FluidTextInput.js b/packages/react/src/components/FluidTextInput/FluidTextInput.tsx similarity index 60% rename from packages/react/src/components/FluidTextInput/FluidTextInput.js rename to packages/react/src/components/FluidTextInput/FluidTextInput.tsx index a94dc34fd1cb..3cc5c7ec30bb 100644 --- a/packages/react/src/components/FluidTextInput/FluidTextInput.js +++ b/packages/react/src/components/FluidTextInput/FluidTextInput.tsx @@ -13,7 +13,85 @@ import { PasswordInput } from '../PasswordInput'; import { usePrefix } from '../../internal/usePrefix'; import { FormContext } from '../FluidForm/FormContext'; -function FluidTextInput({ className, isPassword, ...other }) { +export interface FluidTextInputProps { + /** + * Specify an optional className to be applied to the outer FluidForm wrapper + */ + className?: string; + + /** + * Optionally provide the default value of the `` + */ + defaultValue?: string | number; + + /** + * Specify whether the `` should be disabled + */ + disabled?: boolean; + + /** + * Specify a custom `id` for the `` + */ + id: string; + + /** + * Specify whether the control is currently invalid + */ + invalid?: boolean; + + /** + * Provide the text that is displayed when the control is in an invalid state + */ + invalidText?: React.ReactNode; + + /** + * Specify whether the control is a password input + */ + isPassword?: boolean; + + /** + * Provide the text that will be read by a screen reader when visiting this + * control + */ + labelText: React.ReactNode; + + /** + * Optionally provide an `onChange` handler that is called whenever `` + * is updated + */ + onChange?: (event: React.ChangeEvent) => void; + /** + * Optionally provide an `onClick` handler that is called whenever the + * `` is clicked + */ + onClick?: (event: React.MouseEvent) => void; + + /** + * Specify the placeholder attribute for the `` + */ + placeholder?: string; + + /** + * Specify the value of the `` + */ + value?: string | number; + + /** + * Specify whether the control is currently in warning state + */ + warn?: boolean; + + /** + * Provide the text that is displayed when the control is in warning state + */ + warnText?: React.ReactNode; +} + +const FluidTextInput: React.FC = ({ + className, + isPassword, + ...other +}) => { const prefix = usePrefix(); const classNames = classnames(className, { [`${prefix}--text-input--fluid`]: !isPassword, @@ -28,7 +106,7 @@ function FluidTextInput({ className, isPassword, ...other }) { )} ); -} +}; FluidTextInput.propTypes = { /** diff --git a/packages/react/src/components/FluidTextInput/index.js b/packages/react/src/components/FluidTextInput/index.tsx similarity index 51% rename from packages/react/src/components/FluidTextInput/index.js rename to packages/react/src/components/FluidTextInput/index.tsx index 6210b0d1d18f..60b5b758c057 100644 --- a/packages/react/src/components/FluidTextInput/index.js +++ b/packages/react/src/components/FluidTextInput/index.tsx @@ -7,9 +7,14 @@ import FluidTextInput from './FluidTextInput'; import FluidPasswordInput from './FluidPasswordInput'; - +import { type FluidTextInputSkeletonProps } from './FluidTextInput.Skeleton'; +import { type FluidPasswordInputProps } from './FluidPasswordInput'; +import { type FluidTextInputProps } from './FluidTextInput'; export default FluidTextInput; -export { FluidTextInput }; -export { FluidPasswordInput }; - +export { + FluidTextInput, + type FluidTextInputProps, + type FluidTextInputSkeletonProps, +}; +export { FluidPasswordInput, type FluidPasswordInputProps }; export { default as FluidTextInputSkeleton } from './FluidTextInput.Skeleton'; From 5fcb5c21189bb0b534197e4d0c56eeab486a95ca Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Thu, 12 Sep 2024 09:58:07 -0500 Subject: [PATCH 4/7] chore(tests): skip flaky tests - menu avt, slider onDrag (#17427) --- e2e/components/Menu/Menu-test.avt.e2e.js | 2 +- packages/react/src/components/Slider/Slider-test.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/e2e/components/Menu/Menu-test.avt.e2e.js b/e2e/components/Menu/Menu-test.avt.e2e.js index acbea3b270d3..82ecabf55a07 100644 --- a/e2e/components/Menu/Menu-test.avt.e2e.js +++ b/e2e/components/Menu/Menu-test.avt.e2e.js @@ -22,7 +22,7 @@ test.describe('@avt Menu', () => { await expect(page).toHaveNoACViolations('Menu @avt-default-state'); }); - test('@avt-keyboard-nav Menu', async ({ page }) => { + test.fixme('@avt-keyboard-nav Menu', async ({ page }) => { await visitStory(page, { component: 'Menu', id: 'components-menu--playground', diff --git a/packages/react/src/components/Slider/Slider-test.js b/packages/react/src/components/Slider/Slider-test.js index 9f694b8d4ca6..07e4f3fc46ff 100644 --- a/packages/react/src/components/Slider/Slider-test.js +++ b/packages/react/src/components/Slider/Slider-test.js @@ -296,7 +296,7 @@ describe('Slider', () => { expect(onChange).not.toHaveBeenCalled(); }); - it('gracefully tolerates empty event passed to _onDrag', () => { + it.skip('gracefully tolerates empty event passed to _onDrag', () => { const { mouseDown, mouseUp, mouseMove } = fireEvent; const { container } = renderSlider({ ariaLabelInput: inputAriaValue, From 1e451493757c30627c6d1fb62f94a8ac6a777fc6 Mon Sep 17 00:00:00 2001 From: andrew Date: Thu, 12 Sep 2024 10:04:50 -0500 Subject: [PATCH 5/7] fix(Tabs): replace hardcoded CSS prefix (#17423) related #16908 #17422 Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com> --- packages/react/src/components/Tabs/Tabs.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx index ac40ba21698f..ee9ecb0d1f3d 100644 --- a/packages/react/src/components/Tabs/Tabs.tsx +++ b/packages/react/src/components/Tabs/Tabs.tsx @@ -1242,8 +1242,8 @@ const Tab = forwardRef(function Tab( ).filter((node) => { const element = node as HTMLElement; return ( - element.classList.contains('cds--tabs__nav-link') && - !element.classList.contains('cds--tabs__nav-item--disabled') + element.classList.contains(`${prefix}--tabs__nav-link`) && + !element.classList.contains(`${prefix}--tabs__nav-item--disabled`) ); }).length; From 47618cc1f8c91831693073197093d19cbf9622d4 Mon Sep 17 00:00:00 2001 From: Riddhi Bansal <41935566+riddhybansal@users.noreply.github.com> Date: Thu, 12 Sep 2024 20:45:37 +0530 Subject: [PATCH 6/7] Add typescript types to fluidSelect and fluidSkeleton (#17369) * fix: rename fluidSelect and skeleton as tsx files * fix: add typescript types to fluidSelect and fluidSelectSkeleton --- ...t.Skeleton.js => FluidSelect.Skeleton.tsx} | 11 +- .../src/components/FluidSelect/FluidSelect.js | 90 ----------- .../components/FluidSelect/FluidSelect.tsx | 148 ++++++++++++++++++ .../FluidSelect/{index.js => index.tsx} | 4 +- 4 files changed, 161 insertions(+), 92 deletions(-) rename packages/react/src/components/FluidSelect/{FluidSelect.Skeleton.js => FluidSelect.Skeleton.tsx} (79%) delete mode 100644 packages/react/src/components/FluidSelect/FluidSelect.js create mode 100644 packages/react/src/components/FluidSelect/FluidSelect.tsx rename packages/react/src/components/FluidSelect/{index.js => index.tsx} (65%) diff --git a/packages/react/src/components/FluidSelect/FluidSelect.Skeleton.js b/packages/react/src/components/FluidSelect/FluidSelect.Skeleton.tsx similarity index 79% rename from packages/react/src/components/FluidSelect/FluidSelect.Skeleton.js rename to packages/react/src/components/FluidSelect/FluidSelect.Skeleton.tsx index 7e08e3e00574..6da57f9568b9 100644 --- a/packages/react/src/components/FluidSelect/FluidSelect.Skeleton.js +++ b/packages/react/src/components/FluidSelect/FluidSelect.Skeleton.tsx @@ -9,8 +9,17 @@ import PropTypes from 'prop-types'; import React from 'react'; import cx from 'classnames'; import { usePrefix } from '../../internal/usePrefix'; +export interface FluidSelectSkeletonProps { + /** + * Specify an optional className to add. + */ + className?: string; +} -const FluidSelectSkeleton = ({ className, ...rest }) => { +const FluidSelectSkeleton: React.FC = ({ + className, + ...rest +}) => { const prefix = usePrefix(); const wrapperClasses = cx( className, diff --git a/packages/react/src/components/FluidSelect/FluidSelect.js b/packages/react/src/components/FluidSelect/FluidSelect.js deleted file mode 100644 index 7ed9957bf2f0..000000000000 --- a/packages/react/src/components/FluidSelect/FluidSelect.js +++ /dev/null @@ -1,90 +0,0 @@ -/** - * Copyright IBM Corp. 2022 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import PropTypes from 'prop-types'; -import React from 'react'; -import classnames from 'classnames'; -import Select from '../Select'; -import { usePrefix } from '../../internal/usePrefix'; -import { FormContext } from '../FluidForm/FormContext'; - -const FluidSelect = React.forwardRef(function FluidSelect( - { className, children, ...other }, - ref -) { - const prefix = usePrefix(); - const classNames = classnames(`${prefix}--select--fluid`, className); - - return ( - - - - ); -}); - -FluidSelect.propTypes = { - /** - * Provide the contents of your Select - */ - children: PropTypes.node, - - /** - * Specify an optional className to be applied to the node containing the label and the select box - */ - className: PropTypes.string, - - /** - * Optionally provide the default value of the `` - */ - id: PropTypes.string.isRequired, - - /** - * Specify if the currently value is invalid. - */ - invalid: PropTypes.bool, - - /** - * Message which is displayed if the value is invalid. - */ - invalidText: PropTypes.node, - - /** - * Provide label text to be read by screen readers when interacting with the - * control - */ - labelText: PropTypes.node, - - /** - * Provide an optional `onChange` hook that is called each time the value of - * the underlying `` changes - */ - onChange: PropTypes.func, - - /** - * Specify whether the control is currently in warning state - */ - warn: PropTypes.bool, - - /** - * Provide the text that is displayed when the control is in warning state - */ - warnText: PropTypes.node, -}; - -export default FluidSelect; diff --git a/packages/react/src/components/FluidSelect/FluidSelect.tsx b/packages/react/src/components/FluidSelect/FluidSelect.tsx new file mode 100644 index 000000000000..0df2324164eb --- /dev/null +++ b/packages/react/src/components/FluidSelect/FluidSelect.tsx @@ -0,0 +1,148 @@ +/** + * Copyright IBM Corp. 2022 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import PropTypes from 'prop-types'; +import React from 'react'; +import classnames from 'classnames'; +import Select from '../Select'; +import { usePrefix } from '../../internal/usePrefix'; +import { FormContext } from '../FluidForm/FormContext'; + +export interface FluidSelectProps { + /** + * Provide the contents of your Select + */ + children?: React.ReactNode; + + /** + * Specify an optional className to be applied to the node containing the label and the select box + */ + className?: string; + + /** + * Optionally provide the default value of the `` + */ + id: string; + + /** + * Specify if the currently value is invalid. + */ + invalid?: boolean; + + /** + * Message which is displayed if the value is invalid. + */ + invalidText?: React.ReactNode; + + /** + * Provide label text to be read by screen readers when interacting with the + * control + */ + labelText?: React.ReactNode; + + /** + * Provide an optional `onChange` hook that is called each time the value of + * the underlying `` changes + */ + onChange?: React.ChangeEventHandler; + + /** + * Specify whether the control is currently in warning state + */ + warn?: boolean; + + /** + * Provide the text that is displayed when the control is in warning state + */ + warnText?: React.ReactNode; +} + +const FluidSelect = React.forwardRef( + function FluidSelect({ className, children, ...other }, ref) { + const prefix = usePrefix(); + const classNames = classnames(`${prefix}--select--fluid`, className); + + return ( + + + + ); + } +); + +FluidSelect.propTypes = { + /** + * Provide the contents of your Select + */ + children: PropTypes.node, + + /** + * Specify an optional className to be applied to the node containing the label and the select box + */ + className: PropTypes.string, + + /** + * Optionally provide the default value of the `` + */ + id: PropTypes.string.isRequired, + + /** + * Specify if the currently value is invalid. + */ + invalid: PropTypes.bool, + + /** + * Message which is displayed if the value is invalid. + */ + invalidText: PropTypes.node, + + /** + * Provide label text to be read by screen readers when interacting with the + * control + */ + labelText: PropTypes.node, + + /** + * Provide an optional `onChange` hook that is called each time the value of + * the underlying `` changes + */ + onChange: PropTypes.func, + + /** + * Specify whether the control is currently in warning state + */ + warn: PropTypes.bool, + + /** + * Provide the text that is displayed when the control is in warning state + */ + warnText: PropTypes.node, +}; + +export default FluidSelect; diff --git a/packages/react/src/components/FluidSelect/index.js b/packages/react/src/components/FluidSelect/index.tsx similarity index 65% rename from packages/react/src/components/FluidSelect/index.js rename to packages/react/src/components/FluidSelect/index.tsx index 8b784b62716f..269ccf5fb8c7 100644 --- a/packages/react/src/components/FluidSelect/index.js +++ b/packages/react/src/components/FluidSelect/index.tsx @@ -6,7 +6,9 @@ */ import FluidSelect from './FluidSelect'; - +import FluidSelectSkeletonProps from './FluidSelect.Skeleton'; +import FluidSelectProps from './FluidSelect.Skeleton'; +export type { FluidSelectSkeletonProps, FluidSelectProps }; export default FluidSelect; export { FluidSelect }; export { default as FluidSelectSkeleton } from './FluidSelect.Skeleton'; From fdb31d98779d9243e47dde0aca833b5993af6379 Mon Sep 17 00:00:00 2001 From: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com> Date: Thu, 12 Sep 2024 21:10:27 +0530 Subject: [PATCH 7/7] fix: playGround story issue in NumberInput (#17389) * refactor: updated type for value * fix: passed props dunamically via args * fix: args updated * chore: args test * chore: test with default vals * Update PlayGround story * chore: clean up * fix: playground story updated * added NumberInputSkeleton story back --------- Co-authored-by: Gururaj J <89023023+Gururajj77@users.noreply.github.com> --- .../NumberInput/NumberInput.stories.js | 68 +++++++++---------- 1 file changed, 33 insertions(+), 35 deletions(-) diff --git a/packages/react/src/components/NumberInput/NumberInput.stories.js b/packages/react/src/components/NumberInput/NumberInput.stories.js index e01818e66ca2..f43f094982dc 100644 --- a/packages/react/src/components/NumberInput/NumberInput.stories.js +++ b/packages/react/src/components/NumberInput/NumberInput.stories.js @@ -81,26 +81,38 @@ export const withAILabel = () => ( />
); +export const Skeleton = () => ; +export const Playground = ({ ...args }) => { + const [value, setValue] = React.useState(50); + + const handleChange = (event, { value }) => { + setValue(value); + }; -export const Playground = (args) => { - // const { numberInputArrowTranslationIds, ...rest } = props(); return ( ); }; Playground.args = { + step: 1, + disabled: false, + invalid: false, + invalidText: 'Number is not valid', + helperText: 'Optional helper text.', + warn: false, warnText: 'Warning message that is really long can wrap to more lines but should not be excessively long.', + size: 'md', }; Playground.argTypes = { @@ -109,52 +121,38 @@ Playground.argTypes = { disable: true, }, }, - defaultValue: { + min: { control: { type: 'number' } }, + max: { control: { type: 'number' } }, + step: { control: { type: 'number' } }, + disabled: { control: { type: 'boolean' } }, + invalid: { control: { type: 'boolean' } }, + invalidText: { control: { type: 'text' } }, + warn: { control: { type: 'boolean' } }, + warnText: { control: { type: 'text' } }, + size: { + options: ['sm', 'md', 'lg'], + control: { type: 'select' }, + }, + label: { control: { type: 'text' } }, + helperText: { control: { type: 'text' } }, + id: { table: { disable: true, }, }, - helperText: { - control: { type: 'text' }, - }, - id: { + defaultValue: { table: { disable: true, }, }, - invalidText: { - control: { type: 'text' }, - }, - label: { - control: { type: 'text' }, - }, light: { table: { disable: true, }, }, - onChange: { - action: 'onChange', - }, - onClick: { - action: 'onClick', - }, - onKeyUp: { - action: 'onKeyUp', - }, translateWithId: { table: { disable: true, }, }, - value: { - control: { type: 'text' }, - }, - warnText: { - control: { - type: 'text', - }, - }, }; - -export const Skeleton = () => ;