Update components to reflect ff 7 UI

docs/ff-concepts/navigation-routing/bottom-sheet.md

@@ -49,7 +49,7 @@ Follow the steps below to add an action that opens the bottom sheet:
 
 1. First, create a bottom sheet [component](../../resources/ui/components/intro-components.md).
 :::tip
-You can also create one from the 'BottomSheet' [**templates**](../../resources/ui/components/creating-components.md#creating-a-component-from-a-popular-template).
+You can also create one from the 'BottomSheet' [**templates**](../../resources/ui/components/creating-components.md#creating-component-from-template).
 :::
 
 <div style={{

docs/resources/ui/components/callbacks.md

@@ -12,7 +12,7 @@ In FlutterFlow, callbacks are a way to pass down actions from parent entities (l
 components) to child entities (such as custom widgets or components). This allows the parent to
 define specific behaviors that the child entity should execute when certain events occur.
 
-It enables dynamic and interactive behavior in child components, allowing them to perform actions
+Callbacks enable dynamic and interactive behavior in child components, allowing them to perform actions
 defined by the parent, such as navigation, data updates, or displaying dialogs.
 
 For example, if you have an *image upload component*, the parent can define what should happen after an image is successfully uploaded. Using callbacks, the *image upload component* can execute a parent-defined action, such as:
@@ -21,30 +21,30 @@ For example, if you have an *image upload component*, the parent can define what
 - Update the user's database record with the new image URL.
 - Refresh the UI to display the updated profile picture.
 
-This makes the *image upload component* component reusable, as it doesn't need to know the specifics of what should happen post-upload. Instead, the parent controls the behavior by passing the appropriate actions via a callback.
+This makes the *image upload component* reusable, as it doesn't need to know the specifics of what should happen after upload. Instead, the parent controls the behavior by passing the appropriate actions via a callback.
 
 ![action-parameters-callbacks](imgs/action-parameters-callbacks.avif)
 
 :::tip[Benefits of Using Callbacks in FlutterFlow]
 
 - **Modularity:** Separate the logic of what happens when an event occurs from the child component,
-  making your component widget more modular and reusable.
+  making your component more modular and reusable.
 - **Reusability:** Use the same child component in different contexts with different behaviors,
   simply by passing different callbacks.
   :::
 
 
 ## Adding Callbacks
 
-Let’s continue with our previous example (*image upload component*) and see how to add callbacks on it:
+Let’s continue with our previous example (*image upload component*) and see how to add callbacks to it:
 
 ### Creating a Callback Parameter
 
-In order to create a component that will execute a callback, you must create a component with a parameter of **Type** **Action**. You can create an action parameter called `uploadAction`, which represents the action that will be executed after the image is uploaded.
+To create a component that will execute a callback, you must create a component with a parameter with the **Action** type. You can create an action parameter called `uploadAction`, which represents the action that will be executed after the image is uploaded.
 
-When you create an action parameter, you can also specify parameters that will be passed into the action. For this example, the action that will be executed will likely need to know the uploaded image URL to process it further. So, you can specify an action parameter called uploadedURL.
+When you create an action parameter, you can also specify parameters that will be passed into the action. For this example, the action will likely need to know the uploaded image URL to process it further. So, you can specify an action parameter called `uploadedURL`.
 
-Now, the page or component that uses this button can utilize this parameter in its own action flow. An example of this is shown below.
+Now, the page or component that uses this button can use this parameter in its own action flow. An example of this is shown below.
 
 <div style={{
     position: 'relative',
@@ -76,7 +76,7 @@ Now, the page or component that uses this button can utilize this parameter in i
 
 You can execute the action passed into the component by using the **Execute Callback** action within the component's action flows.
 
-For example, you can execute the above callback after the image is successfully uploaded and the pass the uploaded image URL into the callback.
+For example, you can execute the above callback after the image is successfully uploaded and pass the uploaded image URL into the callback.
 
 
 <div style={{
@@ -105,11 +105,11 @@ For example, you can execute the above callback after the image is successfully
 </div>
 <p></p>
 
-### Passing in an Action to a Component
+### Passing an Action to a Component
 
 When you add a component to the widget tree of a page or another component, you can define values for its parameters, including action parameters.
 
-For instance, when you add an *image upload component*, you can specify the action flows to be executed when the callback is triggered. For this example, we simply update the profile picture.
+For instance, when you add an *image upload component*, you can specify the action flows that should run when the callback is triggered. For this example, we simply update the profile picture.
 
 :::info
 
@@ -145,26 +145,26 @@ You can access the value passed to the callback by navigating to the **Set Varia
 <p></p>
 
 
-Now that we have an *image upload component* with action parameters set up, it can be reused across different pages or contexts, as it relies on the parent to define the post-upload logic. For example, the same component can be used to upload an image while posting reviews for a product, eliminating the need to create a separate component for this functionality.
+Now that we have an *image upload component* with action parameters set up, it can be reused across different pages or contexts, because it relies on the parent to define the after-upload logic. For example, the same component can be used to upload an image while posting reviews for a product, eliminating the need to create a separate component for this functionality.
 
 ![component-action-parameters.avif](imgs/component-action-parameters.avif)
 
 
 ## More Examples
 
-Let's see some more examples of adding action parameters (callbacks) to deepen the understanding and use it in real-world scenarios.
+Let's look at a few more examples of action parameters (callbacks) in real-world scenarios.
 
 ### Example 1: Dynamic Dialog Component
 
 Let’s take another example of a reusable dialog component that uses callbacks to handle context-specific actions like confirming a deletion, logging out, or saving data. In one context, "Yes" deletes an item. In another, it logs out a user.
 
-The specific logic for each action is defined by the parent component or page using the dialog. The dialog itself does not need to know of what should happen—it simply executes the callback passed to it when users click on the "Yes" button.
+The specific logic for each action is defined by the parent component or page using the dialog. The dialog itself does not need to know what should happen—it simply executes the callback passed to it when users click the "Yes" button.
 
 ![dialog-component-action-parameters.avif](imgs/dialog-component-action-parameters.avif)
 
 ### Example 2: Custom Navigation Bar in Super App
 
-Using Action Parameters to build a Custom Navigation Bar in a Super App is an excellent way to create a dynamic, reusable, and modular navigation solution. A **Super App** typically hosts multiple mini-apps or features, each requiring specific navigation logic. Action Parameters allows you to define navigation behavior dynamically, depending on the active context, making it perfect for this scenario.
+Using action parameters to build a custom navigation bar in a super app is an excellent way to create a dynamic, reusable, and modular navigation solution. A **super app** typically hosts multiple mini-apps or features, each requiring specific navigation logic. Action parameters allow you to define navigation behavior dynamically, depending on the active context, making it perfect for this scenario.
 
 Here, the navigation bar doesn’t require hardcoded routes. Instead, the navigation logic can be customized for each mini-app, allowing the navigation bar to remain focused solely on its UI role.
 

docs/resources/ui/components/child-widget.md

@@ -11,9 +11,9 @@ keywords: [FlutterFlow, Child Widget, Components, UI, Reusable Components]
 
 Child Widget allows you to create reusable components while keeping part of the layout flexible. Instead of building multiple variations of the same component, you define a fixed structure and leave a specific area open for customization.
 
-- The position is fixed within the component layout
-- It accepts any widget (text, button, image, custom widget, and components, etc.)
-- Each instance of the component can have different content inside it
+- Its position is fixed within the component layout.
+- It accepts any widget, such as text, buttons, images, custom widgets, and components.
+- Each component instance can contain different content.
 - The overall structure of the component remains consistent
 
 This allows you to reuse the same component while adapting its content as needed.
@@ -35,7 +35,7 @@ Let’s see how to use the Child Widget by building a simple example of displayi
 1. In your Component, add a new parameter and give it a clear name (e.g., `childWidget`).
 2. Set the parameter **Type** to **Child Widget**.
 3. In the component layout, add a **Child Widget placeholder** where you want dynamic content to appear.
-4. Now go to the component instance (the place where you add this component), locate the Child Widget area, and add any widget into it.
+4. Go to the component instance (the place where you add this component), locate the Child Widget area, and add any widget to it.
 
 <div style={{
     position: 'relative',
@@ -66,23 +66,23 @@ Let’s see how to use the Child Widget by building a simple example of displayi
 
 ### Child Widget vs Widget Builder Parameter
 
-Both let you insert custom UI into a component, but they are designed for different workflows. One focuses on visual flexibility, while the other focuses on structured and scalable component design.
+Both options let you insert custom UI into a component, but they are designed for different workflows. One focuses on visual flexibility, while the other focuses on structured and scalable component design.
 
-**Child Widget**: A Child Widget allows you to drag and drop any widget directly into a component instance. It requires no setup from the component creator and is handled entirely in the visual editor. Each instance can have different content, making it ideal for quick, flexible customization.
+**Child Widget**: A Child Widget allows you to drag and drop any widget directly into a component instance. It does not require setup from the component creator and is handled entirely in the visual editor. Each instance can have different content, making it ideal for quick, flexible customization.
 
 [**Widget Builder Parameter**](widget-builder-parameters.md): A Widget Builder Parameter is defined by the component creator and lets you pass UI into a component as a parameter. It works like a function input, providing a more structured and controlled way to customize components, especially for reusable and scalable designs.
 
 
 ### Best Practices
 
 - Place the Child Widget in a predictable area of the layout, such as a trailing section, content block, or action area. Avoid placing it in positions that affect the overall structure (e.g., between tightly coupled layout elements).
-- Keep the role of the Child Widget clear. It should represent a specific purpose (e.g. “action area”, “content area”), not a random insertion point.
-- Avoid adding too many Child Widgets in a single component, as it can make the component harder to understand and use.
+- Keep the role of the Child Widget clear. It should represent a specific purpose, such as "action area" or "content area", not a random insertion point.
+- Avoid adding too many Child Widget placeholders in a single component, as it can make the component harder to understand and use.
 - Test the component with different widget types (small, large, interactive) to ensure the layout remains stable across variations.
 
 ### Limitations
 
 - The Child Widget position is fixed inside the component. You cannot move or reposition it differently for each instance.
-- It does not enforce any structure on what gets inserted, so inconsistent widgets across instances can lead to inconsistent UI if not carefully designed.
+- It does not enforce any structure on what is inserted, so inconsistent widgets across instances can lead to inconsistent UI if not carefully designed.
 - It is not ideal for highly dynamic, repeated layouts such as product lists or grids, where content is driven entirely by data.
-- It relies on manual placement per instance, which can be less efficient for large-scale or system-driven designs.
+- It relies on manual placement per instance, which can be less efficient for larger or system-driven designs.