From e470f556ae9a894a8fcf96cb3cd0de1217123024 Mon Sep 17 00:00:00 2001 From: Andrew Gliga Date: Tue, 10 Feb 2026 12:25:57 -0800 Subject: [PATCH 01/12] feat(dialog): added new component using base --- .marko-run/routes.d.ts | 40 +++- .../evo-marko/src/tags/evo-dialog/index.marko | 0 packages/skin/dialog.mjs | 1 + packages/skin/dist/dialog/dialog.css | 168 +++++++++++++++ packages/skin/index.mjs | 1 + .../skin/src/sass/bundles/skin-headless.scss | 1 + packages/skin/src/sass/dialog/dialog.scss | 188 +++++++++++++++++ src/data/component-metadata.json | 13 ++ .../_index/components/dialog/+meta.json | 4 + .../_index/components/dialog/+page.marko | 63 ++++++ .../components/dialog/accessibility+meta.json | 4 + .../dialog/accessibility+page.marko | 193 ++++++++++++++++++ .../_index/components/dialog/css+meta.json | 4 + .../_index/components/dialog/css+page.marko | 150 ++++++++++++++ .../components/lightbox-dialog/+page.marko | 2 +- 15 files changed, 829 insertions(+), 3 deletions(-) create mode 100644 packages/evo-marko/src/tags/evo-dialog/index.marko create mode 100644 packages/skin/dialog.mjs create mode 100644 packages/skin/dist/dialog/dialog.css create mode 100644 packages/skin/src/sass/dialog/dialog.scss create mode 100644 src/routes/_index/components/dialog/+meta.json create mode 100644 src/routes/_index/components/dialog/+page.marko create mode 100644 src/routes/_index/components/dialog/accessibility+meta.json create mode 100644 src/routes/_index/components/dialog/accessibility+page.marko create mode 100644 src/routes/_index/components/dialog/css+meta.json create mode 100644 src/routes/_index/components/dialog/css+page.marko diff --git a/.marko-run/routes.d.ts b/.marko-run/routes.d.ts index b5b3a56e2a..fff6ba6c83 100644 --- a/.marko-run/routes.d.ts +++ b/.marko-run/routes.d.ts @@ -119,6 +119,9 @@ declare module "@marko/run" { "/components/details": { verb: "get"; meta: typeof import("../src/routes/_index/components/details/+meta.json"); }; "/components/details/accessibility": { verb: "get"; meta: typeof import("../src/routes/_index/components/details/accessibility+meta.json"); }; "/components/details/css": { verb: "get"; meta: typeof import("../src/routes/_index/components/details/css+meta.json"); }; + "/components/dialog": { verb: "get"; meta: typeof import("../src/routes/_index/components/dialog/+meta.json"); }; + "/components/dialog/accessibility": { verb: "get"; meta: typeof import("../src/routes/_index/components/dialog/accessibility+meta.json"); }; + "/components/dialog/css": { verb: "get"; meta: typeof import("../src/routes/_index/components/dialog/css+meta.json"); }; "/components/donut-chart": { verb: "get"; meta: typeof import("../src/routes/_index/components/donut-chart/+meta.json"); }; "/components/donut-chart/accessibility": { verb: "get"; meta: typeof import("../src/routes/_index/components/donut-chart/accessibility+meta.json"); }; "/components/donut-chart/css": { verb: "get"; meta: typeof import("../src/routes/_index/components/donut-chart/css+meta.json"); }; @@ -1525,6 +1528,39 @@ declare module "../src/routes/_index/components/details/css+page.marko" { } } +declare module "../src/routes/_index/components/dialog/+page.marko" { + namespace MarkoRun { + export { NotHandled, NotMatched, GetPaths, PostPaths, GetablePath, GetableHref, PostablePath, PostableHref, Platform }; + export type Route = Run.Routes["/components/dialog"]; + export type Context = Run.MultiRouteContext & Marko.Global; + export type Handler = Run.HandlerLike; + /** @deprecated use `((context, next) => { ... }) satisfies MarkoRun.Handler` instead */ + export const route: Run.HandlerTypeFn; + } +} + +declare module "../src/routes/_index/components/dialog/accessibility+page.marko" { + namespace MarkoRun { + export { NotHandled, NotMatched, GetPaths, PostPaths, GetablePath, GetableHref, PostablePath, PostableHref, Platform }; + export type Route = Run.Routes["/components/dialog/accessibility"]; + export type Context = Run.MultiRouteContext & Marko.Global; + export type Handler = Run.HandlerLike; + /** @deprecated use `((context, next) => { ... }) satisfies MarkoRun.Handler` instead */ + export const route: Run.HandlerTypeFn; + } +} + +declare module "../src/routes/_index/components/dialog/css+page.marko" { + namespace MarkoRun { + export { NotHandled, NotMatched, GetPaths, PostPaths, GetablePath, GetableHref, PostablePath, PostableHref, Platform }; + export type Route = Run.Routes["/components/dialog/css"]; + export type Context = Run.MultiRouteContext & Marko.Global; + export type Handler = Run.HandlerLike; + /** @deprecated use `((context, next) => { ... }) satisfies MarkoRun.Handler` instead */ + export const route: Run.HandlerTypeFn; + } +} + declare module "../src/routes/_index/components/donut-chart/+page.marko" { namespace MarkoRun { export { NotHandled, NotMatched, GetPaths, PostPaths, GetablePath, GetableHref, PostablePath, PostableHref, Platform }; @@ -3762,7 +3798,7 @@ declare module "../src/routes/_index/+layout.marko" { export interface Input extends Run.LayoutInput {} namespace MarkoRun { export { NotHandled, NotMatched, GetPaths, PostPaths, GetablePath, GetableHref, PostablePath, PostableHref, Platform }; - export type Route = Run.Routes["/" | "/evo-css-components" | "/evo-marko-components" | "/evo-react-components" | "/sitemap" | "/accessibility" | "/accessibility/anti-patterns" | "/accessibility/anti-patterns/disabling-pinch-to-zoom" | "/accessibility/anti-patterns/hand-cursor-on-buttons" | "/accessibility/anti-patterns/javascript-href" | "/accessibility/anti-patterns/layout-table" | "/accessibility/anti-patterns/non-interactive-hover" | "/accessibility/anti-patterns/open-new-window" | "/accessibility/anti-patterns/setting-focus-on-page-load" | "/accessibility/anti-patterns/tabindex-itis" | "/accessibility/anti-patterns/title-tooltip" | "/accessibility/misc" | "/accessibility/misc/aria-essentials" | "/accessibility/misc/component-naming-scheme" | "/accessibility/misc/faq" | "/accessibility/patterns" | "/accessibility/patterns/description-list" | "/accessibility/patterns/fake-menu-button" | "/accessibility/patterns/fake-tabs" | "/accessibility/patterns/footnote" | "/accessibility/patterns/form" | "/accessibility/patterns/form-validation" | "/accessibility/patterns/heading" | "/accessibility/patterns/image" | "/accessibility/patterns/input-dialog" | "/accessibility/patterns/input-meter" | "/accessibility/patterns/input-validation" | "/accessibility/patterns/popover" | "/accessibility/patterns/pulldown-list" | "/accessibility/patterns/region" | "/accessibility/patterns/skip-navigation" | "/accessibility/patterns/table-cell" | "/accessibility/patterns/time" | "/accessibility/techniques" | "/accessibility/techniques/active-descendant" | "/accessibility/techniques/alternative-text" | "/accessibility/techniques/ambiguous-label" | "/accessibility/techniques/background-icon" | "/accessibility/techniques/keyboard-interface" | "/accessibility/techniques/keyboard-trap" | "/accessibility/techniques/live-region" | "/accessibility/techniques/offscreen-text" | "/accessibility/techniques/roving-tabindex" | "/accessibility/techniques/skip-to-main-content" | "/accessibility/testing" | "/accessibility/testing/checklist" | "/accessibility/testing/known-issues" | "/components" | "/components/accordion" | "/components/accordion/accessibility" | "/components/accordion/css" | "/components/alert-dialog" | "/components/alert-dialog/accessibility" | "/components/alert-dialog/css" | "/components/avatar" | "/components/avatar/accessibility" | "/components/avatar/css" | "/components/badge" | "/components/badge/accessibility" | "/components/badge/css" | "/components/breadcrumbs" | "/components/breadcrumbs/accessibility" | "/components/breadcrumbs/css" | "/components/button" | "/components/button/accessibility" | "/components/button/css" | "/components/button/marko" | "/components/button/react" | "/components/calendar" | "/components/calendar/accessibility" | "/components/calendar/css" | "/components/card" | "/components/card/accessibility" | "/components/card/css" | "/components/carousel" | "/components/carousel/accessibility" | "/components/carousel/css" | "/components/ccd" | "/components/ccd/accessibility" | "/components/ccd/css" | "/components/chart-legend" | "/components/chart-legend/accessibility" | "/components/chart-legend/css" | "/components/checkbox" | "/components/checkbox/accessibility" | "/components/checkbox/css" | "/components/chip" | "/components/chip/accessibility" | "/components/chip/css" | "/components/chips-combobox" | "/components/chips-combobox/accessibility" | "/components/chips-combobox/css" | "/components/combobox" | "/components/combobox/accessibility" | "/components/combobox/css" | "/components/confirm-dialog" | "/components/confirm-dialog/accessibility" | "/components/confirm-dialog/css" | "/components/date-textbox" | "/components/date-textbox/accessibility" | "/components/date-textbox/css" | "/components/details" | "/components/details/accessibility" | "/components/details/css" | "/components/donut-chart" | "/components/donut-chart/accessibility" | "/components/donut-chart/css" | "/components/education-notice" | "/components/education-notice/accessibility" | "/components/education-notice/css" | "/components/eek" | "/components/eek/accessibility" | "/components/eek/css" | "/components/field" | "/components/field/accessibility" | "/components/field/css" | "/components/file-input" | "/components/file-input/accessibility" | "/components/file-input/css" | "/components/file-preview-card" | "/components/file-preview-card/accessibility" | "/components/file-preview-card/css" | "/components/file-preview-card-group" | "/components/file-preview-card-group/accessibility" | "/components/file-preview-card-group/css" | "/components/filter-chip" | "/components/filter-chip/accessibility" | "/components/filter-chip/css" | "/components/filter-input" | "/components/filter-input/accessibility" | "/components/filter-input/css" | "/components/flag" | "/components/flag/accessibility" | "/components/flag/css" | "/components/floating-label" | "/components/floating-label/accessibility" | "/components/floating-label/css" | "/components/global" | "/components/global/accessibility" | "/components/global/css" | "/components/icon" | "/components/icon/accessibility" | "/components/icon/css" | "/components/icon-button" | "/components/icon-button/accessibility" | "/components/icon-button/css" | "/components/image-placeholder" | "/components/image-placeholder/accessibility" | "/components/image-placeholder/css" | "/components/infotip" | "/components/infotip/accessibility" | "/components/infotip/css" | "/components/inline-notice" | "/components/inline-notice/accessibility" | "/components/inline-notice/css" | "/components/item-tile" | "/components/item-tile/accessibility" | "/components/item-tile/css" | "/components/item-tile-group" | "/components/item-tile-group/accessibility" | "/components/item-tile-group/css" | "/components/layout-grid" | "/components/layout-grid/accessibility" | "/components/layout-grid/css" | "/components/lightbox-dialog" | "/components/lightbox-dialog/accessibility" | "/components/lightbox-dialog/css" | "/components/link" | "/components/link/accessibility" | "/components/link/css" | "/components/list" | "/components/list/accessibility" | "/components/list/css" | "/components/listbox" | "/components/listbox/accessibility" | "/components/listbox/css" | "/components/listbox-button" | "/components/listbox-button/accessibility" | "/components/listbox-button/css" | "/components/marketsans" | "/components/marketsans/accessibility" | "/components/marketsans/css" | "/components/menu" | "/components/menu/accessibility" | "/components/menu/css" | "/components/menu-button" | "/components/menu-button/accessibility" | "/components/menu-button/css" | "/components/number-input" | "/components/number-input/accessibility" | "/components/number-input/css" | "/components/page-grid" | "/components/page-grid/accessibility" | "/components/page-grid/css" | "/components/page-notice" | "/components/page-notice/accessibility" | "/components/page-notice/css" | "/components/pagination" | "/components/pagination/accessibility" | "/components/pagination/css" | "/components/panel-dialog" | "/components/panel-dialog/accessibility" | "/components/panel-dialog/css" | "/components/phone-input" | "/components/phone-input/accessibility" | "/components/phone-input/css" | "/components/progress-bar" | "/components/progress-bar/accessibility" | "/components/progress-bar/css" | "/components/progress-bar-expressive" | "/components/progress-bar-expressive/accessibility" | "/components/progress-bar-expressive/css" | "/components/progress-spinner" | "/components/progress-spinner/accessibility" | "/components/progress-spinner/css" | "/components/progress-stepper" | "/components/progress-stepper/accessibility" | "/components/progress-stepper/css" | "/components/radio" | "/components/radio/accessibility" | "/components/radio/css" | "/components/sass" | "/components/section-notice" | "/components/section-notice/accessibility" | "/components/section-notice/css" | "/components/section-title" | "/components/section-title/accessibility" | "/components/section-title/css" | "/components/segmented-buttons" | "/components/segmented-buttons/accessibility" | "/components/segmented-buttons/css" | "/components/select" | "/components/select/accessibility" | "/components/select/css" | "/components/selection-chip" | "/components/signal" | "/components/signal/accessibility" | "/components/signal/css" | "/components/skeleton" | "/components/skeleton/accessibility" | "/components/skeleton/css" | "/components/snackbar-dialog" | "/components/snackbar-dialog/accessibility" | "/components/snackbar-dialog/css" | "/components/split-button" | "/components/split-button/accessibility" | "/components/split-button/css" | "/components/star-rating" | "/components/star-rating/accessibility" | "/components/star-rating/css" | "/components/star-rating-select" | "/components/star-rating-select/accessibility" | "/components/star-rating-select/css" | "/components/switch" | "/components/switch/accessibility" | "/components/switch/css" | "/components/table" | "/components/table/accessibility" | "/components/table/css" | "/components/tabs" | "/components/tabs/accessibility" | "/components/tabs/css" | "/components/textbox" | "/components/textbox/accessibility" | "/components/textbox/css" | "/components/toast-dialog" | "/components/toast-dialog/accessibility" | "/components/toast-dialog/css" | "/components/toggle-button" | "/components/toggle-button/accessibility" | "/components/toggle-button/css" | "/components/toggle-button-group" | "/components/toggle-button-group/accessibility" | "/components/toggle-button-group/css" | "/components/tokens" | "/components/tokens/css" | "/components/tooltip" | "/components/tooltip/accessibility" | "/components/tooltip/css" | "/components/tourtip" | "/components/tourtip/accessibility" | "/components/tourtip/css" | "/components/typography" | "/components/typography/accessibility" | "/components/typography/css" | "/components/utility" | "/components/utility/css" | "/guides" | "/guides/animation" | "/guides/page-grid" | "/guides/skeleton"]; + export type Route = Run.Routes["/" | "/evo-css-components" | "/evo-marko-components" | "/evo-react-components" | "/sitemap" | "/accessibility" | "/accessibility/anti-patterns" | "/accessibility/anti-patterns/disabling-pinch-to-zoom" | "/accessibility/anti-patterns/hand-cursor-on-buttons" | "/accessibility/anti-patterns/javascript-href" | "/accessibility/anti-patterns/layout-table" | "/accessibility/anti-patterns/non-interactive-hover" | "/accessibility/anti-patterns/open-new-window" | "/accessibility/anti-patterns/setting-focus-on-page-load" | "/accessibility/anti-patterns/tabindex-itis" | "/accessibility/anti-patterns/title-tooltip" | "/accessibility/misc" | "/accessibility/misc/aria-essentials" | "/accessibility/misc/component-naming-scheme" | "/accessibility/misc/faq" | "/accessibility/patterns" | "/accessibility/patterns/description-list" | "/accessibility/patterns/fake-menu-button" | "/accessibility/patterns/fake-tabs" | "/accessibility/patterns/footnote" | "/accessibility/patterns/form" | "/accessibility/patterns/form-validation" | "/accessibility/patterns/heading" | "/accessibility/patterns/image" | "/accessibility/patterns/input-dialog" | "/accessibility/patterns/input-meter" | "/accessibility/patterns/input-validation" | "/accessibility/patterns/popover" | "/accessibility/patterns/pulldown-list" | "/accessibility/patterns/region" | "/accessibility/patterns/skip-navigation" | "/accessibility/patterns/table-cell" | "/accessibility/patterns/time" | "/accessibility/techniques" | "/accessibility/techniques/active-descendant" | "/accessibility/techniques/alternative-text" | "/accessibility/techniques/ambiguous-label" | "/accessibility/techniques/background-icon" | "/accessibility/techniques/keyboard-interface" | "/accessibility/techniques/keyboard-trap" | "/accessibility/techniques/live-region" | "/accessibility/techniques/offscreen-text" | "/accessibility/techniques/roving-tabindex" | "/accessibility/techniques/skip-to-main-content" | "/accessibility/testing" | "/accessibility/testing/checklist" | "/accessibility/testing/known-issues" | "/components" | "/components/accordion" | "/components/accordion/accessibility" | "/components/accordion/css" | "/components/alert-dialog" | "/components/alert-dialog/accessibility" | "/components/alert-dialog/css" | "/components/avatar" | "/components/avatar/accessibility" | "/components/avatar/css" | "/components/badge" | "/components/badge/accessibility" | "/components/badge/css" | "/components/breadcrumbs" | "/components/breadcrumbs/accessibility" | "/components/breadcrumbs/css" | "/components/button" | "/components/button/accessibility" | "/components/button/css" | "/components/button/marko" | "/components/button/react" | "/components/calendar" | "/components/calendar/accessibility" | "/components/calendar/css" | "/components/card" | "/components/card/accessibility" | "/components/card/css" | "/components/carousel" | "/components/carousel/accessibility" | "/components/carousel/css" | "/components/ccd" | "/components/ccd/accessibility" | "/components/ccd/css" | "/components/chart-legend" | "/components/chart-legend/accessibility" | "/components/chart-legend/css" | "/components/checkbox" | "/components/checkbox/accessibility" | "/components/checkbox/css" | "/components/chip" | "/components/chip/accessibility" | "/components/chip/css" | "/components/chips-combobox" | "/components/chips-combobox/accessibility" | "/components/chips-combobox/css" | "/components/combobox" | "/components/combobox/accessibility" | "/components/combobox/css" | "/components/confirm-dialog" | "/components/confirm-dialog/accessibility" | "/components/confirm-dialog/css" | "/components/date-textbox" | "/components/date-textbox/accessibility" | "/components/date-textbox/css" | "/components/details" | "/components/details/accessibility" | "/components/details/css" | "/components/dialog" | "/components/dialog/accessibility" | "/components/dialog/css" | "/components/donut-chart" | "/components/donut-chart/accessibility" | "/components/donut-chart/css" | "/components/education-notice" | "/components/education-notice/accessibility" | "/components/education-notice/css" | "/components/eek" | "/components/eek/accessibility" | "/components/eek/css" | "/components/field" | "/components/field/accessibility" | "/components/field/css" | "/components/file-input" | "/components/file-input/accessibility" | "/components/file-input/css" | "/components/file-preview-card" | "/components/file-preview-card/accessibility" | "/components/file-preview-card/css" | "/components/file-preview-card-group" | "/components/file-preview-card-group/accessibility" | "/components/file-preview-card-group/css" | "/components/filter-chip" | "/components/filter-chip/accessibility" | "/components/filter-chip/css" | "/components/filter-input" | "/components/filter-input/accessibility" | "/components/filter-input/css" | "/components/flag" | "/components/flag/accessibility" | "/components/flag/css" | "/components/floating-label" | "/components/floating-label/accessibility" | "/components/floating-label/css" | "/components/global" | "/components/global/accessibility" | "/components/global/css" | "/components/icon" | "/components/icon/accessibility" | "/components/icon/css" | "/components/icon-button" | "/components/icon-button/accessibility" | "/components/icon-button/css" | "/components/image-placeholder" | "/components/image-placeholder/accessibility" | "/components/image-placeholder/css" | "/components/infotip" | "/components/infotip/accessibility" | "/components/infotip/css" | "/components/inline-notice" | "/components/inline-notice/accessibility" | "/components/inline-notice/css" | "/components/item-tile" | "/components/item-tile/accessibility" | "/components/item-tile/css" | "/components/item-tile-group" | "/components/item-tile-group/accessibility" | "/components/item-tile-group/css" | "/components/layout-grid" | "/components/layout-grid/accessibility" | "/components/layout-grid/css" | "/components/lightbox-dialog" | "/components/lightbox-dialog/accessibility" | "/components/lightbox-dialog/css" | "/components/link" | "/components/link/accessibility" | "/components/link/css" | "/components/list" | "/components/list/accessibility" | "/components/list/css" | "/components/listbox" | "/components/listbox/accessibility" | "/components/listbox/css" | "/components/listbox-button" | "/components/listbox-button/accessibility" | "/components/listbox-button/css" | "/components/marketsans" | "/components/marketsans/accessibility" | "/components/marketsans/css" | "/components/menu" | "/components/menu/accessibility" | "/components/menu/css" | "/components/menu-button" | "/components/menu-button/accessibility" | "/components/menu-button/css" | "/components/number-input" | "/components/number-input/accessibility" | "/components/number-input/css" | "/components/page-grid" | "/components/page-grid/accessibility" | "/components/page-grid/css" | "/components/page-notice" | "/components/page-notice/accessibility" | "/components/page-notice/css" | "/components/pagination" | "/components/pagination/accessibility" | "/components/pagination/css" | "/components/panel-dialog" | "/components/panel-dialog/accessibility" | "/components/panel-dialog/css" | "/components/phone-input" | "/components/phone-input/accessibility" | "/components/phone-input/css" | "/components/progress-bar" | "/components/progress-bar/accessibility" | "/components/progress-bar/css" | "/components/progress-bar-expressive" | "/components/progress-bar-expressive/accessibility" | "/components/progress-bar-expressive/css" | "/components/progress-spinner" | "/components/progress-spinner/accessibility" | "/components/progress-spinner/css" | "/components/progress-stepper" | "/components/progress-stepper/accessibility" | "/components/progress-stepper/css" | "/components/radio" | "/components/radio/accessibility" | "/components/radio/css" | "/components/sass" | "/components/section-notice" | "/components/section-notice/accessibility" | "/components/section-notice/css" | "/components/section-title" | "/components/section-title/accessibility" | "/components/section-title/css" | "/components/segmented-buttons" | "/components/segmented-buttons/accessibility" | "/components/segmented-buttons/css" | "/components/select" | "/components/select/accessibility" | "/components/select/css" | "/components/selection-chip" | "/components/signal" | "/components/signal/accessibility" | "/components/signal/css" | "/components/skeleton" | "/components/skeleton/accessibility" | "/components/skeleton/css" | "/components/snackbar-dialog" | "/components/snackbar-dialog/accessibility" | "/components/snackbar-dialog/css" | "/components/split-button" | "/components/split-button/accessibility" | "/components/split-button/css" | "/components/star-rating" | "/components/star-rating/accessibility" | "/components/star-rating/css" | "/components/star-rating-select" | "/components/star-rating-select/accessibility" | "/components/star-rating-select/css" | "/components/switch" | "/components/switch/accessibility" | "/components/switch/css" | "/components/table" | "/components/table/accessibility" | "/components/table/css" | "/components/tabs" | "/components/tabs/accessibility" | "/components/tabs/css" | "/components/textbox" | "/components/textbox/accessibility" | "/components/textbox/css" | "/components/toast-dialog" | "/components/toast-dialog/accessibility" | "/components/toast-dialog/css" | "/components/toggle-button" | "/components/toggle-button/accessibility" | "/components/toggle-button/css" | "/components/toggle-button-group" | "/components/toggle-button-group/accessibility" | "/components/toggle-button-group/css" | "/components/tokens" | "/components/tokens/css" | "/components/tooltip" | "/components/tooltip/accessibility" | "/components/tooltip/css" | "/components/tourtip" | "/components/tourtip/accessibility" | "/components/tourtip/css" | "/components/typography" | "/components/typography/accessibility" | "/components/typography/css" | "/components/utility" | "/components/utility/css" | "/guides" | "/guides/animation" | "/guides/page-grid" | "/guides/skeleton"]; export type Context = Run.MultiRouteContext & Marko.Global; export type Handler = Run.HandlerLike; /** @deprecated use `((context, next) => { ... }) satisfies MarkoRun.Handler` instead */ @@ -3786,7 +3822,7 @@ declare module "../src/routes/_index/components/+layout.marko" { export interface Input extends Run.LayoutInput {} namespace MarkoRun { export { NotHandled, NotMatched, GetPaths, PostPaths, GetablePath, GetableHref, PostablePath, PostableHref, Platform }; - export type Route = Run.Routes["/components" | "/components/accordion" | "/components/accordion/accessibility" | "/components/accordion/css" | "/components/alert-dialog" | "/components/alert-dialog/accessibility" | "/components/alert-dialog/css" | "/components/avatar" | "/components/avatar/accessibility" | "/components/avatar/css" | "/components/badge" | "/components/badge/accessibility" | "/components/badge/css" | "/components/breadcrumbs" | "/components/breadcrumbs/accessibility" | "/components/breadcrumbs/css" | "/components/button" | "/components/button/accessibility" | "/components/button/css" | "/components/button/marko" | "/components/button/react" | "/components/calendar" | "/components/calendar/accessibility" | "/components/calendar/css" | "/components/card" | "/components/card/accessibility" | "/components/card/css" | "/components/carousel" | "/components/carousel/accessibility" | "/components/carousel/css" | "/components/ccd" | "/components/ccd/accessibility" | "/components/ccd/css" | "/components/chart-legend" | "/components/chart-legend/accessibility" | "/components/chart-legend/css" | "/components/checkbox" | "/components/checkbox/accessibility" | "/components/checkbox/css" | "/components/chip" | "/components/chip/accessibility" | "/components/chip/css" | "/components/chips-combobox" | "/components/chips-combobox/accessibility" | "/components/chips-combobox/css" | "/components/combobox" | "/components/combobox/accessibility" | "/components/combobox/css" | "/components/confirm-dialog" | "/components/confirm-dialog/accessibility" | "/components/confirm-dialog/css" | "/components/date-textbox" | "/components/date-textbox/accessibility" | "/components/date-textbox/css" | "/components/details" | "/components/details/accessibility" | "/components/details/css" | "/components/donut-chart" | "/components/donut-chart/accessibility" | "/components/donut-chart/css" | "/components/education-notice" | "/components/education-notice/accessibility" | "/components/education-notice/css" | "/components/eek" | "/components/eek/accessibility" | "/components/eek/css" | "/components/field" | "/components/field/accessibility" | "/components/field/css" | "/components/file-input" | "/components/file-input/accessibility" | "/components/file-input/css" | "/components/file-preview-card" | "/components/file-preview-card/accessibility" | "/components/file-preview-card/css" | "/components/file-preview-card-group" | "/components/file-preview-card-group/accessibility" | "/components/file-preview-card-group/css" | "/components/filter-chip" | "/components/filter-chip/accessibility" | "/components/filter-chip/css" | "/components/filter-input" | "/components/filter-input/accessibility" | "/components/filter-input/css" | "/components/flag" | "/components/flag/accessibility" | "/components/flag/css" | "/components/floating-label" | "/components/floating-label/accessibility" | "/components/floating-label/css" | "/components/global" | "/components/global/accessibility" | "/components/global/css" | "/components/icon" | "/components/icon/accessibility" | "/components/icon/css" | "/components/icon-button" | "/components/icon-button/accessibility" | "/components/icon-button/css" | "/components/image-placeholder" | "/components/image-placeholder/accessibility" | "/components/image-placeholder/css" | "/components/infotip" | "/components/infotip/accessibility" | "/components/infotip/css" | "/components/inline-notice" | "/components/inline-notice/accessibility" | "/components/inline-notice/css" | "/components/item-tile" | "/components/item-tile/accessibility" | "/components/item-tile/css" | "/components/item-tile-group" | "/components/item-tile-group/accessibility" | "/components/item-tile-group/css" | "/components/layout-grid" | "/components/layout-grid/accessibility" | "/components/layout-grid/css" | "/components/lightbox-dialog" | "/components/lightbox-dialog/accessibility" | "/components/lightbox-dialog/css" | "/components/link" | "/components/link/accessibility" | "/components/link/css" | "/components/list" | "/components/list/accessibility" | "/components/list/css" | "/components/listbox" | "/components/listbox/accessibility" | "/components/listbox/css" | "/components/listbox-button" | "/components/listbox-button/accessibility" | "/components/listbox-button/css" | "/components/marketsans" | "/components/marketsans/accessibility" | "/components/marketsans/css" | "/components/menu" | "/components/menu/accessibility" | "/components/menu/css" | "/components/menu-button" | "/components/menu-button/accessibility" | "/components/menu-button/css" | "/components/number-input" | "/components/number-input/accessibility" | "/components/number-input/css" | "/components/page-grid" | "/components/page-grid/accessibility" | "/components/page-grid/css" | "/components/page-notice" | "/components/page-notice/accessibility" | "/components/page-notice/css" | "/components/pagination" | "/components/pagination/accessibility" | "/components/pagination/css" | "/components/panel-dialog" | "/components/panel-dialog/accessibility" | "/components/panel-dialog/css" | "/components/phone-input" | "/components/phone-input/accessibility" | "/components/phone-input/css" | "/components/progress-bar" | "/components/progress-bar/accessibility" | "/components/progress-bar/css" | "/components/progress-bar-expressive" | "/components/progress-bar-expressive/accessibility" | "/components/progress-bar-expressive/css" | "/components/progress-spinner" | "/components/progress-spinner/accessibility" | "/components/progress-spinner/css" | "/components/progress-stepper" | "/components/progress-stepper/accessibility" | "/components/progress-stepper/css" | "/components/radio" | "/components/radio/accessibility" | "/components/radio/css" | "/components/sass" | "/components/section-notice" | "/components/section-notice/accessibility" | "/components/section-notice/css" | "/components/section-title" | "/components/section-title/accessibility" | "/components/section-title/css" | "/components/segmented-buttons" | "/components/segmented-buttons/accessibility" | "/components/segmented-buttons/css" | "/components/select" | "/components/select/accessibility" | "/components/select/css" | "/components/selection-chip" | "/components/signal" | "/components/signal/accessibility" | "/components/signal/css" | "/components/skeleton" | "/components/skeleton/accessibility" | "/components/skeleton/css" | "/components/snackbar-dialog" | "/components/snackbar-dialog/accessibility" | "/components/snackbar-dialog/css" | "/components/split-button" | "/components/split-button/accessibility" | "/components/split-button/css" | "/components/star-rating" | "/components/star-rating/accessibility" | "/components/star-rating/css" | "/components/star-rating-select" | "/components/star-rating-select/accessibility" | "/components/star-rating-select/css" | "/components/switch" | "/components/switch/accessibility" | "/components/switch/css" | "/components/table" | "/components/table/accessibility" | "/components/table/css" | "/components/tabs" | "/components/tabs/accessibility" | "/components/tabs/css" | "/components/textbox" | "/components/textbox/accessibility" | "/components/textbox/css" | "/components/toast-dialog" | "/components/toast-dialog/accessibility" | "/components/toast-dialog/css" | "/components/toggle-button" | "/components/toggle-button/accessibility" | "/components/toggle-button/css" | "/components/toggle-button-group" | "/components/toggle-button-group/accessibility" | "/components/toggle-button-group/css" | "/components/tokens" | "/components/tokens/css" | "/components/tooltip" | "/components/tooltip/accessibility" | "/components/tooltip/css" | "/components/tourtip" | "/components/tourtip/accessibility" | "/components/tourtip/css" | "/components/typography" | "/components/typography/accessibility" | "/components/typography/css" | "/components/utility" | "/components/utility/css"]; + export type Route = Run.Routes["/components" | "/components/accordion" | "/components/accordion/accessibility" | "/components/accordion/css" | "/components/alert-dialog" | "/components/alert-dialog/accessibility" | "/components/alert-dialog/css" | "/components/avatar" | "/components/avatar/accessibility" | "/components/avatar/css" | "/components/badge" | "/components/badge/accessibility" | "/components/badge/css" | "/components/breadcrumbs" | "/components/breadcrumbs/accessibility" | "/components/breadcrumbs/css" | "/components/button" | "/components/button/accessibility" | "/components/button/css" | "/components/button/marko" | "/components/button/react" | "/components/calendar" | "/components/calendar/accessibility" | "/components/calendar/css" | "/components/card" | "/components/card/accessibility" | "/components/card/css" | "/components/carousel" | "/components/carousel/accessibility" | "/components/carousel/css" | "/components/ccd" | "/components/ccd/accessibility" | "/components/ccd/css" | "/components/chart-legend" | "/components/chart-legend/accessibility" | "/components/chart-legend/css" | "/components/checkbox" | "/components/checkbox/accessibility" | "/components/checkbox/css" | "/components/chip" | "/components/chip/accessibility" | "/components/chip/css" | "/components/chips-combobox" | "/components/chips-combobox/accessibility" | "/components/chips-combobox/css" | "/components/combobox" | "/components/combobox/accessibility" | "/components/combobox/css" | "/components/confirm-dialog" | "/components/confirm-dialog/accessibility" | "/components/confirm-dialog/css" | "/components/date-textbox" | "/components/date-textbox/accessibility" | "/components/date-textbox/css" | "/components/details" | "/components/details/accessibility" | "/components/details/css" | "/components/dialog" | "/components/dialog/accessibility" | "/components/dialog/css" | "/components/donut-chart" | "/components/donut-chart/accessibility" | "/components/donut-chart/css" | "/components/education-notice" | "/components/education-notice/accessibility" | "/components/education-notice/css" | "/components/eek" | "/components/eek/accessibility" | "/components/eek/css" | "/components/field" | "/components/field/accessibility" | "/components/field/css" | "/components/file-input" | "/components/file-input/accessibility" | "/components/file-input/css" | "/components/file-preview-card" | "/components/file-preview-card/accessibility" | "/components/file-preview-card/css" | "/components/file-preview-card-group" | "/components/file-preview-card-group/accessibility" | "/components/file-preview-card-group/css" | "/components/filter-chip" | "/components/filter-chip/accessibility" | "/components/filter-chip/css" | "/components/filter-input" | "/components/filter-input/accessibility" | "/components/filter-input/css" | "/components/flag" | "/components/flag/accessibility" | "/components/flag/css" | "/components/floating-label" | "/components/floating-label/accessibility" | "/components/floating-label/css" | "/components/global" | "/components/global/accessibility" | "/components/global/css" | "/components/icon" | "/components/icon/accessibility" | "/components/icon/css" | "/components/icon-button" | "/components/icon-button/accessibility" | "/components/icon-button/css" | "/components/image-placeholder" | "/components/image-placeholder/accessibility" | "/components/image-placeholder/css" | "/components/infotip" | "/components/infotip/accessibility" | "/components/infotip/css" | "/components/inline-notice" | "/components/inline-notice/accessibility" | "/components/inline-notice/css" | "/components/item-tile" | "/components/item-tile/accessibility" | "/components/item-tile/css" | "/components/item-tile-group" | "/components/item-tile-group/accessibility" | "/components/item-tile-group/css" | "/components/layout-grid" | "/components/layout-grid/accessibility" | "/components/layout-grid/css" | "/components/lightbox-dialog" | "/components/lightbox-dialog/accessibility" | "/components/lightbox-dialog/css" | "/components/link" | "/components/link/accessibility" | "/components/link/css" | "/components/list" | "/components/list/accessibility" | "/components/list/css" | "/components/listbox" | "/components/listbox/accessibility" | "/components/listbox/css" | "/components/listbox-button" | "/components/listbox-button/accessibility" | "/components/listbox-button/css" | "/components/marketsans" | "/components/marketsans/accessibility" | "/components/marketsans/css" | "/components/menu" | "/components/menu/accessibility" | "/components/menu/css" | "/components/menu-button" | "/components/menu-button/accessibility" | "/components/menu-button/css" | "/components/number-input" | "/components/number-input/accessibility" | "/components/number-input/css" | "/components/page-grid" | "/components/page-grid/accessibility" | "/components/page-grid/css" | "/components/page-notice" | "/components/page-notice/accessibility" | "/components/page-notice/css" | "/components/pagination" | "/components/pagination/accessibility" | "/components/pagination/css" | "/components/panel-dialog" | "/components/panel-dialog/accessibility" | "/components/panel-dialog/css" | "/components/phone-input" | "/components/phone-input/accessibility" | "/components/phone-input/css" | "/components/progress-bar" | "/components/progress-bar/accessibility" | "/components/progress-bar/css" | "/components/progress-bar-expressive" | "/components/progress-bar-expressive/accessibility" | "/components/progress-bar-expressive/css" | "/components/progress-spinner" | "/components/progress-spinner/accessibility" | "/components/progress-spinner/css" | "/components/progress-stepper" | "/components/progress-stepper/accessibility" | "/components/progress-stepper/css" | "/components/radio" | "/components/radio/accessibility" | "/components/radio/css" | "/components/sass" | "/components/section-notice" | "/components/section-notice/accessibility" | "/components/section-notice/css" | "/components/section-title" | "/components/section-title/accessibility" | "/components/section-title/css" | "/components/segmented-buttons" | "/components/segmented-buttons/accessibility" | "/components/segmented-buttons/css" | "/components/select" | "/components/select/accessibility" | "/components/select/css" | "/components/selection-chip" | "/components/signal" | "/components/signal/accessibility" | "/components/signal/css" | "/components/skeleton" | "/components/skeleton/accessibility" | "/components/skeleton/css" | "/components/snackbar-dialog" | "/components/snackbar-dialog/accessibility" | "/components/snackbar-dialog/css" | "/components/split-button" | "/components/split-button/accessibility" | "/components/split-button/css" | "/components/star-rating" | "/components/star-rating/accessibility" | "/components/star-rating/css" | "/components/star-rating-select" | "/components/star-rating-select/accessibility" | "/components/star-rating-select/css" | "/components/switch" | "/components/switch/accessibility" | "/components/switch/css" | "/components/table" | "/components/table/accessibility" | "/components/table/css" | "/components/tabs" | "/components/tabs/accessibility" | "/components/tabs/css" | "/components/textbox" | "/components/textbox/accessibility" | "/components/textbox/css" | "/components/toast-dialog" | "/components/toast-dialog/accessibility" | "/components/toast-dialog/css" | "/components/toggle-button" | "/components/toggle-button/accessibility" | "/components/toggle-button/css" | "/components/toggle-button-group" | "/components/toggle-button-group/accessibility" | "/components/toggle-button-group/css" | "/components/tokens" | "/components/tokens/css" | "/components/tooltip" | "/components/tooltip/accessibility" | "/components/tooltip/css" | "/components/tourtip" | "/components/tourtip/accessibility" | "/components/tourtip/css" | "/components/typography" | "/components/typography/accessibility" | "/components/typography/css" | "/components/utility" | "/components/utility/css"]; export type Context = Run.MultiRouteContext & Marko.Global; export type Handler = Run.HandlerLike; /** @deprecated use `((context, next) => { ... }) satisfies MarkoRun.Handler` instead */ diff --git a/packages/evo-marko/src/tags/evo-dialog/index.marko b/packages/evo-marko/src/tags/evo-dialog/index.marko new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/skin/dialog.mjs b/packages/skin/dialog.mjs new file mode 100644 index 0000000000..e1e625121e --- /dev/null +++ b/packages/skin/dialog.mjs @@ -0,0 +1 @@ +import './dist/dialog/dialog.css'; diff --git a/packages/skin/dist/dialog/dialog.css b/packages/skin/dist/dialog/dialog.css new file mode 100644 index 0000000000..c2214b504e --- /dev/null +++ b/packages/skin/dist/dialog/dialog.css @@ -0,0 +1,168 @@ +:root { + --dialog-scrim-color-hide: rgb(17 24 32 / 0); + --dialog-scrim-color-show: rgb(17 24 32 / 0.7); + --dialog-lightbox-max-width: 616px; +} +.dialog { + background-color: var(--color-background-primary); + border: none; + border-radius: var(--border-radius-150); + flex-direction: column; + max-height: 90%; + min-height: 55px; + min-width: 208px; + padding: 0; +} +.dialog__header { + display: flex; + flex-shrink: 0; + padding: var(--spacing-200) var(--spacing-200) 0; + position: relative; +} +.dialog__header h1, +.dialog__header h2, +.dialog__header h3, +.dialog__header h4, +.dialog__header h5, +.dialog__header h6 { + align-self: center; + flex: 1 1 auto; + margin: 0; + overflow-wrap: anywhere; +} +.dialog__header > :last-child:not(:only-child) { + margin-inline-start: var(--spacing-200); +} +.dialog__main { + box-sizing: border-box; + flex: 1 1 auto; + padding: var(--spacing-200); + position: relative; +} +.dialog__main > :first-child { + margin-top: 0; +} +.dialog__main > :last-child { + margin-bottom: 0; +} +.dialog__footer { + display: flex; + flex-direction: column; + justify-content: center; + padding: var(--spacing-200); + position: relative; +} +.dialog__footer > :not(:first-child) { + margin-top: var(--spacing-200); +} +.dialog[open] { + display: flex; +} +.dialog[open].dialog-close::backdrop { + animation: dialog-scrim var(--motion-duration-short-3) + var(--motion-easing-continuous) forwards; + animation-direction: reverse; +} +.dialog[open]::backdrop { + animation: dialog-scrim var(--motion-duration-short-3) + var(--motion-easing-continuous) forwards; +} +.dialog[open].dialog-close { + animation: + dialog-close-scale var(--motion-duration-medium-3) + var(--motion-easing-soft-exit), + dialog-close-opacity var(--motion-duration-short-3) + var(--motion-easing-continuous); + transition: + display var(--motion-duration-short-3) allow-discrete, + overlay var(--motion-duration-short-3) allow-discrete; +} +.dialog[open] { + animation: + dialog-open-scale var(--motion-duration-medium-3) + var(--motion-easing-standard), + dialog-open-opacity var(--motion-duration-short-3) + var(--motion-easing-continuous); +} +@keyframes dialog-scrim { + 0% { + background: transparent; + } + to { + background-color: rgba(17, 24, 32, 0.7); + } +} +@keyframes dialog-open-scale { + 0% { + scale: 0.75; + } + to { + scale: 1; + } +} +@keyframes dialog-close-scale { + 0% { + scale: 1; + } + to { + scale: 0.75; + } +} +@keyframes dialog-open-opacity { + 0% { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes dialog-close-opacity { + 0% { + opacity: 1; + } + to { + opacity: 0; + } +} +.dialog--large { + align-self: center; + height: 70%; + margin: var(--spacing-100); + max-height: 95%; +} +@media (min-width: 512px) { + .dialog { + border-radius: var(--lightbox-border-radius, var(--border-radius-100)); + max-width: 88%; + } + .dialog--narrow { + max-width: var(--dialog-lightbox-narrow-max-width); + } + .dialog__footer { + flex-direction: row; + justify-content: flex-end; + } + .dialog__footer > :not(:first-child) { + margin-left: var(--spacing-100); + margin-top: 0; + } +} +@media (min-width: 768px) { + .dialog { + max-width: var(--dialog-lightbox-max-width); + } + .dialog--wide { + max-width: 88%; + } + .dialog--wide .dialog__image { + height: 256px; + } + .dialog--wide.dialog--expressive .dialog__header > * { + margin-top: 256px; + } +} +@media (min-width: 1024px) { + .dialog--wide .dialog { + max-width: var(--dialog-lightbox-wide-max-width); + } +} diff --git a/packages/skin/index.mjs b/packages/skin/index.mjs index 82e60ae911..b18d789aa4 100644 --- a/packages/skin/index.mjs +++ b/packages/skin/index.mjs @@ -17,6 +17,7 @@ import './dist/confirm-dialog/confirm-dialog.css'; import './dist/cta-button/cta-button.css'; import './dist/date-textbox/date-textbox.css'; import './dist/details/details.css'; +import './dist/dialog/dialog.css'; import './dist/donut-chart/donut-chart.css'; import './dist/drawer-dialog/drawer-dialog.css'; import './dist/education-notice/education-notice.css'; diff --git a/packages/skin/src/sass/bundles/skin-headless.scss b/packages/skin/src/sass/bundles/skin-headless.scss index 928571d23c..fce0415a0d 100644 --- a/packages/skin/src/sass/bundles/skin-headless.scss +++ b/packages/skin/src/sass/bundles/skin-headless.scss @@ -21,6 +21,7 @@ @use "../cta-button/cta-button"; @use "../date-textbox/date-textbox"; @use "../details/details"; +@use "../dialog/dialog"; @use "../donut-chart/donut-chart"; @use "../drawer-dialog/drawer-dialog"; @use "../education-notice/education-notice"; diff --git a/packages/skin/src/sass/dialog/dialog.scss b/packages/skin/src/sass/dialog/dialog.scss new file mode 100644 index 0000000000..8d13cff15b --- /dev/null +++ b/packages/skin/src/sass/dialog/dialog.scss @@ -0,0 +1,188 @@ +@use "../variables/variables"; +@use "../mixins/private/dialog-mixins"; +@use "../mixins/private/token-mixins"; + +.dialog { + background-color: var(--color-background-primary); + border: none; + border-radius: var(--border-radius-150); + flex-direction: column; + max-height: 90%; + min-height: 55px; + min-width: 208px; + padding: 0; +} + +.dialog__header { + display: flex; + /* Fix for Safari not honoring min-height */ + flex-shrink: 0; + padding: var(--spacing-200) var(--spacing-200) 0; + position: relative; + + h1, + h2, + h3, + h4, + h5, + h6 { + align-self: center; + flex: 1 1 auto; + margin: 0; + overflow-wrap: anywhere; + } + + & > :last-child:not(:only-child) { + margin-inline-start: var(--spacing-200); + } +} + +.dialog__main { + box-sizing: border-box; + flex: 1 1 auto; + padding: var(--spacing-200); + position: relative; + + & > :first-child { + margin-top: 0; + } + + & > :last-child { + margin-bottom: 0; + } +} + +.dialog__footer { + display: flex; + flex-direction: column; + justify-content: center; + padding: var(--spacing-200); + position: relative; + + & > :not(:first-child) { + margin-top: var(--spacing-200); + } +} + +.dialog[open] { + display: flex; +} +.dialog[open].dialog-close::backdrop { + animation: dialog-scrim var(--motion-duration-short-3) + var(--motion-easing-continuous) forwards; + animation-direction: reverse; +} + +.dialog[open]::backdrop { + animation: dialog-scrim var(--motion-duration-short-3) + var(--motion-easing-continuous) forwards; +} + +.dialog[open].dialog-close { + animation: + dialog-close-scale var(--motion-duration-medium-3) + var(--motion-easing-soft-exit), + dialog-close-opacity var(--motion-duration-short-3) + var(--motion-easing-continuous); + transition: + display var(--motion-duration-short-3) allow-discrete, + overlay var(--motion-duration-short-3) allow-discrete; +} + +.dialog[open] { + animation: + dialog-open-scale var(--motion-duration-medium-3) + var(--motion-easing-standard), + dialog-open-opacity var(--motion-duration-short-3) + var(--motion-easing-continuous); +} + +@keyframes dialog-scrim { + from { + background: transparent; + } + to { + background-color: rgb(17 24 32 / 0.7); + } +} + +@keyframes dialog-open-scale { + from { + scale: 0.75; + } + to { + scale: 1; + } +} + +@keyframes dialog-close-scale { + from { + scale: 1; + } + to { + scale: 0.75; + } +} + +@keyframes dialog-open-opacity { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes dialog-close-opacity { + from { + opacity: 1; + } + to { + opacity: 0; + } +} + +.dialog--large { + align-self: center; + height: 70%; + margin: var(--spacing-100); + max-height: 95%; +} + +@media (min-width: 512px) { + .dialog { + border-radius: var(--lightbox-border-radius, var(--border-radius-100)); + max-width: 88%; + } + .dialog--narrow { + max-width: var(--dialog-lightbox-narrow-max-width); + } + .dialog__footer { + flex-direction: row; + justify-content: flex-end; + } + .dialog__footer > :not(:first-child) { + margin-left: var(--spacing-100); + margin-top: 0; + } +} + +@media (min-width: 768px) { + .dialog { + max-width: var(--dialog-lightbox-max-width); + } + .dialog--wide { + max-width: 88%; + } + .dialog--wide .dialog__image { + height: 256px; + } + .dialog--wide.dialog--expressive .dialog__header > * { + margin-top: 256px; + } +} +@media (min-width: 1024px) { + .dialog--wide .dialog { + max-width: var(--dialog-lightbox-wide-max-width); + } +} diff --git a/src/data/component-metadata.json b/src/data/component-metadata.json index 5c99ab1743..17cafa6b7c 100644 --- a/src/data/component-metadata.json +++ b/src/data/component-metadata.json @@ -222,6 +222,19 @@ "reactStorybookPath": "/docs/navigation-disclosure-ebay-details--documentation", "description": "A region of content that can be expanded and collapsed." }, + "dialog": { + "component": "dialog", + "ds-component": { + "name": "dialog", + "url": "https://playbook.ebay.com/design-system/components/dialog", + "version": "4.1" + }, + "submodules": ["button", "icon-button"], + "cssStorybookPath": "/story/skin-lightbox-dialog--base", + "markoStorybookPath": "/docs/dialogs-ebay-lightbox-dialog--documentation", + "reactStorybookPath": "/docs/dialogs-ebay-lightbox-dialog--documentation", + "description": "A modal, child window; renders the main window content inert." + }, "donut-chart": { "component": "donut-chart", "ds-component": { diff --git a/src/routes/_index/components/dialog/+meta.json b/src/routes/_index/components/dialog/+meta.json new file mode 100644 index 0000000000..3eca148498 --- /dev/null +++ b/src/routes/_index/components/dialog/+meta.json @@ -0,0 +1,4 @@ +{ + "pageTitle": "Dialog Component", + "pageDescription": "The Dialog component displays images and content in a modal overlay with zoom and navigation capabilities. Built with keyboard controls and screen reader support, it provides accessible media viewing experiences. Available in Evo Web's CSS, React, and Marko implementations." +} diff --git a/src/routes/_index/components/dialog/+page.marko b/src/routes/_index/components/dialog/+page.marko new file mode 100644 index 0000000000..2e7cbe2bed --- /dev/null +++ b/src/routes/_index/components/dialog/+page.marko @@ -0,0 +1,63 @@ + diff --git a/src/routes/_index/components/dialog/accessibility+meta.json b/src/routes/_index/components/dialog/accessibility+meta.json new file mode 100644 index 0000000000..a59d441d54 --- /dev/null +++ b/src/routes/_index/components/dialog/accessibility+meta.json @@ -0,0 +1,4 @@ +{ + "pageTitle": "Dialog Accessibility Guidelines — Building Inclusive Image Modals", + "pageDescription": "Learn how to make dialog components fully accessible with proper focus trapping, keyboard navigation, and ARIA dialog roles. Follow these WCAG-aligned guidelines to ensure image overlays work for all users with assistive technologies." +} diff --git a/src/routes/_index/components/dialog/accessibility+page.marko b/src/routes/_index/components/dialog/accessibility+page.marko new file mode 100644 index 0000000000..d35a121d9f --- /dev/null +++ b/src/routes/_index/components/dialog/accessibility+page.marko @@ -0,0 +1,193 @@ +import "../../../../sass/accessibility.scss"; +
+

Dialog Accessibility

+

Best Practices

+

A dialog is typically opened in one of two ways:

+
    +
  • + Click-activated + : explicitly opened and closed by clicking the button +
    • +
  • + System-activated + : automatically opened by the system/application on page load or at + some other arbitrary time +
    • +
+

+ Opening modal dialogs that are not requested by user (i.e. system-activated) + are a violation of + + WCAG Guideline 3.2.5 (Level AAA) + + and therefore should be reserved for exceptional circumstances only. +

+

+ Dialog + must not + be opened on hover or focus of button. +

+

+ Dialog + must + be opened on click-event of button or via an application event. +

+

+ Dialog + must + contain a dismiss button. +

+

+ Dialog + must + contain at least one interactive element (this can be the dismiss + button). +

+

+ Dialog + must + be clearly labelled by an onscreen heading/title +

+

+ Dialog + must + start heading hierarchy at level 2. +

+

Interaction Design

+

+ This section provides detailed instructions for how different input types + should navigate and operate the pattern. +

+

Keyboard

+

+ If dialog button has focus, + ENTER + or + SPACE + key + must + open lightbox dialog. +

+

+ When lightbox dialog opens, focus + must + move to the dismiss button. +

+

+ Dialog + must + confine + TAB + and + SHIFT-TAB + to focusable elements of child window. +

+

+ Pressing + ESC + key + must + close lightbox dialog (unless the currently focussed element has + existing + ESC + key behaviour) with no changes applied (effectively acting as a + “cancel”). +

+

+ Dialog button + must + receive focus when lightbox dialog is closed. +

+

Screen Reader

+

+ Dialog button + must not + announce ‘has popup’. A dialog is not considered a popup (i.e + aria-haspopup="true" + is not valid in this context). +

+

+ Focussed element + should + be announced when child window opens (via focus management). +

+

+ Title + must + be announced when lightbox dialog opens. +

+

+ Virtual cursor + must + be confined within child window. +

+

+ Assistive technology + might + announce “Entering/leaving dialog” (or words to those affect) when + focus enters or leaves the dialog respectively. +

+

Pointer

+

+ Clicking dialog button + must + open dialog. +

+

+ Clicking mask + must + dismiss dialog with no changes applied (effectively acting as + a “cancel”). +

+

ARIA Reference

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeDescription
+ role=dialog + + Informs the assistive technology that the user is inside of a dialog. +
+ aria-modal + Conveys that the dialog is modal
+ aria-labelledby + + Use onscreen text to name the dialog (typically an h2 heading + element). +
+ aria-label + + Explicitly name the dialog, if no suitable onscreen text exists. +
+ aria-hidden + + While the dialog is in an open state, aria-hidden is used to hide all + non-dialog elements from assistive technology. +
+
diff --git a/src/routes/_index/components/dialog/css+meta.json b/src/routes/_index/components/dialog/css+meta.json new file mode 100644 index 0000000000..ca6953fbef --- /dev/null +++ b/src/routes/_index/components/dialog/css+meta.json @@ -0,0 +1,4 @@ +{ + "pageTitle": "Dialog CSS Component", + "pageDescription": "A Dialog CSS Component is a responsive and accessible dialog that is used to display dialogs." +} diff --git a/src/routes/_index/components/dialog/css+page.marko b/src/routes/_index/components/dialog/css+page.marko new file mode 100644 index 0000000000..69510849a9 --- /dev/null +++ b/src/routes/_index/components/dialog/css+page.marko @@ -0,0 +1,150 @@ +import tbLandscapeImg from "/img/tb-landscape-pic.jpg"; +static const basePath = import.meta.env.BASE_URL; + + + +
+ + +
+
+ + +
+

+ Dialog +

+ +
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+

+ + www.ebay.com + +

+
+ +
+
+ + + + + + +
diff --git a/src/routes/_index/components/lightbox-dialog/+page.marko b/src/routes/_index/components/lightbox-dialog/+page.marko index 6274bea5cd..36634dcb7d 100644 --- a/src/routes/_index/components/lightbox-dialog/+page.marko +++ b/src/routes/_index/components/lightbox-dialog/+page.marko @@ -1,4 +1,4 @@ -