Missing documentation for some flux components

[idealerror]

I may have missed a few more, but these were the obvious ones:

• <flux:aside>
• <flux:aside>
• <flux:avatar>
• <flux:brand>
• <flux:description>
• <flux:footer>
• <flux:header>
• <flux:link>
• <flux:profile>
• <flux:text>
• <flux:pagination>

[mlsen]

Couldn't find <flux:pagination> either.
The paginate prop is documented under tables, but not the component itself.

[idealerror]

Couldn't find <flux:pagination> either. The paginate prop is documented under tables, but not the component itself.

Added <flux:pagination> to the list. It's mentioned in tables, but not fully documented. I only added components that weren't listed anywhere on any page in the docs but are in the package.

[robdl1981]

Also flux:main

[joshhanley]

Thanks for reporting! We have converted this issue to a feature request for now, so we can focus on fixing any bugs first.

[kriiv]

Any news on getting flux:main documented? Plays an integral part in styling but no idea how it works.

[joshhanley]

@kriiv while it should be documented, not every option of every component will necessarily be documented whether it be an oversight or intentional. I would suggest getting in the habit of having a look at the components yourself, as they're just Blade components, so you can learn how they work.

So for example the main component looks like this

@props([
    'container' => null,
])

@php
$classes = Flux::classes('[grid-area:main]')
    ->add('p-6 lg:p-8')
    ->add('[[data-flux-container]_&]:px-0') // If there is a wrapping container, let IT handle the x padding...
    ->add($container ? 'mx-auto w-full [:where(&)]:max-w-7xl' : '')
    ;
@endphp

<div {{ $attributes->class($classes) }} data-flux-main>
    {{ $slot }}
</div>

[kriiv]

Sounds good, thanks!

[RezaODB]

The spacer!

[holmesshanea]

flux:fieldset </flux:fieldset>
flux:legend </flux:legend>

<flux:spacer />
<flux:error />
<flux:brand />

[joshhanley]

@holmesshanea the fieldset and legend can be found here https://fluxui.dev/components/field#fieldset

And error here https://fluxui.dev/components/field

[MPGs007]

@joshhanley appreciate you're all focused on bugs rather than feature requests - I for one am struggling to bespoke components, out of the box everything is great, looks awesome and handles well, but when I want to personalise it - switch out the https image logo link in flux:brand for example for my own logos dark and light variants the attributes are all locked in the component file, and the PHP artisan flux:publish doesn't recognise brand as a component so I'm unable to publish it - an idiots guide to this would be great or perhaps some youtube tutorials with people customising the starter kit setups would be really helpful if a full-blown reference guide isn't possible at present.

[joshhanley]

@MPGs007 Caleb has been working on the docs. Today he released the reference API for all the components that have already been documented. Next step should be these components.

Re the publishing issue though, it should be publishable. Can you raise an issue for that so it can be investigated?

But as mentioned above, it's always a good idea to have a look at the blade file if you're unsure exactly how something is working.

The brand component looks like this

@props([
    'name' => null,
    'logo' => null,
    'href' => '/',
])

@php
$classes = Flux::classes()
    ->add('h-10 flex items-center mr-4')
    ;

$textClasses = Flux::classes()
    ->add('text-sm font-medium truncate [:where(&)]:text-zinc-800 dark:[:where(&)]:text-zinc-100')
    ;
@endphp

<?php if ($name): ?>
    <a href="{{ $href }}" {{ $attributes->class([ $classes, 'gap-2' ])->except('alt') }} data-flux-brand>
        <div class="size-6 rounded-sm overflow-hidden shrink-0">
            <?php if (is_string($logo)): ?>
                <img src="{{ $logo }}" {{ $attributes->only('alt') }} />
            <?php else: ?>
                {{ $logo ?? $slot }}
            <?php endif; ?>
        </div>

        <div class="{{ $textClasses }}">{{ $name }}</div>
    </a>
<?php else: ?>
    <a href="{{ $href }}" {{ $attributes->class($classes)->except('alt') }} data-flux-brand>
        <div class="size-8 rounded-sm overflow-hidden shrink-0">
            <?php if (is_string($logo)): ?>
                <img src="{{ $logo }}" {{ $attributes->only('alt') }} />
            <?php else: ?>
                {{ $logo ?? $slot }}
            <?php endif; ?>
        </div>
    </a>
<?php endif; ?>

So for your scenario, you could either have two branch components, as shown in the layouts and demos.

<flux:brand href="#" logo="https://fluxui.dev/img/demo/logo.png" name="Acme Inc." class="max-lg:hidden dark:hidden" />
<flux:brand href="#" logo="https://fluxui.dev/img/demo/dark-mode-logo.png" name="Acme Inc." class="max-lg:hidden! hidden dark:flex" />

Or you could pass your own image tags to the logo slot, so you can have both light and dark modes of them and use the one branch component.

<flux:brand href="#" logo="https://fluxui.dev/img/demo/logo.png" name="Acme Inc." class="max-lg:hidden dark:hidden" />
<flux:brand name="Acme Inc.">
    <x-slot:logo>
        <img src="/logo-light.png" class="dark:hidden" />
        <img src="/logo-dark.png" class="hidden dark:block" />
    </x-slot>
</flux:brand>

Hope that helps!

[MPGs007]

@joshhanley Thank you for getting back to me - yes, I have read through the brand file - The difficulty I have if I just switch out the fluxui URL image for my own, my logo inherits all the brand component values and is stuck coded as a tiny square in the corner, the brand component passes the values

so easier to build my own component but obviously would prefer to utilise components available and publish/bespoke them to the project needs - size and layout positioning most important in this case but the only value I could pass through is the alt="" value (I think ) maybe I've missed something obvious - will raise an issue re - publishing - thanks again

[joshhanley]

@MPGs007 oh right yeah. We'll get the publishing fixed so you can modify it 🙂