Skip to content

Commit 2b4cccf

Browse files
bjarnefbjarnef
authored
Merge branch 'umbraco:dev' into patch-2
2 parents b7e9b12 + 7abe85c commit 2b4cccf

File tree

81 files changed

+4239
-14166
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

81 files changed

+4239
-14166
lines changed

‎docs/RELEASE_INSTRUCTION.md

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
11
# UI Library Release workflow
22

3-
1. Create a new branch for the release. We need a good naming convention: `Release/<patch/minor/major>-<DDMMYY>` (example: `Release/Patch-040122`)
4-
1. Review new release PR (either [on GitHub](https://github.com/umbraco/Umbraco.UI/compare/) or through `npm run lerna:diff`)
5-
1. Make a PR from the new branch to the main branch
3+
1. Create a new branch for the release. We need a good naming convention: `Release/<patch/minor/major>-<YYMMDD>` (example: `Release/Patch-220128`).
4+
1. Review new release PR (either [on GitHub](https://github.com/umbraco/Umbraco.UI/compare/) or through `npm run lerna:diff`).
5+
1. Make a PR from the new branch to the main branch.
66
1. Wait for GitHub checks to pass.
7-
1. Run `npm run lerna:version`
8-
1. Select new version number for every package in the terminal
9-
1. Confirm the new versions - **this step is irreversible**. It will create tags and commit those to the remote. [Check how to clear tags.](#How-to-clear-tags)
10-
1. Commit `package-lock.json` to your release branch
7+
1. Run `npm run lerna:version`.
8+
1. Select new version number for every package in the terminal.
9+
1. Confirm the new versions - **this step is irreversible**. It will create tags and commit those to the remote. [Check how to clear tags.](#How-to-clear-tags).
10+
1. (TODO: Test the new setup works (by adding --no-push and no tag creation)... we haven't tried out jet, but it should fix the problem metnioned below by having a commit without the package-lock begin up to date.. If everything works then remove all tags from repo..).
11+
1. Commit changes and `package-lock.json` to your release branch.
1112
1. Wait for GitHub checks to pass. There will be one check that fails and this is the one triggered by a commit made by `npm run lerna:version` command. This fails because it runs build with old `package-lock.json` that does not have updated versions of the packages. After you commit the new package-lock the check should pass.
12-
1. Merge PR into main - this will trigger two actions - `Publish`, and `Azure Static Web Apps CI/CD`. The `Publish` workflow is responsible for publishing packages to NPM. It will only publish the packages that have higher version that previously published ones. The azure workflow will build and publish UI library Storybook
13-
1. Merge main branch into dev branch
13+
1. Github will post a comment with a test link to try out that the release works in Storybook. Please check that it works.
14+
1. Merge PR into main - this will trigger two actions - `Publish`, and `Azure Static Web Apps CI/CD`. The `Publish` workflow is responsible for publishing packages to NPM. It will only publish the packages that have higher version that previously published ones. The azure workflow will build and publish UI library Storybook.
15+
1. Merge main branch into dev branch.
1416

15-
## How to clear tags
17+
## How to clear tags (maybe not relevant after update mentioned above...)
1618

17-
If something goes wrong during the publish workflow, you might end up with tag numbers not corresponding to the current versions of the packages. Tags are stored both on remote and on local repository. Go to Github and remove all tags with higher versions then the last published version.
19+
If something goes wrong during the publish workflow, you might end up with tag numbers not corresponding to the current versions of the packages. Tags are stored both on remote and on local repository.
1820

19-
Then delete all your local tags and replace them with the tags from the remote. To do that run the following inside your local repository.
21+
1. Go to Github and remove all tags with higher versions then the last published version.
22+
2. Then delete all your local tags and replace them with the tags from the remote. To do that run the following inside your local repository.
2023

2124
OSX
2225

‎package-lock.json

Lines changed: 3851 additions & 13786 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"build:prod": "npm run clean && npm run build && npm run test",
3636
"clean": "lerna run clean",
3737
"lerna:publish": "npm run build:prod && npm whoami && lerna publish from-package --yes && npm run lerna-fix",
38-
"lerna:version": "lerna version --exact && rimraf package-lock.json && npm i",
38+
"lerna:version": "lerna version --no-push --exact --no-git-tag-version && rimraf package-lock.json && npm i",
3939
"lerna:diff": "lerna diff",
4040
"lerna-fix": "lerna exec -- node ../../scripts/lerna-fix.mjs",
4141
"lerna:modify-package": "lerna exec -- node ../../scripts/modify-pkgjson.mjs",

‎packages/uui-action-bar/lib/uui-action-bar.story.ts

Lines changed: 33 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { html } from 'lit-html';
22
import '@umbraco-ui/uui-action-bar/lib/index';
33
import '@umbraco-ui/uui-button/lib/index';
44
import '@umbraco-ui/uui-icon/lib/index';
5+
import '@umbraco-ui/uui-icon-registry-essential/lib/index';
56
import {
67
InterfaceLookNames,
78
InterfaceLookType,
@@ -20,29 +21,42 @@ export default {
2021
},
2122
};
2223

23-
const buttons = ['bug', 'info', 'delete'];
24+
const buttons = ['copy', 'remove', 'delete'];
2425

2526
export const Basic = () =>
26-
html`<uui-action-bar
27-
>${buttons.map(
28-
el => html`<uui-button><uui-icon name="${el}"></uui-icon></uui-button>`
29-
)}</uui-action-bar
30-
>`;
27+
html`
28+
<uui-icon-registry-essential>
29+
<uui-action-bar
30+
>${buttons.map(
31+
el =>
32+
html`<uui-button><uui-icon name="${el}"></uui-icon></uui-button>`
33+
)}
34+
</uui-action-bar>
35+
</uui-icon-registry-essential>
36+
`;
3137

3238
export const Single = () =>
33-
html`<uui-action-bar
34-
><uui-button look="outline"><uui-icon name="delete"></uui-icon></uui-button>
35-
</uui-action-bar>`;
39+
html`
40+
<uui-icon-registry-essential>
41+
<uui-action-bar>
42+
<uui-button look="outline"
43+
><uui-icon name="delete"></uui-icon
44+
></uui-button>
45+
</uui-action-bar>
46+
</uui-icon-registry-essential>
47+
`;
3648

3749
export const AllStyles = () => html`
38-
${InterfaceLookNames.map(
39-
(lookName: InterfaceLookType) =>
40-
html` <uui-action-bar>
41-
${buttons.map(
42-
button => html`<uui-button .look=${lookName}>
43-
<uui-icon name="${button}"></uui-icon>
44-
</uui-button>`
45-
)} </uui-action-bar
46-
><br /><br /><br />`
47-
)}
50+
<uui-icon-registry-essential>
51+
${InterfaceLookNames.map(
52+
(lookName: InterfaceLookType) =>
53+
html` <uui-action-bar>
54+
${buttons.map(
55+
button => html`<uui-button .look=${lookName}>
56+
<uui-icon name="${button}"></uui-icon>
57+
</uui-button>`
58+
)} </uui-action-bar
59+
><br /><br /><br />`
60+
)}
61+
</uui-icon-registry-essential>
4862
`;

‎packages/uui-action-bar/lib/uui-action-bar.test.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,4 @@ describe('UUIActionBarElement', () => {
1919
expect(slot).to.exist;
2020
});
2121
});
22-
2322
});

‎packages/uui-action-bar/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@umbraco-ui/uui-action-bar",
3-
"version": "0.0.2",
3+
"version": "0.0.3",
44
"license": "MIT",
55
"keywords": [
66
"Umbraco",
@@ -29,8 +29,8 @@
2929
"custom-elements.json"
3030
],
3131
"dependencies": {
32-
"@umbraco-ui/uui-base": "0.0.14",
33-
"@umbraco-ui/uui-button-group": "0.0.9"
32+
"@umbraco-ui/uui-base": "0.0.15",
33+
"@umbraco-ui/uui-button-group": "0.0.10"
3434
},
3535
"scripts": {
3636
"build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",

‎packages/uui-avatar-group/lib/uui-avatar-group.element.ts

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import { LitElement, html, css } from 'lit';
2-
import { property, query, queryAssignedNodes, state } from 'lit/decorators.js';
2+
import { property, queryAssignedElements, state } from 'lit/decorators.js';
33
import { UUIAvatarElement } from '@umbraco-ui/uui-avatar/lib/uui-avatar.element';
44

55
/**
6-
* This element is designed to hold uui-avatars. It displays them slightly overlapped, so they are presented nicely. Use it if you need to display many avatars in one place. Set a limit to display certain number of avatars and a number of the ones remaining out of view.
7-
* @element uui-avatar-group
6+
* Group a set of avatars, set a limit to minimize the visual space.
7+
* @element uui-avatar-group
88
* @slot for uui-avatar elements
99
*/
10-
1110
export class UUIAvatarGroupElement extends LitElement {
1211
static styles = [
1312
css`
@@ -18,10 +17,10 @@ export class UUIAvatarGroupElement extends LitElement {
1817
padding-right: 3px;
1918
}
2019
21-
::slotted(uui-avatar),
22-
uui-avatar {
20+
::slotted(uui-avatar) {
2321
margin-left: -0.2em;
2422
margin-right: -0.2em;
23+
border: 0.1em solid var(--uui-avatar-border-color);
2524
}
2625
2726
#overflow-indication {
@@ -30,11 +29,15 @@ export class UUIAvatarGroupElement extends LitElement {
3029
`,
3130
];
3231

33-
@query('slot')
34-
protected avatarsSlot!: HTMLSlotElement;
32+
@queryAssignedElements({
33+
slot: undefined,
34+
selector: 'uui-avatar',
35+
flatten: true,
36+
})
37+
private _avatarNodes?: UUIAvatarElement[];
3538

36-
@queryAssignedNodes(undefined, true, 'uui-avatar')
37-
private avatarNodes?: UUIAvatarElement[];
39+
@state()
40+
private _avatarArray: UUIAvatarElement[] = [];
3841

3942
/**
4043
* This sets a limit of how many avatars can be shown. It will ad a +{number} after the avatars to show the number of hidden avatars.
@@ -45,45 +48,42 @@ export class UUIAvatarGroupElement extends LitElement {
4548
@property({ type: Number, attribute: true })
4649
limit = 0;
4750

48-
@state()
49-
private avatarArray: UUIAvatarElement[] = [];
50-
5151
firstUpdated() {
52-
this.setAvatarArray();
52+
this._setAvatarArray();
5353
}
5454

55-
updated(changedProperties: Map<string | number | symbol, unknown>) {
56-
if (changedProperties.has('limit')) this.updateAvatarVisibility();
55+
private _onSlotChange() {
56+
this._setAvatarArray();
57+
this._updateAvatarVisibility();
5758
}
5859

59-
private updateAvatarVisibility() {
60-
this.avatarArray.forEach((avatar: UUIAvatarElement, index: number) => {
61-
const avatarNumber: number = index + 1;
62-
avatar.style.border = `0.1em solid var(--uui-avatar-border-color)`;
63-
avatar.style.display =
64-
avatarNumber <= this.limit || this.limit === 0 ? '' : 'none';
65-
});
60+
private _setAvatarArray() {
61+
this._avatarArray = this._avatarNodes ? this._avatarNodes : [];
6662
}
6763

68-
private onSlotChange() {
69-
this.setAvatarArray();
70-
this.updateAvatarVisibility();
64+
updated(changedProperties: Map<string | number | symbol, unknown>) {
65+
if (changedProperties.has('limit')) {
66+
this._updateAvatarVisibility();
67+
}
7168
}
7269

73-
private setAvatarArray() {
74-
this.avatarArray = this.avatarNodes ? this.avatarNodes : [];
70+
private _updateAvatarVisibility() {
71+
this._avatarArray.forEach((avatar: UUIAvatarElement, index: number) => {
72+
avatar.style.display =
73+
index < this.limit || this.limit === 0 ? '' : 'none';
74+
});
7575
}
7676

77-
private shouldShowLimitNumber() {
78-
return this.limit !== 0 && this.avatarArray.length > this.limit;
77+
private _isLimitExceeded() {
78+
return this.limit !== 0 && this._avatarArray.length > this.limit;
7979
}
8080

8181
render() {
8282
return html`
83-
<slot @slotchange=${this.onSlotChange}></slot>
84-
${this.shouldShowLimitNumber()
83+
<slot @slotchange=${this._onSlotChange}></slot>
84+
${this._isLimitExceeded()
8585
? //prettier-ignore
86-
html`<small id="overflow-indication">+${this.avatarArray.length - this.limit}</small>`
86+
html`<small id="overflow-indication">+${this._avatarArray.length - this.limit}</small>`
8787
: ''}
8888
`;
8989
}

‎packages/uui-avatar-group/lib/uui-avatar-group.story.ts

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ export const AAAOverview: Story = props => html`
1818
'--uui-avatar-border-color'
1919
]};"
2020
.limit=${props.limit}>
21-
<uui-avatar title=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
22-
<uui-avatar title=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
23-
<uui-avatar title=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
24-
<uui-avatar title=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
21+
<uui-avatar name=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
22+
<uui-avatar name=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
23+
<uui-avatar name=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
24+
<uui-avatar name=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
2525
</uui-avatar-group>
2626
`;
2727
AAAOverview.args = { fontSize: 2, '--uui-avatar-border-color': 'white' };
@@ -33,10 +33,10 @@ AAAOverview.parameters = {
3333
docs: {
3434
source: {
3535
code: html`<uui-avatar-group>
36-
<uui-avatar title="Firstname Lastname"></uui-avatar>
37-
<uui-avatar title="Firstname Lastname"></uui-avatar>
38-
<uui-avatar title="Firstname Lastname"></uui-avatar>
39-
<uui-avatar title="Firstname Lastname"></uui-avatar>
36+
<uui-avatar name="Firstname Lastname"></uui-avatar>
37+
<uui-avatar name="Firstname Lastname"></uui-avatar>
38+
<uui-avatar name="Firstname Lastname"></uui-avatar>
39+
<uui-avatar name="Firstname Lastname"></uui-avatar>
4040
</uui-avatar-group>`.strings,
4141
},
4242
},
@@ -48,10 +48,10 @@ export const Limit: Story = ({ limit }) => html`
4848
<uui-avatar-group
4949
style="font-size: 2rem; --uui-avatar-border-color: white;"
5050
.limit=${limit}>
51-
<uui-avatar title=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
52-
<uui-avatar title=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
53-
<uui-avatar title=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
54-
<uui-avatar title=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
51+
<uui-avatar name=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
52+
<uui-avatar name=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
53+
<uui-avatar name=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
54+
<uui-avatar name=${GetRandomUmbracoWordOfWordCount(2)}></uui-avatar>
5555
</uui-avatar-group>
5656
`;
5757
Limit.args = { limit: 2 };
@@ -60,10 +60,10 @@ Limit.parameters = {
6060
docs: {
6161
source: {
6262
code: html`<uui-avatar-group limit="2">
63-
<uui-avatar title="Firstname Lastname"></uui-avatar>
64-
<uui-avatar title="Firstname Lastname"></uui-avatar>
65-
<uui-avatar title="Firstname Lastname"></uui-avatar>
66-
<uui-avatar title="Firstname Lastname"></uui-avatar>
63+
<uui-avatar name="Firstname Lastname"></uui-avatar>
64+
<uui-avatar name="Firstname Lastname"></uui-avatar>
65+
<uui-avatar name="Firstname Lastname"></uui-avatar>
66+
<uui-avatar name="Firstname Lastname"></uui-avatar>
6767
</uui-avatar-group>`.strings,
6868
},
6969
},

‎packages/uui-avatar-group/lib/uui-avatar-group.test.ts

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ describe('UuiAvatarGroup', () => {
1717
const avatarGroup = await fixture(
1818
html`
1919
<uui-avatar-group
20-
><uui-avatar title="First Last"></uui-avatar
21-
><uui-avatar title="First Last"></uui-avatar
22-
><uui-avatar title="First Last"></uui-avatar
20+
><uui-avatar name="First Last"></uui-avatar
21+
><uui-avatar name="First Last"></uui-avatar
22+
><uui-avatar name="First Last"></uui-avatar
2323
></uui-avatar-group>
2424
`
2525
);
@@ -33,35 +33,48 @@ describe('UuiAvatarGroup', () => {
3333
it('passes the a11y audit', async () => {
3434
await expect(element).shadowDom.to.be.accessible();
3535
});
36+
37+
describe('properties', () => {
38+
it('has an limit property', () => {
39+
expect(element).to.have.property('limit');
40+
});
41+
});
42+
43+
describe('template', () => {
44+
it('renders a default slot', () => {
45+
const slot = element.shadowRoot!.querySelector('slot')!;
46+
expect(slot).to.exist;
47+
});
48+
});
3649
});
3750

3851
describe('UuiAvatarGroup Limit', async () => {
3952
let avatarGroup: UUIAvatarGroupElement;
4053
beforeEach(async () => {
4154
avatarGroup = await fixture(html` <uui-avatar-group .limit="${2}">
42-
<uui-avatar title="First Last"></uui-avatar>
43-
<uui-avatar title="First Last"></uui-avatar>
44-
<uui-avatar title="First Last"></uui-avatar>
45-
<uui-avatar title="First Last"></uui-avatar>
55+
<uui-avatar name="First Last"></uui-avatar>
56+
<uui-avatar name="First Last"></uui-avatar>
57+
<uui-avatar name="First Last"></uui-avatar>
58+
<uui-avatar name="First Last"></uui-avatar>
4659
</uui-avatar-group>`);
4760
});
4861

49-
it('Hides avatars correctly', async () => {
62+
it('Hides avatars correctly', () => {
5063
const slot = avatarGroup.shadowRoot!.querySelector('slot');
5164
const avatars = slot!.assignedElements({ flatten: true });
5265
const avatar = avatars[3];
5366
expect(avatar).not.to.be.displayed;
5467
});
5568

56-
it('Shows the limit text when there are more avatars than the set limit', async () => {
69+
it('Shows the limit text when there are more avatars than the set limit', () => {
5770
const small = avatarGroup.shadowRoot!.querySelector('small');
5871
expect(small).to.exist.and.have.text('+2');
5972
});
6073

6174
it('Does not show limit text when not set', async () => {
6275
avatarGroup = await fixture(html` <uui-avatar-group>
63-
<uui-avatar title="First Last"></uui-avatar>
64-
<uui-avatar title="First Last"></uui-avatar>
76+
<uui-avatar name="First Last"></uui-avatar>
77+
<uui-avatar name="First Last"></uui-avatar>
6578
</uui-avatar-group>`);
6679

6780
const small = avatarGroup.shadowRoot!.querySelector('small');

0 commit comments

Comments
 (0)