Merge branch 'main' into VIV-2236-filepicker-scrollbar

Vonage · Nov 27, 2024 · 784544c · 784544c
2 parents c0438a2 + de5f2ee
commit 784544c
Show file tree

Hide file tree

Showing 23 changed files with 1,552 additions and 380 deletions.
diff --git a/apps/docs/.eleventy.js b/apps/docs/.eleventy.js
@@ -68,6 +68,14 @@ module.exports = function (eleventyConfig) {
 					ignored: '**/frames/**',
 				},
 			},
+			css: {
+				preprocessorOptions: {
+					scss: {
+						// api: 'modern-compiler', not yet supported, instead silence warnings:
+						silenceDeprecations: ['legacy-js-api'],
+					},
+				},
+			},
 		},
 	});
 

diff --git a/apps/docs/code-example-preview/createCodeExample.js b/apps/docs/code-example-preview/createCodeExample.js
@@ -100,7 +100,7 @@ const createiFrameContent = (code, classList, index) => {
 		numberWithPx = match ? match[0] : 'auto';
 	}
 	const document = `<!DOCTYPE html>
-		 <html class="vvd-root" lang="en-US" style="block-size: ${numberWithPx};">
+		 <html class="vvd-root vvd-scrollbar" lang="en-US" style="block-size: ${numberWithPx};">
 			<head>
 				${IFRAME_STYLE}
 				${IFRAME_INLINE_STYLE}

diff --git a/apps/docs/content/_data/components.json b/apps/docs/content/_data/components.json
@@ -178,8 +178,13 @@
 	},
 	{
 		"title": "Dialog",
-		"page": "legacy",
-		"markdown": "./libs/components/src/lib/dialog/README.md"
+		"description": "Represents a part of an application that a user interacts with to perform a task.",
+		"variations": "./libs/components/src/lib/dialog/VARIATIONS.md",
+		"guidelines": "./libs/components/src/lib/dialog/GUIDELINES.md",
+		"hideGuidelines": "true",
+		"code": "./libs/components/src/lib/dialog/README.md",
+		"accessibility": "./libs/components/src/lib/dialog/ACCESSIBILITY.md",
+		"useCases": "./libs/components/src/lib/dialog/USE-CASES.md"
 	},
 	{
 		"title": "Header",

diff --git a/apps/docs/content/_layouts/base.njk b/apps/docs/content/_layouts/base.njk
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="vvd-root">
+<html lang="en" class="vvd-root vvd-scrollbar">
   <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">

diff --git a/apps/docs/content/guides/styles.md b/apps/docs/content/guides/styles.md
@@ -73,6 +73,10 @@ The tokens will be scoped to the `vvd-root` class selector.
 
 The core theme styles will apply the appropriate `color`, `background-color` and `color-scheme` for the chosen theme to the `vvd-root` class selector.
 
+#### Scrollbar
+
+Vivid component has a custom scrollbar. It can be added to the entire app/page by adding the class `vvd-scrollbar` to `:root.`
+
 ### Core Typography
 
 **Stylesheet:**

diff --git a/libs/components/src/lib/dialog/ACCESSIBILITY.md b/libs/components/src/lib/dialog/ACCESSIBILITY.md
@@ -0,0 +1,13 @@
+## Implementation
+
+- A Dialog should have a heading. If for some reason it doesn't, them make sure to add `aria-label` to the dialog element.
+- The dialog's role is `dialog`. When opened as a modal (via showModal) it adds `aria-modal` to the dialog.
+
+### Dialog Dismiss
+
+- If you disable the built-in dismiss methods, you must ensure that the way to close the dialog remains accessible.
+- When setting a new value for `--dialog-min-inline-size` and `--dialog-max-inline-size` take in consideration if different values are needed for mobile, and that they are not causing horizontal scroll there.
+
+## Manual Accessibility Test
+
+[Dialog: Manual accessibility test](https://docs.google.com/spreadsheets/d/16swp_M0jWnndcY2KpGaJJ0q82Ln6fpon6OA5OkTGcoA/edit?gid=1066167376#gid=1066167376)
diff --git a/libs/components/src/lib/dialog/GUIDELINES.md b/libs/components/src/lib/dialog/GUIDELINES.md