self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-03-26 20:53:55 +02:00
Code Issues Releases Activity

Added clear btn for category dialog (#3284)

Browse Source 
* Added clear btn for category dialog

* Added snapshots

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
This commit is contained in:
Harshil Sharma 2022-07-05 05:09:33 +05:30 committed by GitHub
parent 4cfbe8c4cf
commit fb5a850b30
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 255 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
webapp/src/components/createCategory/__snapshots__/createCategory.test.tsx.snap Normal file
View File

@ -0,0 +1,80 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/createCategory/CreateCategory base case should match snapshot 1`] = `
<div>
<div
class="Dialog dialog-back CreateCategoryModal"
>
<div
class="backdrop"
/>
<div
class="wrapper"
>
<div
class="dialog"
role="dialog"
>
<div
class="toolbar"
>
<button
aria-label="Close dialog"
class="IconButton size--medium"
title="Close dialog"
type="button"
>
<i
class="CompassIcon icon-close CloseIcon"
/>
</button>
<div
class="toolbar--right"
/>
</div>
<div
class="CreateCategory"
>
<h3>
<span>
title
</span>
</h3>
<div
class="inputWrapper"
>
<input
class="categoryNameInput"
maxlength="100"
placeholder="Name your category"
type="text"
value=""
/>
</div>
<div
class="createCategoryActions"
>
<button
class="Button danger size--medium"
type="button"
>
<span>
Cancel
</span>
</button>
<button
class="Button size--medium"
disabled=""
type="button"
>
<span>
Create
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
`;

44
webapp/src/components/createCategory/createCategory.scss
View File

@ -12,24 +12,6 @@
padding: 2px 6px;
}
h3 {
margin-top: 0;
}
input {
font-size: 16px;
padding: 6px 12px;
border-radius: 4px;
border: 2px solid;
border-color: var(--sidebar-bg-rgb);
}
.footer {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.CreateCategory {
display: flex;
flex-direction: column;
@ -37,6 +19,25 @@
gap: 12px;
flex: 1;
.inputWrapper {
position: relative;
.CloseCircle {
cursor: pointer;
position: absolute;
font-size: 18px;
width: 16px;
height: 16px;
right: 16px;
top: 6px;
color: rgba(var(--center-channel-color-rgb), 0.64);
}
}
.categoryNameInput {
width: 100%;
}
h3 {
margin-top: 0;
}
@ -45,8 +46,11 @@
font-size: 16px;
padding: 6px 12px;
border-radius: 4px;
border: 2px solid;
border-color: var(--sidebar-bg-rgb);
border: 2px solid rgba(var(--center-channel-color-rgb), 0.16);
&:focus {
border-color: var(--button-bg);
}
}
.footer {

115
webapp/src/components/createCategory/createCategory.test.tsx Normal file
View File

@ -0,0 +1,115 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import {render} from "@testing-library/react"
import userEvent from "@testing-library/user-event"
import {wrapIntl} from "../../testUtils"
import CreateCategory from "./createCategory"
describe('components/createCategory/CreateCategory', () => {
it('base case should match snapshot', () => {
const component = wrapIntl(
<CreateCategory
onClose={jest.fn()}
onCreate={jest.fn()}
title={
<span>{'title'}</span>
}
/>
)
const {container} = render(component)
expect(container).toMatchSnapshot()
})
it('should call onClose on being closed', () => {
const onCloseHandler = jest.fn()
const component = wrapIntl(
<CreateCategory
onClose={onCloseHandler}
onCreate={jest.fn()}
title={
<span>{'title'}</span>
}
/>
)
const {container} = render(component)
const cancelBtn = container.querySelector('.createCategoryActions > .Button.danger')
expect(cancelBtn).toBeTruthy()
userEvent.click(cancelBtn as Element)
expect(onCloseHandler).toBeCalledTimes(1)
const closeBtn = container.querySelector('.toolbar > .IconButton')
expect(closeBtn).toBeTruthy()
userEvent.click(closeBtn as Element)
expect(onCloseHandler).toBeCalledTimes(2)
})
it('should call onCreate on pressing enter', () => {
const onCreateHandler = jest.fn()
const component = wrapIntl(
<CreateCategory
onClose={jest.fn()}
onCreate={onCreateHandler}
title={
<span>{'title'}</span>
}
/>
)
const {container} = render(component)
const inputField = container.querySelector('.categoryNameInput')
expect(inputField).toBeTruthy()
userEvent.type(inputField as Element, 'category name{enter}')
expect(onCreateHandler).toBeCalledWith('category name')
})
it('should show initial value', () => {
const onCreateHandler = jest.fn()
const component = wrapIntl(
<CreateCategory
initialValue='Dwight prank ideas'
onClose={jest.fn()}
onCreate={onCreateHandler}
title={
<span>{'title'}</span>
}
/>
)
const {container} = render(component)
const inputField = container.querySelector('.categoryNameInput')
expect(inputField).toBeTruthy()
expect((inputField as HTMLInputElement).value).toBe('Dwight prank ideas')
})
it('should clear input field on clicking clear icon', () => {
const onCreateHandler = jest.fn()
const component = wrapIntl(
<CreateCategory
initialValue='Dunder Mifflin'
onClose={jest.fn()}
onCreate={onCreateHandler}
title={
<span>{'title'}</span>
}
/>
)
const {container} = render(component)
const inputField = container.querySelector('.categoryNameInput')
expect(inputField).toBeTruthy()
expect((inputField as HTMLInputElement).value).toBe('Dunder Mifflin')
const clearBtn = container.querySelector('.clearBtn')
expect(clearBtn).toBeTruthy()
userEvent.click(clearBtn as Element)
expect((inputField as HTMLInputElement).value).toBe('')
})
})

29
webapp/src/components/createCategory/createCategory.tsx
View File

@ -9,6 +9,7 @@ import Dialog from '../dialog'
import Button from '../../widgets/buttons/button'
import './createCategory.scss'
import CloseCircle from "../../widgets/icons/closeCircle"
type Props = {
initialValue?: string
@ -40,16 +41,24 @@ const CreateCategory = (props: Props): JSX.Element => {
>
<div className='CreateCategory'>
<h3>{props.title}</h3>
<input
className='categoryNameInput'
type='text'
placeholder={placeholder}
value={name}
onChange={(e) => setName(e.target.value)}
autoFocus={true}
maxLength={100}
onKeyUp={handleKeypress}
/>
<div className='inputWrapper'>
<input
className='categoryNameInput'
type='text'
placeholder={placeholder}
value={name}
onChange={(e) => setName(e.target.value)}
autoFocus={true}
maxLength={100}
onKeyUp={handleKeypress}
/>
{
Boolean(name) &&
<div className='clearBtn' onClick={() => setName('')}>
<CloseCircle/>
</div>
}
</div>
<div className='createCategoryActions'>
<Button
size={'medium'}

17
webapp/src/widgets/icons/closeCircle.tsx Normal file
View File

@ -0,0 +1,17 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import CompassIcon from './compassIcon'
import './add.scss'
export default function CloseCircle(): JSX.Element {
return (
<CompassIcon
icon='close-circle'
className='CloseCircle'
/>
)
}