docs

Author: danharrin

docs/03-resources/01-overview.md

@@ -1,6 +1,7 @@
 ---
 title: Overview
 ---
+
 ## Overview
 
 Resources are static classes that are used to build CRUD interfaces for your Eloquent models. They describe how administrators should be able to interact with data from your app - using tables and forms.

docs/03-resources/05-viewing-records.md

@@ -1,6 +1,7 @@
 ---
 title: Viewing records
 ---
+
 ## Creating a resource with a View page
 
 To create a new resource with a View page, you can use the `--view` flag:

docs/03-resources/07-relation-managers.md

@@ -1,6 +1,7 @@
 ---
 title: Managing relationships
 ---
+
 ## Choosing the right tool for the job
 
 Filament provides many ways to manage relationships in the app. Which feature you should use depends on the type of relationship you are managing, and which UI you are looking for.

docs/03-resources/09-widgets.md

@@ -1,6 +1,7 @@
 ---
 title: Widgets
 ---
+
 ## Overview
 
 Filament allows you to display widgets inside pages, below the header and above the footer.

docs/09-advanced/03-assets.md

@@ -1,6 +1,7 @@
 ---
 title: Registering assets
 ---
+
 ## Overview
 
 All packages in the Filament ecosystem share an asset management system. This allows both official plugins and third-party plugins to register CSS and JavaScript files that can then be consumed by Blade views.

docs/11-plugins/01-getting-started.md

@@ -1,6 +1,7 @@
 ---
 title: Getting started
 ---
+
 ## Overview
 
 While Filament comes with virtually any tool you'll need to build great apps, sometimes you'll need to add your own functionality either for just your app or as redistributable packages that other developers can include in their own apps. This is why Filament offers a plugin system that allows you to extend its functionality.

docs/11-plugins/02-panel-plugins.md

@@ -1,6 +1,7 @@
 ---
 title: Plugin development
 ---
+
 ## Overview
 
 The basis of Filament plugins are Laravel packages. They are installed into your Filament project via Composer, and follow all the standard techniques, like using service providers to register routes, views, and translations. If you're new to Laravel package development, here are some resources that can help you grasp the core concepts:

docs/11-plugins/03-build-a-panel-plugin.md

@@ -1,6 +1,7 @@
 ---
 title: Build a panel plugin
 ---
+
 ## Preface
 
 Please read the docs on [panel plugin development](../panels/plugins) and the [getting started guide](getting-started) before continuing.

packages/schemas/docs/02-forms/12-repeater.md

@@ -230,7 +230,7 @@ Repeater::make('qualifications')
 
 <AutoScreenshot name="forms/fields/repeater/collapsed" alt="Collapsed repeater" version="4.x" />
 
-Optionally, the `collaptible()` and `collapsed()` methods accept a boolean value to control if the repeater should be collapsible and collapsed or not:
+Optionally, the `collapsible()` and `collapsed()` methods accept a boolean value to control if the repeater should be collapsible and collapsed or not:
 
 ```php
 use Filament\Forms\Components\Repeater;

packages/schemas/docs/02-forms/13-builder.md

@@ -406,7 +406,7 @@ Builder::make('content')
 
 <AutoScreenshot name="forms/fields/builder/collapsed" alt="Collapsed builder" version="4.x" />
 
-Optionally, the `collaptible()` and `collapsed()` methods accept a boolean value to control if the builder should be collapsible and collapsed or not:
+Optionally, the `collapsible()` and `collapsed()` methods accept a boolean value to control if the builder should be collapsible and collapsed or not:
 
 ```php
 use Filament\Forms\Components\Builder;

packages/schemas/docs/02-forms/20-custom.md

@@ -1,6 +1,7 @@
 ---
 title: Custom fields
 ---
+
 ## View fields
 
 Aside from [building custom fields](#custom-field-classes), you may create "view" fields which allow you to create custom fields without extra PHP classes.

packages/schemas/docs/03-infolists/08-custom.md

@@ -1,6 +1,7 @@
 ---
 title: Custom entries
 ---
+
 ## View entries
 
 You may render a custom view for an entry using the `view()` method:

packages/schemas/docs/04-layouts/01-overview.md

@@ -2,6 +2,7 @@
 title: Overview
 ---
 import UtilityInjection from "@components/UtilityInjection.astro"
+
 ## Overview
 
 Filament schemas are not limited to just displaying [form fields](../forms) and [infolist entries](../infolists). You can also use "layout components" to organize them into an infinitely nestable structure.
@@ -24,10 +25,10 @@ Grid::make(2)
 Filament ships with some layout components, suitable for arranging your components depending on your needs:
 
 - [Grid](grid)
-- [Fieldset](fieldset)
+- [Section](section)
 - [Tabs](tabs)
 - [Wizard](wizard)
-- [Section](section)
+- [Fieldset](fieldset)
 - [Split](split)
 
 You may also [create your own custom layout components](custom) to organize schemas however you wish.

packages/schemas/docs/04-layouts/02-grid.md

@@ -1,6 +1,7 @@
 ---
 title: Grid
 ---
+import UtilityInjection from "@components/UtilityInjection.astro"
 
 ## Overview
 
@@ -15,6 +16,8 @@ All layout components have a `columns()` method that you can use in a couple of
 
 Breakpoints (`sm`, `md`, `lg`, `xl`, `2xl`) are defined by Tailwind, and can be found in the [Tailwind documentation](https://tailwindcss.com/docs/responsive-design#overview).
 
+<UtilityInjection set="layoutComponents" version="4.x">As well as allowing a static value, the `columns()` method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>
+
 ## Controlling how many columns a component should span
 
 In addition to specifying how many columns a layout component should have, you may also specify how many columns a component should fill within the parent grid, using the `columnSpan()` method. This method accepts an integer or an array of breakpoints and column spans:
@@ -23,13 +26,15 @@ In addition to specifying how many columns a layout component should have, you m
 - `columnSpan(['md' => 2, 'xl' => 4])` will make the component fill up to 2 columns on medium devices, and up to 4 columns on extra large devices. The default breakpoint for smaller devices uses 1 column, unless you use a `default` array key.
 - `columnSpan('full')` or `columnSpanFull()` or `columnSpan(['default' => 'full'])` will make the component fill the full width of the parent grid, regardless of how many columns it has.
 
+<UtilityInjection set="layoutComponents" version="4.x">As well as allowing a static value, the `columnSpan()` method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>
+
 ## An example of a responsive grid layout
 
 In this example, we have a schema with a [section](section) layout component. Since all layout components support the `columns()` method, we can use it to create a responsive grid layout within the section itself.
 
 We pass an array to `columns()` as we want to specify different numbers of columns for different breakpoints. On devices smaller than the `sm` [Tailwind breakpoint](https://tailwindcss.com/docs/responsive-design#overview), we want to have 1 column, which is default. On devices larger than the `sm` breakpoint, we want to have 3 columns. On devices larger than the `xl` breakpoint, we want to have 6 columns. On devices larger than the `2xl` breakpoint, we want to have 8 columns.
 
-Inside the section, we have a [text input](../../forms/fields/text-input). Since text inputs are form fields and all components have a `columnSpan()` method, we can use it to specify how many columns the text input should fill. On devices smaller than the `sm` breakpoint, we want the text input to fill 1 column, which is default. On devices larger than the `sm` breakpoint, we want the text input to fill 2 columns. On devices larger than the `xl` breakpoint, we want the text input to fill 3 columns. On devices larger than the `2xl` breakpoint, we want the text input to fill 4 columns.
+Inside the section, we have a [text input](../forms/text-input). Since text inputs are form fields and all components have a `columnSpan()` method, we can use it to specify how many columns the text input should fill. On devices smaller than the `sm` breakpoint, we want the text input to fill 1 column, which is default. On devices larger than the `sm` breakpoint, we want the text input to fill 2 columns. On devices larger than the `xl` breakpoint, we want the text input to fill 3 columns. On devices larger than the `2xl` breakpoint, we want the text input to fill 4 columns.
 
 ```php
 use Filament\Forms\Components\TextInput;
@@ -101,3 +106,5 @@ Grid::make()
 ```
 
 In this example, the grid has 3 columns on small devices, 6 columns on extra large devices, and 8 columns on extra extra large devices. The text input will start at column 2 on small devices, column 3 on extra large devices, and column 4 on extra extra large devices. This is essentially producing a layout whereby the text input always starts halfway through the grid, regardless of how many columns the grid has.
+
+<UtilityInjection set="layoutComponents" version="4.x">As well as allowing a static value, the `columnStart()` method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>