Skip to content

Commit 7d8affd

Browse files
JesmoDeviOvergaardnielslyngsoe
authored
feat: Inline-button-create support for HREF (#720)
* add href and target * re position the create-circle * no blur and better story --------- Co-authored-by: Jacob Overgaard <[email protected]> Co-authored-by: Niels Lyngsø <[email protected]>
1 parent 7cd20db commit 7d8affd

File tree

2 files changed

+131
-26
lines changed

2 files changed

+131
-26
lines changed

‎packages/uui-button-inline-create/lib/uui-button-inline-create.element.ts

Lines changed: 64 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
66
import { css, html, LitElement } from 'lit';
77
import { property, state } from 'lit/decorators.js';
88
import { styleMap } from 'lit/directives/style-map.js';
9+
import { ifDefined } from 'lit/directives/if-defined.js';
910

1011
import { UUIButtonInlineCreateEvent } from './UUIButtonInlineCreateEvent';
1112

@@ -37,44 +38,89 @@ export class UUIButtonInlineCreateElement extends LitElement {
3738
@property({ type: Boolean, reflect: true })
3839
vertical = false;
3940

41+
/**
42+
* Set an href, this will turns the button into an anchor tag.
43+
* @type {string}
44+
* @attr
45+
* @default undefined
46+
*/
47+
@property({ type: String })
48+
public href?: string;
49+
50+
/**
51+
* Set an anchor tag target, only used when using href.
52+
* @type {string}
53+
* @attr
54+
* @default undefined
55+
*/
56+
@property({ type: String })
57+
public target?: '_blank' | '_parent' | '_self' | '_top';
58+
4059
private _onMouseMove(e: MouseEvent) {
41-
this._position = this.vertical ? e.offsetY : e.offsetX;
60+
this._position = (this.vertical ? e.offsetY : e.offsetX) - 5;
4261
}
4362

4463
private _handleClick(e: MouseEvent) {
4564
e.preventDefault();
4665
e.stopImmediatePropagation();
4766

67+
// We do not want to focus the button after click.
68+
(e.target as any)?.blur?.();
69+
4870
this.dispatchEvent(
4971
new UUIButtonInlineCreateEvent(UUIButtonInlineCreateEvent.CLICK)
5072
);
5173
}
5274

53-
render() {
75+
#renderContent() {
76+
return html`
77+
<div
78+
id="plus"
79+
style=${styleMap({
80+
left: this.vertical ? '' : this._position + 'px',
81+
top: this.vertical ? this._position + 'px' : '',
82+
})}>
83+
<svg
84+
id="plus-icon"
85+
xmlns="http://www.w3.org/2000/svg"
86+
viewBox="0 0 512 512">
87+
<path
88+
d="M420.592 214.291H296.104V89.804h-83.102v124.487H88.518v83.104h124.484v124.488h83.102V297.395h124.488z" />
89+
</svg>
90+
</div>
91+
`;
92+
}
93+
94+
#renderLink() {
95+
return html`<a
96+
id="button-wrapper"
97+
@mousemove=${this._onMouseMove}
98+
href=${ifDefined(this.href)}
99+
target=${ifDefined(this.target || undefined)}
100+
rel=${ifDefined(
101+
this.target === '_blank' ? 'noopener noreferrer' : undefined
102+
)}
103+
aria-label=${this.label ? this.label : 'create new element'}>
104+
${this.#renderContent()}
105+
</a>`;
106+
}
107+
108+
#renderButton() {
54109
return html`
55110
<button
56111
id="button-wrapper"
57112
@mousemove=${this._onMouseMove}
58113
@click=${this._handleClick}
59114
aria-label=${this.label ? this.label : 'create new element'}>
60-
<div
61-
id="plus"
62-
style=${styleMap({
63-
left: this.vertical ? '' : this._position + 'px',
64-
top: this.vertical ? this._position + 'px' : '',
65-
})}>
66-
<svg
67-
id="plus-icon"
68-
xmlns="http://www.w3.org/2000/svg"
69-
viewBox="0 0 512 512">
70-
<path
71-
d="M420.592 214.291H296.104V89.804h-83.102v124.487H88.518v83.104h124.484v124.488h83.102V297.395h124.488z" />
72-
</svg>
73-
</div>
115+
${this.#renderContent()}
74116
</button>
75117
`;
76118
}
77119

120+
render() {
121+
return this.href ? this.#renderLink() : this.#renderButton();
122+
}
123+
78124
static styles = [
79125
UUIBlinkKeyframes,
80126
css`
@@ -205,12 +251,12 @@ export class UUIButtonInlineCreateElement extends LitElement {
205251
}
206252
207253
:host(:not([vertical])) #plus {
208-
margin-left: -21px;
254+
margin-left: -18px;
209255
}
210256
211257
:host([vertical]) #plus {
212258
left: -4px;
213-
margin-top: -21px;
259+
margin-top: -18px;
214260
}
215261
216262
#button-wrapper:focus #plus {

‎packages/uui-button-inline-create/lib/uui-button-inline-create.story.ts

Lines changed: 67 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export default {
2424

2525
const insertBox = (e: any) => {
2626
const div = document.createElement('div');
27+
const labelDiv = document.createElement('div');
2728
const label = document.createElement('div');
2829
const buttonInline = document.createElement('uui-button-inline-create');
2930
buttonInline.addEventListener('click', insertBox);
@@ -33,18 +34,31 @@ const insertBox = (e: any) => {
3334

3435
if (e.target.vertical) {
3536
buttonInline.setAttribute('vertical', 'true');
36-
div.style.display = 'grid';
37-
div.style.gridTemplateColumns = '1fr auto';
37+
labelDiv.style.display = 'grid';
38+
labelDiv.style.gridTemplateColumns = '1fr auto';
39+
buttonInline.style.position = 'absolute';
40+
buttonInline.style.right = '0';
41+
buttonInline.style.top = '0';
42+
} else {
43+
labelDiv.style.display = 'block';
3844
}
3945

40-
div.appendChild(label);
4146
div.appendChild(buttonInline);
47+
labelDiv.appendChild(label);
48+
div.appendChild(labelDiv);
4249

43-
e.target.parentElement.insertAdjacentElement('afterend', div);
50+
e.target.parentElement.parentElement.insertBefore(
51+
div,
52+
e.target.parentElement
53+
);
4454
};
4555

4656
const createBox = (vertical: boolean) =>
4757
html` <div style="position:relative;">
58+
<uui-button-inline-create
59+
style="${vertical ? 'position: absolute; right: 0; top:0;' : ''}"
60+
?vertical=${vertical}
61+
@click=${insertBox}></uui-button-inline-create>
4862
<div
4963
style="
5064
${vertical
@@ -55,17 +69,21 @@ const createBox = (vertical: boolean) =>
5569
${GetRandomUmbracoWord()}
5670
</div>
5771
</div>
58-
<uui-button-inline-create
59-
style="${vertical ? 'position: absolute; right: 0; top:0;' : ''}"
60-
?vertical=${vertical}
61-
@click=${insertBox}></uui-button-inline-create>
6272
</div>`;
6373

6474
const createBoxes = (count: number, vertical = false) => {
6575
const boxes: TemplateResult<1>[] = [];
6676
for (let index = 0; index < count; index++) {
6777
boxes.push(createBox(vertical));
6878
}
79+
boxes.push(html`
80+
<div style="position:relative;">
81+
<uui-button-inline-create
82+
style="${vertical ? 'position: absolute; right: 0; top:0;' : ''}"
83+
?vertical=${vertical}
84+
@click=${insertBox}></uui-button-inline-create>
85+
</div>
86+
`);
6987
return boxes;
7088
};
7189

@@ -80,6 +98,7 @@ AAAOverview.parameters = {
8098
source: {
8199
code: `
82100
<div>
101+
<uui-button-inline-create label="Create Item"></uui-button-inline-create>
83102
<div style="padding: 10px;">Item 1</div>
84103
<uui-button-inline-create label="Create Item"></uui-button-inline-create>
85104
<div style="padding: 10px;">Item 2</div>
@@ -102,6 +121,7 @@ Vertical.parameters = {
102121
source: {
103122
code: `
104123
<div>
124+
<uui-button-inline-create label="Create Item"></uui-button-inline-create>
105125
<div style="padding: 10px;">Item 1</div>
106126
<uui-button-inline-create label="Create Item"></uui-button-inline-create>
107127
<div style="padding: 10px;">Item 2</div>
@@ -124,6 +144,7 @@ Horizontal.parameters = {
124144
source: {
125145
code: `
126146
<div style="'display: grid; grid-template-columns: 1fr auto;">
147+
<uui-button-inline-create label="Create Item"></uui-button-inline-create>
127148
<div style="padding: 10px;">Item 1</div>
128149
<uui-button-inline-create label="Create Item"></uui-button-inline-create>
129150
<div style="padding: 10px;">Item 2</div>
@@ -135,3 +156,41 @@ Horizontal.parameters = {
135156
},
136157
},
137158
};
159+
160+
export const Href: Story = () =>
161+
html` <h3>Using HREF</h3>
162+
<div id="container" style="max-width: 500px; border: 1px solid grey">
163+
<uui-button-inline-create
164+
href="#0"
165+
label="Create Item"></uui-button-inline-create>
166+
<div style="padding: 10px;">Item 1</div>
167+
<uui-button-inline-create
168+
href="#1"
169+
label="Create Item"></uui-button-inline-create>
170+
<div style="padding: 10px;">Item 2</div>
171+
<uui-button-inline-create
172+
href="#2"
173+
label="Create Item"></uui-button-inline-create>
174+
<div style="padding: 10px;">Item 3</div>
175+
<uui-button-inline-create
176+
href="#3"
177+
label="Create Item"></uui-button-inline-create>
178+
</div>`;
179+
AAAOverview.storyName = 'Overview';
180+
AAAOverview.parameters = {
181+
docs: {
182+
source: {
183+
code: `
184+
<div>
185+
<uui-button-inline-create href="#0" label="Create Item"></uui-button-inline-create>
186+
<div style="padding: 10px;">Item 1</div>
187+
<uui-button-inline-create href="#1" label="Create Item"></uui-button-inline-create>
188+
<div style="padding: 10px;">Item 2</div>
189+
<uui-button-inline-create href="#2" label="Create Item"></uui-button-inline-create>
190+
<div style="padding: 10px;">Item 3</div>
191+
<uui-button-inline-create href="#3" label="Create Item"></uui-button-inline-create>
192+
</div>
193+
`,
194+
},
195+
},
196+
};

0 commit comments

Comments
 (0)