Merge pull request #184 from strapi/fix/input-icon

Add title to labelIcon
strapi · Mar 4, 2021 · f02ba84 · f02ba84
2 parents 25becb0 + 2012a45
commit f02ba84
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/docs/stories/customComponents/Inputs.stories.js b/docs/stories/customComponents/Inputs.stories.js
@@ -23,7 +23,10 @@ const form = {
     styleName: 'col-6',
     description: 'You should enter your name',
     label: 'Name',
-    labelIcon: <GlobeCrossed />,
+    labelIcon: {
+      title: 'Not localized',
+      icon: <GlobeCrossed />,
+    },
     placeholder: 'Paul Bocuse',
     type: 'text',
     validations: {
@@ -35,7 +38,10 @@ const form = {
     styleName: 'col-6',
     label: 'Time',
     description: 'Select a slot',
-    labelIcon: <Globe />,
+    labelIcon: {
+      title: 'Localized',
+      icon: <Globe />,
+    },
     type: 'time',
     validations: {
       required: true,
@@ -213,9 +219,10 @@ const form = {
     label: 'First Name',
     placeholder: 'Viky',
     type: 'text',
-    labelIcon: (
-      <Globe />
-    ),
+    labelIcon: {
+      icon: <Globe />,
+      title: 'Localized',
+    },
     validations: {
       required: true,
       uppercase: true,

diff --git a/packages/buffetjs-custom/src/components/Inputs/Wrapper.js b/packages/buffetjs-custom/src/components/Inputs/Wrapper.js
@@ -40,6 +40,7 @@ const Wrapper = styled.div`
 
 const IconWrapper = styled.span`
   margin-left: 5px;
+  cursor: pointer;
 `;
 
 export default Wrapper;

diff --git a/packages/buffetjs-custom/src/components/Inputs/index.js b/packages/buffetjs-custom/src/components/Inputs/index.js
@@ -117,7 +117,11 @@ function Inputs({
                 {label}
                 {isEmpty(label) && <>&nbsp;</>}
               </span>
-              {rest.labelIcon && <IconWrapper>{rest.labelIcon}</IconWrapper>}
+              {rest.labelIcon && (
+                <IconWrapper title={rest.labelIcon.title}>
+                  {rest.labelIcon.icon}
+                </IconWrapper>
+              )}
             </Label>
           )}
           <InputComponent
@@ -191,7 +195,7 @@ Inputs.propTypes = {
   error: PropTypes.string,
   id: PropTypes.string,
   label: PropTypes.string,
-  labelIcon: PropTypes.any,
+  labelIcon: PropTypes.shape({ icon: PropTypes.any, title: PropTypes.string }),
   name: PropTypes.string.isRequired,
   onBlur: PropTypes.func,
   onChange: () => {},