Support sticky tooltips in FieldInput and legend in LabelsInput

Author: bl-nero

web/packages/shared/components/FieldInput/FieldInput.tsx

@@ -57,6 +57,7 @@ const FieldInput = forwardRef<HTMLInputElement, FieldInputProps>(
       spellCheck,
       readonly = false,
       toolTipContent = null,
+      tooltipSticky = false,
       disabled = false,
       markAsError = false,
       required = false,
@@ -114,7 +115,10 @@ const FieldInput = forwardRef<HTMLInputElement, FieldInputProps>(
                   >
                     {label}
                   </span>
-                  <IconTooltip children={toolTipContent} />
+                  <IconTooltip
+                    sticky={tooltipSticky}
+                    children={toolTipContent}
+                  />
                 </>
               ) : (
                 <>{label}</>
@@ -242,6 +246,7 @@ export type FieldInputProps = BoxProps & {
   min?: number;
   max?: number;
   toolTipContent?: React.ReactNode;
+  tooltipSticky?: boolean;
   disabled?: boolean;
   // markAsError is a flag to highlight an
   // input box as error color before validator

web/packages/teleport/src/components/LabelsInput/LabelsInput.story.tsx

@@ -60,6 +60,8 @@ export const Custom = () => {
       <LabelsInput
         labels={labels}
         setLabels={setLables}
+        legend="List of Labels"
+        tooltipContent="List of labels, 'nuff said"
         labelKey={{
           fieldName: 'Custom Key Name',
           placeholder: 'custom key placeholder',

web/packages/teleport/src/components/LabelsInput/LabelsInput.tsx

@@ -18,9 +18,10 @@
 
 import styled from 'styled-components';
 
-import { Box, ButtonIcon, ButtonSecondary, Flex } from 'design';
+import { Box, ButtonIcon, ButtonSecondary, Flex, Text } from 'design';
 import * as Icons from 'design/Icon';
 import { inputGeometry } from 'design/Input/Input';
+import { IconTooltip } from 'design/Tooltip';
 import FieldInput from 'shared/components/FieldInput';
 import {
   useRule,
@@ -63,6 +64,8 @@ type LabelValidationResult = {
 export type LabelsRule = Rule<Label[], LabelListValidationResult>;
 
 export function LabelsInput({
+  legend,
+  tooltipContent,
   labels = [],
   setLabels,
   disableBtns = false,
@@ -74,6 +77,8 @@ export function LabelsInput({
   inputWidth = 200,
   rule = defaultRule,
 }: {
+  legend?: string;
+  tooltipContent?: string;
   labels: Label[];
   setLabels(l: Label[]): void;
   disableBtns?: boolean;
@@ -141,15 +146,34 @@ export function LabelsInput({
   const width = `${inputWidth}px`;
   const inputSize = 'medium';
   return (
-    <>
+    <Fieldset>
+      {legend && (
+        <Legend>
+          {tooltipContent ? (
+            <>
+              <span
+                css={{
+                  marginRight: '4px',
+                  verticalAlign: 'middle',
+                }}
+              >
+                {legend}
+              </span>
+              <IconTooltip children={tooltipContent} />
+            </>
+          ) : (
+            legend
+          )}
+        </Legend>
+      )}
       {labels.length > 0 && (
-        <Flex mt={2}>
+        <Flex mt={legend ? 1 : 0} mb={1}>
           <Box width={width} mr="3">
-            {labelKey.fieldName} <SmallText>(required field)</SmallText>
-          </Box>
-          <Box>
-            {labelVal.fieldName} <SmallText>(required field)</SmallText>
+            <Text typography="body3">
+              {labelKey.fieldName} (required field)
+            </Text>
           </Box>
+          <Text typography="body3">{labelVal.fieldName} (required field)</Text>
         </Flex>
       )}
       <Box>
@@ -229,17 +253,12 @@ export function LabelsInput({
         <Icons.Add className="icon-add" disabled={disableBtns} size="small" />
         {labels.length > 0 ? `Add another ${adjective}` : `Add a ${adjective}`}
       </ButtonSecondary>
-    </>
+    </Fieldset>
   );
 }
 
 const defaultRule = () => () => ({ valid: true });
 
-const SmallText = styled.span`
-  font-size: ${p => p.theme.fontSizes[1]}px;
-  font-weight: lighter;
-`;
-
 export const nonEmptyLabels: LabelsRule = labels => () => {
   const results = labels.map(label => ({
     name: requiredField('required')(label.name)(),
@@ -250,3 +269,15 @@ export const nonEmptyLabels: LabelsRule = labels => () => {
     results: results,
   };
 };
+
+const Fieldset = styled.fieldset`
+  border: none;
+  margin: 0;
+  padding: 0;
+`;
+
+const Legend = styled.legend`
+  margin: 0 0 ${props => props.theme.space[1]}px 0;
+  padding: 0;
+  ${props => props.theme.typography.body3}
+`;