Skip to content

SideNav - Deprecate SideNav::Header::IconButton (HDS-3770 ) #2354

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

Merged
merged 17 commits into from
Sep 3, 2024
Merged

SideNav - Deprecate SideNav::Header::IconButton (HDS-3770 ) #2354

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
25cac76
HDS-3770 Update SideNav Showcase to replace deprecated IconButton & a…
KristinLBradley Aug 21, 2024
b842c96
HDS-3770 Fix issue with width of Showcase examples
KristinLBradley Aug 26, 2024
ec2b2c2
HDS-3770 Fix layout of nested content examples
KristinLBradley Aug 27, 2024
d740854
HDS-3770 Deprecate actual IconButton component
KristinLBradley Aug 27, 2024
cdb11cd
HDS-3770 Tweaks to text, version numbers, and comment
KristinLBradley Aug 27, 2024
b6e7ae4
HDS-3770 Update version number and url in deprecation, add changeset
KristinLBradley Aug 27, 2024
60d53d7
HDS-377 Improve deprecation notice
KristinLBradley Aug 27, 2024
bb27a1a
Apply suggestions from code review
KristinLBradley Aug 29, 2024
8fd4318
HDS-3770 Add link to :actions code example in Web docs deprecation no…
KristinLBradley Aug 30, 2024
0e8dca4
HDS-3770 Refactor nested Button state examples to reduce code repetition
KristinLBradley Aug 30, 2024
28154d7
HDS-3770 Refactor styles for Showcase button example wrappers
KristinLBradley Aug 30, 2024
f6fb8db
HDS-3770 Rename classname to reference sidenav
KristinLBradley Aug 30, 2024
8295889
HDS-3770 Add version history file
KristinLBradley Sep 3, 2024
488679c
Update new-teachers-pay.md
KristinLBradley Sep 3, 2024
1441b72
Update website/docs/components/side-nav/partials/version-history/4.10…
KristinLBradley Sep 3, 2024
ba7d5c2
Update showcase/app/styles/showcase-pages/side-nav.scss
KristinLBradley Sep 3, 2024
54a75c7
Merge branch 'main' into hds-3770-deprecate-sidenav-iconbutton
KristinLBradley Sep 3, 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
5 changes: 5 additions & 0 deletions .changeset/new-teachers-pay.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@hashicorp/design-system-components": minor
---

`Hds::SideNav::Header::IconButton` - Deprecate the component. Use the `Hds::Button` component with `isIconOnly` set to `true` as a replacement.
4 changes: 3 additions & 1 deletion packages/components/src/components/hds/side-nav/header/icon-button.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: MPL-2.0
}}

{{!
Copy link
Contributor

@zamoore zamoore Aug 30, 2024

Choose a reason for hiding this comment

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

I like the idea of adding this to the template 👍

Copy link
Contributor Author

@KristinLBradley KristinLBradley Aug 30, 2024

Choose a reason for hiding this comment

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

Thanks. I copied from someone else :)

THIS SUBCOMPONENT IS NOW DEPRECATED
}}
<Hds::Interactive
class="hds-side-nav__icon-button"
@current-when={{@current-when}}
Expand Down
28 changes: 22 additions & 6 deletions packages/components/src/components/hds/side-nav/header/icon-button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/

import Component from '@glimmer/component';
import { assert } from '@ember/debug';
import { assert, deprecate } from '@ember/debug';

import type { HdsIconSignature } from '../../icon';
import type { HdsInteractiveSignature } from '../../interactive/';
Expand All @@ -18,11 +18,27 @@ interface HdsSideNavHeaderIconButtonSignature {
}

export default class HdsSideNavHeaderIconButtonComponent extends Component<HdsSideNavHeaderIconButtonSignature> {
/**
* @param ariaLabel
* @type {string}
* @description The value of `aria-label`
*/
constructor(
owner: unknown,
args: HdsSideNavHeaderIconButtonSignature['Args']
) {
super(owner, args);

deprecate(
'The `Hds::SideNav::Header::IconButton` sub-component is now deprecated and will be removed in the next major version of `@hashicorp/design-system-components`. Use `Hds::Button` with the `isIconOnly` variant instead.',
false,
{
id: 'hds.components.sidenav.header.iconbutton',
until: '5.0.0',
url: 'https://helios.hashicorp.design/components/side-nav?tab=version%20history#4100',
Copy link
Collaborator

@Dhaulagiri Dhaulagiri Aug 30, 2024

Choose a reason for hiding this comment

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

it looks like we're missing the actual content that should appear on the version tab outlining the changes here

Copy link
Contributor Author

@KristinLBradley KristinLBradley Aug 30, 2024

Choose a reason for hiding this comment

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

Could you explain a bit more? Do I manually add an .md file in "website/docs/components/side-nav/partials/version-history/" like the "4.8.0.md" in there now?

Do I copy the changeset text into it (pasted below)?

"Deprecated the component. Use the Hds::Button component with isIconOnly set to true as a replacement."

Copy link
Collaborator

@Dhaulagiri Dhaulagiri Sep 3, 2024

Choose a reason for hiding this comment

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

That sounds roughly correct to me. You should be able to mimic what Zack did in https://github.com/hashicorp/design-system/pull/2347/files if you're looking for a reference.

Copy link
Contributor Author

@KristinLBradley KristinLBradley Sep 3, 2024

Choose a reason for hiding this comment

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

Does this look correct? https://hds-website-git-hds-3770-deprecate-sidenav-iconbutton-hashicorp.vercel.app/components/side-nav?tab=version%20history

for: '@hashicorp/design-system-components',
since: {
enabled: '4.10.0',
},
}
);
}

get ariaLabel(): string {
const { ariaLabel } = this.args;

Expand Down
17 changes: 16 additions & 1 deletion showcase/app/routes/components/side-nav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,19 @@

import Route from '@ember/routing/route';

export default class ComponentsSideNavRoute extends Route {}
import { COLORS as TOGGLE_BUTTON_COLORS } from '@hashicorp/design-system-components/components/hds/dropdown/toggle/button';
import { COLORS as ITEM_INTERACTIVE_COLORS } from '@hashicorp/design-system-components/components/hds/dropdown/list-item/interactive';

export default class ComponentsSideNavRoute extends Route {
model() {
// these are used only for presentation purpose in the showcase
const TOGGLE_STATES = ['default', 'hover', 'active', 'focus', 'disabled'];
const ITEM_STATES = ['default', 'hover', 'active', 'focus'];
return {
TOGGLE_BUTTON_COLORS,
TOGGLE_STATES,
ITEM_INTERACTIVE_COLORS,
ITEM_STATES,
};
}
}
24 changes: 24 additions & 0 deletions showcase/app/styles/showcase-pages/side-nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,13 @@
body.components-side-nav {
$shw-component-side-nav-background: #0c0c0e;

// Add to examples to constrain width
.shw-component-set-max-content-width {
width: max-content;
height: auto;
min-height: 0;
}

// used to simulate a "root" container for the sidenav
.shw-component-sim-side-nav-root-container {
height: 600px;
Expand Down Expand Up @@ -79,4 +86,21 @@ body.components-side-nav {
transform: none !important;
}
}

.shw-component-dropdown-states-matrix {
.shw-grid__item {
// we hide all the labels (except for the first "row")
&:nth-child(n + 7) {
.shw-label {
visibility: hidden;
}
}
// we show the labels in the first "column"
&:nth-child(6n + 1) {
.shw-label {
visibility: visible;
}
}
}
}
}
212 changes: 208 additions & 4 deletions showcase/app/templates/components/side-nav.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@
<Hds::SideNav::Header::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp" @href="#" />
</:logo>
<:actions>
<Hds::SideNav::Header::IconButton @icon="search" @ariaLabel="Search" />
<Hds::Button @icon="search" @isIconOnly={{true}} @text="Search" />
<Hds::Dropdown @enableCollisionDetection={{true}} as |dd|>
<dd.ToggleIcon @icon="help" @text="help menu" />
<dd.Title @text="Help & Support" />
Expand Down Expand Up @@ -364,7 +364,7 @@
<Hds::SideNav::Header::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp" @href="#" />
</:logo>
<:actions>
<Hds::SideNav::Header::IconButton @icon="terminal-screen" @ariaLabel="Terminal" />
<Hds::Button @icon="terminal-screen" @isIconOnly={{true}} @text="Terminal" />
<Hds::Dropdown @enableCollisionDetection={{true}} as |dd|>
<dd.ToggleButton @text="Help" />
<dd.Title @text="Help & Support" />
Expand Down Expand Up @@ -448,7 +448,8 @@
<Shw::Divider @level={{2}} />

<section data-test-percy>
<Shw::Text::H3>SideNav::Header::IconButton</Shw::Text::H3>
{{! TODO: Once IconButton is fully deprecated, remove from examples }}
<Shw::Text::H3>SideNav::Header::IconButton (deprecated)</Shw::Text::H3>

<Shw::Text::H4>States</Shw::Text::H4>
<Shw::Flex as |SF|>
Expand Down Expand Up @@ -876,6 +877,209 @@

<Shw::Divider />

<section data-test-percy>
<Shw::Text::H2>Child interactive components</Shw::Text::H2>

<Shw::Text::H3>Buttons within SideNav</Shw::Text::H3>

<Shw::Text::H4>States</Shw::Text::H4>

<Shw::Text::Body>Secondary</Shw::Text::Body>
<Shw::Flex as |SF|>
{{#let (array "default" "hover" "active" "focus" "disabled") as |states|}}
{{#each states as |state|}}
<SF.Item @label={{state}}>
<div class="hds-side-nav shw-component-set-max-content-width">
<Hds::Button
@color="secondary"
@icon="search"
@isIconOnly={{true}}
@text="Search"
mock-state-value={{state}}
/>
</div>
</SF.Item>
{{/each}}
{{/let}}
</Shw::Flex>

<Shw::Text::Body>Primary</Shw::Text::Body>
<Shw::Flex as |SF|>
{{#let (array "default" "hover" "active" "focus" "disabled") as |states|}}
{{#each states as |state|}}
<SF.Item @label={{state}}>

<div class="hds-side-nav shw-component-set-max-content-width">
<Hds::Button @icon="search" @isIconOnly={{true}} @text="Search" mock-state-value={{state}} />
</div>
</SF.Item>
{{/each}}
{{/let}}
</Shw::Flex>

<Shw::Divider @level="2" />

<Shw::Text::H3>Dropdowns within SideNav</Shw::Text::H3>

<Shw::Text::H4>States</Shw::Text::H4>

<Shw::Grid @columns="6" class="shw-component-dropdown-states-matrix" as |SG|>
{{! Notice: we use a non-standard way to showcase the states to reduce the (visual) complexity of this matrix }}

{{#each @model.TOGGLE_STATES as |state|}}
<SG.Item>
<span class="shw-label">{{capitalize state}}</span>
</SG.Item>
{{/each}}
<SG.Item>
<span class="shw-label">Open</span>
</SG.Item>

{{#each @model.TOGGLE_BUTTON_COLORS as |color|}}
{{#each @model.TOGGLE_STATES as |state|}}
<SG.Item @label="{{capitalize color}}">
<div class="hds-side-nav shw-component-set-max-content-width">
{{#if (eq state "disabled")}}
<Hds::Dropdown::Toggle::Button @text="Lorem ipsum" @color={{color}} disabled />
{{else}}
<Hds::Dropdown::Toggle::Button @text="Lorem ipsum" @color={{color}} mock-state-value={{state}} />
{{/if}}
</div>
</SG.Item>
{{/each}}
<SG.Item @label="{{capitalize color}}">
<Hds::Dropdown::Toggle::Button @text="Lorem ipsum" @isOpen={{true}} @color={{color}} />
</SG.Item>
{{#each @model.TOGGLE_STATES as |state|}}
<SG.Item @label="With icon">
<div class="hds-side-nav shw-component-set-max-content-width">
{{#if (eq state "disabled")}}
<Hds::Dropdown::Toggle::Button @icon="hexagon" @text="Lorem" @color={{color}} disabled />
{{else}}
<Hds::Dropdown::Toggle::Button
@icon="hexagon"
@text="Lorem"
@color={{color}}
mock-state-value={{state}}
/>
{{/if}}
</div>
</SG.Item>
{{/each}}
<SG.Item @label="With icon">
<div class="hds-side-nav shw-component-set-max-content-width">
<Hds::Dropdown::Toggle::Button @icon="hexagon" @text="Lorem" @isOpen={{true}} @color={{color}} />
</div>
</SG.Item>
{{#each @model.TOGGLE_STATES as |state|}}
<SG.Item @label="With count">
<div class="hds-side-nav shw-component-set-max-content-width">
{{#if (eq state "disabled")}}
<Hds::Dropdown::Toggle::Button @count="12" @text="Lorem" @color={{color}} disabled />
{{else}}
<Hds::Dropdown::Toggle::Button @count="12" @text="Lorem" @color={{color}} mock-state-value={{state}} />
{{/if}}
</div>
</SG.Item>
{{/each}}
<SG.Item @label="With count">
<div class="hds-side-nav shw-component-set-max-content-width">
<Hds::Dropdown::Toggle::Button @count="12" @text="Lorem" @isOpen={{true}} @color={{color}} />
</div>
</SG.Item>
{{#each @model.TOGGLE_STATES as |state|}}
<SG.Item @label="With badge">
<div class="hds-side-nav shw-component-set-max-content-width">
{{#if (eq state "disabled")}}
<Hds::Dropdown::Toggle::Button
@badge="Sit"
@badgeIcon="hexagon"
@text="Lorem"
@color={{color}}
disabled
/>
{{else}}
<Hds::Dropdown::Toggle::Button
@badge="Sit"
@badgeIcon="hexagon"
@text="Lorem"
@color={{color}}
mock-state-value={{state}}
/>
{{/if}}
</div>
</SG.Item>
{{/each}}
<SG.Item @label="With badge">
<div class="hds-side-nav shw-component-set-max-content-width">
<Hds::Dropdown::Toggle::Button
@badge="Sit"
@badgeIcon="hexagon"
@text="Lorem"
@isOpen={{true}}
@color={{color}}
/>
</div>
</SG.Item>
{{/each}}

{{#each @model.TOGGLE_STATES as |state|}}
<SG.Item @label="Icon">
<div class="hds-side-nav shw-component-set-max-content-width">
<Hds::Dropdown::Toggle::Icon
@icon="more-horizontal"
@text="overflow menu"
@hasChevron={{false}}
mock-state-value={{state}}
/>
</div>
</SG.Item>
{{/each}}
<SG.Item @label="Icon">
<div class="hds-side-nav shw-component-set-max-content-width">
<Hds::Dropdown::Toggle::Icon
@icon="more-horizontal"
@text="overflow menu"
@hasChevron={{false}}
@isOpen={{true}}
/>
</div>
</SG.Item>

{{#each @model.TOGGLE_STATES as |state|}}
<SG.Item @label="Icon+chevron">
<div class="hds-side-nav shw-component-set-max-content-width">
<Hds::Dropdown::Toggle::Icon @icon="user" @text={{state}} mock-state-value={{state}} />
</div>
</SG.Item>
{{/each}}
<SG.Item @label="Icon+chevron">
<div class="hds-side-nav shw-component-set-max-content-width">
<Hds::Dropdown::Toggle::Icon @icon="user" @text="open" @isOpen={{true}} />
</div>
</SG.Item>

{{#each @model.TOGGLE_STATES as |state|}}
<SG.Item @label="Avatar+chevron">
<div class="hds-side-nav shw-component-set-max-content-width">
<Hds::Dropdown::Toggle::Icon
@text={{state}}
@imageSrc="/assets/images/avatar.png"
mock-state-value={{state}}
/>
</div>
</SG.Item>
{{/each}}
<SG.Item @label="Avatar+chevron">
<div class="hds-side-nav shw-component-set-max-content-width">
<Hds::Dropdown::Toggle::Icon @text="open" @isOpen={{true}} @imageSrc="/assets/images/avatar.png" />
</div>
</SG.Item>
</Shw::Grid>
</section>

<Shw::Divider />

<section data-test-percy>

<Shw::Text::H2>Other elements (not componentized)</Shw::Text::H2>
Expand All @@ -884,7 +1088,7 @@
<Shw::Flex as |SF|>
<SF.Item @label="Skip Link">
<div class="shw-component-sim-other-elements">
<div class="hds-side-nav">
<div class="hds-side-nav shw-component-set-max-content-width">
<a href="#" class="ember-a11y-refocus-skip-link">Skip to main content</a>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion showcase/app/templates/layouts/app-frame/frameless/demo-full-app-frame-with-side-nav.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<Hds::SideNav::Header::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp" @href="#" />
</:logo>
<:actions>
<Hds::SideNav::Header::IconButton @icon="search" @ariaLabel="Search" />
<Hds::Button @icon="search" @isIconOnly={{true}} @text="Search" />
<Hds::Dropdown @enableCollisionDetection={{true}} as |dd|>
<dd.ToggleIcon @icon="help" @text="help menu" />
<dd.Title @text="Help & Support" />
Expand Down
2 changes: 1 addition & 1 deletion showcase/app/templates/layouts/app-frame/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,7 @@
<Hds::SideNav::Header::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp" @href="#" />
</:logo>
<:actions>
<Hds::SideNav::Header::IconButton @icon="search" @ariaLabel="Search" />
<Hds::Button @icon="search" @isIconOnly={{true}} @text="Search" />
<Hds::Dropdown @listPosition="bottom-left" as |dd|>
<dd.ToggleIcon @icon="help" @text="help menu" />
<dd.Title @text="Help & Support" />
Expand Down
6 changes: 6 additions & 0 deletions website/docs/components/side-nav/partials/code/component-api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,12 @@ It internally uses the [`Hds::Interactive`](/utilities/interactive) utility comp

### SideNav::Header::IconButton

!!! Warning

The `SideNav::Header::IconButton` subcomponent is now deprecated. Use the `Hds::Button` component with the `isIconOnly` variant instead. See the [Icon-only Button documentation](https://helios.hashicorp.design/components/button?tab=code#icon-only-button) for details on usage.

!!!

The `SideNav::Header::IconButton` component.

It internally uses the [`Hds::Interactive`](/utilities/interactive) utility component. For more details about this component API, please refer to [its documentation page](/utilities/interactive?tab=code#component-api).
Expand Down
Loading