Page MenuHomePhorge
Files F32927794

D3875.1768232570.diff
No OneTemporary
Actions

Size
1 KB
Referenced Files
None
Subscribers
None

D3875.1768232570.diff
View Options

diff --git a/web/components/label.css b/web/components/label.css
--- a/web/components/label.css
+++ b/web/components/label.css
@@ -2,4 +2,14 @@
line-height: 1.5;
padding: 4px 8px;
border-radius: 8px;
+ display: flex;
+}
+
+button.close {
+ display: flex;
+ align-items: center;
+ margin-left: 4px;
+ background: transparent;
+ border: none;
+ color: inherit;
}
diff --git a/web/components/label.react.js b/web/components/label.react.js
--- a/web/components/label.react.js
+++ b/web/components/label.react.js
@@ -2,6 +2,7 @@
import * as React from 'react';
+import SWMansionIcon from '../SWMansionIcon.react';
import css from './label.css';
type Props = {
@@ -9,6 +10,7 @@
+color?: string,
+bg?: string,
+children: React.Node,
+ +onClose?: () => mixed,
};
function Label(props: Props): React.Node {
@@ -17,6 +19,7 @@
color = 'var(--label-default-color)',
bg = 'var(--label-default-bg)',
children,
+ onClose,
} = props;
const labelStyle = React.useMemo(
@@ -28,9 +31,21 @@
[bg, color, size],
);
+ const closeButton = React.useMemo(() => {
+ if (!onClose) {
+ return null;
+ }
+ return (
+ <button className={css.close} onClick={onClose}>
+ <SWMansionIcon icon="cross" size={size} />
+ </button>
+ );
+ }, [onClose, size]);
+
return (
<div style={labelStyle} className={css.label}>
{children}
+ {closeButton}
</div>
);
}

File Metadata

Mime Type
text/plain
Expires
Mon, Jan 12, 3:42 PM (8 h, 54 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5923604
Default Alt Text
D3875.1768232570.diff (1 KB)

Event Timeline