pureblazor / components Goto Github PK

See #57 (comment)

Fix by:

• Making the mobile menu collapsible via button/hamburger menu/other suggestion?
• Fix issue where, presumably, the desktop nav still shows

Problem

Some component libraries have a Size property that scales the component using manual inputs, usually pixels, but I recently worked on overhauling a component to scale via relative units and thought I should put the idea out there!

PureBlazor uses relative units all over the place, which is awesome, but they are typically rem which means you can't freely scale up a component.

Demonstration

Here are some videos of me changing the font-size of a component (not the text):

The icons and margins don't scale with the font size.

Suggestion

There isn't necessarily a right or wrong way of doing this, but there is some utility in being able to scale up a component to your own size. This might remove the need for a custom sizing system altogether and thus pre-emptively simplify the code.

You could replace some cases of rem with em and make the icons scale.

Mock-up:

• Validation error messages

Known issues when combining the Tailwind v4 version of this library with an app that uses v3

• Borders on buttons are missing - workaround: re-add the tailwind v3 version of borders: Styles="border border-{color}-{shade}"

Inspiration:

https://mantine.dev/core/tooltip
https://chakra-ui.com/docs/components/tooltip/usage
https://ui.shadcn.com/docs/components/tooltip
https://mui.com/joy-ui/react-tooltip

Migrate the remaining components from the Mk suffix to the new Pure suffix.

• Rename files to match the new convention
• Move files up a level out of the nested /components folder
• Fix references in Docs project
• Rename Docs project Makani.Docs -> PureBlazor.XYZ (maybe PureBlazor.Components.Docs?)

At the completion of this ticket, there should be zero references to Makani or Mk in this repository.

Website is currently private, we also moved docs to the website for ease of use for now.

Consider-

• Moving the actual pages back to this repo as an RCL, then reference in the new project
• Open Sourcing the Website (no secrets should be checked in, but we need to take an additional step to confirm or just remove history).

A ripple effect for interactable components:

It should originate from the pointer:

It should start when the pointer is held and end when the pointer is released (with a minimum of about half a second or so):

And it should be able to ripple multiple times at once:

See NewWasmSiteFlyout in the CMS for implementation guidance.

A recent change has caused a regression in the dropdown menu. The button appears, but the actual dropdown menu has disappeared.

Consider investigating the new Anchor Positioning API while implementing a fix - there have been odd positioning errors I've noticed in some cases.

https://twitter.com/Una/status/1783913923072180603
https://codepen.io/collection/ExkRWw?grid_type=grid&cursor=eyJwYWdlIjoyfQ==

Describe the bug
Passing a text style, e.g. text-sm, will cause other unrelated styles to disappear, e.g. text-brand-800.

To Reproduce
This can be reproduced by viewing the PureBreadcrumbItem:

<PureBreadcrumb>
    <PureBreadcrumbItem Href="/sites" Name="Sites"/>
    <PureBreadcrumbItem Href="/sites/1" Name="Site 1"/>
    <PureBreadcrumbItem Name="Page"/>
</PureBreadcrumb>

Expected behavior
The PureBreadcrumbItem should have a smaller size, but retain the color applied via the style.

Screenshots

normal usage:

using text-sm:

Additional context

• This likely stems from the StylePrioritizer and KeyExtractor.ToCssKey(...)
• Need to confirm if this affects other style keys

We are utilizing Playwright for integration testing of the components on the website.

In Progress

• Buttons

Pending

• Alerts
• Badges
• Banners
• Cards
• Dialog
• Dropdowns
• Inputs
• Radio Buttons
• Tabs

Complete

Describe the bug
Adding your own Tailwind CSS generated styles in the page with the pureblazor.css has some minor visual issues

To Reproduce
Steps to reproduce the behavior:

1. Add PB + pureblazor.css
2. Add your own Tailwind config + import the css
3. Depending on the order of import, the issues change. e.g. primary filled buttons do not have the filled background.

Expected behavior
Determine the best way to merge or layer multiple tailwind css files (e.g. importing into the layer)

Describe the bug
This is more of a concern. Why do you try to recreate a component library from scratch ? Why not to use some open-source variant ? like MudBlazor and if needed just customize the design or do some abstraction layer between ?