wix-style-react
Version:
65 lines (64 loc) • 2.59 kB
JavaScript
export default {
description:
'Time input allows you to insert a time value in “hours:minutes:seconds” format.',
do: ['Use it to insert a specific time, such as event start time.'],
dont: ['Don’t use it to specify duration, use <NumberInput/> instead.'],
featureExamples: [
{
title: 'Width',
description: `Specifies the width of a component to be one of the following:<br/>
 - \`auto (default)\` - use it to match field width according to content length<br/>
 - \`100%\` - use it to extend field width to fill the parent container`,
example: '_width',
},
{
title: 'Status',
description: `Control component status using \`status\` prop. It supports 3 states:<br/>
 - \`error\` - use it to highlight an invalid value<br/>
 - \`warning\` - use to highlight inputs that values impact user business<br/>
 - \`loading\` - use it to show that the value is being uploaded to the server.</br>
</br>
Save horizontal space by hiding the status icon with \`hideStatusSuffix\` prop.`,
example: '_status',
},
{
title: 'Status Message',
description: `Explain the status with \`statusMessage\` prop. The message is revealed when a user hovers over the status icon.`,
example: '_statusMessage',
},
{
title: 'Disabled',
description: `Restrict field editing with \`disabled\` prop. Replace default field value with dashes by enabling \`dashesWhenDisabled\` prop.`,
example: '_disabled',
},
{
title: 'Suffix',
description: `Give more context about the field with a custom element in a suffix area. It can be text or an icon.`,
example: '_suffix',
},
{
title: 'Format',
description: `Supports both \`12-hour\` and \`24-hour\` time systems. 12-hour format is accompanied with AM / PM selection.`,
example: '_format',
},
{
title: 'Minutes step',
description: `Control the number of minutes that should be added / deducted on arrow click.
<br/>
By default it changes by 20min intervals.`,
example: '_minutesStep',
},
{
title: 'Seconds',
description: `Enable seconds for very precise time values.`,
example: '_seconds',
},
],
commonUseCaseExamples: [
{
title: 'Scheduling',
description: `Time input usually goes together with a \`<DatePicker/>\` and schedule specific times for events, appointments, delivery hours, etc.`,
example: '_scheduling',
},
],
};