Change Details

== Background/Goal ProcessDialog needs to be added in Codex in order to cover some real use cases: =====1. Edit and publish your changes in [[ https://www.mediawiki.org/wiki/Project:Sandbox?useskin=vector-2022 | MediaWiki ]] | {F35471010} | {F35471014} | {F35471011} | | Default | Publish changes (loading) | Error | | {F35471020} | {F35471021} | {F35471022} | {F35471032} | | Save your changes | Review your changes (visual editor) | Review your changes (Wikitext) | Publish changes (loading) == Design spec | Design spec will be added here | === Anatomy Process Dialog will be built with the `Dialog component` created in T284838 and it could include: - An optional header that can contain: - Title - Close button - Back button - Loading - Dialog body (with content that may vary) - It may be scrollable - Dividers could be used to separate the header, body and footer. - An optional footer that can contain up to 3 buttons (one of these buttons will be primary) {F35471051} === Style The initial component will present the same styles from the `Dialog component`: - Size: the dialog width can vary according to the need of each case and the body content within the dialog. - Dialog frame will have a box-shadow to emphasize its placement over other content - Below the frame, a background blur effect will be created over the rest of the UI with a semi-transparent white background-color - Action buttons can either be horizontal and aligned to the end of the dialog, or stacked and 100% width === Interaction The Process Dialog will follow the same interactions specified in the `Dialog component`: - The dialog can be closed via the close button, a "safe" action, the esc button, or clicking on the background below the frame - Transitions should be applied to the Dialog on open and close - Focus will be placed on the first focusable element in the Dialog when it's opened, then back to the previous location when it's closed - Users can tab through focusable elements of the Dialog in a loop - Body content will have overflow-y hidden via scroll when the max-height is exceeded - Content behind the open dialog cannot scroll === Considerations - //Optionally include any other information important to clarifying the scope, other related tasks that should be created, etc.// === Documentation - Structure: For now, the Dialog will have its own top-level page on the docs site - Content: - A configurable demo where the controls live inside the Dialog so that changes can be seen immediately - A basic example - An example of a component with different content (eg. body + selects) placed inside a dialog - An example with a lot of content to demonstrate the scroll behavior - Header: - An example with close button - An example with back button - An example with loading - Footer: - An example with footer - An example without footer (since the footer is optional) - An example with 2 or 3 buttons - An example with stacked action buttons --- === Acceptance criteria This task will pass from the designer to the developer once the Figma spec is created. [] A Figma spec sheet is created for the component that includes the scope defined here. A link to the Figma spec sheet's version has been added to this task's description. [] The component is implemented in Codex.

== Background/Goal ProcessDialog needs to be added in Codex in order to cover some real use cases: =====1. Edit and publish your changes in [[ https://www.mediawiki.org/wiki/Project:Sandbox?useskin=vector-2022 | MediaWiki ]] | {F35471020} | {F35471021} | {F35471022} | {F35471032} | | Step 1 | Step 2 (visual editor) | Step 2 (Wikitext) | Step 3: Publishing changes (loading) == Design spec | Design spec will be added here | === Anatomy Process Dialog will be built with the `Dialog component` created in T284838 and it could include: - An optional header that can contain: - Title - Close button - Back button - Loading - Dialog body (with content that may vary) - It may be scrollable - Dividers could be used to separate the header, body and footer. - An optional footer that can contain up to 3 buttons (one of these buttons will be primary) {F35471051} === Style The initial component will present the same styles from the `Dialog component`: - Size: the dialog width can vary according to the need of each case and the body content within the dialog. - Dialog frame will have a box-shadow to emphasize its placement over other content - Below the frame, a background blur effect will be created over the rest of the UI with a semi-transparent white background-color - Action buttons can either be horizontal and aligned to the end of the dialog, or stacked and 100% width === Interaction The Process Dialog will follow the same interactions specified in the `Dialog component`: - The dialog can be closed via the close button, a "safe" action, the esc button, or clicking on the background below the frame - Transitions should be applied to the Dialog on open and close - Focus will be placed on the first focusable element in the Dialog when it's opened, then back to the previous location when it's closed - Users can tab through focusable elements of the Dialog in a loop - Body content will have overflow-y hidden via scroll when the max-height is exceeded - Content behind the open dialog cannot scroll === Considerations - //Optionally include any other information important to clarifying the scope, other related tasks that should be created, etc.// === Documentation - Structure: For now, the Dialog will have its own top-level page on the docs site - Content: - A configurable demo where the controls live inside the Dialog so that changes can be seen immediately - A basic example - An example of a component with different content (eg. body + selects) placed inside a dialog - An example with a lot of content to demonstrate the scroll behavior - Header: - An example with close button - An example with back button - An example with loading - Footer: - An example with footer - An example without footer (since the footer is optional) - An example with 2 or 3 buttons - An example with stacked action buttons --- === Acceptance criteria This task will pass from the designer to the developer once the Figma spec is created. [] A Figma spec sheet is created for the component that includes the scope defined here. A link to the Figma spec sheet's version has been added to this task's description. [] The component is implemented in Codex.

== Background/Goal ProcessDialog needs to be added in Codex in order to cover some real use cases: =====1. Edit and publish your changes in [[ https://www.mediawiki.org/wiki/Project:Sandbox?useskin=vector-2022 | MediaWiki ]] | {F35471010} | {F35471014} | {F35471011} | | Default | Publish changes (loading) | Error | | {F35471020} | {F35471021} | {F35471022} | {F35471032} | | Save your changes | Review your changes| Step 1 | Step 2 (visual editor) | Review your changesStep 2 (Wikitext) | Step 3: Publishing changes (loading) == Design spec | Design spec will be added here | === Anatomy Process Dialog will be built with the `Dialog component` created in T284838 and it could include: - An optional header that can contain: - Title - Close button - Back button - Loading - Dialog body (with content that may vary) - It may be scrollable - Dividers could be used to separate the header, body and footer. - An optional footer that can contain up to 3 buttons (one of these buttons will be primary) {F35471051} === Style The initial component will present the same styles from the `Dialog component`: - Size: the dialog width can vary according to the need of each case and the body content within the dialog. - Dialog frame will have a box-shadow to emphasize its placement over other content - Below the frame, a background blur effect will be created over the rest of the UI with a semi-transparent white background-color - Action buttons can either be horizontal and aligned to the end of the dialog, or stacked and 100% width === Interaction The Process Dialog will follow the same interactions specified in the `Dialog component`: - The dialog can be closed via the close button, a "safe" action, the esc button, or clicking on the background below the frame - Transitions should be applied to the Dialog on open and close - Focus will be placed on the first focusable element in the Dialog when it's opened, then back to the previous location when it's closed - Users can tab through focusable elements of the Dialog in a loop - Body content will have overflow-y hidden via scroll when the max-height is exceeded - Content behind the open dialog cannot scroll === Considerations - //Optionally include any other information important to clarifying the scope, other related tasks that should be created, etc.// === Documentation - Structure: For now, the Dialog will have its own top-level page on the docs site - Content: - A configurable demo where the controls live inside the Dialog so that changes can be seen immediately - A basic example - An example of a component with different content (eg. body + selects) placed inside a dialog - An example with a lot of content to demonstrate the scroll behavior - Header: - An example with close button - An example with back button - An example with loading - Footer: - An example with footer - An example without footer (since the footer is optional) - An example with 2 or 3 buttons - An example with stacked action buttons --- === Acceptance criteria This task will pass from the designer to the developer once the Figma spec is created. [] A Figma spec sheet is created for the component that includes the scope defined here. A link to the Figma spec sheet's version has been added to this task's description. [] The component is implemented in Codex.