Feature: Make Link full width of line

neos · Jan 3, 2024 · 76c0299 · 76c0299
1 parent 9d0061a
commit 76c0299
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/packages/react-ui-components/src/SelectBox_Option_SingleLine/selectBox_Option_SingleLine.js b/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>

diff --git a/packages/react-ui-components/src/SelectBox_Option_SingleLine/style.module.css b/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;