Add assets to support the Cdocs stepper (not in use yet)#35312
Add assets to support the Cdocs stepper (not in use yet)#35312
Conversation
Reduce visual weight of the expand all / collapse toggle so it reads as a quiet utility control rather than competing with step titles. - font-size: 16px → 14px - font-weight: 600 → 500 - text-transform: uppercase → none (sentence case) - Add subtle letter-spacing
github-actions
bot
added
Architecture
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: ffe5f61c32
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0f1ddb6a47
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
|
Created docs card for review: https://datadoghq.atlassian.net/browse/DOCS-13722 |
| // Hide focus outlines for mouse/touch only; keep for keyboard | ||
| button:focus:not(:focus-visible) { | ||
| outline: none; | ||
| } | ||
| button:focus-visible { | ||
| outline: 2px solid $ddpurple; | ||
| outline-offset: 2px; | ||
| } |
There was a problem hiding this comment.
@jhgilbert hello! these styles seem to be a duplicate of what's in _global.scss. could we remove them and still have the intended output?
There was a problem hiding this comment.
by the order of imports here https://github.com/DataDog/documentation/blob/master/assets/styles/style.scss, the pages/global styles would overwrite the bootstrap-custom styles
Co-authored-by: StefonSimmons <57869435+StefonSimmons@users.noreply.github.com>
gh-worker-ownership-write-b05516
bot
removed the request for review
from a team
4 participants
What does this PR do? What is the motivation?
Adds assets to support a new Cdocs component, the stepper. The actual
steppertag will not be available in Cdocs until the next release, but you can preview the component here.This PR also makes focus visible on keyboard navigation, which was required for us to meet the accessibility requirements in the stepper RFC. It's important for accessibility anyway, so we might as well fix it. I included some tweaks to how the focus appeared for some components, like tabs. All of this can be previewed at the above link.
Merge instructions
Merge readiness:
For Datadog employees:
Your branch name MUST follow the
<name>/<description>convention and include the forward slash (/). Without this format, your pull request will not pass CI, the GitLab pipeline will not run, and you won't get a branch preview. Getting a branch preview makes it easier for us to check any issues with your PR, such as broken links.If your branch doesn't follow this format, rename it or create a new branch and PR.
[6/5/2025] Merge queue has been disabled on the documentation repo. If you have write access to the repo, the PR has been reviewed by a Documentation team member, and all of the required checks have passed, you can use the Squash and Merge button to merge the PR. If you don't have write access, or you need help, reach out in the #documentation channel in Slack.
AI assistance
Additional notes