diff options
Diffstat (limited to 'server/sonar-web/design-system/src/components')
9 files changed, 28 insertions, 57 deletions
diff --git a/server/sonar-web/design-system/src/components/Banner.tsx b/server/sonar-web/design-system/src/components/Banner.tsx index 4da28d16d1e..f7053a03924 100644 --- a/server/sonar-web/design-system/src/components/Banner.tsx +++ b/server/sonar-web/design-system/src/components/Banner.tsx @@ -30,6 +30,7 @@ export type Variant = 'error' | 'warning' | 'success' | 'info'; interface Props { children: ReactNode; + className?: string; onDismiss?: VoidFunction; variant: Variant; } @@ -61,19 +62,19 @@ function getVariantInfo(variant: Variant) { return variantList[variant]; } -export function Banner({ children, onDismiss, variant }: Props) { +export function Banner({ children, className, onDismiss, variant }: Props) { const variantInfo = getVariantInfo(variant); const intl = useIntl(); return ( - <div role="alert" style={{ height: LAYOUT_BANNER_HEIGHT }}> + <div className={className} role="alert" style={{ height: LAYOUT_BANNER_HEIGHT }}> <BannerWrapper backGroundColor={variantInfo.backGroundColor} fontColor={variantInfo.fontColor} > <BannerInner> - <div className="sw-flex"> + <div className="sw-flex sw-items-center"> <div className="sw-mr-3">{variantInfo.icon}</div> {children} </div> @@ -103,7 +104,7 @@ const BannerWrapper = styled.div<{ height: inherit; background-color: ${({ backGroundColor }) => themeColor(backGroundColor)}; color: ${({ fontColor }) => themeColor(fontColor)}; - ${tw`sw-z-global-navbar sw-fixed sw-w-full`} + ${tw`sw-z-popup sw-fixed sw-w-full`} ${tw`sw-sticky sw-top-0`} `; diff --git a/server/sonar-web/design-system/src/components/Spinner.tsx b/server/sonar-web/design-system/src/components/Spinner.tsx index a0ecc957962..d76bbfef775 100644 --- a/server/sonar-web/design-system/src/components/Spinner.tsx +++ b/server/sonar-web/design-system/src/components/Spinner.tsx @@ -49,16 +49,25 @@ export function Spinner(props: React.PropsWithChildren<Props>) { } return ( - <> + // Below: using <></> won't work in extenstions ('React' is not defined). This is because the + // name 'React' would already have been minified to something else when <> is resolved to + // React.Fragment + // eslint-disable-next-line react/jsx-fragments + <React.Fragment> <div className="sw-relative"> - <div className={classNames('sw-overflow-hidden', { 'sw-sr-only': !loading })}> + <div + className={classNames('sw-overflow-hidden', { + 'sw-sr-only': !loading, + it__loading: loading, + })} + > <StyledSpinner aria-live="polite" className={className} role="status"> {loading && <span className="sw-sr-only">{ariaLabel}</span>} </StyledSpinner> </div> </div> {!loading && (children ?? (placeholder && <Placeholder className={className} />) ?? null)} - </> + </React.Fragment> ); } diff --git a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap index 6d2f58112e9..b279c96b379 100644 --- a/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap +++ b/server/sonar-web/design-system/src/components/__tests__/__snapshots__/CodeSnippet-test.tsx.snap @@ -91,12 +91,6 @@ exports[`should highlight code content correctly 1`] = ` pointer-events: none; } -.emotion-4:hover, -.emotion-4:active, -.emotion-4:focus { - border-color: rgb(197,205,223); -} - .code-snippet-highlighted-oneline .emotion-4 { bottom: 0.5rem; } @@ -303,12 +297,6 @@ exports[`should show full size when multiline with no editing 1`] = ` pointer-events: none; } -.emotion-4:hover, -.emotion-4:active, -.emotion-4:focus { - border-color: rgb(197,205,223); -} - .code-snippet-highlighted-oneline .emotion-4 { bottom: 0.5rem; } @@ -519,12 +507,6 @@ exports[`should show reduced size when single line with no editing 1`] = ` pointer-events: none; } -.emotion-4:hover, -.emotion-4:active, -.emotion-4:focus { - border-color: rgb(197,205,223); -} - .code-snippet-highlighted-oneline .emotion-4 { bottom: 0.5rem; } diff --git a/server/sonar-web/design-system/src/components/buttons/ButtonSecondary.tsx b/server/sonar-web/design-system/src/components/buttons/ButtonSecondary.tsx index fafaa4259cc..bd898e1e4ed 100644 --- a/server/sonar-web/design-system/src/components/buttons/ButtonSecondary.tsx +++ b/server/sonar-web/design-system/src/components/buttons/ButtonSecondary.tsx @@ -27,10 +27,4 @@ export const ButtonSecondary: React.FC<React.PropsWithChildren<ButtonProps>> = s --color: ${themeContrast('buttonSecondary')}; --focus: ${themeColor('buttonSecondaryBorder', OPACITY_20_PERCENT)}; --border: ${themeBorder('default', 'buttonSecondaryBorder')}; - - &:hover, - &:active, - &:focus { - border-color: ${themeColor('buttonSecondaryBorder')}; - } `; diff --git a/server/sonar-web/design-system/src/components/buttons/DangerButtonSecondary.tsx b/server/sonar-web/design-system/src/components/buttons/DangerButtonSecondary.tsx index c3cb55e3e8d..94935bf0bf0 100644 --- a/server/sonar-web/design-system/src/components/buttons/DangerButtonSecondary.tsx +++ b/server/sonar-web/design-system/src/components/buttons/DangerButtonSecondary.tsx @@ -27,10 +27,4 @@ export const DangerButtonSecondary: React.FC<React.PropsWithChildren<ButtonProps --color: ${themeContrast('dangerButtonSecondary')}; --focus: ${themeColor('dangerButtonSecondaryFocus', OPACITY_20_PERCENT)}; --border: ${themeBorder('default', 'dangerButtonSecondaryBorder')}; - - &:hover, - &:active, - &:focus { - border-color: ${themeColor('dangerButtonSecondaryBorder')}; - } `; diff --git a/server/sonar-web/design-system/src/components/input/DatePicker.tsx b/server/sonar-web/design-system/src/components/input/DatePicker.tsx index e282d1e4eed..89d4c415549 100644 --- a/server/sonar-web/design-system/src/components/input/DatePicker.tsx +++ b/server/sonar-web/design-system/src/components/input/DatePicker.tsx @@ -236,13 +236,11 @@ const StyledInteractiveIcon = styled(InteractiveIcon)` `; const StyledInputField = styled(InputField)` - input[type='text']& { - ${tw`sw-pl-8`}; - ${tw`sw-cursor-pointer`}; + ${tw`sw-pl-8`}; + ${tw`sw-cursor-pointer`}; - &.is-filled { - ${tw`sw-pr-8`}; - } + &.is-filled { + ${tw`sw-pr-8`}; } `; diff --git a/server/sonar-web/design-system/src/components/input/InputField.tsx b/server/sonar-web/design-system/src/components/input/InputField.tsx index 2d37c9b095f..3690c438216 100644 --- a/server/sonar-web/design-system/src/components/input/InputField.tsx +++ b/server/sonar-web/design-system/src/components/input/InputField.tsx @@ -129,14 +129,9 @@ const baseStyle = (props: ThemedProps) => css` `; const StyledInput = styled.input` - input[type='text']&, - input[type='number']&, - input[type='password']&, - input[type='email']& { - ${getInputVariant} - ${baseStyle} - ${tw`sw-h-control`} - } + ${getInputVariant} + ${baseStyle} + ${tw`sw-h-control`} `; const StyledTextArea = styled.textarea` diff --git a/server/sonar-web/design-system/src/components/input/RadioButton.tsx b/server/sonar-web/design-system/src/components/input/RadioButton.tsx index 2797de1b7f5..7ee29e59f89 100644 --- a/server/sonar-web/design-system/src/components/input/RadioButton.tsx +++ b/server/sonar-web/design-system/src/components/input/RadioButton.tsx @@ -140,9 +140,9 @@ export const RadioButtonStyled = styled.input` to right, ${themeColor('radioDisabledBackground')}, ${themeColor('radioDisabledBackground')} - ) !important; - background-clip: content-box, padding-box !important; - border: ${themeBorder('default', 'radioDisabledBorder')} !important; + ); + background-clip: content-box, padding-box; + border: ${themeBorder('default', 'radioDisabledBorder')}; } } `; diff --git a/server/sonar-web/design-system/src/components/modal/Modal.tsx b/server/sonar-web/design-system/src/components/modal/Modal.tsx index 8ba03e93d02..d7654dbce00 100644 --- a/server/sonar-web/design-system/src/components/modal/Modal.tsx +++ b/server/sonar-web/design-system/src/components/modal/Modal.tsx @@ -92,7 +92,7 @@ export function Modal({ <ReactModal aria={{ labelledby: 'modal_header_title' }} - className={classNames('design-system-modal-contents modal', { large: isLarge })} + className={classNames('design-system-modal-contents', { large: isLarge })} isOpen={isOpen} onRequestClose={onClose} overlayClassName="design-system-modal-overlay" @@ -148,8 +148,6 @@ const globalStyles = ({ theme }: { theme: Theme }) => css` &.large { max-width: 1280px; min-width: 1040px; - transform: translateX(-50%); - margin-left: 0px; } } |