Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Visually hidden docs #691

Merged
merged 5 commits into from
Dec 29, 2024
Merged

Visually hidden docs #691

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f12b246
Visually hidden docs
GoldGroove06 Dec 28, 2024
6afc571
Visually hidden docs
GoldGroove06 Dec 28, 2024
8acf074
Visually hidden docs
GoldGroove06 Dec 28, 2024
9f77350
Merge branch 'visually-hidden-docs' of https://github.com/GoldGroove0…
GoldGroove06 Dec 28, 2024
e04d71e
Merge branch 'main' into visually-hidden-docs
kodiakhq[bot] Dec 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions docs/app/docs/components/visually-hidden/docs/codeUsage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
const code = {
javascript: {
code: `import VisuallyHidden from "@radui/ui/VisuallyHidden""

const VisualltHiddenExample = () => (
<VisuallyHidden asChild>
<span>This is a visually hidden text</span>
</VisuallyHidden>
)`
},
scss: {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we do this via js as an inline style, we wont need the CSS, this wont work without CSS, thoughts?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The component was made this way although it has a line of styling but inline styling might have conflicts with customclass styling. Not tested I might be wrong too.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if people wanna inline style and override, that's fine - but out of the box this should work without CSS

Coz we are a headless library first, without CSS - this component will be visible even though we call it visually hidden :D

code: `.rad-ui-visually-hidden {
display: none;
}`
},
}

export default code;
44 changes: 44 additions & 0 deletions docs/app/docs/components/visually-hidden/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
const PAGE_NAME = 'VISUALLY_HIDDEN_DOCS'
import Documentation from "@/components/layout/Documentation/Documentation"


import VisuallyHidden from "@radui/ui/VisuallyHidden"
import SEO from "../../docsIndex"
export const metadata = SEO.getMetadata(PAGE_NAME)

import codeUsage from "./docs/codeUsage"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

The import path needs to be corrected

The current import path "./docs/codeUsage" is incorrect. Based on the directory structure and file content verification:

  • The file exists at docs/app/docs/components/visually-hidden/docs/codeUsage.js
  • It exports a default object containing code examples
  • The import statement should be "./docs/codeUsage" since the importing file (page.js) is in the same directory as the docs folder
🔗 Analysis chain

Suggest verifying the import path.

Kindly double-check that "./docs/codeUsage" is the correct relative path for the codeUsage import and that the file indeed exports what you expect.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Validate that codeUsage is exported from docs/app/docs/components/visually-hidden/docs/codeUsage.js
rg --context 3 'export .* codeUsage'

Length of output: 38

Script:

#!/bin/bash
# Let's first check if the file exists at the expected location
fd "codeUsage" --extension js --extension ts --extension tsx

# Let's also check for any file that might export codeUsage using ast-grep
ast-grep --pattern 'export $_ codeUsage'

# Let's also check the directory structure to understand the context better
ls -R docs/app/docs/components/visually-hidden/

Length of output: 1236

Script:

#!/bin/bash
# Let's check the content of the codeUsage.js file to verify the export
cat docs/app/docs/components/visually-hidden/docs/codeUsage.js

# Let's also check the actual import statement in page.js
cat docs/app/docs/components/visually-hidden/page.js

Length of output: 1872


const VisuallyHiddenDocs = () => {

const columns = [
{name: 'Prop', key: 'prop'},
{name: 'Type', key: 'type'},
{name: 'Default', key: 'default'},
{name: 'Description', key: 'description'},
];

const data = [
{prop: 'asChild', type: 'boolean', default: 'false', description: 'renders the children in desired element'},

];


return <div>
<Documentation currentPage={PAGE_NAME} title='Visually Hidden' description={`Use these helpers to visually hide elements but keep them accessible to assistive technologies.`}>
<Documentation.ComponentHero codeUsage={codeUsage}>
<div>
<VisuallyHidden asChild>
<span>This is a visually hidden text</span>
</VisuallyHidden>
</div>
</Documentation.ComponentHero>


<div >
<Documentation.Table columns={columns} data={data} />
</div>
</Documentation>
</div>
}

export default VisuallyHiddenDocs;
4 changes: 4 additions & 0 deletions docs/components/navigation/Navigation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,10 @@ const sections = [
{
title: "Tooltip",
path: "/docs/components/tooltip"
},
{
title: "VisuallyHidden",
path: "/docs/components/visually-hidden"
}
]
},
Expand Down
Loading