Skip to content
This repository was archived by the owner on Mar 18, 2025. It is now read-only.

Commit 418925a

Browse files
rawilkrawilk
committed
Update docs
1 parent e2d92c4 commit 418925a

22 files changed

+313
-681
lines changed

‎docs/advanced-usage/customizing-css.md‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
---
2+
title: Customizing CSS
3+
sort: 1
4+
---
5+
6+
If you want to change the look of the Laravel Form Components to match the style of your own app, you have multiple options.
7+
8+
## Option 1: Use Your Own Tailwind CSS Configuration
9+
Instead of importing/linking the pre-built `dist/styles.css` from the package, you can import the `src/styles.css` and run every `@apply` rule through your own `tailwind.config.js`.
10+
11+
```css
12+
/* app.css */
13+
14+
@tailwind base;
15+
@tailwind components;
16+
@tailwind utilities;
17+
18+
@import '../../vendor/rawilk/laravel-form-components/resources/js/laravel-form-components-styles/src/styles.css';
19+
20+
/* override our styles here */
21+
```
22+
23+
> {note} If you choose this option, make sure you have the [required variants](#required-variants) included in your `tailwind.config.js` configuration.
24+
25+
## Option 2: Override Only Portions In Your CSS
26+
If you only want to tinker with certain apsects of the components but like to keep the CSS in sync with future package updates, nothing stops you from overriding only certain CSS rules with your own tweaks. Most DOM elements have their own custom class names.
27+
28+
Let's say your inputs aren't rounded, and you want to remove the border radius from them. To do that, you can write your own CSS for this class:
29+
30+
```css
31+
/* app.css */
32+
...
33+
34+
@import '../../vendor/rawilk/laravel-form-components/resources/js/laravel-form-components-styles/dist/styles.css';
35+
36+
.form-text {
37+
@apply rounded-none;
38+
}
39+
```
40+
41+
## Option 3: Copy the CSS To Your Own Project
42+
If you want full-control, you can always copy the `src/styles.css` to your own project and go wild. In this example, we renamed the file to `custom/laravel-form-components.css`.
43+
Beware: you will have to manually keep this CSS in sync with changes in future package updates:
44+
45+
```css
46+
/* app.css */
47+
48+
...
49+
50+
@import 'custom/laravel-form-components.css';
51+
```
52+
53+
Let's say you wanted to change the background color of disabled inputs. You could do so like this in the file you just created with the pasted in styles from the package:
54+
55+
```css
56+
/* custom/laravel-form-components.css */
57+
58+
input[disabled],
59+
textarea[disabled],
60+
select[disabled] {
61+
@apply bg-gray-100;
62+
63+
/* default styles from the package */
64+
/*@apply bg-blue-gray-50 cursor-not-allowed;*/
65+
}
66+
67+
...
68+
```
69+
70+
## Required Variants
71+
If you choose [Option 1](#option-1-use-your-own-tailwind-css-configuration), you will need the following color variants added inside your `tailwind.config.js` file:
72+
73+
```js
74+
// tailwind.config.js
75+
76+
const colors = require('tailwindcss/colors');
77+
78+
module.exports = {
79+
// ...
80+
theme: {
81+
extend: {
82+
colors: {
83+
'blue-gray': colors.blueGray,
84+
'cool-gray': colors.coolGray,
85+
},
86+
},
87+
},
88+
};
89+
```
90+
91+
This will extend the default tailwind color palette to include the `blue-gray` and `cool-gray` color variants.
92+
93+
> {note} If you have a custom color palette configured, you will need to make sure you have the `blue` and `red` colors configured as well, with all
94+
> levels available (`50` through `900`).
95+
96+
Certain components make use of a custom utility class called `outline-blue-gray`, which adds a 2px dotted outline around the element when focused. If you opt to not add this outline variant to your configuration, it will not affect building the CSS since the package's stylesheet does not reference it; the outline variant is only rendered directly onto the elements it's used for. If you want the outline to show up, you can add the following to your `tailwind.config.js` file:
97+
98+
```js
99+
// tailwind.config.js
100+
101+
const colors = require('tailwindcss/colors');
102+
103+
module.exports = {
104+
// ...
105+
106+
theme: {
107+
extend: {
108+
colors: {
109+
// see above snippet for colors
110+
// ...
111+
},
112+
113+
outline: {
114+
'blue-gray': [`2px dotted ${colors.blueGray['500']}`, '2px'],
115+
},
116+
},
117+
},
118+
};
119+
```
120+
121+
## Purge CSS/Tailwind JIT
122+
123+
Purge CSS is useful for trimming out unused styles from your stylesheets to reduce your overall build size. To ensure
124+
the class styles from this package don't get purged from your production build, you should add the following to your
125+
purge css content configuration:
126+
127+
> {note} The following code snippet is for a TailwindCSS build configuration using a `tailwind.config.js` file in the build.
128+
129+
```js
130+
module.exports = {
131+
// ...
132+
purge: {
133+
content: [
134+
// Typical laravel app purge css content
135+
'./app/**/*.php',
136+
'./resources/**/*.php',
137+
'./resources/**/*.js',
138+
139+
// Make sure you add these lines
140+
'./vendor/rawilk/laravel-form-components/src/**/*.php',
141+
'./vendor/rawilk/laravel-form-components/resources/**/*.php',
142+
'./vendor/rawilk/laravel-form-components/resources/js/*.js',
143+
],
144+
},
145+
};
146+
```
147+
148+
This configuration should also work when using the JIT compiler from Tailwind.
149+
150+
If some styles are still being purged, it may be useful to wrap the import statement of the package's stylesheet
151+
in a `/* purgecss start ignore */`:
152+
153+
```css
154+
/* purgecss start ignore */
155+
@import '../../vendor/rawilk/laravel-form-components/resources/js/laravel-form-components-styles/dist/styles.css';
156+
/* purgecss end ignore */
157+
```

‎docs/advanced-usage/purge-css.md‎

Lines changed: 0 additions & 41 deletions
This file was deleted.

‎docs/files/file-upload.md‎

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -23,38 +23,6 @@ In its most basic usage, you can use it as a self-closing component and pass it
2323
<x-file-upload name="avatar" />
2424
```
2525

26-
This will output the following HTML:
27-
28-
```html
29-
<div class="file-upload space-x-5">
30-
<div x-data="{ focused: false, isUploading: false, progress: 0 }"
31-
class="space-y-4 w-full"
32-
>
33-
<span class="file-upload__input">
34-
<input x-on:focus="focused = true"
35-
x-on:blur="focused = false"
36-
class="sr-only"
37-
type="file"
38-
name="avatar"
39-
id="avatar"
40-
/>
41-
42-
<label for="avatar"
43-
x-bind:class="{ 'file-upload__label--focused': focused }"
44-
class="file-upload__label"
45-
>
46-
<span role="button"
47-
aria-controls="avatar"
48-
tabindex="0"
49-
>
50-
Select File
51-
</span>
52-
</label>
53-
</span>
54-
</div>
55-
</div>
56-
```
57-
5826
> {note} Since the component applies a class of `sr-only` (hides the input) to the input itself, the input must have an id assigned to it
5927
for the label to be able to trigger a click on the input. By default, the component assigns the `id` to the `name` attribute if you don't
6028
provide an `id` to it.

‎docs/files/filepond.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ Before using this component, we recommend familiarizing yourself with the FilePo
1010

1111
## Installation
1212

13-
While the `file-pond` component works out-of-the-box when you've [set the directive](/docs/laravel-form-components/v3/installation#directives),
13+
While the `file-pond` component works out-of-the-box when you've [set the directive](/docs/laravel-form-components/v4/installation#directives),
1414
we recommend that you install and compile the JavaScript libraries before you deploy to production:
1515

1616
- [Alpine.js](https://github.com/alpinejs/alpine) `^2.8`

‎docs/form/form-error.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ using a `name` attribute:
3030
This will output:
3131

3232
```html
33-
<p class="form-error" id="first_name-error">
33+
<p class="form-error mt-1 text-red-500 text-sm" id="first_name-error">
3434
Incorrect first name.
3535
</p>
3636
```
@@ -54,7 +54,7 @@ Let's assume we have the following validation errors:
5454
'first_name' => [
5555
'Incorrect first name.',
5656
'Needs at least 5 characters.',
57-
]
57+
],
5858
]
5959
```
6060

0 commit comments

Comments
 (0)