Skip to content

Ref Element: Change border attribute to standalone #714

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

Merged
merged 4 commits into from
Jan 23, 2024
Merged

Ref Element: Change border attribute to standalone #714

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d9732d9
change border to standalone and add missing attr JSDocs
JesmoDev Jan 22, 2024
6af8933
fix stories
JesmoDev Jan 22, 2024
376b8a3
remove random s from uui-ref-node.story.ts
nielslyngsoe Jan 23, 2024
7e0e48d
Merge branch 'v1/contrib' into feature/ref-element-standalone
nielslyngsoe Jan 23, 2024
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
11 changes: 7 additions & 4 deletions packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,22 +81,25 @@ CustomIcon.parameters = {
},
};

export const Border: Story = () => html`
export const Standalone: Story = () => html`
<div style="max-width: 420px;">
<uui-ref-node-data-type border name="TextField" alias="Umbraco.TextField">
<uui-ref-node-data-type
standalone
name="TextField"
alias="Umbraco.TextField">
<uui-action-bar slot="actions">
<uui-button label="Remove">Remove</uui-button>
</uui-action-bar>
</uui-ref-node-data-type>
</div>
`;

Border.parameters = {
Standalone.parameters = {
docs: {
source: {
code: `
<uui-ref-node-data-type
border
standalone
name="TextField"
alias="Umbraco.TextField">
<uui-action-bar slot="actions">
Expand Down
11 changes: 7 additions & 4 deletions packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,22 +81,25 @@ CustomIcon.parameters = {
},
};

export const Border: Story = () => html`
export const Standalone: Story = () => html`
<div style="max-width: 420px;">
<uui-ref-node-document-type border name="Product Page" alias="productPage">
<uui-ref-node-document-type
standalone
name="Product Page"
alias="productPage">
<uui-action-bar slot="actions">
<uui-button label="Remove">Remove</uui-button>
</uui-action-bar>
</uui-ref-node-document-type>
</div>
`;

Border.parameters = {
Standalone.parameters = {
docs: {
source: {
code: `
<uui-ref-node-document-type
border
standalone
name="Product Page"
alias="productPage">
<uui-action-bar slot="actions">
Expand Down
8 changes: 4 additions & 4 deletions packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,10 +82,10 @@ CustomIcon.parameters = {
},
};

export const Border: Story = () => html`
export const Standalone: Story = () => html`
<div style="max-width: 420px;">
<uui-ref-node-form
border
standalone
name="Newsletter Signup"
detail="Signup for newsletter">
<uui-action-bar slot="actions">
Expand All @@ -95,12 +95,12 @@ export const Border: Story = () => html`
</div>
`;

Border.parameters = {
Standalone.parameters = {
docs: {
source: {
code: `
<uui-ref-node-form
border
standalone
name="Newsletter Signup"
detail="Signup for newsletter">
<uui-action-bar slot="actions">
Expand Down
8 changes: 4 additions & 4 deletions packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,10 +83,10 @@ CustomIcon.parameters = {
},
};

export const Border: Story = () => html`
export const Standalone: Story = () => html`
<div style="max-width: 420px;">
<uui-ref-node-member
border
standalone
name="Arnold Vitz"
group-name="Visitor, Registered-Member">
<uui-action-bar slot="actions">
Expand All @@ -96,12 +96,12 @@ export const Border: Story = () => html`
</div>
`;

Border.parameters = {
Standalone.parameters = {
docs: {
source: {
code: `
<uui-ref-node-member
border
standalone
name="Arnold Vitz"
group-name="Visitor, Registered-Member">
<uui-action-bar slot="actions">
Expand Down
8 changes: 4 additions & 4 deletions packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,10 +93,10 @@ CustomIcon.parameters = {
},
};

export const Border: Story = () => html`
export const Standalone: Story = () => html`
<div style="max-width: 420px;">
<uui-ref-node-package
border
standalone
name="Umbraco Starter Kit"
version="1.1"
author="Umbraco HQ">
Expand All @@ -110,12 +110,12 @@ export const Border: Story = () => html`
</div>
`;

Border.parameters = {
Standalone.parameters = {
docs: {
source: {
code: `
<uui-ref-node-package
border
standalone
name="Umbraco Starter Kit"
version="1.1"
author="Umbraco HQ">
Expand Down
8 changes: 4 additions & 4 deletions packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,10 +81,10 @@ CustomIcon.parameters = {
},
};

export const Border: Story = () => html`
export const Standalone: Story = () => html`
<div style="max-width: 420px;">
<uui-ref-node-user
border
standalone
name="Arnold Edits"
group-name="Editor, Translator">
<uui-action-bar slot="actions">
Expand All @@ -94,12 +94,12 @@ export const Border: Story = () => html`
</div>
`;

Border.parameters = {
Standalone.parameters = {
docs: {
source: {
code: `
<uui-ref-node-user
border
standalone
name="Arnold Edits"
group-name="Editor, Translator"
<uui-action-bar slot="actions">
Expand Down
11 changes: 7 additions & 4 deletions packages/uui-ref-node/lib/uui-ref-node.story.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,11 @@ CustomIcon.parameters = {
},
};

export const Border: Story = () => html`
<uui-ref-node border name="Rabbit Suit Product Page" detail="path/to/nowhere">
export const Standalone: Story = () => html`
<uui-ref-node
standalone
name="Rabbit Suit Product Page"
detail="path/to/nowhere">
<uui-tag size="s" slot="tag" color="positive">Published</uui-tag>
<uui-action-bar slot="actions">
<uui-button type="button" label="Delete"
Expand All @@ -102,12 +105,12 @@ export const Border: Story = () => html`
</uui-ref-node>
`;

Border.parameters = {
Standalone.parameters = {
docs: {
source: {
code: `
<uui-ref-node
border
standalone
name="Rabbit Suit Product Page"
detail="path/to/nowhere">
<uui-tag size="s" slot="tag" color="positive" >Published</uui-tag>
Expand Down
9 changes: 6 additions & 3 deletions packages/uui-ref/lib/uui-ref.element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ import { UUIRefEvent } from './UUIRefEvent';
* @fires {UUISelectableEvent} selected - fires when the ref is selected
* @fires {UUISelectableEvent} deselected - fires when the ref is deselected
* @description - Base ref component to be extended by specific ref elements. Does not have a tag.
* @attr {boolean} [disabled=false] - Set to true to disable
* @attr {boolean} [error=false] - Set to true to display error state
* @attr {boolean} [standalone=false] - Set to true to make element stand out
*/

@defineElement('uui-ref')
Expand Down Expand Up @@ -76,7 +79,7 @@ export class UUIRefElement extends SelectOnlyMixin(
inset 0 0 2px 0 var(--uui-color-danger);
}

:host([border]) {
:host([standalone]) {
border: 1px solid var(--uui-color-border);
}

Expand Down Expand Up @@ -179,15 +182,15 @@ export class UUIRefElement extends SelectOnlyMixin(
opacity: 1;
}

:host([border]:not([disabled]):hover) {
:host([standalone]:not([disabled]):hover) {
border-color: var(--uui-color-border-emphasis);
}

:host([disabled]) #open-part {
cursor: default;
}

:host([border][disabled]) {
:host([standalone][disabled]) {
border-color: var(--uui-color-disabled-standalone);
}

Expand Down