feat: Version 2

Closes #627, closes #1047

client/src/components/custom-field-values/CustomFieldValueChip/CustomFieldValueChip.jsx

@@ -0,0 +1,71 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import upperFirst from 'lodash/upperFirst';
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+
+import selectors from '../../../selectors';
+
+import styles from './CustomFieldValueChip.module.scss';
+
+const Sizes = {
+  TINY: 'tiny',
+  SMALL: 'small',
+  MEDIUM: 'medium',
+};
+
+const CustomFieldValueChip = React.memo(({ id, size, onClick }) => {
+  const selectCustomFieldValueById = useMemo(() => selectors.makeSelectCustomFieldValueById(), []);
+  const selectCustomFieldById = useMemo(() => selectors.makeSelectCustomFieldById(), []);
+
+  const customFieldValue = useSelector((state) => selectCustomFieldValueById(state, id));
+
+  const customField = useSelector((state) =>
+    selectCustomFieldById(state, customFieldValue.customFieldId),
+  );
+
+  const contentNode = (
+    <span
+      title={`${customField.name}: ${customFieldValue.content}`}
+      className={classNames(
+        styles.wrapper,
+        styles[`wrapper${upperFirst(size)}`],
+        onClick && styles.wrapperHoverable,
+      )}
+    >
+      {!Number.isNaN(parseFloat(customFieldValue.content)) && `${customField.name}: `}
+      {customFieldValue.content}
+    </span>
+  );
+
+  return onClick ? (
+    <button
+      type="button"
+      disabled={customField.isDisabled}
+      className={styles.button}
+      onClick={onClick}
+    >
+      {contentNode}
+    </button>
+  ) : (
+    contentNode
+  );
+});
+
+CustomFieldValueChip.propTypes = {
+  id: PropTypes.string.isRequired,
+  size: PropTypes.oneOf(Object.values(Sizes)),
+  onClick: PropTypes.func,
+};
+
+CustomFieldValueChip.defaultProps = {
+  size: Sizes.MEDIUM,
+  onClick: undefined,
+};
+
+export default CustomFieldValueChip;

client/src/components/custom-field-values/CustomFieldValueChip/CustomFieldValueChip.module.scss

@@ -0,0 +1,55 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .button {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    display: inline-block;
+    max-width: 100%;
+    outline: none;
+    padding: 0;
+  }
+
+  .wrapper {
+    background: #dce0e4;
+    border-radius: 3px;
+    color: #6a808b;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: background 0.3s ease;
+    vertical-align: top;
+    white-space: nowrap;
+  }
+
+  .wrapperHoverable:hover {
+    background: #d2d8dc;
+    color: #17394d;
+  }
+
+  /* Sizes */
+
+  .wrapperTiny {
+    font-size: 12px;
+    line-height: 20px;
+    max-width: 176px;
+    padding: 0px 6px;
+  }
+
+  .wrapperSmall {
+    font-size: 12px;
+    line-height: 20px;
+    max-width: 176px;
+    padding: 2px 8px;
+  }
+
+  .wrapperMedium {
+    line-height: 20px;
+    max-width: 230px;
+    padding: 6px 12px;
+  }
+}

client/src/components/custom-field-values/CustomFieldValueChip/index.js

@@ -0,0 +1,8 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import CustomFieldValueChip from './CustomFieldValueChip';
+
+export default CustomFieldValueChip;