fix(Input, Navigation, Icon): fix Input line-height, Navigation icon does not display

Author: xinyao27

packages/fluent-ui-icons/src/utils/createIcon.ts

@@ -18,7 +18,7 @@ function createIcon(jsx: JSX, componentName: string): React.ForwardRefExoticComp
     color: inherit;
     fill: currentColor;
   `
-  SvgIconStyled.displayName = componentName
+  SvgIconStyled.displayName = `FIcon${componentName}`
   return SvgIconStyled
 }
 

packages/fluent-ui.com/src/docs/components/Icon/template.tsx

@@ -37,14 +37,17 @@ const Template = (): ReactElement => {
   return (
     <Box>
       {IconArray.map(
-        (Icon): ReactElement => (
-          <CopyToClipboard key={Icon.displayName} text={`<${Icon.displayName} />`}>
-            <Button>
-              <Icon />
-              <span>{Icon.displayName}</span>
-            </Button>
-          </CopyToClipboard>
-        )
+        (Icon): ReactElement => {
+          const name = String.prototype.substring.call(Icon.displayName, 5)
+          return (
+            <CopyToClipboard key={name} text={`<${name} />`}>
+              <Button>
+                <Icon />
+                <span>{name}</span>
+              </Button>
+            </CopyToClipboard>
+          )
+        }
       )}
     </Box>
   )

packages/fluent-ui/src/Input/Input.styled.ts

@@ -13,6 +13,7 @@ const base = css`
   outline: none;
   width: 296px;
   height: ${inputSize}px;
+  line-height: ${inputSize}px;
   font-size: 14px;
   padding: 6px 12px;
   font-family: ${th.font('input')};

packages/fluent-ui/src/Input/Input.tsx

@@ -45,7 +45,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           type={password ? 'password' : 'text'}
           {...rest}
         />
-        {cleared && (
+        {value && cleared && (
           <StyledIcon onClick={handleClear}>
             <ChromeCloseIcon />
           </StyledIcon>