diff --git a/.changeset/sharp-keys-camp.md b/.changeset/sharp-keys-camp.md new file mode 100644 index 0000000000..86b2085fdc --- /dev/null +++ b/.changeset/sharp-keys-camp.md @@ -0,0 +1,5 @@ +--- +"@ebay/skin": minor +--- + +feat(dialog): added new component to use native dialog tag diff --git a/.marko-run/routes.d.ts b/.marko-run/routes.d.ts index b5b3a56e2a..0d4a722c21 100644 --- a/.marko-run/routes.d.ts +++ b/.marko-run/routes.d.ts @@ -119,6 +119,10 @@ 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/dialog/js": { verb: "get"; meta: typeof import("../src/routes/_index/components/dialog/js+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 +1529,50 @@ 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/dialog/js+page.marko" { + namespace MarkoRun { + export { NotHandled, NotMatched, GetPaths, PostPaths, GetablePath, GetableHref, PostablePath, PostableHref, Platform }; + export type Route = Run.Routes["/components/dialog/js"]; + 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 +3810,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/dialog/js" | "/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 +3834,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/dialog/js" | "/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..60840db0d4 --- /dev/null +++ b/packages/evo-marko/src/tags/evo-dialog/index.marko @@ -0,0 +1,35 @@ + + + + + + + \ No newline at end of file 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..f80a944680 --- /dev/null +++ b/packages/skin/dist/dialog/dialog.css @@ -0,0 +1,212 @@ +: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-max-width: 616px; + --dialog-wide-max-width: 896px; + --dialog-narrow-max-width: 480px; + --dialog-scrim-color: rgb(17 24 32 / 0.7); + scrollbar-gutter: stable; +} +@keyframes dialog-open-scrim { + 0% { + background: transparent; + } + to { + background-color: var(--dialog-scrim-color); + } +} +@keyframes dialog-close-scrim { + 0% { + background-color: var(--dialog-scrim-color); + } + to { + background: transparent; + } +} +@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; + } +} +body:has(.dialog[open]) { + overflow: hidden !important; +} +.dialog { + background-color: var(--color-background-primary); + border: none; + border-radius: var(--border-radius-150); + color: var(--color-foreground-primary); + flex-direction: column; + max-height: 90%; + max-width: 88%; + 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) { + flex-shrink: 0; + margin-inline-start: var(--spacing-200); +} +.dialog__main { + box-sizing: border-box; + flex: 1 1 auto; + overflow: 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__image { + background-position: 50%; + background-repeat: no-repeat; + background-size: cover; + border-radius: var(--border-radius-100) var(--border-radius-100) 0 0; + height: 218px; + position: absolute; + width: 100%; +} +.dialog--expressive .dialog__header > * { + margin-top: 218px; +} +button.icon-btn.dialog__prev { + margin-inline-end: var(--spacing-200); +} +.dialog[open] { + display: flex; +} +.dialog[open].dialog--close::backdrop { + animation: dialog-close-scrim var(--motion-duration-short-3) + var(--motion-easing-continuous) forwards; +} +.dialog[open]::backdrop { + animation: dialog-open-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); +} +.dialog--large { + height: 98%; + max-height: 98%; + width: 95%; +} +@media (min-width: 512px) { + .dialog { + border-radius: var(--border-radius-100); + } + .dialog--wide { + max-width: 88%; + } + .dialog--wide .dialog__image { + height: 256px; + } + .dialog--wide.dialog--expressive .dialog__header > * { + margin-top: 256px; + } + .dialog__footer { + flex-direction: row; + justify-content: flex-end; + } + .dialog__footer > :not(:first-child) { + margin-left: var(--spacing-100); + margin-top: 0; + } + .dialog--large { + align-self: center; + height: 70%; + max-height: 95%; + } +} +@media (min-width: 768px) { + .dialog { + max-width: var(--dialog-max-width); + } + .dialog--narrow { + max-width: var(--dialog-narrow-max-width); + } + .dialog--wide { + max-width: var(--dialog-wide-max-width); + max-width: 88%; + } +} +@media (min-width: 1024px) { + .dialog--wide { + max-width: var(--dialog-wide-max-width); + } +} +[dir="rtl"] button.icon-btn.dialog__prev .icon--16 { + transform: rotate(180deg); +} 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..ced97b7024 --- /dev/null +++ b/packages/skin/src/sass/dialog/dialog.scss @@ -0,0 +1,252 @@ +@use "../variables/variables"; +@use "../mixins/private/dialog-mixins"; +@use "../mixins/private/token-mixins"; + +:root { + --dialog-max-width: 616px; + --dialog-wide-max-width: 896px; + --dialog-narrow-max-width: 480px; + --dialog-scrim-color: rgb(17 24 32 / 0.7); + + // This prevents layout shift in modern browsers + scrollbar-gutter: stable; +} + +@keyframes dialog-open-scrim { + from { + background: transparent; + } + to { + background-color: var(--dialog-scrim-color); + } +} + +@keyframes dialog-close-scrim { + from { + background-color: var(--dialog-scrim-color); + } + to { + background: transparent; + } +} + +@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; + } +} + +// This is to prevent parent page from scrolling when dialog is open +body:has(.dialog[open]) { + overflow: hidden !important; +} + +.dialog { + background-color: var(--color-background-primary); + border: none; + border-radius: var(--border-radius-150); + color: var(--color-foreground-primary); + flex-direction: column; + max-height: 90%; + max-width: 88%; + 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; + + h1, + h2, + h3, + h4, + h5, + h6 { + align-self: center; + flex: 1 1 auto; + margin: 0; + overflow-wrap: anywhere; + } + + & > :last-child:not(:only-child) { + flex-shrink: 0; + margin-inline-start: var(--spacing-200); + } +} + +.dialog__main { + box-sizing: border-box; + flex: 1 1 auto; + overflow: 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__image { + background-position: center; + background-repeat: no-repeat; + background-size: cover; + border-radius: var(--border-radius-100) var(--border-radius-100) 0 0; + height: 218px; + position: absolute; + width: 100%; +} + +.dialog--expressive .dialog__header > * { + margin-top: 218px; +} + +button.icon-btn.dialog__prev { + margin-inline-end: var(--spacing-200); +} + +.dialog[open] { + display: flex; +} +.dialog[open].dialog--close::backdrop { + animation: dialog-close-scrim var(--motion-duration-short-3) + var(--motion-easing-continuous) forwards; +} + +.dialog[open]::backdrop { + animation: dialog-open-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); +} + +.dialog--large { + height: 98%; + max-height: 98%; + width: 95%; +} + +@media (min-width: variables.$screen-size-SM) { + .dialog { + border-radius: var(--border-radius-100); + } + + .dialog--wide { + max-width: 88%; + } + + .dialog--wide .dialog__image { + height: 256px; + } + + .dialog--wide.dialog--expressive .dialog__header > * { + margin-top: 256px; + } + + .dialog__footer { + flex-direction: row; + justify-content: flex-end; + } + .dialog__footer > :not(:first-child) { + margin-left: var(--spacing-100); + margin-top: 0; + } + + .dialog--large { + align-self: center; + height: 70%; + max-height: 95%; + } +} +@media (min-width: variables.$screen-size-MD) { + .dialog { + max-width: var(--dialog-max-width); + } + + .dialog--narrow { + max-width: var(--dialog-narrow-max-width); + } + + .dialog--wide { + max-width: var(--dialog-wide-max-width); + max-width: 88%; + } +} + +@media (min-width: variables.$screen-size-LG) { + .dialog--wide { + max-width: var(--dialog-wide-max-width); + } +} + +[dir="rtl"] { + button.icon-btn.dialog__prev .icon--16 { + transform: rotate(180deg); + } +} diff --git a/packages/skin/src/sass/dialog/stories/dialog.stories.js b/packages/skin/src/sass/dialog/stories/dialog.stories.js new file mode 100644 index 0000000000..b30a49f6d0 --- /dev/null +++ b/packages/skin/src/sass/dialog/stories/dialog.stories.js @@ -0,0 +1,530 @@ +export default { title: "Skin/Dialog" }; + +export const base = () => ` + + +
+

Dialog

+ +
+
+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+
+ +`; + +export const expressiveBase = () => ` + + +
+
+

Dialog

+ +
+
+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+
+ +`; + +export const basePrev = () => ` + + +
+ +

Dialog

+ +
+
+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+
+ +`; + +export const scrollingLightbox = () => ` + + +
+

Dialog

+ +
+
+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+
+ +`; + +export const expandedLightbox = () => ` + + +
+

Dialog

+ +
+
+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+
+ +`; + +export const expressiveScrolling = () => ` + + +
+
+

Dialog

+ +
+
+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+
+ +`; + +export const baseWithFooter = () => ` + + +
+

Dialog

+ +
+
+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+
+
+ + +
+ + +`; + +export const baseRTL = () => ` +
+ + +
+

Dialog

+ +
+
+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+
+ +`; + +export const prevRTL = () => ` +
+ + +
+ +

Dialog

+ +
+
+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+
+ +`; + +export const baseWithLongHeader = () => ` + + +
+

Dialog with a very long header that should wrap to the next line, but is actually cut off

+ +
+
+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+
+ +`; + +export const wide = () => ` + + +
+

Dialog

+ +
+
+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+
+ +`; + +export const narrow = () => ` + + +
+

Dialog

+ +
+
+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+
+ +`; + +export const large = () => ` + + +
+

Dialog

+ +
+
+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+
+ +`; + +export const expressiveWide = () => ` + + +
+
+

Dialog

+ +
+
+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+
+ +`; + +export const expressivePrev = () => ` + + +
+
+ +

Dialog

+ +
+
+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+
+ +`; + +export const textSpacing = () => ` + + +
+

Dialog

+ +
+
+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+
+ +`; + +export const baseWithHeaderOverflow = () => ` + + +
+

Dialog with a title that is so long it wraps across multiple lines. No dialog header should ever be this long.

+ +
+
+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+

Heading

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.

+

www.ebay.com

+
+ +`; diff --git a/public/img/components/dialog.png b/public/img/components/dialog.png new file mode 100644 index 0000000000..bf4790cdb4 Binary files /dev/null and b/public/img/components/dialog.png differ diff --git a/src/data/component-metadata.json b/src/data/component-metadata.json index 5c99ab1743..ae941aa109 100644 --- a/src/data/component-metadata.json +++ b/src/data/component-metadata.json @@ -222,6 +222,16 @@ "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"], + "description": "A modal, child window; renders the main window content inert." + }, "donut-chart": { "component": "donut-chart", "ds-component": { diff --git a/src/data/components.ts b/src/data/components.ts index 816a1ec20b..0a7cefb3b3 100644 --- a/src/data/components.ts +++ b/src/data/components.ts @@ -18,6 +18,12 @@ export const cssTemplate = import.meta.glob( { eager: true }, ); +export const jsTemplate = import.meta.glob( + "../routes/_index/components/*/js+page.marko", + { eager: true }, +); + + export const a11yTemplate = import.meta.glob( "../routes/_index/components/*/accessibility+page.marko", { eager: true }, @@ -32,12 +38,14 @@ export interface ComponentMap { pageImg?: string; a11yPage: boolean; cssPage?: boolean; + jsPage?: boolean; metadata?: ComponentMetadata; dsComponent?: DsComponent; componentUrls: { overview: string; accessibility: string; css: string; + js: string; marko?: string; react?: string; dsUrl?: string; @@ -61,6 +69,16 @@ export const cssPages = Object.keys(cssTemplate).reduce>( new Set(), ); +export const jsPages = Object.keys(jsTemplate).reduce>( + (data, filePath) => { + data.add(getRawName(filePath)); + return data; + }, + new Set(), +); + + + /** * List of all components. This takes all components and creates a url lookup for them */ @@ -81,6 +99,7 @@ export const components = Object.keys(componentTemplate).reduce( dsComponent, a11yPage: a11yPages.has(name), cssPage: cssPages.has(name), + jsPage: jsPages.has(name), componentUrls: getComponentUrls(name, metadata, dsComponent), }; @@ -151,6 +170,7 @@ function getComponentUrls( overview: `${componentUrl}`, accessibility: `${componentUrl}/accessibility`, css: `${componentUrl}/css`, + js: `${componentUrl}/js`, marko: (metadata?.markoStorybookPath ?? false) ? `${basePath}ebayui-core/?path=${metadata?.markoStorybookPath}` 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..cfba94c0ae --- /dev/null +++ b/src/routes/_index/components/dialog/+page.marko @@ -0,0 +1,74 @@ +
+ + +

+ In traditional desktop operating systems, a dialog is a + child-window that typically exists to communicate information to the user, + display a prompt for input, or allow the user to verify or cancel an action. +

+ +

+ Whilst these specific cases are also valid and true on the web, we also see + a wide variety of other custom uses. For example, a dialog itself might + contain an entire full page-like experience, a video, image gallery, + navigation or settings. +

+ +

+ There are various ways to visually present a dialog. + A dialog that visibly dims out the rest of the page + while the dialog is open is a modal type dialog. +

+ +

+ The dialog is fully responsive. +

+ +

Terminology

+

We use the following terminology when discussing this pattern.

+
    +
  • + dialog + : the pattern as a whole, comprised of the following sub parts +
    • +
  • + parent window + : the page containing the button that opens the dialog +
    • +
  • + dialog button + : the button that opens the child window +
    • +
  • + child window + : the overlay containing the dialog content +
    • +
  • + title + : the title of the child window +
    • +
  • + modality + : modal or non-modal, dialogs with a mask are always modal +
    • +
  • + mask + : CSS effect that visibly dims out the parent window content +
    • +
  • + dismiss button + : button that dismisses and hides the lightbox +
    • +
+ +

HTML Dialog Attributes

+

+ Modern browsers support the native <dialog> element along with + related HTML attributes such as the Invoker Commands API (e.g., commandfor, + command). While these attributes provide enhanced functionality for dialog + management, most are not yet widely supported across all browsers. + Due to limited browser availability, we cannot rely on these newer attributes in our + components at this time. We continue to use JavaScript-based approaches to ensure + consistent behavior across all supported browsers. +

+
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..8fc66a33d6 --- /dev/null +++ b/src/routes/_index/components/dialog/accessibility+meta.json @@ -0,0 +1,4 @@ +{ + "pageTitle": "Dialog Accessibility Guidelines — Building Native HTML Dialogs", + "pageDescription": "Learn how to make dialog components fully accessible using the native HTML element with proper focus trapping, keyboard navigation, and ARIA roles. Follow these WCAG-aligned guidelines to ensure dialogs 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..a3de6b78a3 --- /dev/null +++ b/src/routes/_index/components/dialog/accessibility+page.marko @@ -0,0 +1,172 @@ +import "../../../../sass/accessibility.scss"; +
+

Dialog Accessibility

+

Best Practices

+ +

A dialog should use a native HTML ${"

"} element.

+

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 the dialog. +

+

+ When the 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 the 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 the 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 the 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
+ 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. +
+
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..c9fa54b3cf --- /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 child window used to communicate information to the user" +} 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..b09b4a5ba4 --- /dev/null +++ b/src/routes/_index/components/dialog/css+page.marko @@ -0,0 +1,668 @@ +import tbLandscapeImg from "/img/tb-landscape-pic.jpg"; +
+ +

Dialog base element

+

+ ${" "}The dialog element uses the native html ${"

"} element in order + to satisfy all the accessibility requirements.${" "} +

+

This element is styled to look like a custom inplementation.${" "}

+ +
+
+ + +
+

+ 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 + +

+
+ +
+
+ + + + +
+

+ 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 + +

+
+ + + +

+ Previous button in header Dialog +

+

+ If you want to add a previous button to the dialog, add the icon button + before the dialog heading tag. +

+ +
+
+ + +
+ +

+ 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 + +

+
+ +
+
+ + + +
+ +

+ Heading +

+ +
+
+

+ 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 + +

+
+ + + +

+ Wide Dialog +

+

+ To have a wider dialog add${" "} + dialog--wide + ${" "}to the dialog +

+

+ On small screens, a wide dialog will span almost the entire screen. This is + the suggeested replacement for fullscreen dialog +

+ +
+
+ + +
+
+ + + +
+ +

+ Heading +

+ +
+
+

+ 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 + +

+
+ + + +

+ Narrow Dialog +

+

+ To have a thinner dialog add${" "} + dialog--narrow + ${" "}to the dialog +

+ +
+
+ + +
+

+ 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 + +

+
+ +
+
+ + + +
+

+ Heading +

+ +
+
+

+ 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 + +

+
+ + + +

+ Large Dialog +

+

+ To have a large dialog add${" "} + dialog--large + ${" "}to the dialog +

+

+ On small screens, a large dialog will span almost the entire screen. This is + the suggeested replacement for fullscreen dialog +

+ +
+
+ + +
+

+ 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 + +

+
+ +
+
+ + + +
+

+ Heading +

+ +
+
+

+ 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 + +

+
+ + + + +

+ Call to action buttons can be placed in an optional footer section. They + will be aligned to the end of the horizontal axis by default. +

+ +
+
+ + +
+

+ 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. +

+
+
+ + + +
+ +
+
+ + + +
+

+ Heading +

+ +
+
+

+ 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. +

+
+
+ + + +
+ + + +

+ Expressive Dialog +

+

+ An image may be added to the dialog header for a more expressive experience. + Image will be cropped to a hardcoded height as per design standards. +

+ +
+
+ + +
+
+

+ 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 + +

+
+
+
+
+ + + +
+
+

+ Heading +

+ +
+
+

+ 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/dialog/dialog.ts b/src/routes/_index/components/dialog/dialog.ts new file mode 100644 index 0000000000..39b31c4be0 --- /dev/null +++ b/src/routes/_index/components/dialog/dialog.ts @@ -0,0 +1,39 @@ +function closeDialog(dialog: HTMLDialogElement) { + dialog.classList.add("dialog--close"); + dialog.addEventListener( + "animationend", + () => { + dialog.close(); + dialog.classList.remove("dialog--close"); + }, + { + once: true, + }, + ); +} + +// Find all dialog elements +for (const dialog of document.querySelectorAll(".dialog")) { + // Clicking mask + dialog.addEventListener("click", (e) => { + if (e.target === dialog) { + closeDialog(dialog as HTMLDialogElement); + } + }); + dialog.addEventListener("cancel", (event) => { + event.preventDefault(); + closeDialog(dialog as HTMLDialogElement); + }); + + // Close button + dialog.querySelector(".dialog__close")?.addEventListener("click", (e) => { + closeDialog(dialog as HTMLDialogElement); + }); + + // Open button + if (dialog.previousElementSibling?.tagName === "BUTTON") { + dialog.previousElementSibling.addEventListener("click", (e) => { + (dialog as HTMLDialogElement).showModal(); + }); + } +} diff --git a/src/routes/_index/components/dialog/js+meta.json b/src/routes/_index/components/dialog/js+meta.json new file mode 100644 index 0000000000..3b424f0819 --- /dev/null +++ b/src/routes/_index/components/dialog/js+meta.json @@ -0,0 +1,4 @@ +{ + "pageTitle": "Dialog Javascript Interactions", + "pageDescription": "A Dialog can be accessed using native Javascript interactions" +} diff --git a/src/routes/_index/components/dialog/js+page.marko b/src/routes/_index/components/dialog/js+page.marko new file mode 100644 index 0000000000..7127846c24 --- /dev/null +++ b/src/routes/_index/components/dialog/js+page.marko @@ -0,0 +1,137 @@ +import tbLandscapeImg from "/img/tb-landscape-pic.jpg"; +client import "./dialog"; + +
+ +

Dialog base interactions

+

+ ${" "}The dialog element uses the native html ${"

"} element as well + as built in Javascript interactions +

+

+ To open the dialog use${" "} + dialog.showModal() +

+ +
+
+ + +
+

+ 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 + +

+
+ +
+
+ { + dialog.showModal(); + }); +`/> +

Dialog closing

+

+ A dialog should close on clicking the mask. Dialog supports the${" "} + closedBy + ${" "}attribute which can close the dialog when clicking the mask.${" "} +

+

+ Due to not having full cross browser support, a better way to close a dialog + by clicking the mask is to add a click event handler to the dialog itself. + To detect if the click was clicked on the backdrop you can check if the + click target was on the dialog element itself. +

+ + { + if (e.target === dialog) { + // Trigger close + } + }); + `/> + +

+ Dialog closing Animations +

+

+ ${" "}All dialog animations for opening the dialog should work out of the + box when calling${" "} + dialog.showModal() +

+

+ ${" "}For closing the dialog, add${" "} + dialog--close + ${" "}class to the dialog before calling${" "} + dialog.close() + ${" "}. Once that animation ends, you can call${" "} + dialog.close() + ${" "}and remove the${" "} + dialog--close +

+

+ ${" "}A typical code workflow would be to do the following code segmenet + when closing a dialog +

+ { + dialog.close(); + dialog.classList.remove("dialog--close"); + }, + { + once: true, + }, + ); + `/> +

Dialog keyboard ESCAPE

+

+ ${" "}A dialog should close when hitting the escape key. The issue is the + dialog will close immediatly without any animation to trigger. +

+

+ To resolve this, adding${" "} + preventDefault() + ${" "}when escape is pressed and then triggering the code to close the + dialog by adding the animation classes is the right way to approach this. +

+
diff --git a/src/tags/component-tabs/index.marko b/src/tags/component-tabs/index.marko index 7f9c64f1e5..93681e80a7 100644 --- a/src/tags/component-tabs/index.marko +++ b/src/tags/component-tabs/index.marko @@ -11,6 +11,7 @@ export interface Input { componentUrls, a11yPage, cssPage, + jsPage, next, prev, }=getMetadataFromUrl($global.url.pathname)> @@ -56,6 +57,14 @@ export interface Input { + +
  • + + Javascript${" "} + +
    • + +