Skip to content

Commit a20b158

Browse files
Inbal-TishInbal-Tish
authored
F components - api docs (#1652)
* F components - api docs * replacing notes with note
1 parent c50f2ce commit a20b158

File tree

3 files changed

+123
-0
lines changed

3 files changed

+123
-0
lines changed

‎src/components/fader/fader.api.json

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "Fader",
3+
"category": "layoutsAndTemplates",
4+
"description": "A gradient fading overlay to render on top of overflowing content (like scroll component)",
5+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/FaderScreen.tsx",
6+
"images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Fader/Fader.gif?raw=true"],
7+
"props": [
8+
{"name": "visible", "type": "boolean", "description": "Whether the fader is visible (default is true)"},
9+
{
10+
"name": "position",
11+
"type": "START | END | TOP | BOTTOM",
12+
"description": "The position of the fader (the image is different)",
13+
"default": "Fader.position.END"
14+
},
15+
{"name": "size", "type": "number", "description": "change the size of the fade view", "default": "50"},
16+
{
17+
"name": "tintColor",
18+
"type": "string",
19+
"description": "Change the tint color of the fade view",
20+
"default": "Colors.white"
21+
}
22+
]
23+
}

‎src/components/featureHighlight/featureHighlight.api.json

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
{
2+
"name": "FeatureHighlight",
3+
"category": "overlays",
4+
"description": "Component for feature discovery",
5+
"note": [
6+
"FeatureHighlight component must be a direct child of the root view returned in render()",
7+
"If the element to be highlighted doesn't have a style attribute add 'style={{opacity: 1}}' so the Android OS can detect it",
8+
"FeatureHighlight uses a native library. You MUST add and link the native library to both iOS and Android projects. For instruction please see: https://facebook.github.io/react-native/docs/linking-libraries-ios.html"
9+
],
10+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/FeatureHighlightScreen.tsx",
11+
"images": [
12+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/FeatureHighlight/FeatureHighlight.gif?raw=true"
13+
],
14+
"props": [
15+
{"name": "visible", "type": "boolean", "description": "Determines if to present the feature highlight component"},
16+
{
17+
"name": "highlightFrame",
18+
"type": "HighlightFrame",
19+
"description": "Frame of the area to highlight {x, y, width, height}"
20+
},
21+
{
22+
"name": "getTarget",
23+
"type": "() => any",
24+
"description": "Callback that extract the ref of the element to be highlighted"
25+
},
26+
{"name": "title", "type": "string", "description": "Title of the content to be displayed"},
27+
{"name": "message", "type": "string", "description": "Message to be displayed"},
28+
{"name": "titleStyle", "type": "TextStyle", "description": "Title text style"},
29+
{"name": "messageStyle", "type": "TextStyle", "description": "Message text style"},
30+
{"name": "titleNumberOfLines", "type": "number", "description": "Title's max number of lines"},
31+
{"name": "messageNumberOfLines", "type": "number", "description": "Message's max number of lines"},
32+
{
33+
"name": "confirmButtonProps",
34+
"type": "ButtonProps",
35+
"description": "Props that will be passed to the dismiss button"
36+
},
37+
{
38+
"name": "onBackgroundPress",
39+
"type": "TouchableWithoutFeedbackProps['onPress']",
40+
"description": "Called the background pressed"
41+
},
42+
{
43+
"name": "overlayColor",
44+
"type": "string",
45+
"description": "Color of the content's background (usually includes alpha for transparency)"
46+
},
47+
{"name": "textColor", "type": "string", "description": "Color of the content's text"},
48+
{"name": "borderColor", "type": "string", "description": "Color of the border around the highlighted element"},
49+
{"name": "borderWidth", "type": "number", "description": "Width of the border around the highlighted element"},
50+
{
51+
"name": "borderRadius",
52+
"type": "number",
53+
"description": "Border radius for the border corners around the highlighted element"
54+
},
55+
{
56+
"name": "minimumRectSize",
57+
"type": "RectSize",
58+
"description": "The minimum size of the highlighted component",
59+
"note": "Android API 21+, and only when passing a ref in 'getTarget'",
60+
"default": "{width: 56, height: 56}"
61+
},
62+
{
63+
"name": "innerPadding",
64+
"type": "number",
65+
"description": "The padding of the highlight frame around the highlighted element's frame (only when passing ref in 'getTarget')",
66+
"default": "10"
67+
},
68+
{"name": "pageControlProps", "type": "PageControlProps", "description": "PageControl component's props"},
69+
{"name": "testID", "type": "string", "description": "The test id for e2e tests"}
70+
]
71+
}

‎src/components/floatingButton/floatingButton.api.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "FloatingButton",
3+
"category": "overlays",
4+
"description": "Hovering button with gradient background",
5+
"modifiers": ["margin", "background", "color"],
6+
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/FloatingButtonScreen.tsx",
7+
"images": [
8+
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/FloatingButton/FloatingButton.gif?raw=true"
9+
],
10+
"props": [
11+
{"name": "visible", "type": "boolean", "description": "Whether the component is visible"},
12+
{"name": "button", "type": "ButtonProps", "description": "Props for the Button component"},
13+
{"name": "secondaryButton", "type": "ButtonProps", "description": "Props for the secondary Button component"},
14+
{
15+
"name": "bottomMargin",
16+
"type": "number",
17+
"description": "The bottom margin of the button, or secondary button if passed"
18+
},
19+
{"name": "duration", "type": "number", "description": "The duration of the button's animations (show/hide)"},
20+
{"name": "withoutAnimation", "type": "boolean", "description": "Whether to show/hide the button without animation"},
21+
{"name": "hideBackgroundOverlay", "type": "boolean", "description": "Whether to show background overlay"},
22+
{
23+
"name": "testID",
24+
"type": "string",
25+
"description": "The test id for e2e tests",
26+
"note": "<TestID> - the floatingButton container\n<TestID>.button - the floatingButton main button\n<TestID>.secondaryButton - the floatingButton secondaryButton"
27+
}
28+
]
29+
}

0 commit comments

Comments
 (0)