Fix [Form select] show label instead of value (#37)

Author: ilan7empest

src/lib/components/FormCheckBox/formCheckBox.scss

@@ -10,6 +10,7 @@
   input[type='checkbox'] {
     @include radioCheckField;
 
+    flex: 0 0 18px;
     width: 18px;
     height: 18px;
     border-radius: 4px;

src/lib/components/FormSelect/FormSelect.js

@@ -63,7 +63,10 @@ const FormSelect = ({
     return !multiple
       ? selectedOption?.label
       : input.value.length <= 2
-      ? input.value.join(', ')
+      ? options
+          .filter((option) => input.value.includes(option.id))
+          .map((option) => option.label)
+          .join(', ')
       : `${input.value.length} items selected`
   }
 
@@ -293,7 +296,6 @@ FormSelect.defaultProps = {
   disabled: false,
   hideSelectedOption: false,
   label: '',
-  labelAtTop: false,
   onClick: null,
   search: false,
   multiple: false,
@@ -307,7 +309,6 @@ FormSelect.propTypes = {
   disabled: PropTypes.bool,
   hideSelectedOption: PropTypes.bool,
   label: PropTypes.string,
-  labelAtTop: PropTypes.bool,
   name: PropTypes.string.isRequired,
   onClick: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
   options: SELECT_OPTIONS.isRequired,

src/lib/components/FormSelect/formSelect.scss

@@ -66,6 +66,7 @@
     .pop-up-dialog {
       width: 100%;
       padding: 0;
+      border-radius: 0;
 
       &__header {
         display: none;
@@ -79,7 +80,7 @@
         color: $mulledWineTwo;
         background-color: $white;
         border: $primaryBorder;
-        border-radius: 2px;
+        border-radius: 4px;
         box-shadow: $filterShadow;
       }
 

src/lib/elements/SelectOption/SelectOption.js

@@ -13,18 +13,20 @@ import './selectOption.scss'
 const SelectOption = ({ item, name, onClick, multiple, selectedId, withSelectedIcon }) => {
   const selectClassName = classnames(
     'select__item',
+    multiple && 'multiple',
     item.hidden && 'hidden',
     item.disabled && 'disabled'
   )
   if (multiple) {
     return (
       <div data-testid="select-checkbox" className={selectClassName}>
-        <FormCheckBox name={name} id={item.id} value={item.id} label={item.label}>
+        <FormCheckBox name={name} value={item.id} label={item.label}>
           {item.status && <span className={`state-${item.status}-job status`} />}
         </FormCheckBox>
       </div>
     )
   }
+
   return (
     <div
       data-testid="select-option"
@@ -65,6 +67,7 @@ SelectOption.defaultProps = {
 
 SelectOption.propTypes = {
   disabled: PropTypes.bool,
+  name: PropTypes.string.isRequired,
   item: SELECT_OPTION.isRequired,
   onClick: PropTypes.func,
   multiple: PropTypes.bool,

src/lib/elements/SelectOption/selectOption.scss

@@ -7,6 +7,16 @@
     min-height: 49px;
     padding: 16px 15px;
 
+    &.multiple {
+      padding: 0 15px;
+      min-height: 0;
+
+      input[type='checkbox'] ~ label {
+        padding-top: 16px;
+        padding-bottom: 16px;
+      }
+    }
+
     &.hidden {
       display: none;
     }