Skip to content

Commit

Permalink
[MM-24708] Added What's New modal for Channel Sidebar Phase 2 changes (…
Browse files Browse the repository at this point in the history 
…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
@devinbinnie @hmhealey
devinbinnie and hmhealey committed Jul 22, 2020
1 parent ca0ebbd commit 0ded2cf
Show file tree
Hide file tree
Showing 16 changed files with 790 additions and 275 deletions.
220 changes: 220 additions & 0 deletions components/__snapshots__/generic_modal.test.tsx.snap
View file
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>
`;
129 changes: 2 additions & 127 deletions components/category_modal.scss
View file
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);
}
Loading

0 comments on commit 0ded2cf

Please sign in to comment.