Merge pull request #1961 from umbraco/v14/bugfix/property-description-img-max-width

Bugfix: Property description, sets `max-width` for child items

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 ''
 	 */
@@ -130,6 +130,14 @@ export class UmbPropertyLayoutElement extends UmbLitElement {
 				color: var(--uui-color-text-alt);
 			}
 
+			#description * {
+				max-width: 100%;
+			}
+
+			#description pre {
+				overflow: auto;
+			}
+
 			#editorColumn {
 				margin-top: var(--uui-size-space-3);
 			}

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<UmbPropertyLayoutElement> = {
 	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`
+			<umb-property-layout
+				.invalid=${storyObj.invalid}
+				.alias=${storyObj.alias}
+				.label=${storyObj.label}
+				.description=${storyObj.description}
+				.orientation=${storyObj.orientation}>
+				<div slot="action-menu"><uui-button color="" look="placeholder">Action Menu</uui-button></div>
+				<div slot="editor"><uui-button color="" look="placeholder">Editor</uui-button></div>
+			</umb-property-layout>
+		`;
+	},
+	parameters: {
+		docs: {
+			source: {
+				code: `
+<umb-property-layout alias="My.Alias" text="My label" description="My description">
+	<div slot="action-menu"><uui-button color="" look="placeholder">Action Menu</uui-button></div>
+	<div slot="editor"><uui-button color="" look="placeholder">Editor</uui-button></div>
+</umb-property-layout>
+			`,
+			},
+		},
+	},
+};
 
-export const AAAOverview: Story<UmbPropertyLayoutElement> = () =>
-	html` <umb-property-layout label="Label" description="Description">
-		<div slot="action-menu"><uui-button color="" look="placeholder">Action Menu</uui-button></div>
+export default meta;
+type Story = StoryObj<UmbPropertyLayoutElement>;
 
-		<div slot="editor"><uui-button color="" look="placeholder">Editor</uui-button></div>
-	</umb-property-layout>`;
-AAAOverview.storyName = 'Overview';
+export const Overview: Story = {};
+
+export const Vertical: Story = {
+	args: {
+		orientation: 'vertical',
+	},
+	render: (storyObj) => {
+		return html`
+			<umb-property-layout
+				style="width: 500px;"
+				.alias=${storyObj.alias}
+				.label=${storyObj.label}
+				.description=${storyObj.description}
+				.orientation=${storyObj.orientation}>
+				<uui-textarea slot="editor"></uui-textarea>
+			</umb-property-layout>
+		`;
+	},
+};
+
+export const WithInvalid: Story = {
+	args: {
+		invalid: true,
+	},
+};
+
+export const WithMarkdown: Story = {
+	decorators: [(story) => html` <div style="max-width: 500px; margin:1rem;">${story()}</div> `],
+	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
+<umb-property-layout>
+	<div slot="editor"></div>
+</umb-property-layout>
+
+\`\`\`
+
+> 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)
+
+<details>
+<summary>Read more</summary>
+Details content
+</details>
+		`,
+	},
+};

src/Umbraco.Web.UI.Client/src/packages/user/current-user/repository/current-user.store.ts

@@ -105,4 +105,6 @@ export class UmbCurrentUserStore extends UmbContextBase<UmbCurrentUserStore> {
 	}
 }
 
+export default UmbCurrentUserStore;
+
 export const UMB_CURRENT_USER_STORE_CONTEXT = new UmbContextToken<UmbCurrentUserStore>('UmbCurrentUserStore');

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<ManifestTypes> = [repository, store];