wix-style-react
Version:
91 lines (90 loc) • 3.75 kB
JavaScript
export default {
description:
'Time input allows users to to enter or select a specific time value.',
do: [
'Use it to insert a specific time, for example set an event start time, schedule a meeting or appointment, set an alarm.',
],
dont: ['Don’t use it to specify duration, use <NumberInput/> instead.'],
featureExamples: [
{
title: 'Size',
description: `Adjust the component size using \`size\` prop. It supports 3 sizes:<br/>
 - \`large\` - use it in onboarding flows, where input needs emphasis<br/>
 - \`medium\` (default) - use in all common cases<br/>
 - \`small\` - use in more dense and narrow layouts`,
example: '_size',
},
{
title: 'Width',
description: `Control the width of the field with \`width\` property. It supports 2 values: <br/>
 - \`auto\` (default) - use to match field width to contained input value<br/>
 - \`100%\` - use to extend field to fill its parent container`,
example: '_width',
},
{
title: 'Border',
description: `Style the component using \`border\` prop. It supports 3 styles:<br/>
 - \`standart\` (default) - use in all common cases<br/>
 - \`round\` - use when field is used to filter data<br/>
 - \`bottomLine\` - use as a title which can be edited on the click`,
example: '_border',
},
{
title: 'Status',
description: `Control component status using \`status\` prop. It supports 3 states:<br/>
 - \`error\` - use to highlight invalid input value<br/>
 - \`warning\` - use to highlight inputs that values impact user business or can’t be validated<br/>
 - \`loading\` - use to show that the value is being uploaded to the server<br/>`,
example: '_status',
},
{
title: 'Status Message',
description: `Explain the status with \`statusMessage\` prop. The message is revealed when a user hovers over the status icon.
The placement of a tooltip is controlled with \`tooltipPlacement\` prop.`,
example: '_statusMessage',
},
{
title: 'Disabled',
description: `Disable all input interactions with \`disabled\` prop. Use it to highlight unavailable functions.`,
example: '_disabled',
},
{
title: 'Affix',
description: `Support input value with additional information added to \`prefix\` and \`suffix\` props.
Props can contain text, icons and even buttons.`,
example: '_affix',
},
{
title: 'Locale',
description: `Specify a correct time formatting per country using \`locale\` prop.`,
example: '_locale',
},
{
title: 'Time Style',
description: `Control whether to display a time zone info with \`timeStyle\` prop. It supports 2 values:<br/>
 - \`short\` (default) - use to display time only<br/>
 - \`long\` - use to display time together with a timezone`,
example: '_timeStyle',
},
{
title: 'Step',
description: `Control the interval between timestamps that are suggested for the user in a dropdown layout with \`step\` prop.<br/>
<br/>
By default a step between timestamps is 15 minutes.
`,
example: '_step',
},
],
commonUseCaseExamples: [
{
title: 'Scheduling',
description: `Use time input together with a \`<DatePicker/>\` to schedule specific times for events, appointments, delivery hours, etc.`,
example: '_scheduling',
},
{
title: 'Range',
description: `Use \`<Range/>\` component to merge two input fields to specify a time duration.`,
example: '_range',
},
],
};