Adjust InputLabel widths (#1034)

Signed-off-by: Daniel Valdivia <[email protected]>
minio · Oct 17, 2024 · fb72b3b · fb72b3b
1 parent 7071aec
commit fb72b3b
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 22 deletions.
diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
@@ -43,6 +43,7 @@ Default.args = {
     console.log("click");
   },
   tooltip: "test",
+  checkLabel: "Yes",
 };
 
 export const Disabled = Template.bind({});

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -150,6 +150,7 @@ const Checkbox: FC<
   helpTip,
   helpTipPlacement,
   checked,
+  checkLabel,
   disabled,
   ...props
 }) => {
@@ -162,28 +163,18 @@ const Checkbox: FC<
         alignItems: "center",
         flexBasis: "initial",
         flexWrap: "nowrap",
+        "& .checkArea": {
+          display: "flex",
+          gap: 16,
+          alignItems: "center",
+        },
       }}
     >
-      <CheckboxItem sx={sx} onClick={(e) => e.stopPropagation()}>
-        <input
-          type={"checkbox"}
-          id={id}
-          checked={checked}
-          disabled={disabled}
-          {...props}
-        />
-        <span className={"checkbox"}>
-          <CheckIcon className={`${disabled ? "disabled" : ""} icon-overlay`} />
-        </span>
-      </CheckboxItem>
       {label !== "" && (
         <InputLabel
           htmlFor={id}
           noMinWidth
           className={`${overrideLabelClasses || ""}`}
-          sx={{
-            marginLeft: 10,
-          }}
           helpTip={helpTip}
           helpTipPlacement={helpTipPlacement}
         >
@@ -197,6 +188,23 @@ const Checkbox: FC<
           )}
         </InputLabel>
       )}
+      <CheckboxItem
+        className={"checkArea"}
+        sx={sx}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <input
+          type={"checkbox"}
+          id={id}
+          checked={checked}
+          disabled={disabled}
+          {...props}
+        />
+        <span className={"checkbox"}>
+          <CheckIcon className={`${disabled ? "disabled" : ""} icon-overlay`} />
+        </span>
+        {checkLabel && <span>{checkLabel}</span>}
+      </CheckboxItem>
     </FieldContainer>
   );
 };

diff --git a/src/components/Checkbox/Checkbox.types.ts b/src/components/Checkbox/Checkbox.types.ts
@@ -26,4 +26,5 @@ export interface CheckboxProps extends HTMLAttributes<HTMLInputElement> {
   sx?: OverrideTheme;
   helpTip?: React.ReactNode;
   helpTipPlacement?: CommonHelpTipPlacement;
+  checkLabel?: string;
 }
diff --git a/src/components/InputLabel/InputLabel.tsx b/src/components/InputLabel/InputLabel.tsx
@@ -49,7 +49,9 @@ const CustomLabel = styled.label<InputLabelProps>(
         display: "flex",
         alignItems: "center",
         lineHeight: lineHeightVariant,
-        minWidth: 180,
+        width: 190,
+        paddingRight: 8,
+        textWrap: "wrap",
         "&.noMinWidthLabel": {
           minWidth: "initial",
         },

diff --git a/src/components/RadioGroup/RadioGroup.tsx b/src/components/RadioGroup/RadioGroup.tsx
@@ -181,13 +181,13 @@ const OptionsContainer = styled.div<OptionsContainerProps>(
 const RadioContainer = styled.div(() => ({
   display: "flex",
   alignItems: "center",
-  gap: 5,
+  gap: 16,
 }));
 
 const RadioMain = styled.div(() => ({
   "& .descriptionLabel": {
     display: "block",
-    marginLeft: 21,
+    paddingLeft: 32,
     marginTop: 4,
   },
 }));

diff --git a/src/components/ScreenTitle/ScreenTitle.stories.tsx b/src/components/ScreenTitle/ScreenTitle.stories.tsx
@@ -25,6 +25,7 @@ import ButtonGroup from "../ButtonGroup/ButtonGroup";
 import { GlobalStyles } from "../index";
 import ScreenTitle from "./ScreenTitle";
 import { ScreenTitleProps } from "./ScreenTitle.types";
+import Badge from "../Badge/Badge";
 
 export default {
   title: "MDS/Layout/ScreenTitle",
@@ -43,8 +44,12 @@ export const Default = Template.bind({});
 Default.args = {
   title: "Object Title",
   superTitle: "Super Title",
+  titleBadges: [
+    <Badge label={"online"} id={"online-badge"} />,
+    <Badge label={"important"} color={"warning"} id={"important-badge"} />,
+  ],
   titleOptions: [
-    { title: "Created", value: "Wed, Feb 28 2024 · 23:56:02" },
+    { title: "Created", value: "Yesterday" },
     { title: "Access", value: "PUBLIC" },
   ],
   actions: (

diff --git a/src/components/ScreenTitle/ScreenTitle.tsx b/src/components/ScreenTitle/ScreenTitle.tsx
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { FC, HTMLAttributes } from "react";
+import React, { FC, Fragment, HTMLAttributes } from "react";
 import get from "lodash/get";
 import styled from "styled-components";
 
@@ -66,6 +66,10 @@ const ScreenTitleContainer = styled.div<ScreenTitleContainerProps>(
       "& .subTitle, .superTitle": {
         color: theme.colors["Color/Neutral/Text/colorTextQuaternary"],
       },
+      "& .superTitle": {
+        position: "absolute",
+        marginTop: -44,
+      },
     },
     "& .leftItems": {
       flexGrow: 1,
@@ -75,6 +79,11 @@ const ScreenTitleContainer = styled.div<ScreenTitleContainerProps>(
       "& .titleColumn": {
         flexGrow: "1",
       },
+      "& .badges": {
+        display: "flex",
+        alignItems: "center",
+        gap: 4,
+      },
       "& .options": {
         display: "flex",
         alignItems: "center",
@@ -127,6 +136,7 @@ const ScreenTitle: FC<ScreenTitleProps & HTMLAttributes<HTMLDivElement>> = ({
   actions,
   sx,
   titleOptions,
+  titleBadges,
   ...restProps
 }) => {
   return (
@@ -155,13 +165,20 @@ const ScreenTitle: FC<ScreenTitleProps & HTMLAttributes<HTMLDivElement>> = ({
           ) : null}
           <Box className={"titleColumn"}>
             {superTitle && (
-              <span className={"superTitle SM_Normal"}>{superTitle}</span>
+              <div className={"superTitle SM_Normal"}>{superTitle}</div>
             )}
             <Box className={"titleElement Heading3"}>{title}</Box>
             {subTitle && (
               <span className={"subTitle SM_Normal"}>{subTitle}</span>
             )}
           </Box>
+          {titleBadges && (
+            <Box className={"badges"}>
+              {titleBadges?.map((optionItem, index) => (
+                <Fragment key={`badge-${index}`}>{optionItem}</Fragment>
+              ))}
+            </Box>
+          )}
           {titleOptions && (
             <Box className={"options"}>
               {titleOptions?.map((optionItem, index) => (

diff --git a/src/components/ScreenTitle/ScreenTitle.types.ts b/src/components/ScreenTitle/ScreenTitle.types.ts
@@ -24,6 +24,7 @@ export interface ScreenTitleProps {
   subTitle?: React.ReactNode;
   title: string;
   actions?: React.ReactNode;
+  titleBadges?: React.ReactNode[];
   titleOptions?: ScreenTitleOptions[];
   sx?: OverrideTheme;
 }
@@ -37,6 +38,6 @@ export interface ScreenTitleContainerProps {
 }
 
 export interface ScreenTitleOptions {
-  title: string;
+  title?: string;
   value?: string;
 }