fix: dropdown with image display (#5101)

Talend · Jan 3, 2024 · e08217c · e08217c
1 parent 3c5082b
commit e08217c
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 2 deletions.
diff --git a/.changeset/thin-cherries-add.md b/.changeset/thin-cherries-add.md
@@ -0,0 +1,6 @@
+---
+'@talend/react-components': patch
+'@talend/bootstrap-theme': patch
+---
+
+fix: dropdown with image display
diff --git a/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.scss b/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.scss
@@ -42,6 +42,11 @@ $tc-dropdown-button-right-padding: 0.8rem;
 	}
 
 	&-item {
+		a img {
+			max-width: initial;
+		}
+
+		a img,
 		a svg {
 			margin: 0 $padding-smaller;
 		}

diff --git a/packages/components/src/Actions/ActionDropdown/Dropdown.stories.js b/packages/components/src/Actions/ActionDropdown/Dropdown.stories.js
@@ -1,9 +1,9 @@
-import Immutable from 'immutable';
 import { action } from '@storybook/addon-actions';
+import Immutable from 'immutable';
 
-import ActionDropdown from './ActionDropdown.component';
 import FilterBar from '../../FilterBar';
 import Action from '../Action';
+import ActionDropdown from './ActionDropdown.component';
 
 const myAction = {
 	id: 'context-dropdown-related-items',
@@ -17,6 +17,12 @@ const myAction = {
 			'data-feature': 'actiondropdown.items',
 			onClick: action('document 1 click'),
 		},
+		{
+			icon: 'src-data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPGc+CiAgICA8cGF0aCBjbGFzcz0idGktYmFja2dyb3VuZCIgIGZpbGw9IiNGRjZFNzAiIGQ9Ik0xNiw4IEMxNiwxMi40MTg4NzM3IDEyLjQxODI2NDgsMTYuMDAwNjA4OCA4LDE2LjAwMDYwODggQzMuNTgxNzM1MTYsMTYuMDAwNjA4OCAwLDEyLjQxODg3MzcgMCw4IEMwLDMuNTgxNzM1MTYgMy41ODE3MzUxNiw1LjM0OTk2ODgzZS0xNCA4LDUuMzQ5OTY4ODNlLTE0IEMxMi40MTgyNjQ4LDUuMzQ5OTY4ODNlLTE0IDE2LDMuNTgxNzM1MTYgMTYsOCIvPgogICAgPHBhdGggY2xhc3M9InRpLWZvcmVncm91bmQiIGZpbGw9IiNGRkYiIGQ9Ik0xMC4xNzgwMTY4LDExLjQzMTYwMzQgQzEwLjE1MTM5NSwxMS4zNTQxNTggMTAuMTEzODgyNCwxMS4yODIxNTggMTAuMDY0ODczOSwxMS4yMTYyMDg0IEMxMC4wMTY0NzA2LDExLjE0OTY1MzggOS45Nzg5NTc5OCwxMS4xMjMwMzE5IDkuOTUyMzM2MTMsMTEuMTM2MzQyOSBDOS43ODQxMzQ0NSwxMS4yMTk4Mzg3IDkuNjAwMjAxNjgsMTEuMjkxMjMzNiA5LjQwMTE0Mjg2LDExLjM0ODcxMjYgQzkuMjAyMDg0MDMsMTEuNDA2MTkxNiA5LjAyOTA0MjAyLDExLjQzNTIzMzYgOC44ODMyMjY4OSwxMS40MzUyMzM2IEM4LjcxOTI2MDUsMTEuNDM1MjMzNiA4LjU5NDAxNjgxLDExLjM5NzcyMSA4LjUwODEwMDg0LDExLjMyNTcyMSBDOC40MjE1Nzk4MywxMS4yNTI1MTA5IDguMzU5ODY1NTUsMTEuMTE2OTgxNSA4LjMyMjM1Mjk0LDEwLjkyMDM0MjkgQzguMjg0MjM1MjksMTAuNzIzNzA0MiA4LjI2NTQ3ODk5LDEwLjQzNjMwOTIgOC4yNjU0Nzg5OSwxMC4wNTk5NzMxIEw4LjI2NTQ3ODk5LDYuMjQyNzYzMDMgTDkuNjkzMzc4MTUsNi4yNDI3NjMwMyBDOS43NDE3ODE1MSw2LjI0Mjc2MzAzIDkuNzg3MTU5NjYsNi4xOTYxNzQ3OSA5LjgyOTUxMjYxLDYuMTAyMzkzMjggQzkuODcxMjYwNSw2LjAxMDQyNjg5IDkuODkyNDM2OTcsNS44OTU0Njg5MSA5Ljg5MjQzNjk3LDUuNzU4MTI0MzcgQzkuODkyNDM2OTcsNS43MDAwNDAzNCA5Ljg3NzkxNTk3LDUuNjQ4NjExNzYgOS44NDg4NzM5NSw1LjYwNTA0ODc0IEM5LjgyMDQzNjk3LDUuNTYwODgwNjcgOS43ODE3MTQyOSw1LjUzNjY3ODk5IDkuNzMzMzEwOTIsNS41MzI0NDM3IEw4LjI2NTQ3ODk5LDUuNTMyNDQzNyBMOC4yNjU0Nzg5OSwzLjY3OTIgQzguMjY1NDc4OTksMy42MDIzNTk2NiA4LjIxNDY1NTQ2LDMuNTQ3OTA1ODggOC4xMjQ1MDQyLDMuNTEwOTk4MzIgQzcuOTU4MTE3NjUsMy40NTg5NjQ3MSA3Ljg2MDcwNTg4LDMuNjM5ODcyMjcgNy44NjA3MDU4OCwzLjYzOTg3MjI3IEM3LjQxNDE4NDg3LDQuNjcyMDczOTUgNi41Mzc0Nzg5OSw1LjQ2ODkxNDI5IDUuNDUzMjQzNyw1LjgwODM0Mjg2IEM1LjQ1MzI0MzcsNS44MDgzNDI4NiA1LjIzMTc5ODMyLDUuODYwOTgxNTEgNS4yODg2NzIyNyw2LjA5MjcxMjYxIEM1LjI5NTMyNzczLDYuMTEyNjc4OTkgNS4zMDEzNzgxNSw2LjEzMjY0NTM4IDUuMzExMDU4ODIsNi4xNTI2MTE3NiBDNS4zNDE5MTU5Nyw2LjIxNzM1MTI2IDUuMzc5NDI4NTcsNi4yNTA2Mjg1NyA1LjQyMzU5NjY0LDYuMjU2MDczOTUgTDYuMTMzOTE1OTcsNi4yNTYwNzM5NSBMNi4xMzM5MTU5NywxMC42NTE3MDQyIEM2LjEzMzkxNTk3LDExLjI3NTUwMjUgNi4zMjMyOTQxMiwxMS43MTE3Mzc4IDYuNzAyMDUwNDIsMTEuOTU5ODA1IEM3LjA4MDIwMTY4LDEyLjIwNzI2NzIgNy41ODg0MzY5NywxMi4zMzA2OTU4IDguMjI1NTQ2MjIsMTIuMzMwNjk1OCBDOC40MjUyMTAwOCwxMi4zMzA2OTU4IDguNjU2MzM2MTMsMTIuMjkzNzg4MiA4LjkxOTUyOTQxLDEyLjIxODc2MyBDOS4xODI3MjI2OSwxMi4xNDMxMzI4IDkuNDMwNzg5OTIsMTIuMDQ2OTMxMSA5LjY2MzEyNjA1LDExLjkyOTU1MjkgQzkuODk2MDY3MjMsMTEuODEyNzc5OCAxMC4wNjcyOTQxLDExLjY5NDE5MTYgMTAuMTc4MDE2OCwxMS41NzM3ODgyIEMxMC4yMDQ2Mzg3LDExLjU1Njg0NzEgMTAuMjA0NjM4NywxMS41MDkwNDg3IDEwLjE3ODAxNjgsMTEuNDMxNjAzNCIvPgogIDwvZz4KPC9zdmc+Cg==',
+			label: 'Button with icon as image',
+			onClick: action('Button with icon clicked'),
+			type: 'button',
+		},
 		{
 			divider: true,
 		},

diff --git a/packages/theme/src/theme/_dropdowns.scss b/packages/theme/src/theme/_dropdowns.scss
@@ -50,6 +50,7 @@ $dropdown-caret-up-axis: -45deg !default;
 				color: tokens.$coral-color-neutral-text;
 			}
 
+			> img:first-child,
 			> svg:first-child {
 				margin-right: $padding-small;
 			}
-Original file line number
+Diff line change
@@ Expand Up / @@ -42,6 +42,11 @@ $tc-dropdown-button-right-padding: 0.8rem; @@
     	}
     	&-item {
+    		a img {
+    			max-width: initial;
+    		}
+    		a img,
     		a svg {
     			margin: 0 $padding-smaller;
     		}
@@ Expand Down @@