Skip to content

Alert - Web docs for Generic content blocks (HDS-6287) #3942

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
dchyun merged 2 commits into from
Jul 1, 2026
Merged

Alert - Web docs for Generic content blocks (HDS-6287) #3942

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6559d99
HDS-6287 Update Alert web docs for Generic content blocks
KristinLBradley Jun 23, 2026
028de0e
HDS-6287 Un-delete API docs for Generic block and set it to deprecated
KristinLBradley Jun 30, 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
11 changes: 8 additions & 3 deletions website/docs/components/alert/partials/code/code-snippets/alert-generic.classic.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
<Hds::Alert @type="inline" as |A|>
<A.Title>Title here</A.Title>
<A.Description>Description here</A.Description>
<A.Generic>
[your content here]
</A.Generic>
<A.GenericContent>
[your custom content here]
</A.GenericContent>
<A.Button @text="Your action" @color="secondary" {{on "click" this.yourOnClickFunction}} />
<A.LinkStandalone @color="secondary" @icon="arrow-right" @iconPosition="trailing" @text="Another action" @href="#" />
<A.GenericFooter>
[your custom footer here]
</A.GenericFooter>
</Hds::Alert>
9 changes: 9 additions & 0 deletions website/docs/components/alert/partials/code/code-snippets/alert-generic.classic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class LocalComponent extends Component {
@action
yourOnClickFunction() {
console.log('Clicked the button in the "alert"!');
}
}
43 changes: 31 additions & 12 deletions website/docs/components/alert/partials/code/code-snippets/alert-generic.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,34 @@
import type { TemplateOnlyComponent } from '@ember/component/template-only';
import Component from '@glimmer/component';
import { on } from '@ember/modifier';

import { HdsAlert } from '@hashicorp/design-system-components/components';

const LocalComponent: TemplateOnlyComponent = <template>
<HdsAlert @type="inline" as |A|>
<A.Title>Title here</A.Title>
<A.Description>Description here</A.Description>
<A.Generic>
[your content here]
</A.Generic>
</HdsAlert>
</template>;

export default LocalComponent;
export default class LocalComponent extends Component {
yourOnClickFunction = () => {
console.log('Clicked the button in the "alert"!');
};
<template>
<HdsAlert @type="inline" as |A|>
<A.Title>Title here</A.Title>
<A.Description>Description here</A.Description>
<A.GenericContent>
[your custom content here]
</A.GenericContent>
<A.Button
@text="Your action"
@color="secondary"
{{on "click" this.yourOnClickFunction}}
/>
<A.LinkStandalone
@color="secondary"
@icon="arrow-right"
@iconPosition="trailing"
@text="Another action"
@href="#"
/>
<A.GenericFooter>
[your custom footer here]
</A.GenericFooter>
</HdsAlert>
</template>
}
23 changes: 20 additions & 3 deletions website/docs/components/alert/partials/code/component-api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,13 @@
<C.Property @name="<[A].LinkStandalone>" @type="yielded component">
`Link::Standalone` yielded as contextual component (see below).
</C.Property>
<C.Property @name="<[A].Generic>" @type="yielded component">
Comment thread
KristinLBradley marked this conversation as resolved.
<C.Property @name="<[A].Generic>" @type="yielded component" @deprecated={{true}}>
A generic container yielded as contextual component (see below).
</C.Property>
<C.Property @name="<[A].GenericContent>" @type="yielded component">
A generic container yielded as contextual component (see below).
</C.Property>
<C.Property @name="<[A].GenericFooter>" @type="yielded component">
A generic container yielded as contextual component (see below).
</C.Property>
<C.Property @name="type" @required={{true}} @type="enum" @values={{array "page" "inline" "compact"}}>
Expand Down Expand Up @@ -88,9 +94,20 @@ The `Link::Standalone` component, yielded as contextual component inside the `"a
</C.Property>
</Doc::ComponentApi>

#### [A].Generic
#### [A].GenericContent

A generic container, yielded as contextual component which renders below the Title and Description and above any Actions.

<Doc::ComponentApi as |C|>
<C.Property @name="yield">
Elements passed as children are yielded after all the other elements.
<br/>The content is unstyled by default, so consumers will need to take care of layout and style of the content.
</C.Property>
</Doc::ComponentApi>

#### [A].GenericFooter

A generic container, yielded as contextual component.
A generic container, yielded as contextual component which at the bottom of Alert content and below any Actions.

<Doc::ComponentApi as |C|>
<C.Property @name="yield">
Expand Down
2 changes: 1 addition & 1 deletion website/docs/components/alert/partials/code/how-to-use.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,6 @@ You can pass more than one `D.Description` contextual component to have multiple

### Generic content

Use the `Generic` contextual component to insert custom content. Generic content will appear after the title, description, and actions. Application teams will need to implement spacing, layout, and styling for generic content.
Use the `GenericContent` and `GenericFooter` contextual components to insert custom content. Generic Content will appear after the Title and Description and above the Actions while the Generic Footer will appear at the bottom of the Alert content below the actions. Application teams will need to implement spacing, layout, and styling for generic content.

[[code-snippets/alert-generic]]
Loading