forked from mattermost/mattermost-webapp
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[MM-24708] Added What's New modal for Channel Sidebar Phase 2 changes (…
…mattermost#5883) * Genericized new modal design into component * Architecture and functionality for What's New modal * Added tests for generic modal and lint/type fixes * Styling of what's new modal * Update redux to use new constants * Removed debug code * PR feedback * Bug fix and moved to ModalController * Use React.ReactNode instead of string | JSX.Element * Address feedback * Add example gif * Remove fixed height on What's New image and fix modal size on mobile Co-authored-by: Harrison Healey <[email protected]>
- Loading branch information
1 parent
ca0ebbd
commit 0ded2cf
Showing
16 changed files
with
790 additions
and
275 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,220 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`components/GenericModal should match snapshot for base case 1`] = ` | ||
<Modal | ||
animation={true} | ||
aria-labelledby="genericModalLabel" | ||
autoFocus={true} | ||
backdrop={true} | ||
bsClass="modal" | ||
dialogClassName="a11y__modal GenericModal" | ||
dialogComponentClass={[Function]} | ||
enforceFocus={true} | ||
keyboard={true} | ||
manager={ | ||
ModalManager { | ||
"add": [Function], | ||
"containers": Array [], | ||
"data": Array [], | ||
"handleContainerOverflow": true, | ||
"hideSiblingNodes": true, | ||
"isTopModal": [Function], | ||
"modals": Array [], | ||
"remove": [Function], | ||
} | ||
} | ||
onExited={[Function]} | ||
onHide={[Function]} | ||
renderBackdrop={[Function]} | ||
restoreFocus={true} | ||
role="dialog" | ||
show={true} | ||
> | ||
<ModalHeader | ||
bsClass="modal-header" | ||
closeButton={true} | ||
closeLabel="Close" | ||
/> | ||
<form> | ||
<ModalBody | ||
bsClass="modal-body" | ||
componentClass="div" | ||
> | ||
<div | ||
className="GenericModal__header" | ||
> | ||
<h1 | ||
id="genericModalLabel" | ||
> | ||
Modal Header Text | ||
</h1> | ||
</div> | ||
<div | ||
className="GenericModal__body" | ||
/> | ||
</ModalBody> | ||
<ModalFooter | ||
bsClass="modal-footer" | ||
componentClass="div" | ||
/> | ||
</form> | ||
</Modal> | ||
`; | ||
|
||
exports[`components/GenericModal should match snapshot with both buttons 1`] = ` | ||
<Modal | ||
animation={true} | ||
aria-labelledby="genericModalLabel" | ||
autoFocus={true} | ||
backdrop={true} | ||
bsClass="modal" | ||
dialogClassName="a11y__modal GenericModal" | ||
dialogComponentClass={[Function]} | ||
enforceFocus={true} | ||
keyboard={true} | ||
manager={ | ||
ModalManager { | ||
"add": [Function], | ||
"containers": Array [], | ||
"data": Array [], | ||
"handleContainerOverflow": true, | ||
"hideSiblingNodes": true, | ||
"isTopModal": [Function], | ||
"modals": Array [], | ||
"remove": [Function], | ||
} | ||
} | ||
onExited={[Function]} | ||
onHide={[Function]} | ||
renderBackdrop={[Function]} | ||
restoreFocus={true} | ||
role="dialog" | ||
show={true} | ||
> | ||
<ModalHeader | ||
bsClass="modal-header" | ||
closeButton={true} | ||
closeLabel="Close" | ||
/> | ||
<form> | ||
<ModalBody | ||
bsClass="modal-body" | ||
componentClass="div" | ||
> | ||
<div | ||
className="GenericModal__header" | ||
> | ||
<h1 | ||
id="genericModalLabel" | ||
> | ||
Modal Header Text | ||
</h1> | ||
</div> | ||
<div | ||
className="GenericModal__body" | ||
/> | ||
</ModalBody> | ||
<ModalFooter | ||
bsClass="modal-footer" | ||
componentClass="div" | ||
> | ||
<button | ||
className="GenericModal__button cancel" | ||
onClick={[Function]} | ||
type="button" | ||
> | ||
<FormattedMessage | ||
defaultMessage="Cancel" | ||
id="generic_modal.cancel" | ||
values={Object {}} | ||
/> | ||
</button> | ||
<button | ||
className="GenericModal__button confirm undefined" | ||
onClick={[Function]} | ||
type="submit" | ||
> | ||
<FormattedMessage | ||
defaultMessage="Confirm" | ||
id="generic_modal.confirm" | ||
values={Object {}} | ||
/> | ||
</button> | ||
</ModalFooter> | ||
</form> | ||
</Modal> | ||
`; | ||
|
||
exports[`components/GenericModal should match snapshot with disabled confirm button 1`] = ` | ||
<Modal | ||
animation={true} | ||
aria-labelledby="genericModalLabel" | ||
autoFocus={true} | ||
backdrop={true} | ||
bsClass="modal" | ||
dialogClassName="a11y__modal GenericModal" | ||
dialogComponentClass={[Function]} | ||
enforceFocus={true} | ||
keyboard={true} | ||
manager={ | ||
ModalManager { | ||
"add": [Function], | ||
"containers": Array [], | ||
"data": Array [], | ||
"handleContainerOverflow": true, | ||
"hideSiblingNodes": true, | ||
"isTopModal": [Function], | ||
"modals": Array [], | ||
"remove": [Function], | ||
} | ||
} | ||
onExited={[Function]} | ||
onHide={[Function]} | ||
renderBackdrop={[Function]} | ||
restoreFocus={true} | ||
role="dialog" | ||
show={true} | ||
> | ||
<ModalHeader | ||
bsClass="modal-header" | ||
closeButton={true} | ||
closeLabel="Close" | ||
/> | ||
<form> | ||
<ModalBody | ||
bsClass="modal-body" | ||
componentClass="div" | ||
> | ||
<div | ||
className="GenericModal__header" | ||
> | ||
<h1 | ||
id="genericModalLabel" | ||
> | ||
Modal Header Text | ||
</h1> | ||
</div> | ||
<div | ||
className="GenericModal__body" | ||
/> | ||
</ModalBody> | ||
<ModalFooter | ||
bsClass="modal-footer" | ||
componentClass="div" | ||
> | ||
<button | ||
className="GenericModal__button confirm undefined disabled" | ||
disabled={true} | ||
onClick={[Function]} | ||
type="submit" | ||
> | ||
<FormattedMessage | ||
defaultMessage="Confirm" | ||
id="generic_modal.confirm" | ||
values={Object {}} | ||
/> | ||
</button> | ||
</ModalFooter> | ||
</form> | ||
</Modal> | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,140 +1,15 @@ | ||
@charset 'UTF-8'; | ||
|
||
.modal { | ||
.edit-category { | ||
&.modal-dialog { | ||
margin-top: calc(50vh - 240px); | ||
} | ||
|
||
.modal-body { | ||
max-height: 100%; | ||
padding: 0; | ||
|
||
.form-control { | ||
border: 2px solid var(--button-bg); | ||
box-sizing: border-box; | ||
border-radius: 4px; | ||
height: 40px; | ||
} | ||
|
||
.input-clear { | ||
font-style: normal; | ||
font-weight: normal; | ||
font-size: 18px; | ||
line-height: 16px; | ||
color: var(--center-channel-color); | ||
opacity: 0.48; | ||
right: 36px; | ||
top: 11px; | ||
width: 16px; | ||
height: 16px; | ||
} | ||
} | ||
|
||
.modal-content { | ||
border-radius: 8px; | ||
} | ||
|
||
.modal-header { | ||
background: transparent; | ||
border: none; | ||
min-height: 0; | ||
padding: 0; | ||
|
||
.close { | ||
color: var(--center-channel-color-56); | ||
width: 4rem; | ||
height: 4rem; | ||
font-size: 32px; | ||
font-weight: 400; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
right: 4px; | ||
top: 6px; | ||
border-radius: 4px; | ||
|
||
&:hover { | ||
background-color: v(center-channel-color-08); | ||
color: v(center-channel-color-72); | ||
} | ||
|
||
&:active { | ||
background-color: v(button-bg-08); | ||
color: v(button-bg); | ||
} | ||
} | ||
} | ||
|
||
.modal-footer { | ||
border: none; | ||
padding: 12px 24px 24px 24px; | ||
border-radius: 4px; | ||
} | ||
} | ||
} | ||
|
||
.edit-category__header { | ||
padding: 24px 24px 16px 24px; | ||
|
||
h1 { | ||
font-weight: 600; | ||
font-size: 20px; | ||
line-height: 28px; | ||
margin: 0; | ||
} | ||
} | ||
|
||
.edit-category__body { | ||
padding: 0 24px; | ||
position: relative; | ||
width: 100%; | ||
} | ||
|
||
.delete-category__body { | ||
padding: 12px 24px 16px 24px; | ||
position: relative; | ||
width: 100%; | ||
} | ||
|
||
.edit-category__helpText { | ||
font-size: 12px; | ||
line-height: 40px; | ||
color: var(--center-channel-color-56); | ||
} | ||
|
||
.edit_category__button { | ||
padding: 12px 16px; | ||
line-height: 12px; | ||
font-size: 14px; | ||
font-weight: 600; | ||
border: none; | ||
|
||
&.cancel { | ||
background: var(--center-channel-bg); | ||
color: var(--button-bg); | ||
} | ||
|
||
&.create { | ||
background: var(--button-bg); | ||
border-radius: 4px; | ||
color: var(--button-color); | ||
|
||
&.disabled { | ||
color: var(--center-channel-color-64); | ||
background: var(--center-channel-color-08); | ||
} | ||
} | ||
|
||
&.delete { | ||
color: var(--button-color); | ||
border-radius: 4px; | ||
background: var(--dnd-indicator); | ||
} | ||
.GenericModal__button.delete { | ||
background: var(--dnd-indicator) !important; // TODO: Figure out a way around important flag | ||
} | ||
|
||
.delete-category__helpText { | ||
font-size: 14px; | ||
line-height: 20px; | ||
color: var(--center-channel-color); | ||
} |
Oops, something went wrong.