updates css

elastic · Feb 7, 2023 · c883c2c · c883c2c
1 parent ce349e5
commit c883c2c
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 8 deletions.
diff --git a/x-pack/plugins/security_solution/public/common/components/utility_bar/styles.tsx b/x-pack/plugins/security_solution/public/common/components/utility_bar/styles.tsx
@@ -112,9 +112,9 @@ export const BarGroup = styled.div.attrs({
 `;
 BarGroup.displayName = 'BarGroup';
 
-export const BarText = styled.p.attrs({
-  className: 'siemUtilityBar__text',
-})<{ shouldWrap: boolean }>`
+export const BarText = styled.p.attrs(({ className }) => ({
+  className: className || 'siemUtilityBar__text',
+}))<{ shouldWrap: boolean }>`
   ${({ shouldWrap, theme }) => css`
     color: ${theme.eui.euiTextSubduedColor};
     font-size: ${theme.eui.euiFontSizeXS};

diff --git a/x-pack/plugins/security_solution/public/common/components/utility_bar/utility_bar_text.tsx b/x-pack/plugins/security_solution/public/common/components/utility_bar/utility_bar_text.tsx
@@ -13,11 +13,12 @@ export interface UtilityBarTextProps {
   children: string | JSX.Element;
   dataTestSubj?: string;
   shouldWrap?: boolean;
+  className?: string;
 }
 
 export const UtilityBarText = React.memo<UtilityBarTextProps>(
-  ({ children, dataTestSubj, shouldWrap = false }) => (
-    <BarText data-test-subj={dataTestSubj} shouldWrap={shouldWrap}>
+  ({ children, dataTestSubj, shouldWrap = false, className }) => (
+    <BarText data-test-subj={dataTestSubj} shouldWrap={shouldWrap} className={className}>
       {children}
     </BarText>
   )

diff --git a/...on/public/detection_engine/rule_exceptions/components/all_exception_items_table/index.tsx b/...on/public/detection_engine/rule_exceptions/components/all_exception_items_table/index.tsx
@@ -517,7 +517,7 @@ const ExceptionsViewerComponent = ({
                 onChangeExceptionsToShow={handleExceptionsToShow}
                 lastUpdated={lastUpdated}
               />
-              <EuiSpacer size="l" />
+              <EuiSpacer size="m" />
               <ExceptionsViewerSearchBar
                 canAddException={isReadOnly}
                 isEndpoint={isEndpointSpecified}

diff --git a/...lic/detection_engine/rule_exceptions/components/all_exception_items_table/utility_bar.tsx b/...lic/detection_engine/rule_exceptions/components/all_exception_items_table/utility_bar.tsx
@@ -32,6 +32,10 @@ const StyledBarGroup = styled(EuiFlexGroup)`
   align-items: center;
 `;
 
+const PaginationUtilityBarText = styled(UtilityBarText)`
+  align-self: center;
+`;
+
 interface ExceptionsViewerUtilityProps {
   pagination: ExceptionsPagination;
   // Corresponds to last time exception items were fetched
@@ -54,7 +58,7 @@ const ExceptionsViewerUtilityComponent: React.FC<ExceptionsViewerUtilityProps> =
       <UtilityBar>
         <UtilityBarSection>
           <UtilityBarGroup>
-            <UtilityBarText dataTestSubj="exceptionsShowing">
+            <PaginationUtilityBarText dataTestSubj="exceptionsShowing">
               <FormattedMessage
                 id="xpack.securitySolution.exceptions.viewer.paginationDetails"
                 defaultMessage="Showing {partOne} of {partTwo}"
@@ -68,7 +72,7 @@ const ExceptionsViewerUtilityComponent: React.FC<ExceptionsViewerUtilityProps> =
                   partTwo: <StyledText>{`${pagination.totalItemCount}`}</StyledText>,
                 }}
               />
-            </UtilityBarText>
+            </PaginationUtilityBarText>
           </UtilityBarGroup>
         </UtilityBarSection>
         <UtilityBarSection>