From e1df62cb70c3141c6cbbae7cc5031311d28c8635 Mon Sep 17 00:00:00 2001 From: riddhybansal Date: Fri, 6 Sep 2024 17:02:05 +0530 Subject: [PATCH 1/2] fix: rename fluidSelect and skeleton as tsx files --- .../FluidSelect/FluidSelect.Skeleton.tsx | 38 ++++++++ .../components/FluidSelect/FluidSelect.tsx | 90 +++++++++++++++++++ .../src/components/FluidSelect/index.tsx | 12 +++ 3 files changed, 140 insertions(+) create mode 100644 packages/react/src/components/FluidSelect/FluidSelect.Skeleton.tsx create mode 100644 packages/react/src/components/FluidSelect/FluidSelect.tsx create mode 100644 packages/react/src/components/FluidSelect/index.tsx diff --git a/packages/react/src/components/FluidSelect/FluidSelect.Skeleton.tsx b/packages/react/src/components/FluidSelect/FluidSelect.Skeleton.tsx new file mode 100644 index 000000000000..7e08e3e00574 --- /dev/null +++ b/packages/react/src/components/FluidSelect/FluidSelect.Skeleton.tsx @@ -0,0 +1,38 @@ +/** + * 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 cx from 'classnames'; +import { usePrefix } from '../../internal/usePrefix'; + +const FluidSelectSkeleton = ({ className, ...rest }) => { + const prefix = usePrefix(); + const wrapperClasses = cx( + className, + `${prefix}--skeleton`, + `${prefix}--list-box` + ); + + return ( +
+
+ +
+
+
+ ); +}; + +FluidSelectSkeleton.propTypes = { + /** + * Specify an optional className to add. + */ + className: PropTypes.string, +}; + +export default FluidSelectSkeleton; diff --git a/packages/react/src/components/FluidSelect/FluidSelect.tsx b/packages/react/src/components/FluidSelect/FluidSelect.tsx new file mode 100644 index 000000000000..7ed9957bf2f0 --- /dev/null +++ b/packages/react/src/components/FluidSelect/FluidSelect.tsx @@ -0,0 +1,90 @@ +/** + * 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/index.tsx b/packages/react/src/components/FluidSelect/index.tsx new file mode 100644 index 000000000000..8b784b62716f --- /dev/null +++ b/packages/react/src/components/FluidSelect/index.tsx @@ -0,0 +1,12 @@ +/** + * 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 FluidSelect from './FluidSelect'; + +export default FluidSelect; +export { FluidSelect }; +export { default as FluidSelectSkeleton } from './FluidSelect.Skeleton'; From 4888a4f86ccbaeadc133b2bcb98a78c57f29ee7b Mon Sep 17 00:00:00 2001 From: riddhybansal Date: Fri, 6 Sep 2024 17:10:44 +0530 Subject: [PATCH 2/2] fix: add typescript types to fluidSelect and fluidSelectSkeleton --- .../FluidSelect/FluidSelect.Skeleton.js | 38 -------- .../FluidSelect/FluidSelect.Skeleton.tsx | 11 ++- .../src/components/FluidSelect/FluidSelect.js | 90 ------------------- .../components/FluidSelect/FluidSelect.tsx | 88 ++++++++++++++---- .../react/src/components/FluidSelect/index.js | 12 --- .../src/components/FluidSelect/index.tsx | 4 +- 6 files changed, 86 insertions(+), 157 deletions(-) delete mode 100644 packages/react/src/components/FluidSelect/FluidSelect.Skeleton.js delete mode 100644 packages/react/src/components/FluidSelect/FluidSelect.js delete mode 100644 packages/react/src/components/FluidSelect/index.js diff --git a/packages/react/src/components/FluidSelect/FluidSelect.Skeleton.js b/packages/react/src/components/FluidSelect/FluidSelect.Skeleton.js deleted file mode 100644 index 7e08e3e00574..000000000000 --- a/packages/react/src/components/FluidSelect/FluidSelect.Skeleton.js +++ /dev/null @@ -1,38 +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 cx from 'classnames'; -import { usePrefix } from '../../internal/usePrefix'; - -const FluidSelectSkeleton = ({ className, ...rest }) => { - const prefix = usePrefix(); - const wrapperClasses = cx( - className, - `${prefix}--skeleton`, - `${prefix}--list-box` - ); - - return ( -
-
- -
-
-
- ); -}; - -FluidSelectSkeleton.propTypes = { - /** - * Specify an optional className to add. - */ - className: PropTypes.string, -}; - -export default FluidSelectSkeleton; diff --git a/packages/react/src/components/FluidSelect/FluidSelect.Skeleton.tsx b/packages/react/src/components/FluidSelect/FluidSelect.Skeleton.tsx index 7e08e3e00574..6da57f9568b9 100644 --- a/packages/react/src/components/FluidSelect/FluidSelect.Skeleton.tsx +++ 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 index 7ed9957bf2f0..0df2324164eb 100644 --- a/packages/react/src/components/FluidSelect/FluidSelect.tsx +++ b/packages/react/src/components/FluidSelect/FluidSelect.tsx @@ -12,21 +12,79 @@ 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 ( - - - - ); -}); +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 = { /** diff --git a/packages/react/src/components/FluidSelect/index.js b/packages/react/src/components/FluidSelect/index.js deleted file mode 100644 index 8b784b62716f..000000000000 --- a/packages/react/src/components/FluidSelect/index.js +++ /dev/null @@ -1,12 +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 FluidSelect from './FluidSelect'; - -export default FluidSelect; -export { FluidSelect }; -export { default as FluidSelectSkeleton } from './FluidSelect.Skeleton'; diff --git a/packages/react/src/components/FluidSelect/index.tsx b/packages/react/src/components/FluidSelect/index.tsx index 8b784b62716f..269ccf5fb8c7 100644 --- a/packages/react/src/components/FluidSelect/index.tsx +++ 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';