From f3e00c2fbc0bd389bc8e358b3665622c43ad9ead Mon Sep 17 00:00:00 2001 From: leekelleher Date: Thu, 30 May 2024 10:53:05 +0100 Subject: [PATCH 1/5] Bugfix: Property description, sets `max-width` for child items e.g. typically for `` tags. --- .../core/property/property-layout/property-layout.element.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts index fac6cc9d24..cff1078368 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts @@ -130,6 +130,10 @@ export class UmbPropertyLayoutElement extends UmbLitElement { color: var(--uui-color-text-alt); } + #description * { + max-width: 100%; + } + #editorColumn { margin-top: var(--uui-size-space-3); } From 82029b71e1e5eb5d367497b9a77699c4a1248a43 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Thu, 30 May 2024 13:55:04 +0200 Subject: [PATCH 2/5] fix: make current user store async so storybook works --- .../user/current-user/repository/current-user.store.ts | 2 ++ .../src/packages/user/current-user/repository/manifests.ts | 3 +-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/repository/current-user.store.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/repository/current-user.store.ts index 684e41e7dd..e21ccd2e36 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/repository/current-user.store.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/repository/current-user.store.ts @@ -105,4 +105,6 @@ export class UmbCurrentUserStore extends UmbContextBase { } } +export default UmbCurrentUserStore; + export const UMB_CURRENT_USER_STORE_CONTEXT = new UmbContextToken('UmbCurrentUserStore'); diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/repository/manifests.ts index 39dce63e91..743a336e9c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/repository/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/repository/manifests.ts @@ -1,4 +1,3 @@ -import { UmbCurrentUserStore } from './current-user.store.js'; import type { ManifestRepository, ManifestStore, ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; export const UMB_CURRENT_USER_REPOSITORY_ALIAS = 'Umb.Repository.CurrentUser'; @@ -14,7 +13,7 @@ const store: ManifestStore = { type: 'store', alias: 'Umb.Store.CurrentUser', name: 'Current User Store', - api: UmbCurrentUserStore, + api: () => import('./current-user.store.js'), }; export const manifests: Array = [repository, store]; From e491d380e2d3938d71bbbec915a6fe9d6692a560 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Thu, 30 May 2024 13:55:22 +0200 Subject: [PATCH 3/5] fix: add correct types --- .../core/property/property-layout/property-layout.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts index cff1078368..a79733e69c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts @@ -33,7 +33,7 @@ export class UmbPropertyLayoutElement extends UmbLitElement { /** * Orientation: Horizontal is the default where label goes left and editor right. * Vertical is where label goes above the editor. - * @type {string} + * @enum ['horizontal', 'vertical'] * @attr * @default '' */ From c562040741f5f2d6b7887fbec4d09a77961d17bc Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Thu, 30 May 2024 13:55:38 +0200 Subject: [PATCH 4/5] docs: add stories to test out different layouts and markdown --- .../property-layout.stories.ts | 119 ++++++++++++++++-- 1 file changed, 109 insertions(+), 10 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.stories.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.stories.ts index 9bc6df0a3f..85d2e5c65a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.stories.ts @@ -1,19 +1,118 @@ -import type { Meta, Story } from '@storybook/web-components'; +import type { Meta, StoryObj } from '@storybook/web-components'; import type { UmbPropertyLayoutElement } from './property-layout.element.js'; import { html } from '@umbraco-cms/backoffice/external/lit'; import './property-layout.element.js'; -export default { +const meta: Meta = { title: 'Workspaces/Property Layout', - component: 'umb-property-layout', id: 'umb-property-layout', -} as Meta; + component: 'umb-property-layout', + args: { + alias: 'Umb.PropertyLayout.Text', + label: 'Text', + description: 'Description', + orientation: 'horizontal', + }, + argTypes: { + orientation: { + options: ['horizontal', 'vertical'], + }, + }, + render: (storyObj) => { + return html` + +
Action Menu
+
Editor
+ + `; + }, + parameters: { + docs: { + source: { + code: ` + +
Action Menu
+
Editor
+ + `, + }, + }, + }, +}; -export const AAAOverview: Story = () => - html` -
Action Menu
+export default meta; +type Story = StoryObj; -
Editor
- `; -AAAOverview.storyName = 'Overview'; +export const Overview: Story = {}; + +export const Vertical: Story = { + args: { + orientation: 'vertical', + }, + render: (storyObj) => { + return html` + + + + `; + }, +}; + +export const WithInvalid: Story = { + args: { + invalid: true, + }, +}; + +export const WithMarkdown: Story = { + decorators: [(story) => html`
${story()}
`], + args: { + alias: 'Umb.PropertyLayout.Markdown', + label: 'Markdown', + description: ` +# Markdown +This is a markdown description + +## Subtitle +- List item 1 +- List item 2 + +### Sub subtitle +1. Numbered list item 1 +2. Numbered list item 2 + +\`\`\`html + +
+ + +\`\`\` + +> Blockquote + +**Bold text** + +*Italic text* + +[Link](https://umbraco.com) + +![Image](https://umbraco.com/media/sybjwfmh/umbraco-support-working.webp?anchor=center&mode=crop&width=870&height=628&rnd=133425316954430000&quality=80&format=webp&format=webp) + +
+Read more +Details content +
+ `, + }, +}; From 297fd9df12586d3005469aed13e7fc4d63a68706 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Thu, 30 May 2024 13:56:08 +0200 Subject: [PATCH 5/5] fix: add overflow for pre/pre+code elements so that they dont force a scrollbar on the whole description --- .../core/property/property-layout/property-layout.element.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts index a79733e69c..40b03b66d0 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property-layout/property-layout.element.ts @@ -134,6 +134,10 @@ export class UmbPropertyLayoutElement extends UmbLitElement { max-width: 100%; } + #description pre { + overflow: auto; + } + #editorColumn { margin-top: var(--uui-size-space-3); }