Include close icon styles in classless

[asbjornu]

Include the .close icon styling in the classless stylesheet. Fixes #399.

[lucaslarroche]

@asbjornu I strongly prefer keeping the classless version without any classes.
If you need .close, you can use the regular pico.css file or add the class manually to your custom styles.

[asbjornu]

@lucaslarroche, I understand that "classless" preferably should not include any classes. Still, as explained in #399, I think feature parity between the "classless" and "classy" versions of Pico is more important than the classless version being guaranteed not to contain a single class. Could we find a compromise so the .close styles are included, somehow?

Perhaps applied to an element or different attribute instead of a class name? How about using the prev link relation?

prev

Refers to the previous document in an ordered series of documents.

In CSS and HTML respectively, it could look like the following:

dialog {
  article {
    a[rel="prev"] {
      /* Current .close styles */
    }
  }
}

<dialog>
  <article>
    <a rel="prev" href="#close" aria-label="Close"></a>
  </article>
</dialog>

An alternative to the prev link relation could be up:

up

…May be used to reference a resource where parent entries of an entry or a feed may be found.

…or start:

start

Refers to the first document in a collection of documents.

Thoughts?

[lucaslarroche]

@asbjornu,

a[rel="prev"]

I like it. Great idea 🙂.

This is a breaking change.
But we could ship it on the v2, currently v2.0.0-alpha1.
I was about to release the v2.0.0-rc1 version.

Would you update your PR (or open a new one) to ship this change against the v2 branch?

Here is the file:
https://github.com/picocss/pico/blob/v2/scss/components/_modal.scss

Note: v2 is using yarn. You can use yarn build and yarn dev

[asbjornu]

@lucaslarroche great! The change is made and the PR is rebased against v2.

[asbjornu]

@lucaslarroche, or should I rebase against dev so this can be included in #419? 🤔

[lucaslarroche]

@asbjornu,

I was also thinking of replacing the regular version.

I initially wanted to say that we could also replace .close with a[rel='prev'] on the regular — not classless — version on the v2.
But I'm also okay with shipping it to the v1 version because it's not a breaking change any more.
Sorry for the confusion.

In this case, it will be shipped against dev 😬 and released with 1.5.11 on master.

So, if you want, you can also open a second PR against v2 🙂

[lucaslarroche]

@lucaslarroche, or should I rebase against dev so this can be included in #419? 🤔

Yes

[asbjornu]

I initially wanted to say that we could also replace .close with a[rel='prev'] on the regular — not classless — version on the v2.

I see.

But I'm also okay with shipping it to the v1 version because it's not a breaking change any more.

Ok, cool. Then I think it's probably safest to not introduce the a[rel=prev] selector in the "classy" (default) CSS, no?

Sorry for the confusion.

No problem! 😃

In this case, it will be shipped against dev 😬 and released with 1.5.11 on master.

Nice!

So, if you want, you can also open a second PR against v2 🙂

Sure!

@lucaslarroche, or should I rebase against dev so this can be included in #419? 🤔

Yes

Ok! 👍🏼

[lucaslarroche]

@asbjornu,

It's probably safest to not introduce the a[rel=prev] selector in the "classy" (default) CSS

Ok, approved, I will merge

[lucaslarroche]

Thanks!