fix(Form): adjust to use latest design spec (#5716)

SAP · Apr 17, 2024 · c3ea83f · c3ea83f
1 parent ad28d8c
commit c3ea83f
Show file tree

Hide file tree

Showing 11 changed files with 45 additions and 13 deletions.
diff --git a/packages/main/src/components/Form/Form.module.css b/packages/main/src/components/Form/Form.module.css
@@ -8,6 +8,14 @@
   row-gap: 0.25rem;
   column-gap: 0.5rem;
 
+  /* first row padding if form title is set*/
+  & > [ui5-title] ~ [data-row-index-label='2']:has(+ [data-row-index='3']) {
+    margin-block-start: 0.5rem;
+  }
+  & > [ui5-title] ~ [data-row-index-label='2'] + [data-row-index='2'] {
+    margin-block-start: 0.5rem;
+  }
+
   --_ui5wcr_form_label_text_align: end;
 }
 
@@ -56,9 +64,12 @@
 }
 
 .formTitle {
-  border-block-end: 1px solid var(--sapGroup_TitleBorderColor);
-  margin-block-end: 1.75rem;
+  box-sizing: border-box;
+  border-block-end: var(--_ui5wcr_Form_HeaderBorderWidth) solid var(--sapGroup_TitleBorderColor);
   grid-column: 1 / -1;
+  font-size: var(--sapGroup_Title_FontSize);
+  height: 2.75rem;
+  line-height: 2.75rem;
 }
 
 .labelSpan12 {

diff --git a/packages/main/src/components/FormGroup/FormGroupTitle.module.css b/packages/main/src/components/FormGroup/FormGroupTitle.module.css
@@ -6,7 +6,6 @@
   color: var(--sapGroup_TitleTextColor);
   font-size: var(--sapFontHeader6Size);
   margin: 0;
-  margin-block-start: 1rem;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;

diff --git a/packages/main/src/components/FormGroup/index.tsx b/packages/main/src/components/FormGroup/index.tsx
@@ -49,6 +49,8 @@ const FormGroup = (props: FormGroupPropTypes) => {
   if (!layoutInfo) return null;
   const { columnIndex, rowIndex } = layoutInfo;
 
+  const localRowIndex = labelSpan === 12 ? rowIndex - 1 : rowIndex;
+
   return (
     <GroupContext.Provider value={{ id: uniqueId }}>
       <>
@@ -59,7 +61,9 @@ const FormGroup = (props: FormGroupPropTypes) => {
             ...style,
             display: titleText ? 'unset' : 'none',
             gridColumnStart: columnIndex * 12 + 1,
-            gridRowStart: labelSpan === 12 ? rowIndex - 1 : rowIndex
+            gridRowStart: localRowIndex,
+            // smaller margin for groups in first row with form title
+            marginBlockStart: localRowIndex === 2 ? '0.5rem' : '1rem'
           }}
           as={as}
         />

diff --git a/packages/main/src/components/FormItem/index.tsx b/packages/main/src/components/FormItem/index.tsx
@@ -35,7 +35,14 @@ interface InternalProps extends FormItemPropTypes {
   rowIndex?: number;
 }
 
-function FormItemLabel({ label, style, className }: { label: ReactNode; style?: CSSProperties; className?: string }) {
+interface FormItemLabelProps {
+  label: ReactNode;
+  style?: CSSProperties;
+  className?: string;
+  rowIndex: number | undefined;
+}
+
+function FormItemLabel({ label, style, className, rowIndex }: FormItemLabelProps) {
   const { labelSpan } = useFormContext();
 
   if (typeof label === 'string') {
@@ -46,6 +53,7 @@ function FormItemLabel({ label, style, className }: { label: ReactNode; style?:
         wrappingType={WrappingType.Normal}
         data-label-span={labelSpan}
         showColon={!!label}
+        data-row-index-label={rowIndex}
       >
         {label}
       </Label>
@@ -54,7 +62,7 @@ function FormItemLabel({ label, style, className }: { label: ReactNode; style?:
 
   if (isValidElement(label)) {
     const { showColon, wrappingType, style: labelStyle, children } = label.props;
-    return cloneElement<LabelPropTypes & { 'data-label-span'?: number }>(
+    return cloneElement<LabelPropTypes & { 'data-label-span'?: number; 'data-row-index-label'?: number }>(
       label,
       {
         showColon: showColon ?? true,
@@ -64,7 +72,8 @@ function FormItemLabel({ label, style, className }: { label: ReactNode; style?:
           ...style,
           ...(labelStyle || {})
         },
-        'data-label-span': labelSpan
+        'data-label-span': labelSpan,
+        'data-row-index-label': rowIndex
       },
       children ?? ''
     );
@@ -127,15 +136,18 @@ const FormItem = (props: FormItemPropTypes) => {
   })();
 
   const calculatedGridRowStart = calculatedGridRowIndex ?? 0;
+  const calculatedGridRowStartLabel =
+    labelSpan === 12 ? calculatedGridRowIndex - 1 : calculatedGridRowIndex ?? undefined;
 
   return (
     <>
       <FormItemLabel
         label={label}
         style={{
           gridColumnStart,
-          gridRowStart: labelSpan === 12 ? calculatedGridRowIndex - 1 : calculatedGridRowIndex ?? undefined
+          gridRowStart: calculatedGridRowStartLabel
         }}
+        rowIndex={calculatedGridRowStartLabel}
         className={clsx(labelSpan !== 12 && lastGroupItem && classNames.lastGroupItem)}
       />
       <div
@@ -146,6 +158,7 @@ const FormItem = (props: FormItemPropTypes) => {
           gridRowStart: rowIndex != null ? calculatedGridRowStart : undefined
         }}
         data-label-span={labelSpan}
+        data-row-index={calculatedGridRowStart}
       >
         {flattenFragments(children).map((child, index) => {
           // @ts-expect-error: type can't be string because of `isValidElement`

diff --git a/packages/main/src/components/ThemeProvider/ThemeProvider.css b/packages/main/src/components/ThemeProvider/ThemeProvider.css
@@ -12,6 +12,7 @@
 @import '../../themes/sap_horizon.css';
 @import '../../themes/sap_horizon_dark.css';
 @import '../../themes/sap_horizon_hcb.css';
+@import '../../themes/sap_horizon_hcw.css';
 
 .inheritingSapScrollBar *:not([data-native-scrollbar]) {
   &::-webkit-scrollbar {

diff --git a/packages/main/src/themes/CustomVariables.ts b/packages/main/src/themes/CustomVariables.ts
@@ -12,6 +12,7 @@ export enum CustomVariables {
   AnalyticalTableOuterBorderBlock = '--_ui5wcr-AnalyticalTable-OuterBorderBlock',
   AnalyticalTableOuterBorderInline = '--_ui5wcr-AnalyticalTable-OuterBorderInline',
   AnalyticalTableOuterCellBorder = '--_ui5wcr-AnalyticalTable-OuterCellBorder',
+  FormHeaderBorderWidth = '--_ui5wcr_Form_HeaderBorderWidth',
   ObjectPageSectionBorderTop = '--_ui5wcr_ObjectPage_SectionBorderTop',
   ObjectPageSectionTitleFontFamily = '--_ui5wcr_ObjectPage_SectionTitleFontFamily',
   ObjectPageSectionTitleHeight = '--_ui5wcr_ObjectPage_SectionTitleHeight',

diff --git a/packages/main/src/themes/base.css b/packages/main/src/themes/base.css
@@ -1,4 +1,3 @@
-
 :root {
   --_ui5wcr_Scrollbar_Border: none;
   --_ui5wcr_Splitter_IconColor: var(--sapButton_Lite_TextColor);
@@ -29,4 +28,5 @@
   --_ui5wcr_ObjectPage_SubSectionBackgroundColor: transparent;
   --_ui5wcr-AnalyticalTable-HeaderActiveTextColor: var(--sapList_HeaderTextColor);
   --_ui5wcr_ObjectPage_SectionTitleTextDecoration: none;
-}
+  --_ui5wcr_Form_HeaderBorderWidth: var(--sapList_BorderWidth);
+}
diff --git a/packages/main/src/themes/sap_fiori_3_hcb.css b/packages/main/src/themes/sap_fiori_3_hcb.css
@@ -1,10 +1,10 @@
-
-[data-sap-theme="sap_fiori_3_hcb"] {
+[data-sap-theme='sap_fiori_3_hcb'] {
   --_ui5wcr_Splitter_BarOutline: 0.15rem dotted var(--sapGroup_ContentBorderColor);
   --_ui5wcr_ActionSheet_BoxShadow: var(--sapContent_HeaderShadow);
   --_ui5wcr_Splitter_BarBorderFocus: solid var(--sapGroup_ContentBorderColor) 0.0625rem;
   --_ui5wcr_Splitter_BarBorderStyle: solid var(--sapGroup_ContentBorderColor) 0.0625rem;
   --_ui5wcr_ActionSheet_TopBorderRadius: var(--sapElement_BorderCornerRadius);
   --_ui5wcr_Splitter_ContentBorderColor: var(--sapGroup_ContentBorderColor);
   --_ui5wcr_Splitter_BarBorderHighContrastFix: none;
-}
+  --_ui5wcr_Form_HeaderBorderWidth: calc(3 * var(--sapList_BorderWidth));
+}
diff --git a/packages/main/src/themes/sap_fiori_3_hcw.css b/packages/main/src/themes/sap_fiori_3_hcw.css
@@ -6,4 +6,5 @@
   --_ui5wcr_ActionSheet_TopBorderRadius: var(--sapElement_BorderCornerRadius);
   --_ui5wcr_Splitter_ContentBorderColor: var(--sapGroup_ContentBorderColor);
   --_ui5wcr_Splitter_BarBorderHighContrastFix: none;
+  --_ui5wcr_Form_HeaderBorderWidth: calc(3 * var(--sapList_BorderWidth));
 }
diff --git a/packages/main/src/themes/sap_horizon_hcb.css b/packages/main/src/themes/sap_horizon_hcb.css
@@ -19,4 +19,5 @@
   --_ui5wcr_ObjectPage_SubSectionBackgroundColor: var(--sapGroup_ContentBackground);
   --_ui5wcr-AnalyticalTable-HeaderActiveTextColor: var(--sapContent_ContrastTextColor);
   --_ui5wcr_ObjectPage_SectionTitleTextDecoration: underline var(--sapList_SelectionBorderColor);
+  --_ui5wcr_Form_HeaderBorderWidth: calc(3 * var(--sapList_BorderWidth));
 }
diff --git a/packages/main/src/themes/sap_horizon_hcw.css b/packages/main/src/themes/sap_horizon_hcw.css
@@ -19,4 +19,5 @@
   --_ui5wcr_ObjectPage_SubSectionBackgroundColor: var(--sapGroup_ContentBackground);
   --_ui5wcr-AnalyticalTable-HeaderActiveTextColor: var(--sapContent_ContrastTextColor);
   --_ui5wcr_ObjectPage_SectionTitleTextDecoration: underline var(--sapList_SelectionBorderColor);
+  --_ui5wcr_Form_HeaderBorderWidth: calc(3 * var(--sapList_BorderWidth));
 }