focalboard/webapp/src/widgets/label.tsx
kamre ca2116c04b
[GH-1013] Fix visibility of clear button for select option (#1160)
* Show clear button for (multi)select property only when it is being edited.

* Files for multi-select property moved to separate folder.

* Extracted component for select property.

* Minor tweaks for Label style.

* Redundant code for clear button removed.

* Unit test for select property component added.

* Jest snapshots updated.

* Fix stylelint error.

* Jest snapshot updated.

Co-authored-by: Scott Bishel <scott.bishel@mattermost.com>
2021-09-14 15:35:41 -06:00

32 lines
761 B
TypeScript

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import {Constants} from '../constants'
import './label.scss'
type Props = {
color?: string
title?: string
children: React.ReactNode
className?: string
}
// Switch is an on-off style switch / checkbox
function Label(props: Props): JSX.Element {
let color = 'empty'
if (props.color && props.color in Constants.menuColors) {
color = props.color
}
return (
<span
className={`Label ${color} ${props.className ? props.className : ''}`}
title={props.title}
>
{props.children}
</span>
)
}
export default React.memo(Label)