From aa101b10afacce8c599c92d1bf8e6023f2cdd202 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Wed, 2 Aug 2023 15:02:18 +0200 Subject: [PATCH 1/2] fix(ObjectStatus): update styles to latest spec --- .../ObjectStatus/ObjectStatus.jss.ts | 122 ++++++++++++++---- .../src/components/ObjectStatus/index.tsx | 10 +- 2 files changed, 106 insertions(+), 26 deletions(-) diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts b/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts index 72755debbdd..4ba19436f7d 100644 --- a/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts +++ b/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts @@ -1,30 +1,33 @@ import { ThemingParameters } from '@ui5/webcomponents-react-base'; const createInvertedValueStateStyles = (baseColor: string) => ({ + // todo: the normal text shadow looks blurry, therefore only the ContrastTextShadow is used + textShadow: ThemingParameters.sapContent_ContrastTextShadow, background: ThemingParameters[`${baseColor}_Background`], color: ThemingParameters[`${baseColor}_TextColor`], + border: `solid ${ThemingParameters[`${baseColor}_BorderColor`]}`, '& [ui5-icon]': { color: ThemingParameters[`${baseColor}_TextColor`] }, '&$active:hover': { background: ThemingParameters[`${baseColor}_Hover_Background`], color: ThemingParameters[`${baseColor}_Hover_TextColor`], + border: `solid ${ThemingParameters[`${baseColor}_Hover_BorderColor`]}`, '& [ui5-icon]': { color: ThemingParameters[`${baseColor}_Hover_TextColor`] } }, '&$active:active': { background: ThemingParameters[`${baseColor}_Active_Background`], - color: ThemingParameters[`${baseColor}_Active_TextColor`], - '& [ui5-icon]': { - color: ThemingParameters[`${baseColor}_Active_TextColor`] - } + border: `solid ${ThemingParameters[`${baseColor}_Active_BorderColor`]}` } }); const createInvertedIndicationStyles = (baseColor: string) => ({ + textShadow: ThemingParameters.sapContent_ContrastTextShadow, color: ThemingParameters[`${baseColor}_TextColor`], backgroundColor: ThemingParameters[`${baseColor}`], + border: `solid ${ThemingParameters[`${baseColor}_BorderColor`]}`, '& [ui5-icon]': { color: ThemingParameters[`${baseColor}_TextColor`] }, @@ -32,7 +35,12 @@ const createInvertedIndicationStyles = (baseColor: string) => ({ background: ThemingParameters[`${baseColor}_Hover_Background`] }, '&$active:active': { - background: ThemingParameters[`${baseColor}_Active_Background`] + background: ThemingParameters[`${baseColor}_Active_Background`], + border: `solid ${ThemingParameters[`${baseColor}_Active_BorderColor`]}`, + color: ThemingParameters[`${baseColor}_Active_TextColor`], + '& [ui5-icon]': { + color: ThemingParameters[`${baseColor}_Active_TextColor`] + } } }); @@ -44,7 +52,32 @@ const styles = { position: 'relative', display: 'inline-block', verticalAlign: 'top', - width: 'fit-content' + width: 'fit-content', + textShadow: ThemingParameters.sapContent_TextShadow + }, + + active: { + cursor: 'pointer', + '&:not($inverted)': { + '& $text': { + textDecoration: 'underline' + }, + '&:hover, &:active': { + '& $text': { + textDecoration: 'none' + } + }, + '&:focus': { + textShadow: 'none', + background: ThemingParameters.sapContent_FocusColor, + color: ThemingParameters.sapContent_ContrastTextColor, + borderRadius: '0.125rem', + outline: `0.125rem ${ThemingParameters.sapContent_FocusColor}`, + '& [ui5-icon]': { + color: ThemingParameters.sapContent_ContrastTextColor + } + } + } }, icon: { @@ -55,7 +88,6 @@ const styles = { lineHeight: '1rem', verticalAlign: 'top', paddingInlineEnd: '0.25rem', - '&:only-child': { paddingInlineEnd: 0 } @@ -147,33 +179,73 @@ const styles = { } }, - active: { - '&:hover, &:active': { - cursor: 'pointer', - '&:not($inverted) $text, $icon:only-child': { - textDecoration: 'underline' - } - } - }, - inverted: { height: 'auto', minHeight: '1rem', - minWidth: '1.25rem', - padding: '0.0625rem 0.25rem', - borderRadius: ThemingParameters.sapElement_BorderCornerRadius, + minWidth: '1.375rem', + padding: '0.1875rem 0.25rem', + borderRadius: ThemingParameters.sapButton_BorderCornerRadius, fontFamily: ThemingParameters.sapFontBoldFamily, fontSize: ThemingParameters.sapFontSmallSize, '& [ui5-icon]': { - paddingTop: '0.125rem', + paddingBlockStart: '0.125rem', width: ThemingParameters.sapFontSmallSize, height: ThemingParameters.sapFontSmallSize }, - '&$error': createInvertedValueStateStyles('sapButton_Negative'), - '&$warning': createInvertedValueStateStyles('sapButton_Critical'), - '&$success': createInvertedValueStateStyles('sapButton_Success'), - '&$information': createInvertedValueStateStyles('sapButton_Information'), - '&$none': createInvertedValueStateStyles('sapButton_Neutral'), + '&[data-icon-only="true"]': { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + padding: '0.1875rem 0.313rem' + }, + '$active&:focus': { + outline: `${ThemingParameters.sapContent_FocusColor} ${ThemingParameters.sapContent_FocusStyle} ${ThemingParameters.sapContent_FocusWidth}` + }, + '&$error': { + ...createInvertedValueStateStyles('sapButton_Negative'), + '&$active:active': { + color: ThemingParameters.sapButton_Reject_Selected_TextColor, + '& [ui5-icon]': { + color: ThemingParameters.sapButton_Reject_Selected_TextColor + } + } + }, + '&$warning': { + ...createInvertedValueStateStyles('sapButton_Critical'), + '&$active:active': { + color: ThemingParameters.sapButton_Attention_Selected_TextColor, + '& [ui5-icon]': { + color: ThemingParameters.sapButton_Attention_Selected_TextColor + } + } + }, + '&$success': { + ...createInvertedValueStateStyles('sapButton_Success'), + '&$active:active': { + color: ThemingParameters.sapButton_Accept_Selected_TextColor, + '& [ui5-icon]': { + color: ThemingParameters.sapButton_Accept_Selected_TextColor + } + } + }, + '&$information': { + ...createInvertedValueStateStyles('sapButton_Information'), + '&$active:active': { + color: ThemingParameters.sapButton_Selected_TextColor, + '& [ui5-icon]': { + color: ThemingParameters.sapButton_Selected_TextColor + } + } + }, + '&$none': { + ...createInvertedValueStateStyles('sapButton_Neutral'), + '&$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'), diff --git a/packages/main/src/components/ObjectStatus/index.tsx b/packages/main/src/components/ObjectStatus/index.tsx index 9be79e10506..4757603195e 100644 --- a/packages/main/src/components/ObjectStatus/index.tsx +++ b/packages/main/src/components/ObjectStatus/index.tsx @@ -107,7 +107,15 @@ const ObjectStatus = forwardRef((props, r ); return ( -
+
{iconToRender && {iconToRender}} {children && {children}}
From 96b255df240de4d57a33b8c2b8af97c2dfa52054 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Thu, 3 Aug 2023 16:58:37 +0200 Subject: [PATCH 2/2] fix(ObjectStatus): apply latest available specs --- .../ObjectStatus/ObjectStatus.jss.ts | 67 +++---------------- 1 file changed, 11 insertions(+), 56 deletions(-) diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts b/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts index 4ba19436f7d..b5de5f8c778 100644 --- a/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts +++ b/packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts @@ -1,25 +1,25 @@ import { ThemingParameters } from '@ui5/webcomponents-react-base'; const createInvertedValueStateStyles = (baseColor: string) => ({ - // todo: the normal text shadow looks blurry, therefore only the ContrastTextShadow is used textShadow: ThemingParameters.sapContent_ContrastTextShadow, background: ThemingParameters[`${baseColor}_Background`], color: ThemingParameters[`${baseColor}_TextColor`], - border: `solid ${ThemingParameters[`${baseColor}_BorderColor`]}`, '& [ui5-icon]': { color: ThemingParameters[`${baseColor}_TextColor`] }, '&$active:hover': { background: ThemingParameters[`${baseColor}_Hover_Background`], color: ThemingParameters[`${baseColor}_Hover_TextColor`], - border: `solid ${ThemingParameters[`${baseColor}_Hover_BorderColor`]}`, '& [ui5-icon]': { color: ThemingParameters[`${baseColor}_Hover_TextColor`] } }, '&$active:active': { background: ThemingParameters[`${baseColor}_Active_Background`], - border: `solid ${ThemingParameters[`${baseColor}_Active_BorderColor`]}` + color: ThemingParameters[`${baseColor}_Active_TextColor`], + '& [ui5-icon]': { + color: ThemingParameters[`${baseColor}_Active_TextColor`] + } } }); @@ -27,7 +27,6 @@ const createInvertedIndicationStyles = (baseColor: string) => ({ textShadow: ThemingParameters.sapContent_ContrastTextShadow, color: ThemingParameters[`${baseColor}_TextColor`], backgroundColor: ThemingParameters[`${baseColor}`], - border: `solid ${ThemingParameters[`${baseColor}_BorderColor`]}`, '& [ui5-icon]': { color: ThemingParameters[`${baseColor}_TextColor`] }, @@ -35,12 +34,7 @@ const createInvertedIndicationStyles = (baseColor: string) => ({ background: ThemingParameters[`${baseColor}_Hover_Background`] }, '&$active:active': { - background: ThemingParameters[`${baseColor}_Active_Background`], - border: `solid ${ThemingParameters[`${baseColor}_Active_BorderColor`]}`, - color: ThemingParameters[`${baseColor}_Active_TextColor`], - '& [ui5-icon]': { - color: ThemingParameters[`${baseColor}_Active_TextColor`] - } + background: ThemingParameters[`${baseColor}_Active_Background`] } }); @@ -88,6 +82,7 @@ const styles = { lineHeight: '1rem', verticalAlign: 'top', paddingInlineEnd: '0.25rem', + '&:only-child': { paddingInlineEnd: 0 } @@ -201,51 +196,11 @@ const styles = { '$active&:focus': { outline: `${ThemingParameters.sapContent_FocusColor} ${ThemingParameters.sapContent_FocusStyle} ${ThemingParameters.sapContent_FocusWidth}` }, - '&$error': { - ...createInvertedValueStateStyles('sapButton_Negative'), - '&$active:active': { - color: ThemingParameters.sapButton_Reject_Selected_TextColor, - '& [ui5-icon]': { - color: ThemingParameters.sapButton_Reject_Selected_TextColor - } - } - }, - '&$warning': { - ...createInvertedValueStateStyles('sapButton_Critical'), - '&$active:active': { - color: ThemingParameters.sapButton_Attention_Selected_TextColor, - '& [ui5-icon]': { - color: ThemingParameters.sapButton_Attention_Selected_TextColor - } - } - }, - '&$success': { - ...createInvertedValueStateStyles('sapButton_Success'), - '&$active:active': { - color: ThemingParameters.sapButton_Accept_Selected_TextColor, - '& [ui5-icon]': { - color: ThemingParameters.sapButton_Accept_Selected_TextColor - } - } - }, - '&$information': { - ...createInvertedValueStateStyles('sapButton_Information'), - '&$active:active': { - color: ThemingParameters.sapButton_Selected_TextColor, - '& [ui5-icon]': { - color: ThemingParameters.sapButton_Selected_TextColor - } - } - }, - '&$none': { - ...createInvertedValueStateStyles('sapButton_Neutral'), - '&$active:active': { - color: ThemingParameters.sapButton_Active_TextColor, - '& [ui5-icon]': { - color: ThemingParameters.sapButton_Active_TextColor - } - } - }, + '&$error': createInvertedValueStateStyles('sapButton_Negative'), + '&$warning': createInvertedValueStateStyles('sapButton_Critical'), + '&$success': createInvertedValueStateStyles('sapButton_Success'), + '&$information': createInvertedValueStateStyles('sapButton_Information'), + '&$none': createInvertedValueStateStyles('sapButton_Neutral'), '&$indication01': createInvertedIndicationStyles('sapIndicationColor_1'), '&$indication02': createInvertedIndicationStyles('sapIndicationColor_2'), '&$indication03': createInvertedIndicationStyles('sapIndicationColor_3'),