fix components

avo-hq · Jan 20, 2025 · ccb7006 · ccb7006
1 parent 904f5fd
commit ccb7006
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 18 deletions.
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -224,40 +224,41 @@ const config = {
           ],
         },
         {
-          text: "Native Avo components",
+          text: "Performance",
           items: [
-            {text: "Avo::PanelComponent", link: "/3.0/native-components/avo-panel-component.html"},
-            {text: "Native field components", link: "/3.0/native-field-components.html"},
-            {text: "Field wrappers", link: "/3.0/field-wrappers.html"},
+            {text: "Cache", link: "/3.0/cache.html"},
+            {text: "Views", link: "/3.0/views-performance.html"},
           ],
         },
         {
-          text: "Performance",
+          text: "Native Avo components",
+          collapsed: true,
           items: [
-            {text: "Cache", link: "/3.0/cache.html"},
-            {text: "Views", link: "/3.0/views-performance.html"},
+            {text: "<code>Avo::PanelComponent</code>", link: "/3.0/native-components/avo-panel-component.html"},
+            {text: "Native field components", link: "/3.0/native-field-components.html"},
+            {text: "Field wrappers", link: "/3.0/field-wrappers.html"},
           ],
         },
         {
           text: "Internals",
+          collapsed: true,
           items: [
             {text: "Overview", link: "/3.0/internals.html"},
             {text: "Testing", link: "/3.0/testing.html"},
-            {text: "Avo::Current", link: "/3.0/avo-current.html"},
-            {text: "Avo::ExecutionContext", link: "/3.0/execution-context.html"},
-            {text: "Avo::Services::EncryptionService", link: "/3.0/encryption-service.html"},
+            {text: "<code>Avo::Current</code>", link: "/3.0/avo-current.html"},
+            {text: "<code>Avo::ExecutionContext</code>", link: "/3.0/execution-context.html"},
+            {text: "<code>Avo::Services::EncryptionService</code>", link: "/3.0/encryption-service.html"},
             {text: "Select All", link: "/3.0/select-all.html"},
             {text: "Icons", link: "/3.0/icons.html"},
           ],
         },
         {
           text: "Extending",
+          collapsed: true,
           items: [
-            {text: "Avo::ApplicationController", link: "/3.0/avo-application-controller.html"},
-            {text: "Avo.asset_manager", link: "/3.0/asset-manager.html"},
+            {text: "<code>Avo::ApplicationController</code>", link: "/3.0/avo-application-controller.html"},
+            {text: "<code>Avo.asset_manager</code>", link: "/3.0/asset-manager.html"},
             {text: "Plugins", link: "/3.0/plugins.html"},
-        //     {text: "Avo::ApplicationController", link: "/3.0/avo-application-controller.html"},
-        //     {text: "Avo.asset_manager", link: "/3.0/asset-manager.html"},
           ],
         },
       ],

diff --git a/docs/3.0/field-options.md b/docs/3.0/field-options.md
@@ -390,6 +390,7 @@ WIP
 </Option>
 
 <Option name="`components`">
+
 The field's `components` option allows you to customize the view components used for rendering the field in all, `index`, `show` and `edit` views. This provides you with a high degree of flexibility.
 
 ### Ejecting the field components
@@ -422,6 +423,7 @@ Here's some examples of how to use the `components` option in a field definition
 field :description,
   as: :text,
   components: {
+    index_component: Avo::Fields::Admin::TextField::IndexComponent,
     show_component: Avo::Fields::Admin::TextField::ShowComponent,
     edit_component: "Avo::Fields::Admin::TextField::EditComponent"
   }
@@ -447,6 +449,8 @@ The components block it's executed using `Avo::ExecutionContent` and gives acces
 It's important to keep the initializer on your custom components as the original field view component initializer.
 :::
 
+</Option>
+
 <Option name="`html`">
 ### Attach HTML attributes
 

diff --git a/docs/3.0/icons.md b/docs/3.0/icons.md
@@ -1,15 +1,48 @@
 # Icons
 
-Avo provides a collection of SVG icons organized into two directories: [`avo`](https://github.com/avo-hq/avo/tree/feature/allow_actions_to_render_turbo_streams/app/assets/svgs/avo) and [`heroicons`](https://github.com/avo-hq/avo/tree/feature/allow_actions_to_render_turbo_streams/app/assets/svgs/heroicons) ([check heroicons](https://heroicons.com/)). These icons are easily accessible using the [`svg` method](https://github.com/avo-hq/avo/blob/feature/allow_actions_to_render_turbo_streams/app/helpers/avo/application_helper.rb#L63).
+Avo provides a collection of SVG icons organized into two directories: [`avo`](https://github.com/avo-hq/avo/tree/main/app/assets/svgs/avo) and [`heroicons`](https://github.com/avo-hq/avo/tree/main/app/assets/svgs/heroicons) ([check heroicons](https://heroicons.com/)). These icons are easily accessible using the [`svg` method](https://github.com/avo-hq/avo/blob/main/app/helpers/avo/application_helper.rb#L63).
 
 To render an icon in your application, use the svg method. This method allows you to specify the icon's path and class.
 
 Examples:
 ```ruby
+# in a View Component
 helpers.svg("avo/editor-strike")
+
+# in a Rails helper
+svg("heroicons/outline/magnifying-glass-circle", class: "block h-6 text-gray-600")
 ```
-```ruby
-helpers.svg("heroicons/outline/magnifying-glass-circle", class: "block h-6 text-gray-600")
+
+```erb
+<%= svg 'avo/bell.svg', class: "h-4" %>
+```
+
+There are some places where Avo have custom DSL accepting the `icon` option. There you only need to specify the `icon`'s path (`avo/...` or `heroicons/...`). Behind the scenes Avo applies the [`svg` method](https://github.com/avo-hq/avo/blob/main/app/helpers/avo/application_helper.rb#L63).
+
+## Avo icons
+
+Avo uses a [set of custom icons](https://github.com/avo-hq/avo/tree/main/app/assets/svgs/avo) which you can use yourself with this notation: `avo/ICON_NAME`.
+
+#### Example:
+
+```erb
+<%= svg "avo/bell.svg", class: "h-4" %>
 ```
 
-There are some places where Avo have custom DSL accepting the `icon` option. There you only need to specify the `icon`'s path (`avo/...` or `heroicons/...`). Behind the scenes Avo applies the [`svg` method](https://github.com/avo-hq/avo/blob/feature/allow_actions_to_render_turbo_streams/app/helpers/avo/application_helper.rb#L63).
+## Using heroicons
+
+Avo uses the delightful [`heroicons` library](https://heroicons.com/) which is kept up to date by the team.
+
+Heroicons come in 4 variants `outline`, `solid`, `mini`, and `micro`.
+
+You can use these icons with this notation: `heroicons/VARIANT/ICON_NAME`.
+We usually use the `outline` variant.
+
+#### Examples:
+
+
+```erb
+<%= svg "heroicons/outline/academic-cap.svg" %>
+
+<%= svg "heroicons/mini/arrow-path-rounded-square.svg" %>
+```