Add uncontained section design #11464

divdax · 2024-02-17T18:32:13Z

Description

Extended Form Section with ->minimal() for a minimalistic style.

Section::make('Heading')->minimal()

default	`->minimal()`

or maybe...

->compact(minimal: true)
->compact(basic: true)

This could be useful if someone wants to use a self-styled component (not just the section) without removing all styles:

->compact(styles: false)

What do you think?

Code style

composer cs command has been run.

Testing

Changes have been tested.

Documentation

Documentation is up-to-date.

zepfietje

@divdax, could you rework this to contained(false), just like already exists for wizard, tabs and others?

divdax · 2024-02-28T14:28:31Z

@divdax, could you rework this to contained(false), just like already exists for wizard, tabs and others?

jo 👍

divdax · 2024-02-28T20:50:34Z

@zepfietje section is now using CanBeContained trait.

packages/support/resources/views/components/section/index.blade.php

zepfietje · 2024-03-01T15:56:47Z

packages/forms/resources/views/components/section.blade.php

+    :contained="$isContained()"
    :compact="$isCompact()"


Please sort alphabetically :)

zepfietje · 2024-03-01T15:57:09Z

packages/support/resources/views/components/section/index.blade.php

@@ -6,6 +6,7 @@
    'aside' => false,
    'collapsed' => false,
    'collapsible' => false,
+    'contained' => true,


n comes after m ;)

zepfietje · 2024-03-01T15:58:57Z

packages/support/resources/views/components/section/index.blade.php

            match ($aside) {
                true => 'fi-aside grid grid-cols-1 items-start gap-x-6 gap-y-4 md:grid-cols-3',
-                false => 'rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10',
+                false => $contained ? 'rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10' : '',
            },


Thinking about it once more, maybe it's easier to maintain if we got rid of the match expression and used two separate array items instead. One for the fi-aside with a condition as the value and then the other one for contained non-aside. Not sure if that explanation is clear? 😂

zepfietje · 2024-03-01T16:00:16Z

packages/support/resources/views/components/section/index.blade.php

@@ -62,7 +63,7 @@
                'cursor-pointer' => $collapsible,
                match ($compact) {
                    true => 'px-4 py-2.5',
-                    false => 'px-6 py-4',
+                    false => ! $contained ? 'py-4' : 'px-6 py-4',


Could you split these into separate array items too?
Also, is the vertical padding needed when uncontained?

zepfietje · 2024-03-01T16:00:40Z

packages/support/resources/views/components/section/index.blade.php

@@ -163,10 +164,10 @@
        <div
            @class([
                'fi-section-content',
-                'rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10' => $aside,
+                'rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10' => $aside && (! $minimal),


Looks like $minimal was forgotten during the refactor?

zepfietje · 2024-03-01T16:01:33Z

packages/support/resources/views/components/section/index.blade.php

                match ($compact) {
                    true => 'p-4',
-                    false => 'p-6',
+                    false => ! $contained ? 'pt-4' : 'p-6',


Also get rid of the match expression here, because this gets quite unreadable otherwise. 🙂

saade · 2024-03-01T18:11:59Z

@zepfietje can we remove the border under the header too? or perhaps only apply if its collapsible.

zepfietje · 2024-03-02T13:57:43Z

Still going to do a visual review after the code review, and the border is one thing for sure that I'm still debating.

zepfietje

@divdax, could you merge 3.x into this PR's branch and add support for the recently introduced section footer actions?

divdax · 2024-03-08T00:43:29Z

@zepfietje i did the refactor. looking into the footer actions this weekend (hopefully)

// edit: here an example why i used the border. Also looks better when using heading + description.
Do you know if there are any plans for unstyled elements using just the basic fi-* classes which i think are unstyled and just for reference? What i mean by that: Would be cool to give every element ->unstyled() to get rid of every css class so we could write custom css without having to override all filament classes. I hope you understand what i mean. 🙃

# Conflicts: # packages/forms/src/Components/Section.php # packages/support/resources/views/components/section/index.blade.php

divdax · 2024-03-09T01:17:25Z

@zepfietje merged 3.x and updated footer classes.

ralphjsmit · 2024-03-09T18:58:33Z

Looking great, nice work Heiko! Been missing this for years.

zepfietje · 2024-03-11T13:04:56Z

Could you guys provide some context on how you're using uncontained sections, @divdax @ralphjsmit? Would help me in reviewing the design in this PR.

ralphjsmit · 2024-03-11T18:17:48Z

Some examples that I do remember are e.g. inside a modal on a white area where you don't want to have the card/another border for the content. Just a simple heading/description/icon to distinguish on a page would be good.
Or if you want to have the form components om the default gray Filament panel background (so not inside cards/sections), but that's impossible with the current Section design.

But mainly just serving as a visual indicator of splitting up the page without needing an indent/border/white background.

divdax · 2024-03-11T22:04:49Z

I often use sections in modals to save space and create a cleaner look. When a section is within another "container" i usually don't need a second box. Used filament forms standalone on many pages where i placed the form in an already styled container.

idea:
It would be great to deactivate all CSS classes with styles for components, leaving only the reference classes (e.g. .fi-section-content) without styles. This way, users can style from scratch instead of having to override existing styles.
Currently, you have to override all applied styles when writing a theme. Next step could be something like a global config e.g. Component::disableStyles().

zepfietje · 2024-03-12T15:42:33Z

idea: It would be great to deactivate all CSS classes with styles for components, leaving only the reference classes (e.g. .fi-section-content) without styles. This way, users can style from scratch instead of having to override existing styles. Currently, you have to override all applied styles when writing a theme. Next step could be something like a global config e.g. Component::disableStyles().

This is already one of the main goals for v4. 👍

zepfietje

@divdax, I've done some more research about when to use uncontained sections and have come to the conclusion that it's best to remove the border below the header and above the footer too. Could you update the PR so I can do a proper final review? 🙂

zepfietje · 2024-03-22T09:00:20Z

Hey @divdax, are you able to finish this PR?

saade · 2024-04-04T15:22:37Z

@zepfietje i know this can be achieved with css for now, but i can take his work and apply the requested changes if you wish... i'm kinda needing that too to clean up some code at my end.

zepfietje · 2024-04-04T20:50:52Z

Yeah, please go ahead @saade, since this PR has been stale for a while now.

divdax · 2024-04-08T13:08:27Z

@zepfietje i was on holidays. 🏖️ not sorry 😅

zepfietje · 2024-04-08T15:29:33Z

No worries, @divdax!
We just have some default intervals at which we check in on the status of PRs to keep it all maintainable. 🙂

saade · 2024-04-09T14:22:46Z

@divdax i didnt started yet, lmk if you want to continue with your work

zepfietje · 2024-04-09T14:41:30Z

Yeah let us know, @divdax, then I can reopen your PR.

divdax · 2024-04-09T15:14:47Z

@zepfietje i'll take a look after work and make the final touches. i think it's just the heading border i have to remove.

// edit: Border removed when contained = false

zepfietje · 2024-04-09T19:49:59Z

Thanks, @divdax!
So this is ready for final review now?

divdax · 2024-04-10T08:12:08Z

@zepfietje yes

divdax · 2024-05-06T17:01:06Z

@zepfietje dumdidumm 👀😬

zepfietje · 2024-05-07T07:17:26Z

@divdax, I've been extremely busy working towards the launch of Whizzy and have lost 25% of my GitHub Sponsors, so spending more time on Filament than I already do has been hard. I'll get back to reviewing this though! 😄

zepfietje · 2024-05-07T07:19:32Z

packages/support/resources/views/components/section/index.blade.php

-                false => 'rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10',
-            },
+            'fi-aside grid grid-cols-1 items-start gap-x-6 gap-y-4 md:grid-cols-3' => $aside,
+            'rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10' => $contained,


This doesn't seem right?
The previously false match arm only has a $contained condition here.

zepfietje · 2024-05-21T06:43:28Z

@divdax "dumdidumm". 😂
Could you have a look at my change request from two weeks ago? 🙂

minimal section without outer border and padding on the left and right

08870f3

danharrin assigned zepfietje Feb 20, 2024

danharrin added enhancement New feature or request ui labels Feb 20, 2024

danharrin added this to the v3 milestone Feb 20, 2024

This comment was marked as off-topic.

Sign in to view

zepfietje changed the title ~~Section::minimal()~~ Add minimal section design Feb 28, 2024

zepfietje changed the title ~~Add minimal section design~~ Add uncontained section design Feb 28, 2024

zepfietje requested changes Feb 28, 2024

View reviewed changes

divdax and others added 2 commits February 28, 2024 21:28

Merge branch 'filamentphp:3.x' into feature/minimal-section

e1a7546

use CanBeContained trait

a431921

zepfietje requested changes Feb 29, 2024

View reviewed changes

packages/support/resources/views/components/section/index.blade.php Outdated Show resolved Hide resolved

update

32df486

zepfietje requested changes Mar 1, 2024

View reviewed changes

zepfietje requested changes Mar 7, 2024

View reviewed changes

refactor

93b6fd9

Heiko Klingele added 2 commits March 9, 2024 02:06

Merge branch '3.x' into feature/minimal-section

ea84f8c

# Conflicts: # packages/forms/src/Components/Section.php # packages/support/resources/views/components/section/index.blade.php

update footer action classes

ec69ab9

zepfietje requested changes Mar 12, 2024

View reviewed changes

zepfietje closed this Apr 4, 2024

Heiko Klingele added 2 commits April 9, 2024 18:43

remove border when contained = false

60c0d11

update readme

49665bd

zepfietje reopened this Apr 9, 2024

zepfietje requested changes May 7, 2024

View reviewed changes

Add uncontained section design #11464

Are you sure you want to change the base?

Add uncontained section design #11464

Conversation

divdax commented Feb 17, 2024

Description

or maybe...

Code style

Testing

Documentation

This comment was marked as off-topic.

zepfietje left a comment • edited

Choose a reason for hiding this comment

divdax commented Feb 28, 2024

divdax commented Feb 28, 2024

zepfietje Mar 1, 2024

Choose a reason for hiding this comment

zepfietje Mar 1, 2024

Choose a reason for hiding this comment

zepfietje Mar 1, 2024

Choose a reason for hiding this comment

zepfietje Mar 1, 2024

Choose a reason for hiding this comment

zepfietje Mar 1, 2024 • edited

Choose a reason for hiding this comment

zepfietje Mar 1, 2024

Choose a reason for hiding this comment

saade commented Mar 1, 2024

zepfietje commented Mar 2, 2024

zepfietje left a comment

Choose a reason for hiding this comment

divdax commented Mar 8, 2024 • edited

divdax commented Mar 9, 2024

ralphjsmit commented Mar 9, 2024

zepfietje commented Mar 11, 2024

ralphjsmit commented Mar 11, 2024

divdax commented Mar 11, 2024 • edited

zepfietje commented Mar 12, 2024

zepfietje left a comment

Choose a reason for hiding this comment

zepfietje commented Mar 22, 2024

saade commented Apr 4, 2024

zepfietje commented Apr 4, 2024

divdax commented Apr 8, 2024

zepfietje commented Apr 8, 2024

saade commented Apr 9, 2024

zepfietje commented Apr 9, 2024

divdax commented Apr 9, 2024 • edited

zepfietje commented Apr 9, 2024

divdax commented Apr 10, 2024

divdax commented May 6, 2024

zepfietje commented May 7, 2024

zepfietje May 7, 2024

Choose a reason for hiding this comment

zepfietje commented May 21, 2024

zepfietje left a comment •

edited

zepfietje Mar 1, 2024 •

edited

divdax commented Mar 8, 2024 •

edited

divdax commented Mar 11, 2024 •

edited

divdax commented Apr 9, 2024 •

edited