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

Actionlist item docs improvements #4050

Merged
merged 1 commit into from
Dec 13, 2023
+67 −58
Merged

Actionlist item docs improvements #4050

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion src/ActionList/ActionList.docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@
"name": "inactiveText",
"type": "string",
"defaultValue": "",
"description": "Text describing why the item is inactive. This may be used when an item's usual functionality is unavailable due to a system error such as a database outage."
"description": "Text describing why the item is inactive. This may be used when an item's usual functionality is unavailable due to a system error such as a database outage. \nIf there is a leading visual, the alert icon will replace the leading visual. \n If there is a trailing visual, it will replace the trailing visual.\n If there is no visual passed, it will be shown in the trailing visual slot to preserve left alignment of item content. \nText will appear in a tooltip triggered by the alert icon in ActionList items, but text will appear below the description or title on ActionMenu items."
},
{
"name": "role",
Expand Down
6 changes: 6 additions & 0 deletions src/ActionList/ActionList.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,7 @@ LinkItemPlayground.args = {
disabled: false,
role: 'listitem',
id: 'item-1',
inactiveText: '',
leadingVisual: null,
trailingVisual: null,
}
Expand All @@ -231,6 +232,11 @@ LinkItemPlayground.argTypes = {
id: {
type: 'string',
},
inactiveText: {
control: {
type: 'text',
},
},
leadingVisual: {
control: {
type: 'select',
Expand Down
60 changes: 60 additions & 0 deletions src/ActionMenu/ActionMenu.examples.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@ import {
XIcon,
CheckIcon,
CopyIcon,
ArchiveIcon,
BookIcon,
CommentIcon,
RocketIcon,
WorkflowIcon,
} from '@primer/octicons-react'

export default {
Expand Down Expand Up @@ -334,3 +339,58 @@ export const OnRightSide = () => (
</ActionMenu.Overlay>
</ActionMenu>
)

export const OnlyInactiveItems = () => (
<ActionMenu>
<ActionMenu.Button inactive>Open menu</ActionMenu.Button>
<ActionMenu.Overlay width="auto">
<ActionList>
<ActionList.Item onSelect={() => alert('Workflows clicked')} inactiveText="Unavailable due to an outage">
Workflows
<ActionList.LeadingVisual>
<WorkflowIcon />
</ActionList.LeadingVisual>
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Archived items clicked')} inactiveText="Unavailable due to an outage">
Archived items
<ActionList.LeadingVisual>
<ArchiveIcon />
</ActionList.LeadingVisual>
</ActionList.Item>
<ActionList.LinkItem href="/" inactiveText="Unavailable due to an outage">
Settings
<ActionList.LeadingVisual>
<GearIcon />
</ActionList.LeadingVisual>
</ActionList.LinkItem>
<ActionList.Item onSelect={() => alert('Make a copy clicked')} inactiveText="Unavailable due to an outage">
Make a copy
<ActionList.LeadingVisual>
<CopyIcon />
</ActionList.LeadingVisual>
</ActionList.Item>
<ActionList.Divider />
<ActionList.Group title="Github projects">
<ActionList.LinkItem href="/" inactiveText="Unavailable due to an outage">
What&apos;s new
<ActionList.LeadingVisual>
<RocketIcon />
</ActionList.LeadingVisual>
</ActionList.LinkItem>
<ActionList.LinkItem href="/" inactiveText="Unavailable due to an outage">
Give feedback
<ActionList.LeadingVisual>
<CommentIcon />
</ActionList.LeadingVisual>
</ActionList.LinkItem>
<ActionList.LinkItem href="/" inactiveText="Unavailable due to an outage">
GitHub Docs
<ActionList.LeadingVisual>
<BookIcon />
</ActionList.LeadingVisual>
</ActionList.LinkItem>
</ActionList.Group>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
)
57 changes: 0 additions & 57 deletions src/ActionMenu/ActionMenu.features.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,60 +177,3 @@ export const InactiveItems = () => (
</ActionMenu.Overlay>
</ActionMenu>
)

// TODO: Uncomment this story when we have inactive buttons
//
// export const OnlyInactiveItems = () => (
// <ActionMenu>
// <ActionMenu.Button>Open menu</ActionMenu.Button>
// <ActionMenu.Overlay width="auto">
// <ActionList>
// <ActionList.Item onSelect={() => alert('Workflows clicked')} inactiveText="Unavailable due to an outage">
// Workflows
// <ActionList.LeadingVisual>
// <WorkflowIcon />
// </ActionList.LeadingVisual>
// </ActionList.Item>
// <ActionList.Item onSelect={() => alert('Archived items clicked')} inactiveText="Unavailable due to an outage">
// Archived items
// <ActionList.LeadingVisual>
// <ArchiveIcon />
// </ActionList.LeadingVisual>
// </ActionList.Item>
// <ActionList.LinkItem href="/" inactiveText="Unavailable due to an outage">
// Settings
// <ActionList.LeadingVisual>
// <GearIcon />
// </ActionList.LeadingVisual>
// </ActionList.LinkItem>
// <ActionList.Item onSelect={() => alert('Make a copy clicked')} inactiveText="Unavailable due to an outage">
// Make a copy
// <ActionList.LeadingVisual>
// <CopyIcon />
// </ActionList.LeadingVisual>
// </ActionList.Item>
// <ActionList.Divider />
// <ActionList.Group title="Github projects">
// <ActionList.LinkItem href="/" inactiveText="Unavailable due to an outage">
// What&apos;s new
// <ActionList.LeadingVisual>
// <RocketIcon />
// </ActionList.LeadingVisual>
// </ActionList.LinkItem>
// <ActionList.LinkItem href="/" inactiveText="Unavailable due to an outage">
// Give feedback
// <ActionList.LeadingVisual>
// <CommentIcon />
// </ActionList.LeadingVisual>
// </ActionList.LinkItem>
// <ActionList.LinkItem href="/" inactiveText="Unavailable due to an outage">
// GitHub Docs
// <ActionList.LeadingVisual>
// <BookIcon />
// </ActionList.LeadingVisual>
// </ActionList.LinkItem>
// </ActionList.Group>
// </ActionList>
// </ActionMenu.Overlay>
// </ActionMenu>
// )
Loading