Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add typescript types FluidTimePicker and FluidTimePickerSelect #17445

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
+134 −34
Open

Add typescript types FluidTimePicker and FluidTimePickerSelect #17445

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e38a0e9
fix: rename fluidTimepicker files to tsx
riddhybansal Sep 13, 2024
733a47f
fix: add typescript types to fluidTimePicker fluidTimepickerselect
riddhybansal Sep 16, 2024
b59cdc5
Merge branch 'main' into add_typescript_types_FluidTimePicker
riddhybansal Sep 16, 2024
37e07ab
fix: updated snapshots
riddhybansal Sep 16, 2024
94e7a65
fix: extended interface
riddhybansal Sep 17, 2024
a8da9cb
fix: uncommented code
riddhybansal Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10762,6 +10762,7 @@ Map {
},
},
"unstable__FluidTextInput" => Object {
"$$typeof": Symbol(react.forward_ref),
"propTypes": Object {
"className": Object {
"type": "string",
Expand Down Expand Up @@ -10828,6 +10829,7 @@ Map {
"type": "node",
},
},
"render": [Function],
},
"unstable__FluidTextInputSkeleton" => Object {
"propTypes": Object {
Expand Down
38 changes: 18 additions & 20 deletions packages/react/src/components/FluidTextInput/FluidTextInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,26 +87,24 @@ export interface FluidTextInputProps {
warnText?: React.ReactNode;
}

const FluidTextInput: React.FC<FluidTextInputProps> = ({
className,
isPassword,
...other
}) => {
const prefix = usePrefix();
const classNames = classnames(className, {
[`${prefix}--text-input--fluid`]: !isPassword,
});

return (
<FormContext.Provider value={{ isFluid: true }}>
{isPassword ? (
<PasswordInput className={classNames} {...other} />
) : (
<TextInput className={classNames} {...other} />
)}
</FormContext.Provider>
);
};
const FluidTextInput = React.forwardRef<HTMLInputElement, FluidTextInputProps>(
function FluidTextInput({ className, isPassword, ...other }, ref) {
const prefix = usePrefix();
const classNames = classnames(className, {
[`${prefix}--text-input--fluid`]: !isPassword,
});

return (
<FormContext.Provider value={{ isFluid: true }}>
{isPassword ? (
<PasswordInput className={classNames} ref={ref} {...other} />
) : (
<TextInput className={classNames} ref={ref} {...other} />
)}
</FormContext.Provider>
);
}
);

FluidTextInput.propTypes = {
/**
Expand Down
11 changes: 11 additions & 0 deletions ...uidTimePicker/FluidTimePicker.Skeleton.js → ...idTimePicker/FluidTimePicker.Skeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,17 @@ import { usePrefix } from '../../internal/usePrefix';
import { FluidTextInputSkeleton } from '../FluidTextInput';
import { FluidSelectSkeleton } from '../FluidSelect';

export interface FluidTimePickerSkeletonProps {
/**
* Specify an optional className to add.
*/
className?: string;
/**
* Specify if there are only two TimePicker elements
*/
isOnlyTwo?: boolean;
}

const FluidTimePickerSkeleton = ({ className, isOnlyTwo, ...rest }) => {
const prefix = usePrefix();
const wrapperClasses = cx(
Expand Down
62 changes: 55 additions & 7 deletions ...onents/FluidTimePicker/FluidTimePicker.js → ...nents/FluidTimePicker/FluidTimePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,60 @@
* 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 PropTypes from 'prop-types';
import classnames from 'classnames';
import FluidTextInput from '../FluidTextInput';
import FluidTextInput, { FluidTextInputProps } from '../FluidTextInput';
import { usePrefix } from '../../internal/usePrefix';
import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';

const FluidTimePicker = React.forwardRef(function FluidTimePicker(
export interface FluidTimePickerProps extends FluidTextInputProps {
/**
* The child node(s)
*/
children?: React.ReactNode;

/**
* Specify an optional className to be applied to the outer FluidTimePicker wrapper
*/
className?: string;

/**
* Specify whether the `<input>` should be disabled
*/
disabled?: boolean;

/**
* Specify whether or not the control is invalid
*/
invalid?: boolean;

/**
* Provide the text that is displayed when the control is in error state
*/
invalidText?: React.ReactNode;

/**
* Provide the text that will be read by a screen reader when visiting this
* control
*/
labelText: React.ReactNode;

/**
* 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 FluidTimePicker = React.forwardRef<
HTMLInputElement,
FluidTimePickerProps
>(function FluidTimePicker(
{
className,
children,
Expand All @@ -29,7 +74,8 @@

const classNames = classnames(className, {
[`${prefix}--time-picker--fluid`]: true,
[`${prefix}--time-picker--equal-width`]: children?.length !== 2,
[`${prefix}--time-picker--equal-width`]:
React.Children.toArray(children).length !== 2,
[`${prefix}--time-picker--fluid--disabled`]: disabled,
[`${prefix}--time-picker--fluid--invalid`]: invalid,
[`${prefix}--time-picker--fluid--warning`]: warn,
Expand All @@ -50,11 +96,13 @@
<div className={classNames}>
<div className={`${prefix}--time-picker--fluid__wrapper`}>
<div className={`${prefix}--time-picker__input`}>
<FluidTextInput disabled={disabled} ref={ref} {...other} />
<FluidTextInput ref={ref} {...other} />
</div>
{disabled
? React.Children.toArray(children).map((child) => {
return React.cloneElement(child, { disabled });
return React.cloneElement(child as React.ReactElement, {

Check warning on line 103 in packages/react/src/components/FluidTimePicker/FluidTimePicker.tsx

View check run for this annotation

Codecov / codecov/patch

packages/react/src/components/FluidTimePicker/FluidTimePicker.tsx#L103 

Added line #L103 was not covered by tests
disabled,
});
})
: children}
</div>
Expand Down
42 changes: 21 additions & 21 deletions packages/react/src/components/FluidTimePicker/__tests__/FluidTimePicker-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,28 +15,28 @@ const prefix = 'cds';

describe('FluidTimePicker', () => {
describe('renders as expected - Component API', () => {
it('should add extra classes that are passed via className', () => {
const { container } = render(
<FluidTimePicker
className="custom-class"
id="time=picker-1"
data-testid="timePicker-1"
labelText="Time">
<FluidTimePickerSelect id="select-1" labelText="Clock">
<SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" />
</FluidTimePickerSelect>
<FluidTimePickerSelect id="select-2" labelText="Timezone">
<SelectItem value="et" text="Eastern Time (ET)" />
<SelectItem value="ct" text="Central Time (CT)" />
<SelectItem value="mt" text="Mountain Time (MT)" />
<SelectItem value="pt" text="Pacific Time (PT)" />
</FluidTimePickerSelect>
</FluidTimePicker>
);
// it('should add extra classes that are passed via className', () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @riddhybansal is this testing failing?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oops I was testing something so commented that time need to uncomment it !!

// const { container } = render(
// <FluidTimePicker
// className="custom-class"
// id="time=picker-1"
// data-testid="timePicker-1"
// labelText="Time">
// <FluidTimePickerSelect id="select-1" labelText="Clock">
// <SelectItem value="am" text="AM" />
// <SelectItem value="pm" text="PM" />
// </FluidTimePickerSelect>
// <FluidTimePickerSelect id="select-2" labelText="Timezone">
// <SelectItem value="et" text="Eastern Time (ET)" />
// <SelectItem value="ct" text="Central Time (CT)" />
// <SelectItem value="mt" text="Mountain Time (MT)" />
// <SelectItem value="pt" text="Pacific Time (PT)" />
// </FluidTimePickerSelect>
// </FluidTimePicker>
// );

expect(container.firstChild).toHaveClass('custom-class');
});
// expect(container.firstChild).toHaveClass('custom-class');
// });

it('should add fluid classes by default', () => {
const { container } = render(
Expand Down
5 changes: 3 additions & 2 deletions ...t/src/components/FluidTimePicker/index.js → .../src/components/FluidTimePicker/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@
*/

import FluidTimePicker from './FluidTimePicker';

import { FluidTimePickerProps } from './FluidTimePicker';
import { FluidTimePickerSkeletonProps } from './FluidTimePicker.Skeleton';
export { default as FluidTimePickerSkeleton } from './FluidTimePicker.Skeleton';
export type { FluidTimePickerProps, FluidTimePickerSkeletonProps };
export default FluidTimePicker;

export { FluidTimePicker };
47 changes: 43 additions & 4 deletions ...TimePickerSelect/FluidTimePickerSelect.js → ...imePickerSelect/FluidTimePickerSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,49 @@ import React from 'react';
import PropTypes from 'prop-types';
import FluidSelect from '../FluidSelect';

const FluidTimePickerSelect = React.forwardRef(function FluidTimePickerSelect(
{ children, className, ...other },
ref
) {
export interface FluidTimePickerSelectProps {
/**
* 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 `<select>`
*/
defaultValue?: any;

/**
* Specify whether the control is disabled
*/
disabled?: boolean;

/**
* Specify a custom `id` for the `<select>`
*/
id: string;

/**
* 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 `<input>` changes
*/
onChange?: React.ChangeEventHandler<HTMLSelectElement>;
}

const FluidTimePickerSelect = React.forwardRef<
HTMLSelectElement,
FluidTimePickerSelectProps
>(function FluidTimePickerSelect({ children, className, ...other }, ref) {
return (
<FluidSelect className={className} ref={ref} {...other}>
{children}
Expand Down
3 changes: 2 additions & 1 deletion ...components/FluidTimePickerSelect/index.js → ...omponents/FluidTimePickerSelect/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
*/

import FluidTimePickerSelect from './FluidTimePickerSelect';

import { type FluidTimePickerSelectProps } from './FluidTimePickerSelect';
export { type FluidTimePickerSelectProps };
export default FluidTimePickerSelect;
export { FluidTimePickerSelect };
Loading