feat(ObjectStatus): add large prop & update design to latest specs (#…

…4935) Fixes #4934 FIxes #5079 Closes #5035 Need to wait for `theming-base-content` version to be updated.
SAP · Oct 9, 2023 · 2de9679 · 2de9679
1 parent 944b86d
commit 2de9679
Show file tree

Hide file tree

Showing 4 changed files with 173 additions and 20 deletions.
diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx b/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx
@@ -37,8 +37,8 @@ const statesWithCSSVars: {
     color: ThemingParameters.sapNeutralTextColor,
     iconColor: ThemingParameters.sapNeutralElementColor,
     inverted: {
-      color: ThemingParameters.sapButton_Neutral_TextColor,
-      backgroundColor: ThemingParameters.sapButton_Neutral_Background,
+      color: ThemingParameters.sapTextColor,
+      backgroundColor: ThemingParameters.sapNeutralBackground,
       iconColor: ThemingParameters.sapButton_Neutral_TextColor
     },
     hiddenText: undefined
@@ -264,5 +264,25 @@ describe('ObjectStatus', () => {
     cy.findByText('Custom Text').should('exist').and('not.be.visible');
   });
 
+  it('large', () => {
+    cy.mount(
+      <ObjectStatus large data-testid="os" state={ValueState.Error} showDefaultIcon>
+        Content
+      </ObjectStatus>
+    );
+    cy.findByTestId('os').should('have.css', 'font-size', '24px');
+    cy.get('[ui5-icon]').should('have.css', 'height', '24px');
+    cy.mount(
+      <ObjectStatus large data-testid="os" state={ValueState.Error} showDefaultIcon inverted>
+        Content
+      </ObjectStatus>
+    );
+    cy.findByTestId('os').should('have.css', 'font-size', '20px');
+    cy.get('[ui5-icon]').should('have.css', 'height', '20px');
+    cy.mount(<ObjectStatus large data-testid="os" state={ValueState.Error} showDefaultIcon inverted />);
+    cy.findByTestId('os').should('have.css', 'font-size', '20px');
+    cy.get('[ui5-icon]').should('have.css', 'height', '24px');
+  });
+
   cypressPassThroughTestsFactory(ObjectStatus);
 });
diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts b/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts
@@ -1,40 +1,47 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 
-const createInvertedValueStateStyles = (baseColor: string) => ({
-  textShadow: ThemingParameters.sapContent_ContrastTextShadow,
+const createInvertedValueStateStyles = (baseColor: string, lightColor = false) => ({
+  textShadow: lightColor ? ThemingParameters.sapContent_TextShadow : ThemingParameters.sapContent_ContrastTextShadow,
   background: ThemingParameters[`${baseColor}_Background`],
   color: ThemingParameters[`${baseColor}_TextColor`],
+  border: `0.0625rem solid ${ThemingParameters[`${baseColor}_BorderColor`]}`,
   '& [ui5-icon]': {
     color: ThemingParameters[`${baseColor}_TextColor`]
   },
   '&$active:hover': {
     background: ThemingParameters[`${baseColor}_Hover_Background`],
     color: ThemingParameters[`${baseColor}_Hover_TextColor`],
+    border: `0.0625rem solid ${ThemingParameters[`${baseColor}_Hover_BorderColor`]}`,
     '& [ui5-icon]': {
       color: ThemingParameters[`${baseColor}_Hover_TextColor`]
     }
   },
   '&$active:active': {
+    textShadow: ThemingParameters.sapContent_TextShadow,
     background: ThemingParameters[`${baseColor}_Active_Background`],
-    color: ThemingParameters[`${baseColor}_Active_TextColor`],
-    '& [ui5-icon]': {
-      color: ThemingParameters[`${baseColor}_Active_TextColor`]
-    }
+    border: `0.0625rem solid ${ThemingParameters[`${baseColor}_Active_BorderColor`]}`
   }
 });
 
 const createInvertedIndicationStyles = (baseColor: string) => ({
   textShadow: ThemingParameters.sapContent_ContrastTextShadow,
   color: ThemingParameters[`${baseColor}_TextColor`],
-  backgroundColor: ThemingParameters[`${baseColor}`],
+  backgroundColor: ThemingParameters[`${baseColor}_Background`],
+  border: `0.0625rem solid ${ThemingParameters[`${baseColor}_BorderColor`]}`,
   '& [ui5-icon]': {
     color: ThemingParameters[`${baseColor}_TextColor`]
   },
   '&$active:hover': {
     background: ThemingParameters[`${baseColor}_Hover_Background`]
   },
   '&$active:active': {
-    background: ThemingParameters[`${baseColor}_Active_Background`]
+    textShadow: ThemingParameters.sapContent_TextShadow,
+    background: ThemingParameters[`${baseColor}_Active_Background`],
+    border: `0.0625rem solid ${ThemingParameters[`${baseColor}_Active_BorderColor`]}`,
+    color: ThemingParameters[`${baseColor}_Active_TextColor`],
+    '& [ui5-icon]': {
+      color: ThemingParameters[`${baseColor}_Active_TextColor`]
+    }
   }
 });
 
@@ -82,10 +89,10 @@ const styles = {
     lineHeight: '1rem',
     verticalAlign: 'top',
     paddingInlineEnd: '0.25rem',
-
     '&[data-icon-only="true"]': {
       paddingInlineEnd: 0
-    }
+    },
+    textShadow: ThemingParameters.sapContent_TextShadow
   },
 
   text: {
@@ -195,25 +202,81 @@ const styles = {
     borderRadius: ThemingParameters.sapButton_BorderCornerRadius,
     fontFamily: ThemingParameters.sapFontBoldFamily,
     fontSize: ThemingParameters.sapFontSmallSize,
-    '& [ui5-icon]': {
-      paddingBlockStart: '0.125rem',
+    '& $icon': {
+      verticalAlign: 'text-bottom'
+    },
+    '& [ui5-icon], $icon:not([data-icon-only="true"])': {
       width: ThemingParameters.sapFontSmallSize,
       height: ThemingParameters.sapFontSmallSize
     },
     '&[data-icon-only="true"]': {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
-      padding: '0.1875rem 0.313rem'
+      padding: '0.1875rem 0.313rem',
+      width: '1rem',
+      height: '1rem',
+      '& [ui5-icon]': {
+        width: '1rem',
+        height: '1rem'
+      }
     },
     '$active&:focus': {
       outline: `${ThemingParameters.sapContent_FocusColor} ${ThemingParameters.sapContent_FocusStyle} ${ThemingParameters.sapContent_FocusWidth}`
     },
-    '&$error': createInvertedValueStateStyles('sapButton_Negative'),
-    '&$warning': createInvertedValueStateStyles('sapButton_Critical'),
-    '&$success': createInvertedValueStateStyles('sapButton_Success'),
-    '&$information': createInvertedValueStateStyles('sapButton_Information'),
-    '&$none': createInvertedValueStateStyles('sapButton_Neutral'),
+    '&$error': {
+      ...createInvertedValueStateStyles('sapButton_Negative'),
+      '&$active:active': {
+        ...createInvertedValueStateStyles('sapButton_Negative', true)['&$active:active'],
+        color: ThemingParameters.sapButton_Reject_Selected_TextColor,
+        '& [ui5-icon]': {
+          color: ThemingParameters.sapButton_Reject_Selected_TextColor
+        }
+      }
+    },
+    '&$warning': {
+      ...createInvertedValueStateStyles('sapButton_Critical'),
+      '&$active:active': {
+        ...createInvertedValueStateStyles('sapButton_Critical', true)['&$active:active'],
+        color: ThemingParameters.sapButton_Attention_Selected_TextColor,
+        '& [ui5-icon]': {
+          color: ThemingParameters.sapButton_Attention_Selected_TextColor
+        }
+      }
+    },
+    '&$success': {
+      ...createInvertedValueStateStyles('sapButton_Success'),
+      '&$active:active': {
+        ...createInvertedValueStateStyles('sapButton_Success', true)['&$active:active'],
+        color: ThemingParameters.sapButton_Accept_Selected_TextColor,
+        '& [ui5-icon]': {
+          color: ThemingParameters.sapButton_Accept_Selected_TextColor
+        }
+      }
+    },
+    '&$information': {
+      ...createInvertedValueStateStyles('sapButton_Information', true),
+      '&$active:active': {
+        ...createInvertedValueStateStyles('sapButton_Information', true)['&$active:active'],
+        color: ThemingParameters.sapButton_Selected_TextColor,
+        '& [ui5-icon]': {
+          color: ThemingParameters.sapButton_Selected_TextColor
+        }
+      }
+    },
+    '&$none': {
+      ...createInvertedValueStateStyles('sapButton_Neutral', true),
+      background: ThemingParameters.sapNeutralBackground,
+      color: ThemingParameters.sapTextColor,
+      border: ThemingParameters.sapNeutralBorderColor,
+      '&$active:active': {
+        ...createInvertedValueStateStyles('sapButton_Neutral', true)['&$active:active'],
+        color: ThemingParameters.sapButton_Active_TextColor,
+        '& [ui5-icon]': {
+          color: ThemingParameters.sapButton_Active_TextColor
+        }
+      }
+    },
     '&$indication01': createInvertedIndicationStyles('sapIndicationColor_1'),
     '&$indication02': createInvertedIndicationStyles('sapIndicationColor_2'),
     '&$indication03': createInvertedIndicationStyles('sapIndicationColor_3'),
@@ -222,6 +285,43 @@ const styles = {
     '&$indication06': createInvertedIndicationStyles('sapIndicationColor_6'),
     '&$indication07': createInvertedIndicationStyles('sapIndicationColor_7'),
     '&$indication08': createInvertedIndicationStyles('sapIndicationColor_8')
+  },
+  large: {
+    fontSize: '1.5rem',
+    fontFamily: ThemingParameters.sapFontLightFamily,
+    '& [ui5-icon], $icon': {
+      height: '1.5rem',
+      width: '1.5rem'
+    },
+    '& $icon': {
+      verticalAlign: 'middle'
+    },
+    '& $text': {
+      lineHeight: 'normal',
+      verticalAlign: 'middle'
+    },
+    '&$inverted': {
+      fontSize: '1.25rem',
+      fontFamily: ThemingParameters.sapFontSemiboldDuplexFamily,
+      padding: '0.125rem 0.25rem',
+      '& [ui5-icon], $icon': {
+        height: '1.25rem',
+        width: '1.25rem'
+      },
+      '&[data-icon-only="true"]': {
+        padding: '0 0.25rem',
+        minWidth: '1.75rem',
+        height: 'auto'
+      },
+      '& [data-icon-only="true"]': {
+        height: '1.5rem',
+        width: '1.5rem',
+        '& [ui5-icon]': {
+          height: '1.5rem',
+          width: '1.5rem'
+        }
+      }
+    }
   }
 };
 

diff --git a/packages/main/src/components/ObjectStatus/index.tsx b/packages/main/src/components/ObjectStatus/index.tsx
@@ -45,6 +45,13 @@ export interface ObjectStatusPropTypes extends CommonProps {
    */
   inverted?: boolean;
 
+  /**
+   * Defines if the component should be rendered in large design.
+   *
+   * @since 1.21.0
+   */
+  large?: boolean;
+
   /**
    * Defines the text of the `ObjectStatus`.<br />
    * __Note:__ Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
@@ -152,6 +159,7 @@ const ObjectStatus = forwardRef<HTMLDivElement, ObjectStatusPropTypes>((props, r
     onClick,
     emptyIndicator,
     stateAnnouncementText,
+    large,
     ...rest
   } = props;
   const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
@@ -190,6 +198,7 @@ const ObjectStatus = forwardRef<HTMLDivElement, ObjectStatusPropTypes>((props, r
     classes[`${state as string}`.toLowerCase()],
     active && classes.active,
     inverted && !showEmptyIndicator && classes.inverted,
+    large && classes.large,
     className
   );
 

diff --git a/packages/main/src/enums/IndicationColor.ts b/packages/main/src/enums/IndicationColor.ts
@@ -4,12 +4,36 @@
  * In contrast to the `ValueState`, the semantic meaning must be defined by the application.
  */
 export enum IndicationColor {
+  /**
+   * Dark Red
+   */
   Indication01 = 'Indication01',
+  /**
+   * Red
+   */
   Indication02 = 'Indication02',
+  /**
+   * Yellow
+   */
   Indication03 = 'Indication03',
+  /**
+   * Green
+   */
   Indication04 = 'Indication04',
+  /**
+   * Blue
+   */
   Indication05 = 'Indication05',
+  /**
+   * Teal
+   */
   Indication06 = 'Indication06',
+  /**
+   * Purple
+   */
   Indication07 = 'Indication07',
+  /**
+   * Pink
+   */
   Indication08 = 'Indication08'
 }