[v15] Support sticky tooltips in FieldInput and legend in LabelsInput (…

…#51584) * Support sticky tooltips in FieldInput and legend in LabelsInput (#51457) * Support sticky tooltips in FieldInput and legend in LabelsInput * review * Revert "review" (#51510) This reverts commit ffe0554.
gravitational · Jan 29, 2025 · b6f4581 · b6f4581
1 parent 8964710
commit b6f4581
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 14 deletions.
diff --git a/web/packages/shared/components/FieldInput/FieldInput.tsx b/web/packages/shared/components/FieldInput/FieldInput.tsx
@@ -42,6 +42,7 @@ const FieldInput = forwardRef<HTMLInputElement, Props>(
       inputMode = 'text',
       readonly = false,
       toolTipContent = null,
+      tooltipSticky = false,
       disabled = false,
       markAsError = false,
       ...styles
@@ -88,7 +89,7 @@ const FieldInput = forwardRef<HTMLInputElement, Props>(
                   {labelText}
                   {labelTip && <LabelTip text={labelTip} />}
                 </span>
-                <ToolTipInfo children={toolTipContent} />
+                <ToolTipInfo sticky={tooltipSticky} children={toolTipContent} />
               </>
             ) : (
               <>
@@ -131,6 +132,7 @@ type Props = {
   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

diff --git a/web/packages/teleport/src/components/LabelsInput/LabelsInput.story.tsx b/web/packages/teleport/src/components/LabelsInput/LabelsInput.story.tsx
@@ -59,6 +59,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',

diff --git a/web/packages/teleport/src/components/LabelsInput/LabelsInput.tsx b/web/packages/teleport/src/components/LabelsInput/LabelsInput.tsx
@@ -17,11 +17,13 @@
  */
 
 import styled from 'styled-components';
-import { Flex, Box, ButtonSecondary, ButtonIcon } from 'design';
+
+import { Box, ButtonIcon, ButtonSecondary, Flex, Text } from 'design';
+import * as Icons from 'design/Icon';
 import FieldInput from 'shared/components/FieldInput';
-import { Validator, useValidation } from 'shared/components/Validation';
+import { ToolTipInfo } from 'shared/components/ToolTip';
+import { useValidation, Validator } from 'shared/components/Validation';
 import { requiredField } from 'shared/components/Validation/rules';
-import * as Icons from 'design/Icon';
 
 export type Label = {
   name: string;
@@ -34,6 +36,8 @@ export type LabelInputTexts = {
 };
 
 export function LabelsInput({
+  legend,
+  tooltipContent,
   labels = [],
   setLabels,
   disableBtns = false,
@@ -44,6 +48,8 @@ export function LabelsInput({
   labelVal = { fieldName: 'Value', placeholder: 'label value' },
   inputWidth = 200,
 }: {
+  legend?: string;
+  tooltipContent?: string;
   labels: Label[];
   setLabels(l: Label[]): void;
   disableBtns?: boolean;
@@ -103,15 +109,34 @@ export function LabelsInput({
 
   const width = `${inputWidth}px`;
   return (
-    <>
+    <Fieldset>
+      {legend && (
+        <Legend>
+          {tooltipContent ? (
+            <>
+              <span
+                css={{
+                  marginRight: '4px',
+                  verticalAlign: 'middle',
+                }}
+              >
+                {legend}
+              </span>
+              <ToolTipInfo 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="body2">
+              {labelKey.fieldName} (required field)
+            </Text>
           </Box>
+          <Text typography="body2">{labelVal.fieldName} (required field)</Text>
         </Flex>
       )}
       <Box>
@@ -183,11 +208,18 @@ export function LabelsInput({
         <Icons.Add className="icon-add" disabled={disableBtns} size="small" />
         {labels.length > 0 ? `Add another ${adjective}` : `Add a ${adjective}`}
       </ButtonSecondary>
-    </>
+    </Fieldset>
   );
 }
 
-const SmallText = styled.span`
-  font-size: ${p => p.theme.fontSizes[1]}px;
-  font-weight: lighter;
+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.body2}
 `;