From 44271b4ac57c29a14c005f0af2bc5bd55e8a4c4e Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Tue, 1 Aug 2023 09:36:51 -0400 Subject: [PATCH 1/2] docs(TimePicker): updated examples to TypeScript --- .../TimePicker/examples/TimePicker.md | 46 +++---------------- .../examples/TimePickerBasic12Hour.tsx | 22 +++++++++ .../examples/TimePickerBasic24Hour.tsx | 4 ++ .../TimePickerBasic24HoursWithSeconds.tsx | 6 +++ .../examples/TimePickerCustomDelimiter.tsx | 4 ++ .../examples/TimePickerMinMaxTimes.tsx | 6 +++ .../examples/TimePickerWithSeconds.tsx | 4 ++ 7 files changed, 52 insertions(+), 40 deletions(-) create mode 100644 packages/react-core/src/components/TimePicker/examples/TimePickerBasic12Hour.tsx create mode 100644 packages/react-core/src/components/TimePicker/examples/TimePickerBasic24Hour.tsx create mode 100644 packages/react-core/src/components/TimePicker/examples/TimePickerBasic24HoursWithSeconds.tsx create mode 100644 packages/react-core/src/components/TimePicker/examples/TimePickerCustomDelimiter.tsx create mode 100644 packages/react-core/src/components/TimePicker/examples/TimePickerMinMaxTimes.tsx create mode 100644 packages/react-core/src/components/TimePicker/examples/TimePickerWithSeconds.tsx diff --git a/packages/react-core/src/components/TimePicker/examples/TimePicker.md b/packages/react-core/src/components/TimePicker/examples/TimePicker.md index 3995adab7be..0021a17bdc3 100644 --- a/packages/react-core/src/components/TimePicker/examples/TimePicker.md +++ b/packages/react-core/src/components/TimePicker/examples/TimePicker.md @@ -15,66 +15,32 @@ Appending the TimePicker to the `document.body` may cause accessibility issues, ### Basic 12 hour -```js -import React from 'react'; -import { TimePicker } from '@patternfly/react-core'; - -SimpleTimePicker = () => { - const onChange = (_event, time, hour, minute, seconds, isValid) => { - console.log('time', time); - console.log('hour', hour); - console.log('minute', minute); - console.log('seconds', seconds); - console.log('isValid', isValid); - }; - - return ; -}; +```ts file="./TimePickerBasic12Hour.tsx" ``` ### Basic 24 hour -```js -import React from 'react'; -import { TimePicker } from '@patternfly/react-core'; - -; +```ts file="./TimePickerBasic24Hour.tsx" ``` ### Custom delimiter -```js -import React from 'react'; -import { TimePicker } from '@patternfly/react-core'; - -; +```ts file="./TimePickerCustomDelimiter.tsx" ``` ### Minimum/maximum times The `minTime`/`maxTime` props restrict the options shown for the user to select from as well as trigger the `invalidMinMaxErrorMessage` if the user enters a time outside this range. -```js -import React from 'react'; -import { TimePicker } from '@patternfly/react-core'; - -; +```ts file="./TimePickerMinMaxTimes.tsx" ``` ### With seconds -```js -import React from 'react'; -import { TimePicker } from '@patternfly/react-core'; - -; +```ts file="./TimePickerWithSeconds.tsx" ``` ### Basic 24 hours with seconds -```js -import React from 'react'; -import { TimePicker } from '@patternfly/react-core'; - -; +```ts file="./TimePickerBasic24HoursWithSeconds.tsx" ``` diff --git a/packages/react-core/src/components/TimePicker/examples/TimePickerBasic12Hour.tsx b/packages/react-core/src/components/TimePicker/examples/TimePickerBasic12Hour.tsx new file mode 100644 index 00000000000..b47a3932137 --- /dev/null +++ b/packages/react-core/src/components/TimePicker/examples/TimePickerBasic12Hour.tsx @@ -0,0 +1,22 @@ +/* eslint-disable no-console */ +import React from 'react'; +import { TimePicker } from '@patternfly/react-core'; + +export const Basic12Hour: React.FunctionComponent = () => { + const onChange = ( + _event: React.FormEvent, + time: string, + hour: number, + minute: number, + seconds: number, + isValid: boolean + ) => { + console.log('time', time); + console.log('hour', hour); + console.log('minute', minute); + console.log('seconds', seconds); + console.log('isValid', isValid); + }; + + return ; +}; diff --git a/packages/react-core/src/components/TimePicker/examples/TimePickerBasic24Hour.tsx b/packages/react-core/src/components/TimePicker/examples/TimePickerBasic24Hour.tsx new file mode 100644 index 00000000000..1308f1b7031 --- /dev/null +++ b/packages/react-core/src/components/TimePicker/examples/TimePickerBasic24Hour.tsx @@ -0,0 +1,4 @@ +import React from 'react'; +import { TimePicker } from '@patternfly/react-core'; + +export const Basic24Hour: React.FunctionComponent = () => ; diff --git a/packages/react-core/src/components/TimePicker/examples/TimePickerBasic24HoursWithSeconds.tsx b/packages/react-core/src/components/TimePicker/examples/TimePickerBasic24HoursWithSeconds.tsx new file mode 100644 index 00000000000..bc2ec357553 --- /dev/null +++ b/packages/react-core/src/components/TimePicker/examples/TimePickerBasic24HoursWithSeconds.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { TimePicker } from '@patternfly/react-core'; + +export const Basic24HourWithSeconds: React.FunctionComponent = () => ( + +); diff --git a/packages/react-core/src/components/TimePicker/examples/TimePickerCustomDelimiter.tsx b/packages/react-core/src/components/TimePicker/examples/TimePickerCustomDelimiter.tsx new file mode 100644 index 00000000000..864b29f571c --- /dev/null +++ b/packages/react-core/src/components/TimePicker/examples/TimePickerCustomDelimiter.tsx @@ -0,0 +1,4 @@ +import React from 'react'; +import { TimePicker } from '@patternfly/react-core'; + +export const CustomDelimiter: React.FunctionComponent = () => ; diff --git a/packages/react-core/src/components/TimePicker/examples/TimePickerMinMaxTimes.tsx b/packages/react-core/src/components/TimePicker/examples/TimePickerMinMaxTimes.tsx new file mode 100644 index 00000000000..91d71b0aac0 --- /dev/null +++ b/packages/react-core/src/components/TimePicker/examples/TimePickerMinMaxTimes.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { TimePicker } from '@patternfly/react-core'; + +export const MinMaxTimes: React.FunctionComponent = () => ( + +); diff --git a/packages/react-core/src/components/TimePicker/examples/TimePickerWithSeconds.tsx b/packages/react-core/src/components/TimePicker/examples/TimePickerWithSeconds.tsx new file mode 100644 index 00000000000..b15679a1eb5 --- /dev/null +++ b/packages/react-core/src/components/TimePicker/examples/TimePickerWithSeconds.tsx @@ -0,0 +1,4 @@ +import React from 'react'; +import { TimePicker } from '@patternfly/react-core'; + +export const WithSeconds: React.FunctionComponent = () => ; From 3d9122a7e319e2a0999e9ddda6828b4d05b56087 Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Fri, 4 Aug 2023 10:27:58 -0400 Subject: [PATCH 2/2] docs(TimePicker): added TimePicker to exported var names --- .../components/TimePicker/examples/TimePickerBasic12Hour.tsx | 2 +- .../components/TimePicker/examples/TimePickerBasic24Hour.tsx | 2 +- .../TimePicker/examples/TimePickerBasic24HoursWithSeconds.tsx | 2 +- .../TimePicker/examples/TimePickerCustomDelimiter.tsx | 2 +- .../components/TimePicker/examples/TimePickerMinMaxTimes.tsx | 2 +- .../components/TimePicker/examples/TimePickerWithSeconds.tsx | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react-core/src/components/TimePicker/examples/TimePickerBasic12Hour.tsx b/packages/react-core/src/components/TimePicker/examples/TimePickerBasic12Hour.tsx index b47a3932137..cca47536518 100644 --- a/packages/react-core/src/components/TimePicker/examples/TimePickerBasic12Hour.tsx +++ b/packages/react-core/src/components/TimePicker/examples/TimePickerBasic12Hour.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { TimePicker } from '@patternfly/react-core'; -export const Basic12Hour: React.FunctionComponent = () => { +export const TimePickerBasic12Hour: React.FunctionComponent = () => { const onChange = ( _event: React.FormEvent, time: string, diff --git a/packages/react-core/src/components/TimePicker/examples/TimePickerBasic24Hour.tsx b/packages/react-core/src/components/TimePicker/examples/TimePickerBasic24Hour.tsx index 1308f1b7031..71cdd0ecca9 100644 --- a/packages/react-core/src/components/TimePicker/examples/TimePickerBasic24Hour.tsx +++ b/packages/react-core/src/components/TimePicker/examples/TimePickerBasic24Hour.tsx @@ -1,4 +1,4 @@ import React from 'react'; import { TimePicker } from '@patternfly/react-core'; -export const Basic24Hour: React.FunctionComponent = () => ; +export const TimePickerBasic24Hour: React.FunctionComponent = () => ; diff --git a/packages/react-core/src/components/TimePicker/examples/TimePickerBasic24HoursWithSeconds.tsx b/packages/react-core/src/components/TimePicker/examples/TimePickerBasic24HoursWithSeconds.tsx index bc2ec357553..b66e60ad756 100644 --- a/packages/react-core/src/components/TimePicker/examples/TimePickerBasic24HoursWithSeconds.tsx +++ b/packages/react-core/src/components/TimePicker/examples/TimePickerBasic24HoursWithSeconds.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { TimePicker } from '@patternfly/react-core'; -export const Basic24HourWithSeconds: React.FunctionComponent = () => ( +export const TimePickerBasic24HourWithSeconds: React.FunctionComponent = () => ( ); diff --git a/packages/react-core/src/components/TimePicker/examples/TimePickerCustomDelimiter.tsx b/packages/react-core/src/components/TimePicker/examples/TimePickerCustomDelimiter.tsx index 864b29f571c..95a435b47b7 100644 --- a/packages/react-core/src/components/TimePicker/examples/TimePickerCustomDelimiter.tsx +++ b/packages/react-core/src/components/TimePicker/examples/TimePickerCustomDelimiter.tsx @@ -1,4 +1,4 @@ import React from 'react'; import { TimePicker } from '@patternfly/react-core'; -export const CustomDelimiter: React.FunctionComponent = () => ; +export const TimePickerCustomDelimiter: React.FunctionComponent = () => ; diff --git a/packages/react-core/src/components/TimePicker/examples/TimePickerMinMaxTimes.tsx b/packages/react-core/src/components/TimePicker/examples/TimePickerMinMaxTimes.tsx index 91d71b0aac0..b08f6ceb0ab 100644 --- a/packages/react-core/src/components/TimePicker/examples/TimePickerMinMaxTimes.tsx +++ b/packages/react-core/src/components/TimePicker/examples/TimePickerMinMaxTimes.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { TimePicker } from '@patternfly/react-core'; -export const MinMaxTimes: React.FunctionComponent = () => ( +export const TimePickerMinMaxTimes: React.FunctionComponent = () => ( ); diff --git a/packages/react-core/src/components/TimePicker/examples/TimePickerWithSeconds.tsx b/packages/react-core/src/components/TimePicker/examples/TimePickerWithSeconds.tsx index b15679a1eb5..918eabd8963 100644 --- a/packages/react-core/src/components/TimePicker/examples/TimePickerWithSeconds.tsx +++ b/packages/react-core/src/components/TimePicker/examples/TimePickerWithSeconds.tsx @@ -1,4 +1,4 @@ import React from 'react'; import { TimePicker } from '@patternfly/react-core'; -export const WithSeconds: React.FunctionComponent = () => ; +export const TimePickerWithSeconds: React.FunctionComponent = () => ;