space icon-links evenly across

[leifwalsh]

(rather than justified left)

fixes #1720

[gabalafou]

Thank you for your interest in making the PyData theme better!

I will need to give this a closer look later, but right now, I'm seeing the icons bunch up because the column-gap rule was removed. Here's a screenshot of the header node when I apply this PR locally and build the docs:

[leifwalsh]

Hmm, that's not what I intended. I'll take a closer look this weekend but let's try putting the column gap back for now.

[leifwalsh]

@gabalafou I think this looks right https://pydata-sphinx-theme--1726.org.readthedocs.build/en/1726/

[leifwalsh]

Yeah, I have exactly this in custom css and it works for us:

.navbar-icon-links {
  justify-content: space-evenly;
}

[leifwalsh]

I don't think I've ever tested page layout but I'd be happy to try if you want to point me to an example?

[drammock]

I don't think I've ever tested page layout but I'd be happy to try if you want to point me to an example?

One way is to use Playwright, which loads a headless browser, renders and serves pages (without displaying them anywhere), and lets you interact with the dom. Here's an example from our tests:

https://github.com/pydata/pydata-sphinx-theme/blob/99f9b1c29854ee0f88884e032acc1997dfae370e/tests/test_a11y.py#L227-L242

That test uses expect(locator).to_have_css("color", color_value) and my guess is that .to_have_css(...) may be the best we can do for testing this change; in case I'm wrong, here are the other assertions you might use: https://playwright.dev/python/docs/test-assertions

Another way is to do a static sphinx build on disk (using our test fixture sphinxbuildfactory) and query the resulting BeautifulSoup object:

https://github.com/pydata/pydata-sphinx-theme/blob/99f9b1c29854ee0f88884e032acc1997dfae370e/tests/test_build.py#L218-L228

This latter way is faster but more limited as the page isn't rendered, so you can only really effectively test the page source (not, e.g., the effects of JS).

[leifwalsh]

Hmm, those approaches would really only be testing that CSS works the way CSS is supposed to work, not that it results in output that looks correct.

I'm willing to try if you think it's valuable (e.g. if it would catch a regression somehow) but it doesn't seem super valuable to me. Let me know what you'd like to do, I'll have some hacking time over the weekend.

[drammock]

Hmm, those approaches would really only be testing that CSS works the way CSS is supposed to work, not that it results in output that looks correct.

you're not wrong. I guess the alternative is to use a playwright screenshot and use the file_regression fixture to test that the screenshot image doesn't change. Here's an example of the file_regression fixture:

https://github.com/pydata/pydata-sphinx-theme/blob/99f9b1c29854ee0f88884e032acc1997dfae370e/tests/test_build.py#L329-L336

I don't think we've ever used it for screenshots before though, and the approach feels a bit hackish to me, but I think it's basically the approach used by bespoke website testing frameworks for visual regression testing.

[leifwalsh]

Thanks for that pointer! I'll try it and see if I can get it to do something that won't be really annoying :)

[leifwalsh]

Ok, I don't think that's going to work without a big change to the testing infrastructure. It looks like test_a11y.py is the only place we currently use playwright, and that is only set up to test how the docs for the theme itself (i.e. pydata-sphinx-theme.readthedocs.io) display (and that uses icon-links in the header where they don't expand because there are other flex things to the left). I can add a new docs source tree under tests/sites that uses icon-links in the primary navbar, but that's only set up to test the html output right now, it's not hooked up to playwright.

[drammock]

Ok, I don't think that's going to work without a big change to the testing infrastructure.

Ah yes, my bad! I didn't connect those dots. FWIW we do plan to make such a change to the test infra (rely more on playwright) but this PR is not the right time to try to set that all up.

[leifwalsh]

Thank you! Please ping me if you do get that set up and I'll be happy to add a regression test for this :)