Skip to content

[UIK-5348][docs] Create content section structure #3024

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

Draft
j-mnizhek wants to merge 9 commits into
base: release/v17
Choose a base branch
from
Draft

[UIK-5348][docs] Create content section structure #3024

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2061c7b
[docs] add separate Content section
j-mnizhek Jun 23, 2026
20c2948
[docs] add info from Nastya
j-mnizhek Jun 23, 2026
d3f8e10
[docs] move Content to Foundation section
j-mnizhek Jun 24, 2026
718c96e
[docs] update styles
j-mnizhek Jun 25, 2026
d5b5d17
Merge branch 'release/v17' into UIK-5348/create-content-section-struc…
j-mnizhek Jul 6, 2026
dd20150
[docs] updates for Content section
j-mnizhek Jul 6, 2026
dc065ce
Merge branch 'release/v17' into UIK-5348/create-content-section-struc…
j-mnizhek Jul 8, 2026
b6bafd9
[docs] update Content section
j-mnizhek Jul 8, 2026
ee39a4c
Merge branch 'release/v17' into UIK-5348/create-content-section-struc…
j-mnizhek Jul 28, 2026
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
128 changes: 108 additions & 20 deletions website/docs/.vitepress/sidebarConfig.ts
View file
Open in desktop

@sheila-semrush sheila-semrush Jun 25, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I like the second version, with the separate 1st level section, but then I think we need to rename the "UX patterns", and maybe "UI elements", sub-sections because otherwise they will be constantly confused with our own components and patterns sections. Also, as there's not much in UX patterns and UI elements, maybe we can merge them for the time being?

Original file line number Diff line number Diff line change
Expand Up @@ -114,34 +114,122 @@ export const sideBarConfig: SidebarConfig = [
collapsed: true,
items: [
{
link: '/content/capitalization/capitalization',
activeMatch: '/content/capitalization/',
text: 'Capitalization',
link: '/content/content-principles/content-principles',
activeMatch: '/content/content-principles/',
text: 'Content principles',
},
{
link: '/content/date-format/date-format',
activeMatch: '/content/date-format/',
text: 'Date format',
},
{
link: '/content/file-extensions/file-extensions',
activeMatch: '/content/file-extensions/',
text: 'File extensions',
text: 'Style & grammar',
collapsed: true,
items: [
{
link: '/content/voice-and-style/voice-and-style',
activeMatch: '/content/voice-and-style/',
text: 'Voice and style',
},
{
link: '/content/grammar/grammar',
activeMatch: '/content/grammar/',
text: 'Grammar',
},
{
link: '/content/capitalization/capitalization',
activeMatch: '/content/capitalization/',
text: 'Capitalization',
},
{
link: '/content/date-format/date-format',
activeMatch: '/content/date-format/',
text: 'Date format',
},
{
link: '/content/file-extensions/file-extensions',
activeMatch: '/content/file-extensions/',
text: 'File extensions',
},
{
link: '/content/numbers/numbers',
activeMatch: '/content/numbers/',
text: 'Numbers',
},
{
link: '/content/punctuation/punctuation',
activeMatch: '/content/punctuation/',
text: 'Punctuation and special symbols',
},
{
link: '/content/units-of-measurement/units-of-measurement',
activeMatch: '/content/units-of-measurement/',
text: 'Units of measurement',
},
],
},
{
link: '/content/numbers/numbers',
activeMatch: '/content/numbers/',
text: 'Numbers',
text: 'UX patterns',
collapsed: true,
items: [
{
link: '/content/onboarding/onboarding',
activeMatch: '/content/onboarding/',
text: 'Onboarding',
},
{
link: '/content/pricing-and-sales/pricing-and-sales',
activeMatch: '/content/pricing-and-sales/',
text: 'Pricing and sales',
},
{
link: '/content/feedback/feedback',
activeMatch: '/content/feedback/',
text: 'Feedback',
},
{
link: '/content/system-states/system-states',
activeMatch: '/content/system-states/',
text: 'System states',
},
{
link: '/content/warnings/warnings',
activeMatch: '/content/warnings/',
text: 'Warnings',
},
{
link: '/content/errors/errors',
activeMatch: '/content/errors/',
text: 'Errors',
},
{
link: '/content/lists/lists',
activeMatch: '/content/lists/',
text: 'Lists',
},
{
link: '/content/modals/modals',
activeMatch: '/content/modals/',
text: 'Modals',
},
],
},
{
link: '/content/punctuation/punctuation',
activeMatch: '/content/punctuation/',
text: 'Punctuation and special symbols',
text: 'UI elements',
collapsed: true,
items: [
{
link: '/content/placeholders/placeholders',
activeMatch: '/content/placeholders/',
text: 'Placeholders',
},
{
link: '/content/buttons/buttons',
activeMatch: '/content/buttons/',
text: 'Buttons',
},
],
},
{
link: '/content/units-of-measurement/units-of-measurement',
activeMatch: '/content/units-of-measurement/',
text: 'Units of measurement',
link: '/content/glossary/glossary',
activeMatch: '/content/glossary/',
text: 'Glossary',
},
],
},
Expand Down
85 changes: 53 additions & 32 deletions website/docs/.vitepress/theme/DosDonts.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
<table class="dosdonts">
<thead>
<tr>
<th>Don’t</th>
<th>Do</th>
<th scope="col">Don’t</th>
<th scope="col">Do</th>
</tr>
</thead>
<tbody>
Expand All @@ -20,62 +20,83 @@
</template>

<style>
Comment thread
j-mnizhek marked this conversation as resolved.
.dosdonts {
.vp-doc table.dosdonts {
display: table;
width: 100%;
max-width: 100%;
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
margin: 20px 0 40px;
border-radius: var(--intergalactic-surface-rounded, 6px);
padding-top: var(--intergalactic-spacing-4x, 16px);
padding-bottom: var(--intergalactic-spacing-4x, 16px);
background: var(--intergalactic-bg-secondary-neutral, #f4f5f9);
width: fit-content;
max-width: 100%;
}
.dosdonts th {
background: var(--intergalactic-bg-secondary-neutral, #f4f5f9);
overflow: hidden;
}

.dosdonts td,
.dosdonts th {
text-align: center;
.vp-doc table.dosdonts tr {
border-bottom: none;
background: transparent;
}

.dosdonts tr {
border-bottom: none;
.vp-doc table.dosdonts tr:hover,
.vp-doc table.dosdonts tbody tr:hover,
.dark .vp-doc table.dosdonts tr:hover,
.dark .vp-doc table.dosdonts tbody tr:hover {
background: transparent;
}

.dosdonts th {
padding-top: 0;
.vp-doc table.dosdonts th,
.vp-doc table.dosdonts td {
width: 50%;
box-sizing: border-box;
vertical-align: middle;
text-align: center;
border: none;
}

.vp-doc table.dosdonts th {
padding: 0 var(--intergalactic-spacing-10x, 40px) var(--intergalactic-spacing-2x, 8px);
font-size: var(--intergalactic-fs-400, 20px);
line-height: var(--intergalactic-lh-400, 120%);
font-weight: var(--intergalactic-bold, 700);
background: var(--intergalactic-bg-secondary-neutral, #f4f5f9);
}

.dosdonts td {
padding: var(--intergalactic-spacing-6x, 24px) var(--intergalactic-spacing-10x, 40px) var(--intergalactic-spacing-6x, 24px);
font-size: var(--intergalactic-fs-200, 14px);
line-height: var(--intergalactic-lh-200, 142%);
}

.dosdonts tr th:first-of-type,
.dosdonts td:first-of-type {
border-right: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
.vp-doc table.dosdonts th:first-child,
.vp-doc table.dosdonts td:first-child {
border-right: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
}

.dosdonts th:first-of-type {
.vp-doc table.dosdonts th:first-child {
color: var(--intergalactic-text-critical, #d1002f);
}

.dosdonts th:last-of-type {
.vp-doc table.dosdonts th:last-child {
color: var(--intergalactic-text-success, #007c65);
}

.dosdonts td p {
.vp-doc table.dosdonts td {
padding: var(--intergalactic-spacing-6x, 24px) var(--intergalactic-spacing-10x, 40px);
font-size: var(--intergalactic-fs-200, 14px);
line-height: var(--intergalactic-lh-200, 142%);
word-wrap: break-word;
overflow-wrap: break-word;
}

.vp-doc table.dosdonts td > * {
width: 100%;
max-width: 100%;
text-align: center;
}

.vp-doc table.dosdonts td p {
margin-top: 0;
margin-bottom: var(--intergalactic-spacing-2x);
line-height: var(--intergalactic-lh-200)
margin-bottom: var(--intergalactic-spacing-2x, 8px);
}

.dosdonts td p:last-of-type {
.vp-doc table.dosdonts td p:last-child {
margin-bottom: 0;
}

</style>
</style>
Loading
Loading