react-native-ui-lib 7.39.1-snapshot.6749 → 7.39.1-snapshot.6756

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.39.1-snapshot.6749",
+  "version": "7.39.1-snapshot.6756",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/src/components/button/button.api.json

@@ -135,7 +135,7 @@
     {
       "name": "enableShadow",
       "type": "boolean",
-      "description": "Control shadow visibility (iOS-only)"
+      "description": "Control shadow visibility"
     },
     {
       "name": "avoidInnerPadding",
@@ -164,16 +164,21 @@
     }
   ],
   "snippet": [
+    "<View flex>",
     "<View flex center gap-s5>",
     "<Button label={'Press'} backgroundColor={Colors.red30}/>",
     "<Button label={'Press'} outline size={Button.sizes.medium}/>",
     "<Button label={'Press'}  iconSource={Assets.icons.demo.star}/>",
+    "</View>",
+    "<View flex bottom>",
+    "<Button fullWidth label='Full Width Button'/>",
+    "</View>",
     "</View>"
   ],
   "docs": {
     "hero": {
       "title": "Button",
-      "description": "A button triggers an event or action.\n\nPrimary buttons that indicate a call to action, are the most prominent. 
Secondary buttons, which indicate less commonly used actions, should be less prominent than primary buttons, second in hierarchy.\n\nButtons are placed where a user should expect them, i.e. in close proximity to the other elements that the action affects.",
+      "description": "A button triggers an event or action.\n\nPrimary buttons that indicate a call to action, are the most prominent. 
 Secondary buttons, which indicate less commonly used actions, should be less prominent than primary buttons, second in hierarchy.\n\nButtons are placed where a user should expect them, i.e. in close proximity to the other elements that the action affects.",
       "type": "hero",
       "layout": "horizontal",
       "content": [
@@ -217,15 +222,6 @@
                   }
                 ]
               },
-              {
-                "title": "Floating Button",
-                "description": "The Floating Button is displayed at the bottom of the screen.",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_types_floatingButton.png"
-                  }
-                ]
-              },
               {
                 "title": "Full-Width Button",
                 "description": "Full Width buttons are sticky on the bottom of the screens.",
@@ -234,15 +230,6 @@
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_types_fullButton.png"
                   }
                 ]
-              },
-              {
-                "title": "Toggle Button",
-                "description": "Toggle Button are mainly used to toggle between a state, f.e- favorite, like.",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_types_toggleButtons.png"
-                  }
-                ]
               }
             ],
             "title": "Button Types",
@@ -309,7 +296,7 @@
                 ]
               },
               {
-                "title": "Distructive",
+                "title": "Destructive",
                 "description": "Used for destructive actions such as Delete and Log out. ",
                 "content": [
                   {
@@ -319,18 +306,6 @@
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_presets_distructiveSecondary.png"
                   }
                 ]
-              },
-              {
-                "title": "Premium",
-                "description": "Used as a premium upgrade entry point.",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_presets_premiumPrimary.png"
-                  },
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_presets_premiumSecondary.png"
-                  }
-                ]
               }
             ],
             "title": "",
@@ -432,51 +407,6 @@
             "description": "",
             "name": "Inverted"
           },
-          {
-            "type": "table",
-            "columns": ["Property", "Primary", "Secondary"],
-            "items": [
-              {
-                "title": "Active",
-                "description": "",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_premiumActivePrimary.png"
-                  },
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_premiumActiveSecondary.png"
-                  }
-                ]
-              },
-              {
-                "title": "Loading",
-                "description": "",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_premiumLoadingPrimary.png"
-                  },
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_premiumLoadingSecondary.png"
-                  }
-                ]
-              },
-              {
-                "title": "Disabled",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_premiumDisabledPrimary.png"
-                  },
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_premiumDisabledSecondary.png"
-                  }
-                ],
-                "description": ""
-              }
-            ],
-            "title": "",
-            "description": "",
-            "name": "Premium"
-          },
           {
             "type": "table",
             "columns": ["Property", "Component"],
@@ -638,39 +568,6 @@
             "description": "",
             "name": "Main"
           },
-          {
-            "type": "table",
-            "columns": ["Property", "Primary", "Secondary"],
-            "items": [
-              {
-                "title": "Active",
-                "description": "",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_presets_invertedPrimary.png"
-                  },
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_states_invertedActiveSecondary.png"
-                  }
-                ]
-              },
-              {
-                "title": "Disabled",
-                "description": "",
-                "content": [
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_states_invertedDisabledPrimary.png"
-                  },
-                  {
-                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_states_invertedDisabledSecondary.png"
-                  }
-                ]
-              }
-            ],
-            "title": "",
-            "description": "",
-            "name": "Inverted"
-          },
           {
             "type": "section",
             "title": "Usage Examples",
@@ -700,7 +597,7 @@
                 ]
               },
               {
-                "title": "Distructive",
+                "title": "Destructive",
                 "description": "text style: bodyBold, $textDangerLight",
                 "content": [
                   {
@@ -780,7 +677,7 @@
           {
             "type": "section",
             "title": "Full-Width Button",
-            "description": "Full-Width buttons are sticky on the bottom of the screens.
They are usually used for primary actions on management screens, e.g. adding a new item to a list.\nThey are great to use on screens with potentially long lists, since they stick to the bottom and are always visible."
+            "description": "Full-Width buttons are sticky on the bottom of the screens.
They are usually used for primary actions on management screens, e.g. adding a new item to a list.\nThey are great to use on screens with potentially long lists, since they stick to the bottom and are always visible."
           },
           {
             "type": "table",
@@ -796,7 +693,7 @@
                 ]
               },
               {
-                "title": "Distructive ",
+                "title": "Destructive ",
                 "description": "",
                 "content": [
                   {
@@ -879,7 +776,7 @@
               },
               {
                 "title": "Action text truncation/ellipsis",
-                "description": "Action text truncation or ellipsis should be avoided at all costs.\nActions should be clear and down to the point. 
In case the action is complex, consider displaying an explanatory text outside the actual button component. ",
+                "description": "Action text truncation or ellipsis should be avoided at all costs.\nActions should be clear and down to the point. 
 In case the action is complex, consider displaying an explanatory text outside the actual button component. ",
                 "content": [
                   {
                     "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_UX_dosDonts_truncation.png"

package/src/components/button/types.d.ts

@@ -113,7 +113,7 @@ export type ButtonProps = TouchableOpacityProps & TypographyModifiers & ColorsMo
      */
     round?: boolean;
     /**
-     * Control shadow visibility (iOS-only)
+     * Control shadow visibility
      */
     enableShadow?: boolean;
     /**

package/src/components/picker/api/picker.api.json

@@ -107,14 +107,31 @@
     {"name": "customLoaderElement", "type": "ReactNode", "description": "Custom loader element"}
   ],
   "snippet": [
-    "<Picker",
-    "  value={2$1}",
-    "  placeholder={'Placeholder'$2}",
-    "  onChange={() => console.log('changed')$3}",
-    "  trailingAccessory={<Icon source={Assets.icons.demo.chevronDown}/>}",
-    " items={[{label: 'Item 1', value: 1}, {label: 'Item 2', value: 2},{label: 'Item 3', value: 3}]}",
-    ">",
-    "</Picker>"
+    "function Example(props) {",
+    "  const [value, setValue] = useState(undefined);",
+    "",
+    "  const FILTERS = [",
+    "    {value: 1, label: 'All'},",
+    "    {value: 2, label: 'Accessories'},",
+    "    {value: 3, label: 'Outwear'},",
+    "    {value: 4, label: 'Footwear'},",
+    "    {value: 5, label: 'Swimwear'},",
+    "    {value: 6, label: 'Tops'}",
+    "  ];",
+    "",
+    "  return (",
+    "    <View flex padding-s5>",
+    "      <Picker",
+    "        value={value}",
+    "        preset='outline'",
+    "        placeholder={'Select filter'}",
+    "        label={'filter'}",
+    "        onChange={setValue}",
+    "        items={FILTERS}",
+    "      />",
+    "    </View>",
+    "  );",
+    "}"
   ],
   "docs": {
     "hero": {

package/src/components/text/text.api.json

@@ -25,5 +25,22 @@
     {"name": "recorderTag", "type": "'mask' | 'unmask'", "description": "Recorder Tag"},
     {"name": "animated", "type": "boolean", "description": "Use Animated.Text as a container"}
   ],
-  "snippet": ["<Text text30$1>Text goes here$2</Text>"]
+  "snippet": [
+    "<View flex center gap-s2>",
+    "<Text text30$1>Text30</Text>",
+    "<Text text40 red30>Red</Text>",
+    "<Text text60 uppercase>uppercase</Text>",
+    "<Text text60 underline>underline</Text>",
+    "<Text text70 highlightString='be' highlightStyle={{color: Colors.$textPrimary, fontWeight: 'bold'}}>To be, or not to be</Text>",
+    "</View>"
+  ],
+  "docs": {
+    "hero": {
+      "title": "Text",
+      "description": "An enhanced version of React Native's Text component providing additional features and modifiers support",
+      "type": "hero",
+      "layout": "horizontal",
+      "content": [{}]
+    }
+  }
 }

package/src/components/touchableOpacity/touchableOpacity.api.json

@@ -35,8 +35,19 @@
     }
   ],
   "snippet": [
+    "<View flex center>",
     "<TouchableOpacity onPress={() => console.log('pressed')$1}>",
-    "   <Text text40>Click Me!</Text>",
-    "</TouchableOpacity>"
-  ]
+    "   <Text text40>Touchable</Text>",
+    "</TouchableOpacity>",
+    "</View>"
+  ],
+  "docs": {
+    "hero": {
+      "title": "TouchableOpacity",
+      "description": "An enhanced version of React Native's TouchableOpacity component providing additional features and modifiers support",
+      "type": "hero",
+      "layout": "horizontal",
+      "content": [{}]
+    }
+  }
 }

package/src/components/view/view.api.json

@@ -26,13 +26,22 @@
     {"name": "style", "type": "ViewStyle", "description": "Custom style"}
   ],
   "snippet": [
-   "<View row gap-s5 centerV>",
-   "  <View style={{width: 200, height: 200}} bg-purple40 centerH>",
-   "  <View style={{width: 60, height: 60}} bg-green20/>",
-   "  </View>",
-   "  <View style={{width: 150, height: 150}} bg-orange30 bottom right>",
-   "  <View style={{width: 50, height: 50}} bg-yellow40 br100 margin-s2/>",
-   "  </View>",
-   "</View>"
-  ]
+    "<View row gap-s5 centerV>",
+    "  <View style={{width: 200, height: 200}} bg-purple40 centerH>",
+    "  <View style={{width: 60, height: 60}} bg-green20/>",
+    "  </View>",
+    "  <View style={{width: 150, height: 150}} bg-orange30 bottom right>",
+    "  <View style={{width: 50, height: 50}} bg-yellow40 br100 margin-s2/>",
+    "  </View>",
+    "</View>"
+  ],
+  "docs": {
+    "hero": {
+      "title": "View",
+      "description": "An enhanced version of React Native's View component providing additional features and modifiers support",
+      "type": "hero",
+      "layout": "horizontal",
+      "content": [{}]
+    }
+  }
 }