Skip to content

Commit 7ff1646

Browse files
WestbrookWestbrook
committed
ci: update golden images cache and clean up timing
1 parent 65e0537 commit 7ff1646

39 files changed

+2882
-1
lines changed

‎.circleci/config.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ commands:
4242
- restore_cache:
4343
name: Restore Golden Images Cache
4444
keys:
45-
- v1-golden-images-<< parameters.regression_color >>-<< parameters.regression_scale >>-9d993be05640cfa0d34d61163d1d13b7daca5df2
45+
- v1-golden-images-<< parameters.regression_color >>-<< parameters.regression_scale >>-a5a1237d874a7471a76b62dd043c41d13e6251ba
4646
- v1-golden-images-master-<< parameters.regression_color >>-<< parameters.regression_scale >>-
4747
- run: yarn test:visual:ci --color=<< parameters.regression_color >> --scale=<< parameters.regression_scale >>
4848
- run:

‎packages/overlay/test/overlay-trigger.test.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,14 @@ describe('Overlay Trigger', () => {
109109
await elementUpdated(testDiv);
110110
});
111111

112+
afterEach(async () => {
113+
let activeOverlay = document.querySelector('active-overlay');
114+
while (activeOverlay !== null) {
115+
activeOverlay.remove();
116+
activeOverlay = document.querySelector('active-overlay');
117+
}
118+
});
119+
112120
it('loads', async () => {
113121
const popover = testDiv.querySelector('sp-popover');
114122
if (!(popover instanceof Popover))

‎projects/documentation/content/components/action-menu.md‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
---
2+
layout: layout.njk
3+
title: 'Action Menu: Spectrum Web Components'
4+
---
5+
## Description
6+
7+
An `<sp-action-menu />` is simply an action button with a Popover. Use an `<sp-menu>` element to outline the items that will be made available to the user when interacting with the `sp-action-menu` element.
8+
9+
### Installation
10+
11+
```
12+
npm install @spectrum-web-components/action-menu
13+
14+
# or
15+
16+
yarn add @spectrum-web-components/action-menu
17+
```
18+
19+
## Example
20+
21+
<!-- prettier-ignore -->
22+
```html
23+
<sp-action-menu>
24+
<span slot="label">More Actions</span>
25+
<sp-menu>
26+
<sp-menu-item>
27+
Deselect
28+
</sp-menu-item>
29+
<sp-menu-item>
30+
Select inverse
31+
</sp-menu-item>
32+
<sp-menu-item>
33+
Feather...
34+
</sp-menu-item>
35+
<sp-menu-item>
36+
Select and mask...
37+
</sp-menu-item>
38+
<sp-menu-divider></sp-menu-divider>
39+
<sp-menu-item>
40+
Save selection
41+
</sp-menu-item>
42+
<sp-menu-item disabled>
43+
Make work path
44+
</sp-menu-item>
45+
</sp-menu>
46+
</sp-action-menu>
47+
```
48+
49+
## Variants
50+
51+
### No visible label
52+
53+
The visible label that is be provided via the default `<slot>` interface can be ommitted in preference of an icon only interface. In this context be sure that the `<sp-action-menu>` remains accessible to screen readers by applying the `label` attribute. This will apply an `aria-label` attribute of the same value to the `<botton>` element that toggles the menu list.
54+
55+
<!-- prettier-ignore -->
56+
```html
57+
<sp-action-menu label="More Actions">
58+
<sp-menu>
59+
<sp-menu-item>
60+
Deselect
61+
</sp-menu-item>
62+
<sp-menu-item>
63+
Select inverse
64+
</sp-menu-item>
65+
<sp-menu-item>
66+
Feather...
67+
</sp-menu-item>
68+
<sp-menu-item>
69+
Select and mask...
70+
</sp-menu-item>
71+
<sp-menu-divider></sp-menu-divider>
72+
<sp-menu-item>
73+
Save selection
74+
</sp-menu-item>
75+
<sp-menu-item disabled>
76+
Make work path
77+
</sp-menu-item>
78+
</sp-menu>
79+
</sp-action-menu>
80+
```
81+
82+
### Alternate icon
83+
84+
A custom icon can be supplied via the `icon` slot in order to replace the default meatballs icon.
85+
86+
<sp-icons-medium></sp-icons-medium>
87+
88+
<!-- prettier-ignore -->
89+
```html
90+
<sp-action-menu label="More actions">
91+
<sp-icon slot="icon" size="xxs" name="ui:ChevronDownSmall"></sp-icon>
92+
<span slot="label">Actions Under the Arrow</span>
93+
<sp-menu>
94+
<sp-menu-item>
95+
Deselect
96+
</sp-menu-item>
97+
<sp-menu-item>
98+
Select inverse
99+
</sp-menu-item>
100+
<sp-menu-item>
101+
Feather...
102+
</sp-menu-item>
103+
<sp-menu-item>
104+
Select and mask...
105+
</sp-menu-item>
106+
<sp-menu-divider></sp-menu-divider>
107+
<sp-menu-item>
108+
Save selection
109+
</sp-menu-item>
110+
<sp-menu-item disabled>
111+
Make work path
112+
</sp-menu-item>
113+
</sp-menu>
114+
</sp-action-menu>
115+
```
116+
117+
## Accessibility
118+
119+
An `sp-action-menu` parent will ensure that the wrapped `sp-menu` features a role of `menu` and contains children with the role `menuitem`. Upon focusing the `sp-action-menu` using `ArrowDown` will also open the menu while throwing focus into first selected (or unselected when none are selected) menu item for easy selecting of a new value.
120+

‎projects/documentation/content/components/actionbar.md‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
---
2+
layout: layout.njk
3+
title: 'Actionbar: Spectrum Web Components'
4+
---
5+
## Description
6+
7+
A `<sp-actionbar>` delivers a floating action bar that is a convenient way to deliver stateful actions in cases like selection mode. `<sp-actionbar>` can be deployed in two variants beyond the default: `[varient="fixed"]`, to position the element in relation to the page, and `[variant=sticky]`, to position the content in relation to content that may scroll.
8+
9+
### Installation
10+
11+
```
12+
npm install @spectrum-web-components/actionbar
13+
14+
# or
15+
16+
yarn add @spectrum-web-components/actionbar
17+
```
18+
19+
## Example
20+
21+
```html
22+
<sp-actionbar open>
23+
<sp-checkbox indeterminate>228 Selected</sp-checkbox>
24+
<div class="spectrum-ButtonGroup">
25+
<sp-action-button quiet>
26+
<svg slot="icon" id="spectrum-icon-18-Edit" viewBox="0 0 36 36">
27+
<path
28+
d="M33.567 8.2L27.8 2.432a1.215 1.215 0 0 0-.866-.353H26.9a1.371 1.371 0 0 0-.927.406L5.084 23.372a.99.99 0 0 0-.251.422L2.055 33.1c-.114.377.459.851.783.851a.251.251 0 0 0 .062-.007c.276-.063 7.866-2.344 9.311-2.778a.972.972 0 0 0 .414-.249l20.888-20.889a1.372 1.372 0 0 0 .4-.883 1.221 1.221 0 0 0-.346-.945zM11.4 29.316c-2.161.649-4.862 1.465-6.729 2.022l2.009-6.73z"
29+
></path>
30+
</svg>
31+
</sp-action-button>
32+
<sp-action-button quiet>
33+
<svg slot="icon" id="spectrum-icon-18-More" viewBox="0 0 36 36">
34+
<circle cx="17.8" cy="18.2" r="3.4"></circle>
35+
<circle cx="29.5" cy="18.2" r="3.4"></circle>
36+
<circle cx="6.1" cy="18.2" r="3.4"></circle>
37+
</svg>
38+
</sp-action-button>
39+
</div>
40+
</sp-actionbar>
41+
```
42+
43+
## Variants
44+
45+
### Fixed
46+
47+
When using `[variant="fixed"]`, the `<sp-actionbar>` will display by default at the bottom left of the window and can be customized via CSS from the outside.
48+
49+
```html
50+
<h4>Look down and to the left when toggling.</h4>
51+
<sp-actionbar variant="fixed">
52+
<sp-checkbox indeterminate>228 Selected</sp-checkbox>
53+
</sp-actionbar>
54+
<sp-button
55+
onclick="javascript:this.previousElementSibling.open = !this.previousElementSibling.open;"
56+
>
57+
Toggle fixed actionbar
58+
</sp-button>
59+
```
60+
61+
### Sticky
62+
63+
When using `[variant="sticky"]`, be sure you've spent some time touching up on [how `sticky` really works](https://medium.com/@elad/css-position-sticky-how-it-really-works-54cd01dc2d46) to ensure the most successful delivery of your content.
64+
65+
```html
66+
<section style="position: relative; max-height: 6em; overflow: auto;">
67+
<h4>Scroll down for toggle button</h4>
68+
<sp-actionbar variant="sticky" style="top: 0;">
69+
<sp-checkbox indeterminate>228 Selected</sp-checkbox>
70+
</sp-actionbar>
71+
<p>
72+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
73+
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
74+
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
75+
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
76+
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
77+
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
78+
mollit anim id est laborum.
79+
</p>
80+
<sp-button
81+
onclick="javascript:this.previousElementSibling.previousElementSibling.open = !this.previousElementSibling.previousElementSibling.open;"
82+
>
83+
Toggle sticky actionbar
84+
</sp-button>
85+
</section>
86+
```
87+

‎projects/documentation/content/components/avatar.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
layout: layout.njk
3+
title: 'Avatar: Spectrum Web Components'
4+
---
5+
## Description
6+
7+
An **sp-avatar** is a great way to feature a visual representation of a user.
8+
9+
### Installation
10+
11+
```
12+
npm install @spectrum-web-components/avatar
13+
14+
# or
15+
16+
yarn add @spectrum-web-components/avatar
17+
```
18+
19+
## Example
20+
21+
```html
22+
<sp-avatar label="Dog the User" src="https://placedog.net/500/500"></sp-avatar>
23+
```
24+
25+
## Accessibility
26+
27+
The `label` attribute of the `<sp-avatar>` will be passed into the `<img>` element as the `alt` tag for use in defining a textual representation of the image displayed.
28+

‎projects/documentation/content/components/banner.md‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
---
2+
layout: layout.njk
3+
title: 'Banner: Spectrum Web Components'
4+
---
5+
## Description
6+
7+
An **sp-banner** is an additional label an existing component may have. Banners cannot be interacted with. Banners in Spectrum have three variations for different uses as well as the ability to place it overlaid in the top-right corner of a container.
8+
9+
### Installation
10+
11+
```
12+
npm install @spectrum-web-components/banner
13+
14+
# or
15+
16+
yarn add @spectrum-web-components/banner
17+
```
18+
19+
## Example
20+
21+
```html
22+
<sp-banner>
23+
<div slot="header">Header text</div>
24+
<div slot="content">Content of the banner</div>
25+
</sp-banner>
26+
```
27+
28+
## Variants
29+
30+
### Info banners
31+
32+
Banners intended for providing information. This is the default banner variant.
33+
34+
```html
35+
<sp-banner type="info">
36+
<div slot="header">This is an info banner</div>
37+
<div slot="content">Description here</div>
38+
</sp-banner>
39+
```
40+
41+
### Warning banners
42+
43+
Banners intended to provided a warning with a brief description. Less severe than an error banner.
44+
45+
```html
46+
<sp-banner type="warning">
47+
<div slot="header">This is a warning banner</div>
48+
<div slot="content">Be careful!</div>
49+
</sp-banner>
50+
```
51+
52+
### Error banners
53+
54+
Banners intended to indicate an error as occurred, with a brief description of the issue. More severe than a warning banner.
55+
56+
```html
57+
<sp-banner type="error">
58+
<div slot="header">This is an error banner</div>
59+
<div slot="content">Something bad happened</div>
60+
</sp-banner>
61+
```
62+
63+
## Corner placement
64+
65+
In addition to the variant, banners can be placed in the top-right corner of its container by giving them a corner prop. Note that the position of the containing element needs to be either relative or absolute
66+
67+
```html
68+
<div
69+
style="width: 300px; height: 100px; background-color: #ba598b; position: relative;"
70+
>
71+
<sp-banner type="warning" corner>
72+
<div slot="header">This banner is in a corner</div>
73+
<div slot="content">Neat!</div>
74+
</sp-banner>
75+
</div>
76+
```
77+
78+
## Accessibility
79+
80+
A Banner does not have a default semantic role communicated to assistive technology, but it does accept id, role and other aria- props that can be added to to improve accessibility depending on context.
81+

‎projects/documentation/content/components/bundle.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
layout: layout.njk
3+
title: 'Bundle: Spectrum Web Components'
4+
---
5+
## Description
6+
7+
`@spectrum-web-components/bundle` is a master dependancy that allows a project to import any and all of the the Spectrum Web Components. While it is a great approach to prototyping, the fact that is versions all of the Spectrum Web Components packages collectively means that depending on it can leave you with a lot of package udpates to manage at any one version change. For a more predicatable upgrade process we suggest that you depend upon individual packages directly, but hope you find this bundle productive when initially trying to get into the act of developing with Spectrum Web Components!
8+
9+
### Installation
10+
11+
```
12+
npm install @spectrum-web-components/bundle
13+
14+
# or
15+
16+
yarn add @spectrum-web-components/bundle
17+
```
18+

0 commit comments

Comments
 (0)