Merge branch 'main' into VIV-2049-layout

apps/docs/content/_data/components.json

@@ -236,20 +236,24 @@
 	},
 	{
 		"title": "Text Area",
-		"page": "legacy",
-		"markdown": "./libs/components/src/lib/text-area/README.md"
+		"description": "The Text Area component enables users to input longer, multi-line text when more extensive text entry is required.",
+		"variations": "./libs/components/src/lib/text-area/VARIATIONS.md",
+		"guidelines": "./libs/components/src/lib/text-area/GUIDELINES.md",
+		"hideGuidelines": "true",
+		"code": "./libs/components/src/lib/text-area/README.md",
+		"accessibility": "./libs/components/src/lib/text-area/ACCESSIBILITY.md",
+		"useCases": "./libs/components/src/lib/text-area/USE-CASES.md",
+		"hideUseCases": "true"
 	},
 	{
 		"title": "Radio Group",
-		"page": "legacy",
-		"markdown": "./libs/components/src/lib/radio-group/README.md",
-		"children": ["Radio"]
-	},
-	{
-		"title": "Radio",
-		"page": "legacy",
-		"markdown": "./libs/components/src/lib/radio/README.md",
-		"parent": "Radio Group"
+		"description": "A radio group is a collection of Radio buttons where only one choice can be selected.",
+		"variations": "./libs/components/src/lib/radio-group/VARIATIONS.md",
+		"guidelines": "./libs/components/src/lib/radio-group/GUIDELINES.md",
+		"hideGuidelines": "true",
+		"code": "./libs/components/src/lib/radio-group/README.md",
+		"accessibility": "./libs/components/src/lib/radio-group/ACCESSIBILITY.md",
+		"useCases": "./libs/components/src/lib/radio-group/USE-CASES.md"
 	},
 	{
 		"title": "Option",

libs/components/src/lib/dialog/VARIATIONS.md

@@ -30,19 +30,35 @@ To add custom icons or to postfix icons, use the [graphic slot](/components/dial
 The `icon-placement` attribute specifies where the dialog's icon should appear (relative to the headline).
 
 ```html preview 290px
-<vwc-dialog
-	icon-placement="side"
-	icon="info"
-	headline="Side Icon Placemnet"
-	subtitle="side is default"
-	open
-></vwc-dialog>
-<br />
-<vwc-dialog
-	icon-placement="top"
-	icon="info"
-	headline="Top Icon Placemnet"
-	subtitle="top is another option"
-	open
-></vwc-dialog>
+<div class="wrapper">
+	<div class="item">
+		<vwc-dialog
+			icon-placement="side"
+			icon="info"
+			headline="Side Icon Placemnet"
+			subtitle="side is default"
+			open
+		></vwc-dialog>
+	</div>
+	<div class="item">
+		<vwc-dialog
+			icon-placement="top"
+			icon="info"
+			headline="Top Icon Placemnet"
+			subtitle="top is another option"
+			open
+		></vwc-dialog>
+	</div>
+</div>
+
+<style>
+	.wrapper {
+		display: flex;
+	}
+	.item {
+		block-size: 280px;
+		position: relative;
+		flex: 1;
+	}
+</style>
 ```

libs/components/src/lib/dialog/dialog.scss

@@ -40,8 +40,6 @@ $dialog-space-size: 24px;
 	}
 
 	&.modal {
-		position: fixed;
-
 		// reason for box-shadow & hardcoded color - PR-1098
 		box-shadow: 0 4px 20px rgb(0 0 0 / 35%);
 		&::backdrop {

libs/components/src/lib/dialog/dialog.template.ts

@@ -56,7 +56,7 @@ export const DialogTemplate = (context: VividElementDefinitionContext) => {
 	const buttonTag = context.tagFor(Button);
 
 	return html<Dialog>`
-	<${elevationTag} dp="8">
+	<${elevationTag} dp="8" not-relative>
 		<dialog class="${getClasses}"
 				@keydown="${(x, c) => x._onKeyDown(c.event as KeyboardEvent)}"
 				@cancel="${(_, c) => c.event.preventDefault()}"

libs/components/src/lib/elevation/README.md

@@ -76,3 +76,12 @@ Use the `dp` attribute to change the elevation's level in Density-Independent Pi
 	<div class="card">This is the content inside the elevation with DP 24</div>
 </vwc-elevation>
 ```
+
+### No Shadow
+
+Use the no-shadow attribute to toggle off the elevation's drop shadow.
+
+### Not Relative
+
+When there's no need for `position:relative` set on the slotted content. Used in Dialog - caused issues with positioning and scroll to top.  
+This is for use only if the slotted content contain position absolute or fixed. Otherwise, the `:before` element will be mispositioned.

libs/components/src/lib/elevation/elevation.scss

@@ -18,7 +18,6 @@ $dps: 0 2 4 8 12 16 24;
 	}
 
 	::slotted(*) {
-		position: relative;
 		isolation: isolate;
 
 		&::before {
@@ -38,6 +37,12 @@ $dps: 0 2 4 8 12 16 24;
 		}
 	}
 
+	&:not(.not-relative) {
+		::slotted(*) {
+			position: relative;
+		}
+	}
+
 	&.no-shadow {
 		::slotted(*) {
 			&::before {

libs/components/src/lib/elevation/elevation.spec.ts

@@ -64,6 +64,22 @@ describe('vwc-elevation', () => {
 		expect(Boolean(element.shadowRoot?.querySelector('slot'))).toEqual(true);
 	});
 
+	describe('no position', () => {
+		it('should add class .not-relative to .base if no-position attribute is added o host', async () => {
+			element.notRelative = true;
+			await elementUpdated(element);
+			expect(getControlElement(element).classList.contains('.not-relative'));
+		});
+	});
+
+	describe('no shadow', () => {
+		it('should add class .no-shadow to .base if no-shadow attribute is added o host', async () => {
+			element.notRelative = true;
+			await elementUpdated(element);
+			expect(getControlElement(element).classList.contains('.no-shadow'));
+		});
+	});
+
 	describe('a11y', () => {
 		it('should pass html a11y test', async () => {
 			expect(await axe(element)).toHaveNoViolations();

libs/components/src/lib/elevation/elevation.template.ts

@@ -2,11 +2,12 @@ import { html } from '@microsoft/fast-element';
 import { classNames } from '@microsoft/fast-web-utilities';
 import type { Elevation } from './elevation';
 
-const getClasses = ({ dp, noShadow }: Elevation) =>
+const getClasses = ({ dp, noShadow, notRelative }: Elevation) =>
 	classNames(
 		'control',
 		[`dp-${dp}`, Boolean(dp)],
-		['no-shadow', Boolean(noShadow)]
+		['no-shadow', Boolean(noShadow)],
+		['not-relative', Boolean(notRelative)]
 	);
 
 export const elevationTemplate = html<Elevation>` <div

libs/components/src/lib/elevation/elevation.ts

@@ -21,4 +21,5 @@ export class Elevation extends VividElement {
 	 * HTML Attribute: boolean
 	 */
 	@attr({ attribute: 'no-shadow', mode: 'boolean' }) noShadow?: boolean;
+	@attr({ attribute: 'not-relative', mode: 'boolean' }) notRelative?: boolean;
 }

libs/components/src/lib/radio-group/ACCESSIBILITY.md

@@ -0,0 +1,3 @@
+## Implementation
+
+If a `label` can not be used, always provide an `aria-label` as an alternative. This will allow screen reader users to know the purpose of the Radio Group and the Radio button.

libs/components/src/lib/radio-group/GUIDELINES.md

@@ -0,0 +1,58 @@
+## Usage
+
+<docs-do-dont>
+<docs-do slot="description" headline="Use Checkboxes to select multiple options">
+
+```html preview example
+<div class="options">
+	<h5>Email Preferences</h5>
+	<vwc-checkbox label="Billing issues"></vwc-checkbox>
+	<vwc-checkbox label="Product updates"></vwc-checkbox>
+	<vwc-checkbox label="Price changes"></vwc-checkbox>
+</div>
+
+<style>
+	.options {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+	}
+</style>
+```
+
+</docs-do>
+<docs-do headline="Use checkboxes for a single item">
+
+```html preview example
+<vwc-checkbox label="I agree to the terms and conditions"></vwc-checkbox>
+```
+
+</docs-do>
+</docs-do-dont>
+
+## Labelling
+
+### Label
+
+<docs-do-dont>
+<docs-do slot="description" headline="Use the label attribute whenever possible">
+
+```html preview example
+<vwc-checkbox label="Use signed Webhooks"></vwc-checkbox>
+```
+
+</docs-do>
+<docs-do dont headline="Avoid Checkboxes without visible label">
+
+```html preview example
+<vwc-checkbox aria-label="Use signed Webhooks"></vwc-checkbox>
+```
+
+</docs-do>
+</docs-do-dont>
+
+## Related Components
+
+- [Switch](/components/switch/)
+- [Searchable Select](/components/searchable-select/)
+- [Radio](/components/radio/)