Skip to content

Commit

Permalink
Merge pull request #11 from fossuok/dev
Browse files Browse the repository at this point in the history 
Dev
  • Loading branch information
@PinsaraPerera
PinsaraPerera authored Dec 6, 2024
2 parents 5d962fb + 8b0c99b commit 5806952
Show file tree
Hide file tree
Showing 4 changed files with 321 additions and 1 deletion.
1 change: 1 addition & 0 deletions pages/_meta.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ const meta = {
index: "Introduction",
about: "About Us",
component: "Component",
colors: "Colors",
}

export default meta;
5 changes: 5 additions & 0 deletions pages/colors/_meta.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const meta = {
"actionBar": "My Colors",
}

export default meta;
315 changes: 315 additions & 0 deletions pages/colors/actionBar.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,315 @@
---
title: BlogCard
description: BlogCard's UI for your blog or news website.
---


## Usage

Use an action bar to render multiple buttons in a row. Buttons can be split into groups by adding a divider. When there is not enough space, buttons that don't fit will be added to an overflow menu.

## Anatomy

```jsx filename="actionBar.jsx" copy
<img
width="960"
alt="A diagram of an action bar with a few buttons, a divider and at the end a button that opens an overflow menu."
src="https://user-images.githubusercontent.com/378023/193506131-be8bead4-d1ab-4c79-8ac1-054e75bac9be.png"
/>
```

## Content

### Buttons

Buttons are the only controls allowed in an action bar. Even though a `segmented control` is technically a group of buttons, it does not belong in an action bar because it's used for selecting an option, not triggering an action.

Buttons that open [dialogs](/components/dialog), [action menus](/components/action-menu) or [select panels](/components/select-panels) are acceptable in an action bar becacuse they perform an action: to open a new context.

```sh copy
<DoDontContainer>
<Do>
<img
src="https://github.com/primer/design/assets/2313998/556243b5-ba71-44cd-a0a2-710a6aaa4bf5"
role="presentation"
width="456"
/>
<Caption>Only use buttons in an action bar.</Caption>
</Do>
<Dont>
<img
src="https://github.com/primer/design/assets/2313998/44a40b05-d970-4a47-877e-fb8ae5ae54b2"
role="presentation"
width="456"
/>
<Caption>Don't use other components in an action bar.</Caption>
</Dont>
</DoDontContainer>
```
Icon buttons are the default, but buttons may also have text labels. All buttons in an action bar should have the same type of content (icon, text label, or text label with icon).
The button that opens the overflow menu will always be an icon button with a ["kebab" icon](/foundations/icons/kebab-horizontal-16).
```
<img
src="https://github.com/primer/design/assets/2313998/d3ef0af6-034a-4c55-a4ea-c2fb239ddccd"
role="presentation"
width="456"
/>
<DoDontContainer>
<Do>
<img
src="https://github.com/primer/design/assets/2313998/2cc69c4c-d81f-49d7-8ac2-df5b9f191d22"
role="presentation"
width="456"
/>
<Caption>Use either icons or text labels, but not both in the same action bar.</Caption>
</Do>
<Dont>
<img
src="https://github.com/primer/design/assets/2313998/4d5726e7-2ef6-4112-8b23-69c4cf129c26"
role="presentation"
width="456"
/>
<Caption>Don't mix types of button labels within the same action bar.</Caption>
</Dont>
</DoDontContainer>

### Dividers

Dividers can be added to visually group related buttons.

<DoDontContainer>
<Do>
<img
src="https://user-images.githubusercontent.com/378023/193506858-6542a6ba-4bac-400d-bba9-8601fbc032ed.png"
role="presentation"
width="456"
/>
<Caption>Use a divider between buttons.</Caption>
</Do>
<Dont>
<img
src="https://user-images.githubusercontent.com/378023/193506894-dc0a65a0-0f81-444a-aa8c-f3b0f74aecb5.png"
role="presentation"
width="456"
/>
<Caption>Don't use a divider at the beginning or end of the action bar.</Caption>
</Dont>
</DoDontContainer>
```
### Overflow menu
When the buttons don't fit in the available horizontal space, they're moved to an overflow menu. An icon button (["kebab" icon](/foundations/icons/kebab-horizontal-16)) is added at the end of the action bar signaling that there are more actions available. Clicking on the overflow button opens a menu with the remaining actions that didn't fit.

Dividers from the action bar are preserved in the overflow menu.

```
<img
src="https://user-images.githubusercontent.com/378023/193507064-4efe3f63-7b30-4656-8304-3dea3e3f1e03.png"
alt=""
width="960"
/>

#### Sorting

Buttons that are moved to the overflow menu because they don't fit in the available width get added to the top of the menu. Meaning that the last button in the action bar will also be the last button when inside the menu.

<img
src="https://user-images.githubusercontent.com/378023/188835345-0cfd3376-1658-496f-a78b-f5977aa2198c.png"
alt=""
width="960"
/>

#### Demo

<CustomVideoPlayer
width="720px"
loop
src="https://user-images.githubusercontent.com/378023/188359460-bc88bac8-9c69-4aea-8ce0-bc427bedc3a3.mov"
poster="https://user-images.githubusercontent.com/378023/188529873-eafbad89-9eeb-4342-905d-15d89d288ffd.png"
/>
<Caption>Overflow button appears when not enough space and resizing the action bar updates the overflow menu.</Caption>
```
## States
### Button states
Buttons in action bars are solely used for triggering actions. Consider using a [segmented control](/components/segmented-control) when a button should have a selected state.
```
<DoDontContainer>
<Do>
<img
src="https://user-images.githubusercontent.com/378023/193506579-a665b941-5b4e-4e44-9439-cfb4e7e93ef3.png"
role="presentation"
width="456"
/>
<Caption>
Buttons in action bars have a hover and pressed state, and a focused state when using a keyboard to navigate.
</Caption>
</Do>
<Dont>
<img
src="https://user-images.githubusercontent.com/378023/193506649-07cb8b8b-3658-477a-b7a2-f00ad9825f26.png"
role="presentation"
width="456"
/>
<Caption>Don't add a selected state or any other information like a notification dot or a counter.</Caption>
</Dont>
</DoDontContainer>
```
### Tooltips
When hovering over a button, a tooltip will appear that describes the action.
```
<DoDontContainer>
<Do>
<img
src="https://user-images.githubusercontent.com/378023/193506950-1702cff8-c751-4bc2-a37a-a837d1e69320.png"
role="presentation"
width="456"
/>
<Caption>Describe what action will be taken when clicking on the button.</Caption>
</Do>
<Dont>
<img
src="https://user-images.githubusercontent.com/378023/193506979-07aa35d2-48f5-4b09-aa3e-c575be0e578e.png"
role="presentation"
width="456"
/>
<Caption>Don't use a tooltip in action bars to convey a current state.</Caption>
</Dont>
</DoDontContainer>
```
## Options
### Size
Action bars can have 3 different sizes:
```
<img
src="https://user-images.githubusercontent.com/378023/193507132-f3ad4632-e257-4301-bd48-0669f4347ddc.png"
role="presentation"
width="960"
/>

- Small (`28px`)
- Medium (`32px`) (default)
- Large (`40px`)
```
### Button variants
Icon buttons should default to the `invisible` (no border/background) variant. Buttons with text labels should default to the `secondary` variant.
You may use the `danger` variant for destructive actions. The `primary` variant should not be used in an action bar because primary page actions are highly unlikely to appear in a collection with other actions.
## Layout
Action bars can be used inline next to other content or also full width taking up the entire space.
```
<Box as="p">
<img
src="https://user-images.githubusercontent.com/378023/193507204-7d2e1e10-8906-49b4-9c80-10d69fce3e92.png"
role="presentation"
width="960"
/>
</Box>
```
### Spacing
Make sure to add extra spacing around the action bar.
```
<DoDontContainer>
<Do>
<img
src="https://user-images.githubusercontent.com/378023/193507240-00801a0a-053b-45e3-9896-9d47150f8a99.png"
role="presentation"
width="456"
/>
<Caption>Extra padding of 8px is added when nesting an action bar in a box component.</Caption>
</Do>
<Dont>
<img
src="https://user-images.githubusercontent.com/378023/193507276-25dbece0-ea90-4050-8333-2a7891dee8ef.png"
role="presentation"
width="456"
/>
<Caption>
Avoid having the action bar touch something else. Even though the action bar buttons have no borders in their
resting state, when hovering/pressing a button it will show a background color.
</Caption>
</Dont>
</DoDontContainer>
```
Icon buttons using the `invisible` variant have no space between them. Button variants with a background or a border require space between them so they're not right on top of eachother.
```
<img
src="https://github.com/primer/design/assets/2313998/6888cee3-5d24-4ec5-b141-8d7175a27d62"
role="presentation"
width="456"
/>
```
## Accessibility
### Role
An action bar has an ARIA role of [`toolbar`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/toolbar_role) by default. The `toolbar` role only has a single tab stop. Focus is moved within the action bar using the left and right arrow keys, the "Home" key, and the "End" key.
### Keyboard navigation for action bars with a role of `toolbar`
| Key | description |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `Tab` | Moves focus into and out of the action bar. Note that there should only be **one tab-stop** and pressing tab again should focus the next focusable element after the action bar. Also the first button is focused if the action bar is receiving focus for the first time after page load. Otherwise, the most recently focused button receives focus. |
| `→` | Right arrow moves focus to the **next** button. If the last button has focus, focus loops back to the first button. |
| `←` | Left arrow moves focus to the **previous** button. If the first button has focus, focus moves to the last button. |
| `Home` | Moves focus to the **first** button. |
| `End` | Moves focus to the **last** button. |
| `Enter` or `Space` | Triggers the button **action**. |
The `toolbar` role should be overridden if you're using an action bar in a context where the behavior of left arrow, right arrow, "Home", and "End" keys conflict with their behavior in a `toolbar`. For example, as list item actions within a list where focus may be moved between items using arrow, "Home", and "End" keys.
In cases where we don't use the `toolbar` role, no role is applied and each buttons has one tab stop (their default keyboard navigation behavior).
### Touch targets
When the user is on a device with coarse pointer (such as a touch screen), the button target needs to be enlarged so users can easily tap the correct target button.
```
<Box
as="figure"
display="flex"
flexDirection={['column-reverse', 'column-reverse', 'column-reverse', 'column-reverse', 'row']}
m={0}
mb={3}
sx={{gap: 3}}
>
<Text as="p" mt="0">
Ensure action bar buttons have a large enough touch target size (44px by 44px). The buttons should respond to
hovers, clicks, and taps anywhere in the touch target area, even if it isn't directly on the control. To avoid
overlapping of touch targets, additional space between each button is needed (for example a 12px gap for medium
sized buttons).
</Text>
<img
src="https://user-images.githubusercontent.com/378023/193507314-1f1cc55d-ca4e-4832-a6de-785546e079ca.png"
role="presentation"
width="456"
/>
</Box>
```
1 change: 0 additions & 1 deletion theme.config.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ const config = {
},
}
},
faviconGlyph: "📚" ,
};

export default config;
Expand Down

0 comments on commit 5806952

Please sign in to comment.