Comments (8)
@Atmos4,
Thank you. I appreciate your research. I agree. You made a good point.
But we must avoid breaking changes because we are no longer in beta or release-candidate.
So the current <a rel=prev></a>
should still be functional.
I would prefer formmethod="dialog"
(vs rel="prev"
).
I didn't know about HTMLDialogElement, so that's even better.
Sure, it would be great if you could open a PR.
Also, as following PRs, we would need to update the website and the examples.
It can come later.
Note, you also need to reset box-shadow
(EDITED)
from pico.
Semantically valid is more important than the bundle size.
:is(button, a):has([rel=prev])
Agreed
(EDITED)
from pico.
dialog
is not a validformmethod
.
@lucaslarroche it is! Check out the MDN article and this codepen. The original codepen I posted above was also containing this solution.
from pico.
@lucaslarroche it is! Check out the MDN article and this codepen.
Great. I missed it when researching yesterday.
The original codepen I posted above was also containing this solution.
Yes. That's why I suggested at some point to target button[formmethod]
to avoid using rel.
from pico.
@lucaslarroche
I will work on a PR as soon I have some free time!
Out of curiosity, how much does bundle size matter to this project? If it is important, then I might just go with the first solution I described. It should be doable with :is(button, a):has([rel=prev])
.
I edited the codepen to reflect what I described above, and simplify the CSS to work with .close
class instead.
from pico.
PR is ready, see #448
from pico.
@Atmos4, I edited my comments about targeting <button formmethod="dialog" />
I was confused with your example using it, but dialog
is not a valid formmethod
.
So you were right, .close, :is(a, button)[rel=prev]
and :is(a, button)[rel=prev]
are good!
from pico.
@lucaslarroche The problem with using button[formmethod]
as the way to style the icon is that there are other valid use cases for button[formmethod]
without the icon, for example:
<dialog>
<article>
<!-- Modal content -->
<footer>
<form>
<button formmethod=dialog>Cancel</button> <!-- this button should look normal! -->
</form>
</footer>
</article>
</dialog>
By the way, is there a reason to have some part of the icon specific code coupled to the header? It could be interesting to allow usage of that icon anywhere inside the article, for example like this:
<dialog id=modal1>
<article>
<button rel=prev onclick="modal1.close()"></button> <!-- currently doesn't float:right -->
<!-- Modal content -->
</article>
</dialog>
I can create an issue/PR to decouple the code if you are interested. Maybe there are valid reasons to have it otherwise though!
from pico.
Related Issues (20)
- Table has unexpected background color when in `<article>` in dark theme
- Dropdown is not vertically aligned with `<a>` in `<nav>` HOT 2
- Selecting another radio has a flash of white in dark mode
- Version 2 cards have almost no padding HOT 2
- Suggestion: make submit buttons inside forms with invalid inputs have the same look as disabled buttons
- Customized design system Example is down
- Image element attribute height is overridden
- Dialog height on mobile devices (svh vs vh)
- A bug with the name of the color Fuchsia on the website
- Example on picocss site for Design Systems is not working
- Card inside a Dialog does not have the correct width.
- Links don't respect `--pico-text-underline-offset` variable
- Using $parent-selector variable doesn't fully restrict styles to specified selector.
- aria-invalid with grouped input
- Invalid HTML5
- Helper texts are incompatible with groups
- textarea after button spacing
- `code` tag should keep whitespace HOT 4
- Nav example horizontal scroll HOT 1
- Remove margin-bottom on last child HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pico.