Page MenuHomePhabricator
Create Task
Maniphest T339962

Rebrand the "main" Codex docs as "beta"
Closed, ResolvedPublic2 Estimated Story Points
Actions

Assigned To
AnneT
Authored By
CCiufo-WMF
Jun 20 2023, 6:55 PM
Tags
Referenced Files
F37473149: Captura de pantalla 2023-08-14 a las 11.49.37.png
Aug 14 2023, 9:51 AM
F37391203: Captura de pantalla 2023-08-10 a las 15.53.55.png
Aug 10 2023, 1:54 PM
F37391179: Captura de pantalla 2023-08-10 a las 15.51.36.png
Aug 10 2023, 1:52 PM
F37345550: image.png
Aug 8 2023, 11:19 PM
F37337888: image.png
Aug 8 2023, 5:53 PM
F37337867: image.png
Aug 8 2023, 5:53 PM
F37335506: Captura de pantalla 2023-08-08 a las 16.36.34.png
Aug 8 2023, 2:38 PM
F37333586: Screenshot 2023-08-08 at 9.02.04 AM.png
Aug 8 2023, 1:05 PM
View All 13 Files
Subscribers
Aklapper
bmartinezcalvo
Catrope
CCiufo-WMF
Volker_E

Description

Background

The current doc site has a "main" branch where the latest but yet-to-be-released version of Codex is. This includes things like WIP components. To differentiate between the "latest" and "main" version of the docs, we'd like to label the "main" version as "beta". This will make it clearer that some changes and additions are experimental, where as the "latest" docs are what should be used as a reference for what's in production.

Proposal

op.2.png (1×1 px, 374 KB)
Use a warning yellow tag next to the logo and a warning message explaining that this is the beta version of the Codex site.

New warning message proposal: "You're viewing the docs for the beta version of Codex, which may contain features that have not been released yet. Codex users should visit the official docs."

Acceptance criteria (or done)

  • Add tag next to the Codex logo on the "main" branch to indicate that this is the beta version
  • Update the warning message say: "You're viewing the docs for the beta version of Codex, which may contain features that have not been released yet. Codex users should visit the official docs."

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
Update Codex from v0.16.1 to v0.17.0mediawiki/coremaster+1 K -1 K
docs: Improve beta tag designdesign/codexmain+10 -3
docs: Change background color of beta tagdesign/codexmain+1 -0
docs: Brand the main site as "beta"design/codexmain+43 -2
Customize query in gerrit

Related Objects

Event Timeline

CCiufo-WMF created this task.Jun 20 2023, 6:55 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 20 2023, 6:55 PM
CCiufo-WMF added a project: Design-System-Team.Jun 20 2023, 6:56 PM
CCiufo-WMF attached a referenced file: F35870131: op.2.png. (Show Details)
CCiufo-WMF attached a referenced file: F35870123: op.1.png. (Show Details)
CCiufo-WMF moved this task from Inbox to Needs Refinement on the Design-System-Team board.
CCiufo-WMF added a project: Codex 1.0.
CCiufo-WMF mentioned this in T311097: docs: Consider making the latest release branch the default for the live docs site.
CCiufo-WMF added a project: Codex.Jun 20 2023, 7:06 PM
CCiufo-WMF updated the task description. (Show Details)Jun 22 2023, 5:22 PM
CCiufo-WMF set the point value for this task to 2.
CCiufo-WMF moved this task from Needs Refinement to Up Next on the Design-System-Team board.
CCiufo-WMF triaged this task as Medium priority.Jun 26 2023, 2:30 PM
Catrope moved this task from Up Next to Design-Systems-Sprint-5 on the Design-System-Team board.Jul 31 2023, 5:18 PM
Catrope edited projects, added Design-System-Team (Design-Systems-Sprint-5); removed Design-System-Team.
gerritbot added a comment.Aug 7 2023, 8:26 PM

Change 946620 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] docs: Brand the main site as "beta"

https://gerrit.wikimedia.org/r/946620

gerritbot added a project: Patch-For-Review.Aug 7 2023, 8:26 PM
AnneT changed the task status from Open to In Progress.Aug 7 2023, 8:28 PM
AnneT claimed this task.
AnneT moved this task from Committed to Code Review on the Design-System-Team (Design-Systems-Sprint-5) board.
gerritbot added a comment.Aug 8 2023, 1:44 AM

Change 946620 merged by jenkins-bot:

[design/codex@main] docs: Brand the main site as "beta"

https://gerrit.wikimedia.org/r/946620

Maintenance_bot removed a project: Patch-For-Review.Aug 8 2023, 2:10 AM
Catrope moved this task from Code Review to Design Sign-Off on the Design-System-Team (Design-Systems-Sprint-5) board.Aug 8 2023, 2:59 AM
Catrope subscribed.

This is now visible at https://doc.wikimedia.org/codex/main/

bmartinezcalvo subscribed.Aug 8 2023, 8:14 AM
bmartinezcalvo updated the task description. (Show Details)Aug 8 2023, 8:17 AM
bmartinezcalvo added a comment.EditedAug 8 2023, 8:27 AM

@AnneT adding some corrections related with the design sign-off:

  1. "Beta" tag next to the logo should use the same background-color-warning-subtle as in the warning message.
    Captura de pantalla 2023-08-08 a las 10.17.49.png (568×2 px, 140 KB)
  1. Apart from the tag color, its text is slightly misaligned with the Codex logo.
    Captura de pantalla 2023-08-08 a las 10.25.49.png (492×1 px, 107 KB)
  1. One of the proposals was to rename the url from doc.wikimedia.org/codex/main/ to doc.wikimedia.org/codex/beta/. Is this going to be done?
    Captura de pantalla 2023-08-08 a las 10.20.14.png (742×1 px, 251 KB)
bmartinezcalvo updated the task description. (Show Details)Aug 8 2023, 8:30 AM
gerritbot added a comment.Aug 8 2023, 1:03 PM

Change 946944 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] docs: Change background color of beta tag

https://gerrit.wikimedia.org/r/946944

gerritbot added a project: Patch-For-Review.Aug 8 2023, 1:03 PM
AnneT added a comment.Aug 8 2023, 1:05 PM

Thanks @bmartinezcalvo!

  1. I've pushed a new patch to change the background color of the tag
  2. I think the text has to be slightly misaligned in order for the border of the tag to be aligned with the icon and logo, and the tag text to be centered within the tag border

Screenshot 2023-08-08 at 9.02.04 AM.png (418×2 px, 96 KB)

Since the text of the beta tag is smaller than that of the logo, if I lower if to be more in line with the logo text, the entire tag will move down and appear out of alignment with the icon. What do you think is the best path forward here?

  1. We decided at the June 22 task refinement meeting not to do the URL change at this time, since it will take a lot more time than just making these design changes
bmartinezcalvo added a comment.EditedAug 8 2023, 2:38 PM
In T339962#9076998, @AnneT wrote:

Thanks @bmartinezcalvo!

  1. I've pushed a new patch to change the background color of the tag

@AnneT great, thank you!

  1. I think the text has to be slightly misaligned in order for the border of the tag to be aligned with the icon and logo, and the tag text to be centered within the tag border

Screenshot 2023-08-08 at 9.02.04 AM.png (418×2 px, 96 KB)

Since the text of the beta tag is smaller than that of the logo, if I lower if to be more in line with the logo text, the entire tag will move down and appear out of alignment with the icon. What do you think is the best path forward here?

@AnneT I designed the Beta tag to be a bit bigger than the logo (32px height). These are the specs:

Captura de pantalla 2023-08-08 a las 16.36.34.png (918×1 px, 103 KB)

  1. We decided at the June 22 task refinement meeting not to do the URL change at this time, since it will take a lot more time than just making these design changes

Ok, removing it from the acceptance criteria then. Thank you!

gerritbot added a comment.Aug 8 2023, 5:08 PM

Change 946944 merged by jenkins-bot:

[design/codex@main] docs: Change background color of beta tag

https://gerrit.wikimedia.org/r/946944

Maintenance_bot removed a project: Patch-For-Review.Aug 8 2023, 5:11 PM
AnneT added a comment.Aug 8 2023, 5:53 PM

@bmartinezcalvo ahh, thanks for the design spec details here! I can make the beta tag 32px tall and increase the left and right padding from 8px to 12px. This is what it looks like on a page that has a sidebar menu:

image.png (424×548 px, 33 KB)

As you can see, the increased width of the tag makes it bump up against the scrollbar in the sidebar. Increasing the width of the sidebar is possible, but will be tricky because of the way VitePress has set it up, so I think it will increase the estimate of this task.

One potential solution would be to reduce the width of the beta tag a bit by making the left and right padding 8px instead of 12, which gets you this:

image.png (406×558 px, 33 KB)

What do you think looks best?

Volker_E subscribed.Aug 8 2023, 11:19 PM

On point 2.
I think it would be best to have the baseline of Codex and Beta version equal. Right now it's different by several pixels:

image.png (102×456 px, 13 KB)

bmartinezcalvo added a comment.EditedAug 10 2023, 1:52 PM
In T339962#9078229, @AnneT wrote:

As you can see, the increased width of the tag makes it bump up against the scrollbar in the sidebar. Increasing the width of the sidebar is possible, but will be tricky because of the way VitePress has set it up, so I think it will increase the estimate of this task.

One potential solution would be to reduce the width of the beta tag a bit by making the left and right padding 8px instead of 12, which gets you this:

image.png (406×558 px, 33 KB)

What do you think looks best?

@AnneT 8px works well, let's go with it. Thank you!

One last thing I commented with Volker in a chat with him, could we make this tag visually lighter by using the Regular text instead Bold to match with the message and menu items text? Apart from this, the rest looks great.

Captura de pantalla 2023-08-10 a las 15.53.55.png (816×2 px, 790 KB)

CCiufo-WMF added a comment.Aug 10 2023, 2:15 PM

Throwing in one last idea: do we really need to say "Beta version" in the tag? Why not just "Beta"? Saves space and we don't need to worry about the padding as much.

Volker_E added a comment.Aug 10 2023, 2:38 PM

👍 (and add “version” as visually hidden span for assistive technology users)

bmartinezcalvo added a comment.Aug 10 2023, 2:50 PM
In T339962#9083882, @CCiufo-WMF wrote:

Throwing in one last idea: do we really need to say "Beta version" in the tag? Why not just "Beta"? Saves space and we don't need to worry about the padding as much.

If you all think that just "Beta" will be enough for users to understand that this is a different version from the latest one, I'm ok with this change.

gerritbot added a comment.Aug 10 2023, 5:24 PM

Change 947893 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] docs: Increase the height of the beta tag

https://gerrit.wikimedia.org/r/947893

gerritbot added a project: Patch-For-Review.Aug 10 2023, 5:24 PM
AnneT added a comment.Aug 10 2023, 5:33 PM

Thanks all - I have done the following in the latest patch:

  • Increased the height of the beta tag to 32px
  • Increased the horizontal padding to 12px.
  • Set the font weight to regular
  • Made "version" visually hidden for screen readers only

Demo will be up soon; see the patch number above!

gerritbot added a comment.Aug 10 2023, 6:59 PM

Change 947893 merged by jenkins-bot:

[design/codex@main] docs: Improve beta tag design

https://gerrit.wikimedia.org/r/947893

Maintenance_bot removed a project: Patch-For-Review.Aug 10 2023, 7:10 PM
bmartinezcalvo updated the task description. (Show Details)Aug 11 2023, 9:27 AM
CCiufo-WMF added a comment.Aug 11 2023, 3:17 PM

Latest patch looks great to me.

bmartinezcalvo added a comment.Aug 14 2023, 9:51 AM
In T339962#9084878, @AnneT wrote:

Thanks all - I have done the following in the latest patch:

  • Increased the height of the beta tag to 32px
  • Increased the horizontal padding to 12px.
  • Set the font weight to regular
  • Made "version" visually hidden for screen readers only

Demo will be up soon; see the patch number above!

@AnneT I've checked the latest patch and it looks great. The Beta text is Semibold instead of Regular, but anyway it looks good so it's not a problem for me since it's similar to the menu items on the right.

Captura de pantalla 2023-08-14 a las 11.49.37.png (402×1 px, 66 KB)

Volker_E moved this task from Design Sign-Off to Pending Release on the Design-System-Team (Design-Systems-Sprint-5) board.Aug 14 2023, 4:45 PM
gerritbot added a comment.Aug 16 2023, 4:36 PM

Change 949555 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/core@master] Update Codex from v0.16.1 to v0.17.0

https://gerrit.wikimedia.org/r/949555

gerritbot added a project: Patch-For-Review.Aug 16 2023, 4:36 PM
PatchDemoBot added a comment.Aug 16 2023, 4:40 PM

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/6188b4e5fe/w

gerritbot added a comment.Aug 16 2023, 6:25 PM

Change 949555 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.16.1 to v0.17.0

https://gerrit.wikimedia.org/r/949555

Maintenance_bot removed a project: Patch-For-Review.Aug 16 2023, 6:31 PM
AnneT closed this task as Resolved.Aug 16 2023, 6:45 PM
PatchDemoBot added a comment.Aug 16 2023, 8:31 PM

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/6188b4e5fe/w/

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits