V3 Roadmap Outline

[Yohn]

I find a few little things here and there while working with PicoCSS, and I sometimes dont write them down and forget what I came across that would like to change later, so I'm starting this to have a discussion about potential enhancements, improvements, and features for version 3.

What I'd like to do is start a new thread (top comment) under this discussion here and discuss, evaluate or add to that topic of the discussion under that comment.

[Yohn]

Config to only be in the _settings.scss file.

I noticed in some files that there are settings for that component or element, that make it hard to be changed.

I believe it would be best to put all those settings in a central location ie _settings.scss or maybe make a _variables.scss file to see and change those settings easier instead of having to modify the core project to make those changes.

If we could point out the sass files here that have these config settings within their file, that would be great and make it easier to extract and add them to a central file for later.

Heres a couple files where I found these settings at currently:

PicoCSS/scss/forms/_basics.scss

Lines 5 to 6 in 73645e4

	// Helper
	$helper-previous-tags: "input, select, textarea, fieldset";

PicoCSS/scss/forms/_checkbox-radio-switch.scss

Lines 87 to 90 in 73645e4

	// Config
	$switch-height: 1.25em;
	$switch-width: 2.25em;
	$switch-transition: 0.1s ease-in-out;

PicoCSS/scss/forms/_floating.scss

Line 6 in 73645e4

$transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);

PicoCSS/scss/forms/_input-range.scss

Lines 4 to 7 in 73645e4

	// Config
	$height-track: 0.375rem;
	$height-thumb: 1.25rem;
	$border-thumb: 2px;

[odama626]

I think keeping these kind of settings co-located is kind of nice, so when you're working on a component, all of it's settings are there with it.

maybe we could keep these here and assign them to a variable that is declared in settings with a default to allow for easier overrides?

[Yohn]

I think keeping these kind of settings co-located is kind of nice, so when you're working on a component, all of it's settings are there with it.

maybe we could keep these here and assign them to a variable that is declared in settings with a default to allow for easier overrides?

I can respect that and understand the need to keep them with the files. Thanks for the input and heads up! I'll keep it in mind for sure!

[Yohn]

Removing and / or disabling by default

• Remove original Pico form validation [aria-invalid="true|false"] in favor of :user-*valid pesudo-elements
• Timeline will be disabled by default
• Remove _notification.scss - use Popover component
• Remove _tab-region.scss - Didnt work in Chrome based browsers

[odama626]

something to keep in mind -- aria-invalid allows manually setting something as valid or invalid outside of the actual state of the element

[Yohn]

something to keep in mind -- aria-invalid allows manually setting something as valid or invalid outside of the actual state of the element

Uhmmm ok, yeah that is a valid point.

Personally, I like that the :user-invalid and :user-valid features have been added to CSS and find using them a little easier than modifying the aria-* attributes with JavaScript or other means.

Any ideas on how to proceed with this?

[odama626]

Maybe adding maybe adding the user- and keeping the aria? And using the aria as an override? So it will be more specific then user- maybe?

[Yohn]

Yeah that's how it's acting currently.

I may have to look at combining them both together to help produce less CSS code.