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

feat(sidenav)!: core tokens migration #1901

Merged
merged 47 commits into from
Aug 7, 2023
Merged

feat(sidenav)!: core tokens migration #1901

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
47 commits
Select commit Hold shift + click to select a range
8364e81
chore(sidenav): initial build changes
jenndiaz May 12, 2023
203364c
chore(sidenav)!: wip add new tokens
jenndiaz May 12, 2023
d438179
chore(sidenav)!: wip migrate tokens
jenndiaz May 18, 2023
29cd210
chore(sidenav)!: wip migrate tokens
jenndiaz May 19, 2023
92b7ad8
chore(sidenav): migrates tokens part 3
jenndiaz May 24, 2023
bae7346
fix(sidenav): typo
jenndiaz May 25, 2023
d6140bc
chore(sidenav): add description and migration guide
jenndiaz May 25, 2023
6658cbb
chore(sidenav): add highcontrast custom properties
jenndiaz May 25, 2023
e877b34
chore(sidenav): properties rename and organize
jenndiaz May 25, 2023
75c4379
chore(sidenav): wip adjust stories
jenndiaz May 25, 2023
aa939fc
chore(sidenav): add mods
jenndiaz May 25, 2023
364ca2e
chore(sidenav): rename and docs
jenndiaz May 26, 2023
70669a9
feat(sidenav): adds all variants to storybook
jenndiaz May 26, 2023
471f332
fix(sidenav): icon and category story bugs
jenndiaz May 26, 2023
1f571eb
feat(sidenav): icon pass through custom properties
jenndiaz May 31, 2023
63330d4
fix(sidenav): custom properties for icon
jenndiaz May 31, 2023
81e1289
fix(sidenav): correct gap usage
jenndiaz May 31, 2023
7b1ef61
fix(sidenav): dont't use pass through properties for icon
jenndiaz Jun 1, 2023
554cdbf
chore(sidenav): add span to doc site side nav
jenndiaz Jun 1, 2023
372d108
feat(sidenav): add icon styling
jenndiaz Jun 1, 2023
e1ec3cf
chore(sidenav): whcm
jenndiaz Jun 6, 2023
c0d179f
chore(sidenav): use new header tokens
jenndiaz Jun 6, 2023
0990659
chore(sidenav): mods auto updates
jenndiaz Jun 6, 2023
de15d49
fix(sidenav): whcm icon hover
jenndiaz Jun 6, 2023
3faf626
fix(sidenav): addresses nesting icons in storybook
jenndiaz Jun 6, 2023
10db1a1
feat(sidenav): use new tokens for heading layout
jenndiaz Jun 7, 2023
56bd932
fix(sidenav): spectrum link
jenndiaz Jun 7, 2023
0ca9c16
fix(sidenav): address design feedback
jenndiaz Jun 9, 2023
1256f68
fix(sidenav): whcm
jenndiaz Jun 9, 2023
fb44412
feat(sidenav): adds in icon variant to storybook
jenndiaz Jun 12, 2023
49d3b5c
chore(sidenav): remove stylelint disables
jenndiaz Jun 13, 2023
0967b68
chore(sidenav): address PR feedback
jenndiaz Jun 13, 2023
a9938f8
chore(sidebav): address PR feedback part 2
jenndiaz Jun 13, 2023
c255e53
feat(sidenav): hard code line height
jenndiaz Jun 27, 2023
5176f7c
fix(sidenav): hover on dark
jenndiaz Jun 30, 2023
98217a6
chore(sidenav): manual version increase for beta release
pfulton Jul 10, 2023
b2819cd
chore(sidenav): new value for text bottom margin
jenndiaz Jul 13, 2023
f860e94
chore(sidenav): remove custom tokens
jenndiaz Jul 14, 2023
dae107d
Revert "chore(sidenav): remove custom tokens"
jenndiaz Jul 14, 2023
56790f4
chore(sidenav): tokens version
jenndiaz Jul 17, 2023
8a90fe1
feat(sidenav): width set to 100%
jenndiaz Jul 20, 2023
b023fa4
chore(sidenav): manual version increase for beta release
pfulton Jul 20, 2023
974726f
fix(sidenav): line height properties
jenndiaz Jul 21, 2023
d4a7de1
fix(sidenav): adds padding for focus ring
jenndiaz Jul 21, 2023
344515b
chore(sidenav): add comment
jenndiaz Jul 21, 2023
3cecb2e
chore(sidenav): remove added padding
jenndiaz Jul 26, 2023
3284344
chore(sidenav): manual version increase for beta release
pfulton Jul 27, 2023
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
4 changes: 2 additions & 2 deletions components/icon/icons.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ governing permissions and limitations under the License.
.spectrum-UIIcon {
display: inline-block;

/* Inherit the text color */
color: inherit;
/* Use custom pass through or inherit the text color */
color: var(--mod-icon-color, inherit);

/* Fill should match the current text color */
fill: currentColor;
Expand Down
3 changes: 3 additions & 0 deletions components/icon/metadata/mods.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
| Modifiable Custom Properties |
| ---------------------------- |
| `--mod-icon-color` |
2 changes: 1 addition & 1 deletion components/sidenav/gulpfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
module.exports = require("@spectrum-css/component-builder");
module.exports = require('@spectrum-css/component-builder-simple');
292 changes: 227 additions & 65 deletions components/sidenav/index.css
View file
Open in desktop

Large diffs are not rendered by default.

51 changes: 51 additions & 0 deletions components/sidenav/metadata/mods.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
| Modifiable Custom Properties |
| ------------------------------------------------------- |
| `--mod-sidenav-background-default` |
| `--mod-sidenav-background-disabled` |
| `--mod-sidenav-background-hover` |
| `--mod-sidenav-background-hover-selected` |
| `--mod-sidenav-background-key-focus` |
| `--mod-sidenav-background-key-focus-selected` |
| `--mod-sidenav-border-radius` |
| `--mod-sidenav-bottom-to-label` |
| `--mod-sidenav-content-color-default` |
| `--mod-sidenav-content-color-default-selected` |
| `--mod-sidenav-content-color-down` |
| `--mod-sidenav-content-color-down-selected` |
| `--mod-sidenav-content-color-hover` |
| `--mod-sidenav-content-color-hover-selected` |
| `--mod-sidenav-content-color-key-focus` |
| `--mod-sidenav-content-color-key-focus-selected` |
| `--mod-sidenav-content-disabled-color` |
| `--mod-sidenav-focus-ring-color` |
| `--mod-sidenav-focus-ring-gap` |
| `--mod-sidenav-focus-ring-size` |
| `--mod-sidenav-gap` |
| `--mod-sidenav-header-color` |
| `--mod-sidenav-header-font-size` |
| `--mod-sidenav-header-font-style` |
| `--mod-sidenav-header-font-weight` |
| `--mod-sidenav-header-line-height` |
| `--mod-sidenav-inline-padding` |
| `--mod-sidenav-item-background-default-selected` |
| `--mod-sidenav-item-background-down` |
| `--mod-sidenav-item-background-down-selected` |
| `--mod-sidenav-max-width` |
| `--mod-sidenav-min-height` |
| `--mod-sidenav-min-width` |
| `--mod-sidenav-start-to-content-second-level` |
| `--mod-sidenav-start-to-content-third-level` |
| `--mod-sidenav-start-to-content-with-icon-second-level` |
| `--mod-sidenav-start-to-content-with-icon-third-level` |
| `--mod-sidenav-text-font-family` |
| `--mod-sidenav-text-font-size` |
| `--mod-sidenav-text-font-style` |
| `--mod-sidenav-text-font-weight` |
| `--mod-sidenav-text-line-height` |
| `--mod-sidenav-top-level-font-family` |
| `--mod-sidenav-top-level-font-size` |
| `--mod-sidenav-top-level-font-style` |
| `--mod-sidenav-top-level-font-weight` |
| `--mod-sidenav-top-level-line-height` |
| `--mod-sidenav-top-to-label` |
| `--mod-sidenav-width` |
193 changes: 139 additions & 54 deletions components/sidenav/metadata/sidenav.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,135 +1,220 @@
name: Side navigation
jenndiaz marked this conversation as resolved.
Show resolved Hide resolved
status: Verified
SpectrumSiteSlug: https://spectrum.adobe.com/page/side-navigation/
description: |
Side navigation lets users navigate the entire content of a product or a section. Make sure to use the appropriate variant for the context and user needs. Don’t mix behavior, styles, or variations together in a single navigation menu.
sections:
- name: Migration Guide
description: |
Core token migration work and design updates added a span tag wrapping the link text.

examples:
- id: sidenav
name: Standard
description: When navigation is simple use the standard or single level navigation.
markup: |
<nav>
<ul class="spectrum-SideNav">
<li class="spectrum-SideNav-item is-selected">
<a href="#" class="spectrum-SideNav-itemLink" aria-current="page">Section Title 1</a>
<!-- aria-current denotes current "page" or "location" -->
<a href="#" class="spectrum-SideNav-itemLink" aria-current="page">
<span class="spectrum-SideNav-link-text">Section Title 1</span>
</a>
</li>
<li class="spectrum-SideNav-item is-disabled">
<a class="spectrum-SideNav-itemLink">Section Title 2</a>
</li>
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">Section Title 3</a>
<a class="spectrum-SideNav-itemLink">
<span class="spectrum-SideNav-link-text">Section Title 2</span>
</a>
</li>
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">Section Title 4</a>
<a href="#" class="spectrum-SideNav-itemLink">
<span class="spectrum-SideNav-link-text">Section Title 3</span>
</a>
</li>
</ul>
</nav>
- id: sidenav
name: Multilevel
description: Use a multi-level side navigation when there are multiple layers of hierarchical navigation.
markup: |
<nav>
<ul class="spectrum-SideNav spectrum-SideNav--multiLevel">
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">Section Title 1</a>
<a href="#" class="spectrum-SideNav-itemLink">
<span class="spectrum-SideNav-link-text"> Section Title 1 for a Multilevel Side Nav</span>
</a>
</li>
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">Section Title 2</a>
<a href="#" class="spectrum-SideNav-itemLink">
<span class="spectrum-SideNav-link-text"> Section Title 2</span>
</a>
<ul class="spectrum-SideNav">
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">Section Title 1</a>
<a href="#" class="spectrum-SideNav-itemLink">
<span class="spectrum-SideNav-link-text"> Section Title 1</span>
</a>
</li>
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">Section Title 2</a>
<a href="#" class="spectrum-SideNav-itemLink">
<span class="spectrum-SideNav-link-text"> Section Title 2</span>
</a>
<ul class="spectrum-SideNav">
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">Section Title 1</a>
<a href="#" class="spectrum-SideNav-itemLink">
<span class="spectrum-SideNav-link-text"> Section Title 1</span>
</a>
</li>
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">Section Title 2</a>
<a href="#" class="spectrum-SideNav-itemLink">
<span class="spectrum-SideNav-link-text"> Section Title 2</span>
</a>
</li>
</ul>
</li>
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">Section Title 3</a>
<a href="#" class="spectrum-SideNav-itemLink">
<span class="spectrum-SideNav-link-text"> Section Title 3</span>
</a>
</li>
</ul>
</li>
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">Section Title 4</a>
</li>
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">Section Title 5</a>
</li>
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">Section Title 6</a>
</li>
</ul>
</nav>
- id: sidenav
name: Icon
markup: |
<nav>
<ul class="spectrum-SideNav">
<li class="spectrum-SideNav-item is-selected">
<a href="#" class="spectrum-SideNav-itemLink" aria-current="page">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-SideNav-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Star" />
</svg>
Section Title 1
<a href="#" class="spectrum-SideNav-itemLink">
<span class="spectrum-SideNav-link-text"> Section Title 4</span>
</a>
</li>
</li>
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-SideNav-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Star" />
</svg>
Section Title 2
<span class="spectrum-SideNav-link-text"> Section Title 5</span>
</a>
</li>
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-SideNav-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Star" />
</svg>
Section Title 3
<span class="spectrum-SideNav-link-text"> Section Title 6</span>
</a>
</li>
</ul>
</nav>

- id: sidenav
name: Heading
description: When navigation is simple but categorical, use the single level side navigation with headings.
markup: |
<nav>
<ul class="spectrum-SideNav">
<li class="spectrum-SideNav-item is-selected">
<!-- aria-current denotes current "page" or "location" -->
<a href="#" class="spectrum-SideNav-itemLink" aria-current="page">Section 1</a>
<a href="#" class="spectrum-SideNav-itemLink" aria-current="page">
<span class="spectrum-SideNav-link-text"> Section 1</span>
</a>
</li>
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">Section 2</a>
<a href="#" class="spectrum-SideNav-itemLink">
<span class="spectrum-SideNav-link-text"> Section 2</span>
</a>
</li>
<li class="spectrum-SideNav-item">
<h2 class="spectrum-SideNav-heading" id="nav-heading-category-1">Category 1</h2>
<ul class="spectrum-SideNav" aria-labelledby="nav-heading-category-1">
<h2 class="spectrum-SideNav-heading" id="nav-heading-1">Heading 1</h2>
<ul class="spectrum-SideNav" aria-labelledby="nav-heading-1">
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">Section 3</a>
<a href="#" class="spectrum-SideNav-itemLink">
<span class="spectrum-SideNav-link-text"> Section 3</span>
</a>
</li>
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">Section 4</a>
<a href="#" class="spectrum-SideNav-itemLink">
<span class="spectrum-SideNav-link-text"> Section 4</span>
</a>
</li>
</ul>
</li>
<li class="spectrum-SideNav-item">
<h2 class="spectrum-SideNav-heading" id="nav-heading-category-2">Category 2</h2>
<ul class="spectrum-SideNav" aria-labelledby="nav-heading-category-2">
<h2 class="spectrum-SideNav-heading" id="nav-heading-2">Heading 2</h2>
<ul class="spectrum-SideNav" aria-labelledby="nav-heading-2">
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">Section 5</a>
<a href="#" class="spectrum-SideNav-itemLink">
<span class="spectrum-SideNav-link-text"> Section 5</span>
</a>
</li>
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">Section 6</a>
<a href="#" class="spectrum-SideNav-itemLink">
<span class="spectrum-SideNav-link-text"> Section 6</span>
</a>
</li>
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">Section 7</a>
<a href="#" class="spectrum-SideNav-itemLink">
<span class="spectrum-SideNav-link-text"> Section 7</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
- id: sidenav
name: Icon
description: Icons can be displayed in first-level items of any type of side navigation (single level or multi-level).
markup: |
<nav>
<ul class="spectrum-SideNav spectrum-SideNav--multiLevel spectrum-SideNav--hasIcon">
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Image" />
</svg>
<span class="spectrum-SideNav-link-text"> Section Title 2</span>
</a>
</li>
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Folder" />
</svg>
<span class="spectrum-SideNav-link-text"> Section Title 2</span>
</a>
<ul class="spectrum-SideNav">
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">
<span class="spectrum-SideNav-link-text"> Section Title 1</span>
</a>
</li>
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">
<span class="spectrum-SideNav-link-text"> Section Title 2</span>
</a>
<ul class="spectrum-SideNav">
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">
<span class="spectrum-SideNav-link-text"> Section Title 1</span>
</a>
</li>
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">
<span class="spectrum-SideNav-link-text"> Section Title 2</span>
</a>
</li>
</ul>
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">
<span class="spectrum-SideNav-link-text"> Section Title 3</span>
</a>
</li>
</ul>
</li>
<li class="spectrum-SideNav-item">
<a href="#" class="spectrum-SideNav-itemLink">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Star" />
</svg>
<span class="spectrum-SideNav-link-text"> Section Title 4</span>
</a>
</li>
<li class="spectrum-SideNav-item is-disabled">
<a class="spectrum-SideNav-itemLink">
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-Document" />
</svg>
<span class="spectrum-SideNav-link-text"> Section Title 5</span>
</a>
</li>
</ul>
</nav>
8 changes: 4 additions & 4 deletions components/sidenav/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/sidenav",
"version": "3.0.51",
"version": "4.0.0-beta.2",
"description": "The Spectrum CSS sidenav component",
"license": "Apache-2.0",
"author": "Adobe",
Expand All @@ -18,12 +18,12 @@
"build": "gulp"
},
"peerDependencies": {
"@spectrum-css/vars": ">=9"
"@spectrum-css/tokens": ">=11"
},
"devDependencies": {
"@spectrum-css/component-builder": "^4.0.12",
"@spectrum-css/component-builder-simple": "^2.0.15",
"@spectrum-css/icon": "^3.0.50",
"@spectrum-css/vars": "^9.0.8",
"@spectrum-css/tokens": "^11.0.1",
"gulp": "^4.0.0"
},
"publishConfig": {
Expand Down
Loading