Feature: Make Link full width of line

Author: pKallert

packages/react-ui-components/src/SelectBox_Option_SingleLine/selectBox_Option_SingleLine.js

@@ -18,6 +18,8 @@ class SelectBox_Option_SingleLine extends PureComponent {
 
         className: PropTypes.string,
 
+        icon: PropTypes.string,
+
         linkOptions: PropTypes.shape({
             href: PropTypes.string.isRequired,
             target: PropTypes.string,
@@ -35,14 +37,19 @@ class SelectBox_Option_SingleLine extends PureComponent {
             [className]: className,
             [style.linkedItem]: linkOptions
         });
+        const linkClassname = mergeClassNames({
+            [style.dropdownLink]: true,
+            [style.hasIcon]: (option.icon || icon ? true: false)
+        });
+
         const previewElementIcon = option.icon ? option.icon : (icon ? icon : null);
 
         return (
             <ListPreviewElement {...this.props} icon={previewElementIcon} disabled={isDisabled} className={finalClassNames}>
                 {linkOptions ? (
                     <a
                         {...linkOptions}
-                        className={style.dropdownLink}
+                        className={linkClassname}
                         title={option.title ? option.title : option.label}>{option.label}</a>
                 ) : (
                     <span title={option.title ? option.title : option.label}>{option.label}</span>

packages/react-ui-components/src/SelectBox_Option_SingleLine/style.module.css

@@ -2,6 +2,12 @@
     color: white;
     padding: 5px 14px;
     display: inline-block;
+    width: 100%;
+
+}
+.hasIcon {
+    width: calc(100% - 2em);
+    padding: 5px 0px;
 }
 .linkedItem{
     padding: 0px !important;