Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
),
help: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).description(
'Any help text describing how the field works',
),
htmlFor: PropTypes.string.description(
'The id of the input element contained in this field',
),
label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).description(
'A short label describing the field',
),
name: PropTypes.string.description(
`The name of the value data when in a Form and the name of
the input field.`,
),
margin: marginProp,
pad: PropTypes.bool.description(
'Whether to add padding to align with the padding of TextInput.',
),
required: PropTypes.bool.description('Whether the field is required.'),
validate: PropTypes.oneOfType([
PropTypes.shape({
regexp: PropTypes.object, // regular expression
message: PropTypes.string,
}),
PropTypes.func,
]).description(
`Validation rule when used within a grommet Form. Provide a regular
expression or a function. If a
function is provided, it will be called with two arguments, the value
for this field and the entire value object. This permits validation to
encompass multiple fields. The function should return a string message
describing the validation issue, if any.`,
`import { Meter } from 'grommet';
<meter>`,
);
// We don't include svg due to a collision on the values property
// .intrinsicElement('svg');
DocumentedMeter.propTypes = {
...genericProps,
background: backgroundPropType.defaultValue({
color: 'light-2',
opacity: 'medium',
}),
max: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).description(
'The maximum value for the Meter.',
),
round: PropTypes.bool
.description('Whether to round the line ends')
.defaultValue(false),
size: PropTypes.oneOfType([
PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge', 'full']),
PropTypes.string,
])
.description('The size of the Meter.')
.defaultValue('medium'),
thickness: PropTypes.oneOfType([
PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']),
PropTypes.string,
])
.description('The size of the Meter.')
.defaultValue('medium'),
type: PropTypes.oneOf(['bar', 'circle'])
.description('The visual type of meter.')</meter>
import { DropInput } from 'grommet-controls';
`);
DocumentedElement.propTypes = {
a11yTitle: a11yTitlePropType,
a11yDropTitle: PropTypes.string.description(
'Custom drop button title to be used by screen readers.'
),
placeholder: PropTypes.string.description(
'Placeholder text to use when no value is provided.'
),
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Value for the field.'),
id: PropTypes.string.description('The id attribute of the input.'),
name: PropTypes.string.description('The name attribute of the input.'),
disabled: PropTypes.bool.description('Setting to true causes the input to be disabled.'),
onChange: PropTypes.func.description('Function that will be called when the user enters a new valuu.'),
focusIndicator: PropTypes.bool.description('Whether the plain text input should receive a focus outline.'),
plain: PropTypes.bool.description(
`Whether this is a plain input with no border or padding.
Only use this when the containing context provides sufficient affordance`
),
mask: PropTypes.oneOfType([
PropTypes.array,
PropTypes.func,
PropTypes.bool,
PropTypes.shape({
mask: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
pipe: PropTypes.func,
}),
]).description('An array or a function that defines how the user input is going to be masked.'),
guide: PropTypes.bool.description('When masked, a boolean that tells the component whether to be in guide or no guide mode.'),
export const doc = RadioButton => {
const DocumentedRadioButton = describe(RadioButton)
.availableAt(getAvailableAtBadge('RadioButton'))
.description('A radio button control.')
.details(
`RadioButton should typically not be used directly.
Instead, use RadioButtonGroup.`,
)
.usage(
`import { RadioButton } from 'grommet';
`,
)
.intrinsicElement('input');
DocumentedRadioButton.propTypes = {
checked: PropTypes.bool.description('Same as React <input checked="{}">'),
disabled: PropTypes.bool.description(
`Same as React <input disabled="{}">. Also adds a hidden input element
with the same name so form submissions work.`,
),
id: PropTypes.string.description(
'The DOM id attribute value to use for the underlying <input> element.',
),
label: PropTypes.node.description(
'Label text to place next to the control.',
),
name: PropTypes.string.description(
`The DOM name attribute value to use for the underlying <input>
element.`,
).isRequired,
onChange: PropTypes.func.description(
`Function that will be called when the user clicks the radio button. It
export var doc = function doc(Tab) {
var DocumentedTab = describe(Tab).description('One tab within Tabs.').usage("import { Tab } from 'grommet';\n").intrinsicElement('button');
DocumentedTab.propTypes = {
plain: PropTypes.bool.description('Whether this is a plain tab with no style.').defaultValue(false),
title: PropTypes.node.description('The title of the tab.')
};
return DocumentedTab;
};
export var themeDoc = {
),
modal: PropTypes.bool
.description(
`Whether there should be an overlay preventing interaction underneath
the layer.`,
)
.defaultValue(true),
onClickOutside: PropTypes.func.description(
`Function that will be invoked on modal layers when the user clicks
outside the layer.`,
),
onEsc: PropTypes.func.description(
`Function that will be called when the user presses the escape key inside
the layer.`,
),
plain: PropTypes.bool
.description(
'Whether this is a plain Layer with no background color or border.',
)
.defaultValue(false),
position: PropTypes.oneOf([
'bottom',
'bottom-left',
'bottom-right',
'center',
'hidden',
'left',
'right',
'top',
'top-left',
'top-right',
])
.description('A paragraph of text.')
.usage(
`import { Paragraph } from 'grommet';
`,
)
.intrinsicElement('p');
DocumentedParagraph.propTypes = {
...genericProps,
color: colorPropType.description(
'A color identifier to use for the text color.',
),
fill: PropTypes.bool
.description('Whether the width should fill the container.')
.defaultValue(false),
responsive: PropTypes.bool
.description(`Whether margin should be scaled for mobile environments.`)
.defaultValue(true),
size: PropTypes.oneOfType([
PropTypes.oneOf(['small', 'medium', 'large', 'xlarge', 'xxlarge']),
PropTypes.string,
])
.description('The size of the Paragraph text.')
.defaultValue('medium'),
textAlign: PropTypes.oneOf(['start', 'center', 'end'])
.description('How to align the text inside the paragraph.')
.defaultValue('start'),
};
return DocumentedParagraph;
};
PropTypes.node,
PropTypes.shape({
aggregate: PropTypes.bool,
}),
]),
header: PropTypes.oneOfType([
PropTypes.string,
PropTypes.node,
PropTypes.shape({
aggregate: PropTypes.bool,
}),
]),
primary: PropTypes.bool,
property: PropTypes.string.isRequired,
render: PropTypes.func,
search: PropTypes.bool,
sortable: PropTypes.bool,
}),
).description(
`A description of the data. The order controls the column order.
'property' indicates which property in the data objects to associate
the column with. 'header' indicates what to display in the column
header. 'render' allows for custom rendering of body cells. Use 'render'
for custom formatting for things like currency and date or to
display rich content like Meters. 'align' indicates how the cells in
the column are aligned. 'aggregate' indicates how the data in the
column should be aggregated. This only applies to a footer or groupBy
context. 'footer' indicates what should be shown in the footer for
the column. 'search' indicates whether a search filter should be
made available for the column. 'primary' indicates that this property
should be used as the unique identifier, which gives the cell 'row' scope
for accessibility. If 'primary' is not used for any column, and
export default (function (Grommet) {
var DocumentedGrommet = describe(Grommet).availableAt(getAvailableAtBadge('Grommet')).description('This is the top level Grommet container.').usage('import { Grommet } from \'grommet\';\n...');
DocumentedGrommet.propTypes = {
full: PropTypes.bool.description('Whether to take the whole viewport.'),
theme: PropTypes.object.description('Custom styles for Grommet app component.')
};
return DocumentedGrommet;
});
export default (function (CheckBox) {
var DocumentedCheckBox = describe(CheckBox).availableAt(getAvailableAtBadge('CheckBox')).description('A checkbox toggle control.').usage('import { CheckBox } from \'grommet\';\n');
DocumentedCheckBox.propTypes = {
checked: PropTypes.bool.description('Same as React <input checked="{}">'),
disabled: PropTypes.bool.description('Same as React <input disabled="{}">. Also adds a hidden input element\n with the same name so form submissions work.'),
id: PropTypes.string.description('The DOM id attribute value to use for the underlying <input> element.'),
label: PropTypes.node.description('Label text to place next to the control.'),
name: PropTypes.string.description('The DOM name attribute value to use for the underlying <input> element.'),
onChange: PropTypes.func.description('Function that will be called when the user clicks the check box. It\n will be passed a React event object. The current state can be accessed\n via event.target.checked. Same as React <input>.'),
reverse: PropTypes.bool.description('Whether to show the label in front of the checkbox.'),
toggle: PropTypes.bool.description('Whether to visualize it as a toggle switch.')
};
return DocumentedCheckBox;
});