Add styles #29

dvdherron · 2022-09-20T15:16:34Z

Description

Adds basic styles to anchor-positioning demo.
Similar to the toggles demo
uses Open Props for some design tokens

Steps to test/reproduce

Please explain how to best reproduce the issue and/or test the changes locally (including the pages/URLs/views/states to review).

Show me

Provide screenshots/animated gifs/videos if necessary.

…g into main

netlify · 2022-09-20T15:16:39Z

✅ Deploy Preview for anchor-polyfill ready!

Name	Link
🔨 Latest commit	`67d7bac`
🔍 Latest deploy log	https://app.netlify.com/sites/anchor-polyfill/deploys/6356ffb0a996eb00096eb4ff
😎 Deploy Preview	https://deploy-preview-29--anchor-polyfill.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

dvdherron · 2022-09-20T15:18:04Z

I want a nicer looking and easier to understand demo site.

dvdherron · 2022-09-22T17:16:37Z

@jgerigmeyer With the polyfill applied, what should the position-fallback version look like?

It currently looks like this:

Also, for the anchor positioning with scroll version, is there a way we can set the scroll position so that the anchor and floats are visible?

Jonny, I think you mentioned us possibly changing how these are shown (with a dropdown?). Were you thinking of doing that work here or in another story?

* main: tests Fix bugs with bottom/right positioning; use util fns from floating-ui

jgerigmeyer · 2022-09-22T19:09:38Z

@jgerigmeyer With the polyfill applied, what should the position-fallback version look like?

I think that changed slightly with the PR I just merged in... Now it looks like this, which is currently "correct" for what's defined:

Also, for the anchor positioning with scroll version, is there a way we can set the scroll position so that the anchor and floats are visible?

Yes! Please feel free to edit any of the examples to make them clearer -- I haven't put much thought into them at all.

Jonny, I think you mentioned us possibly changing how these are shown (with a dropdown?). Were you thinking of doing that work here or in another story?

Your call -- that was just an idea. Maybe a slight preference for that being a new PR?

@dvdherron

* main: Point unpkg to ESM build prepare for 0.0.1-alpha.0 release Wait for window.load before fetching CSS add umd build with fn api cleanup lint Run polyfill by default; expose fn API as alternative.

dvdherron · 2022-10-06T15:08:36Z

@stacyk Would love your feedback on how this is looking so far. The overall layout/look in general and how you might approach showing the "Anchor Positioning (with scroll)" example so that it starts with the anchor visible, in particular.

* main: Add (skipped) tests for upcoming features cleanup types refactor to remove unneeded ifs and elses fix failing test check isInset on properties review initial commit

* main: chore(deps): Automated dependency upgrades address review Use standard (serve/lint) commands

…tioning into add-styles

* main: Adding custom data attribute review Parse inline styles

…tioning into add-styles

dvdherron · 2022-10-11T15:14:25Z

@stacyk I fixed the issues with color accessibility, alpha order, and button :hover/:focus states in 8d66cef

@jgerigmeyer Is there an attribute that I can hook into when the polyfill is turned on? Say, if we wanted to change the button text to ´Polyfill Applied´?

Yesterday Stacy mentioned that it could possibly be confusing to use "Float" for the element being positioned relative to the anchor. Some might expect these elements to be positioned with the Css property 'float'. I don't know if we need to decide on whether to change this now, but could something like 'Positioned Element' work better?

jgerigmeyer · 2022-10-11T15:34:17Z

@jgerigmeyer Is there an attribute that I can hook into when the polyfill is turned on? Say, if we wanted to change the button text to ´Polyfill Applied´?

Done in 9b73d03

Yesterday Stacy mentioned that it could possibly be confusing to use "Float" for the element being positioned relative to the anchor. Some might expect these elements to be positioned with the Css property 'float'. I don't know if we need to decide on whether to change this now, but could something like 'Positioned Element' work better?

I'm fine with "Target" or "Positioned" or whatever 👍

public/demo.css

stacyk

I left a few style suggestions but they aren't critical. I didn't review fully for accessibility at this time.

stacyk · 2022-10-13T16:34:49Z

public/demo.css

+  padding: 2em 0;
+  justify-content: center;


maybe reorder?

stacyk · 2022-10-13T16:35:16Z

public/demo.css

+  grid-template:
+    'heading heading heading' min-content
+    '. elements .' min-content/minmax(0, 5rem) 1fr minmax(0, 5rem);
+  gap: 2rem;


Another reorder

dvdherron · 2022-10-14T16:49:17Z

@stacyk Applied disabled styles to the "Apply Polyfill" button. I think this covers everything if you to give this a final 👍🏽

stacyk · 2022-10-14T20:07:30Z

public/demo.css

+a:any-link {
+  color: var(--action);
+}


@dvdherron I think just one more thing and then we are good here... for this to be accessible while in light mode on the header and footer, the background lime would have to be really light, like #dce9cf. I don't know if it needs the gradient but you can make that call. Everything else looks good.

@stacyk fixed in e330cdc

I darkened the text a bit and switched out the gradient in light mode for just one lighter color:

And used a darker gradient in dark mode:

* main: chore(deps): Automated dependency upgrades

dvdherron added 2 commits September 20, 2022 16:42

add wip styles

c9ea417

Merge branch 'main' of ssh://github.com/oddbird/css-anchor-positionin…

6be3150

…g into main

dvdherron added 5 commits September 20, 2022 17:28

fix anchor text color

728e294

Merge branch 'main' into add-styles

986c99a

style button and cleanup

e477c37

fix scrolling floats

a098202

lint

6c988dc

jgerigmeyer added 3 commits September 22, 2022 14:44

Merge branch 'main' into add-styles

b26d7c2

* main: tests Fix bugs with bottom/right positioning; use util fns from floating-ui

fix tests

bcd1c58

remove attr

cfffbdd

jgerigmeyer and others added 3 commits September 23, 2022 16:32

Merge branch 'main' into add-styles

f8fadce

* main: Point unpkg to ESM build prepare for 0.0.1-alpha.0 release Wait for window.load before fetching CSS add umd build with fn api cleanup lint Run polyfill by default; expose fn API as alternative.

layout adjustments

245d9e8

Merge branch 'main' into add-styles

f364ebf

dvdherron requested a review from stacyk October 6, 2022 15:08

jgerigmeyer and others added 11 commits October 6, 2022 12:12

tests

c7ae633

Merge branch 'main' into add-styles

a4fc71b

* main: Add (skipped) tests for upcoming features cleanup types refactor to remove unneeded ifs and elses fix failing test check isInset on properties review initial commit

Merge branch 'main' into add-styles

7a09cec

Merge branch 'main' into add-styles

cbd5956

* main: chore(deps): Automated dependency upgrades address review Use standard (serve/lint) commands

layout remaining examples

d9f17b4

Merge branch 'add-styles' of ssh://github.com/oddbird/css-anchor-posi…

f30c0db

…tioning into add-styles

Merge branch 'main' into add-styles

7830c89

* main: Adding custom data attribute review Parse inline styles

tests

c645224

adjust placefiller-above height

2485e06

Merge branch 'add-styles' of ssh://github.com/oddbird/css-anchor-posi…

2e091c9

…tioning into add-styles

review edits

8d66cef

Disable demo btn (and update text) once polyfill is applied.

9b73d03

stacyk marked this pull request as ready for review October 11, 2022 19:28

dvdherron and others added 5 commits October 12, 2022 16:35

floating --> target

a9997b0

add footer and draft spec link

f38b17e

lint

ff64deb

use npx instead of yarn dlx for playwright browsers

6e13c17

consistent use of "target" instead of "floating"

4722a52

jgerigmeyer approved these changes Oct 12, 2022

View reviewed changes

stacyk reviewed Oct 13, 2022

View reviewed changes

public/demo.css Show resolved Hide resolved

stacyk approved these changes Oct 13, 2022

View reviewed changes

review cleanup

0d5906e

dvdherron requested a review from stacyk October 14, 2022 16:50

stacyk reviewed Oct 14, 2022

View reviewed changes

fixed color contrast issues

e330cdc

dvdherron requested a review from stacyk October 17, 2022 13:20

stacyk approved these changes Oct 17, 2022

View reviewed changes

dvdherron and others added 2 commits October 18, 2022 18:52

Merge branch 'main' into add-styles

1f19181

Merge branch 'main' into add-styles

67d7bac

* main: chore(deps): Automated dependency upgrades

jgerigmeyer merged commit f88ef63 into main Oct 24, 2022

jgerigmeyer deleted the add-styles branch October 24, 2022 21:14

Uh oh!

Add styles #29

Add styles #29

Uh oh!

Conversation

dvdherron commented Sep 20, 2022

Description

Steps to test/reproduce

Show me

Uh oh!

netlify bot commented Sep 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for anchor-polyfill ready!

Uh oh!

dvdherron commented Sep 20, 2022

Uh oh!

dvdherron commented Sep 22, 2022

Uh oh!

jgerigmeyer commented Sep 22, 2022

Uh oh!

dvdherron commented Oct 6, 2022

Uh oh!

dvdherron commented Oct 11, 2022

Uh oh!

jgerigmeyer commented Oct 11, 2022

Uh oh!

Uh oh!

stacyk left a comment

Choose a reason for hiding this comment

Uh oh!

stacyk Oct 13, 2022

Choose a reason for hiding this comment

Uh oh!

dvdherron Oct 14, 2022

Choose a reason for hiding this comment

Uh oh!

stacyk Oct 13, 2022

Choose a reason for hiding this comment

Uh oh!

dvdherron Oct 14, 2022

Choose a reason for hiding this comment

Uh oh!

dvdherron commented Oct 14, 2022

Uh oh!

stacyk Oct 14, 2022

Choose a reason for hiding this comment

Uh oh!

dvdherron Oct 17, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

netlify bot commented Sep 20, 2022 •

edited

Loading

dvdherron Oct 17, 2022 •

edited

Loading