Skip to content

Update slider api.json #3426

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

Merged
merged 1 commit into from
Nov 28, 2024
Merged

Update slider api.json #3426

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
189 changes: 173 additions & 16 deletions src/components/slider/slider.api.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,37 @@
"category": "controls",
"description": "A Slider component",
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SliderScreen.tsx",
"images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Slider/Slider.gif?raw=true"],
"images": [
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Slider/Slider.gif?raw=true"
],
"props": [
{"name": "value", "type": "number", "description": "Initial value"},
{"name": "minimumValue", "type": "number", "description": "Track minimum value"},
{"name": "maximumValue", "type": "number", "description": "Track maximum value"},
{"name": "initialMinimumValue", "type": "number", "description": "Initial minimum value", "note": "Only when `useRange` is true"},
{"name": "initialMaximumValue", "type": "number", "description": "Initial maximum value", "note": "Only when `useRange` is true"},
{
"name": "value",
"type": "number",
"description": "Initial value"
},
{
"name": "minimumValue",
"type": "number",
"description": "Track minimum value"
},
{
"name": "maximumValue",
"type": "number",
"description": "Track maximum value"
},
{
"name": "initialMinimumValue",
"type": "number",
"description": "Initial minimum value",
"note": "Only when `useRange` is true"
},
{
"name": "initialMaximumValue",
"type": "number",
"description": "Initial maximum value",
"note": "Only when `useRange` is true"
},
{
"name": "step",
"type": "number",
Expand All @@ -31,14 +55,26 @@
"type": "string",
"description": "The color used for the track from minimum value to current value"
},
{"name": "maximumTrackTintColor", "type": "string", "description": "The track color"},
{
"name": "maximumTrackTintColor",
"type": "string",
"description": "The track color"
},
{
"name": "renderTrack",
"type": "() => ReactElement | ReactElement[]",
"description": "Custom render instead of rendering the track"
},
{"name": "thumbTintColor", "type": "string", "description": "Thumb color"},
{"name": "onValueChange", "type": "SliderOnValueChange", "description": "Callback for onValueChange"},
{
"name": "thumbTintColor",
"type": "string",
"description": "Thumb color"
},
{
"name": "onValueChange",
"type": "SliderOnValueChange",
"description": "Callback for onValueChange"
},
{
"name": "onRangeChange",
"type": "SliderOnRangeChange",
Expand All @@ -59,10 +95,26 @@
"type": "() => void",
"description": "Callback that notifies when the reset function was invoked"
},
{"name": "containerStyle", "type": "ViewStyle", "description": "The container style"},
{"name": "trackStyle", "type": "ViewStyle", "description": "The track style"},
{"name": "thumbStyle", "type": "ViewStyle", "description": "The thumb style"},
{"name": "activeThumbStyle", "type": "ViewStyle", "description": "The active (during press) thumb style"},
{
"name": "containerStyle",
"type": "ViewStyle",
"description": "The container style"
},
{
"name": "trackStyle",
"type": "ViewStyle",
"description": "The track style"
},
{
"name": "thumbStyle",
"type": "ViewStyle",
"description": "The thumb style"
},
{
"name": "activeThumbStyle",
"type": "ViewStyle",
"description": "The active (during press) thumb style"
},
{
"name": "disableActiveStyling",
"type": "boolean",
Expand All @@ -83,7 +135,112 @@
"type": "boolean",
"description": "If true the component will have accessibility features enabled"
},
{"name": "testID", "type": "string", "description": "The component test id"},
{"name": "migrate", "type": "boolean", "description": "Temporary prop required for migration to the Slider's new implementation"}
]
{
"name": "testID",
"type": "string",
"description": "The component test id"
},
{
"name": "migrate",
"type": "boolean",
"description": "Temporary prop required for migration to the Slider's new implementation"
}
],
"docs": {
"hero": {
"title": "Slider",
"description": "Sliders allow users to make selections from a range of values in a quick and interactive way.\nSliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.",
"type": "hero",
"layout": "horizontal",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_hero.png"
}
]
},
"tabs": [
{
"title": "Overview",
"sections": [
{
"type": "section",
"title": "Usage examples",
"description": "Sliders can be used for various types of user input and controls, for example an amount, or a specific setting.",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_section_examples.png"
}
]
},
{
"type": "table",
"columns": [
"Slider type",
"Preview"
],
"items": [
{
"title": "Linear slider",
"description": "Use this slider to allow the user to select a numeric value from a range of numbers.",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_table_linear.png"
}
]
},
{
"title": "Centered slider",
"description": "This type allows the user to select negative values.",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_table_centered.png"
}
]
},
{
"title": "Range slider",
"description": "Use this slider to allow the user to select a range of values.",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_table_range.png"
}
]
},
{
"title": "Color slider",
"description": "Use this slider to allow the user to select a color from a gradient range of colors.",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_table_color.png"
}
]
}
],
"title": "Slider types"
},
{
"type": "section",
"layout": "horizontal",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_spec_linear.png"
}
],
"title": "Spec",
"description": "**Linear slider**\n\n**Default**\nThumb: 24px \nOutline: 1.5px\n\n**On tap**\nThumb: 40px\nOutline: 1.5px\n\n**Disabled**"
},
{
"type": "section",
"layout": "horizontal",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Slider/slider_spec_range.png"
}
],
"description": "**Range slider**\n\n**Initial state**\nWidest range is displayed by default.\n\n**Thumbs**\nThumbs should not cross each other and keep minimum distance between them of S2 (8px). Thumbs shouldn’t overlap each other when idle.\n\n**Spacing**\nMinimum spacing between idle Thumbs - S2"
}
]
}
]
}
}