Updated Fit and Finish guidelines

opensearch-project · Sep 5, 2024 · 5666496 · 5666496
1 parent 9645673
commit 5666496
Show file tree

Hide file tree

Showing 23 changed files with 118 additions and 60 deletions.
diff --git a/public/components/ContentPanel/ContentPanel.tsx b/public/components/ContentPanel/ContentPanel.tsx
@@ -8,13 +8,13 @@ import {
   EuiFlexItem,
   EuiHorizontalRule,
   EuiPanel,
-  EuiTitle,
+  EuiText,
 } from '@elastic/eui';
 import React from 'react';
 
 interface ContentPanelProps {
   title?: string;
-  titleSize?: 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l';
+  titleSize?: 'xs' | 's' | 'm';
   total?: number;
   bodyStyles?: object;
   panelStyles?: object;
@@ -25,7 +25,7 @@ interface ContentPanelProps {
 
 const ContentPanel: React.SFC<ContentPanelProps> = ({
   title = '',
-  titleSize = 'l',
+  titleSize = 's',
   total = undefined,
   bodyStyles = {},
   panelStyles = {},
@@ -40,16 +40,16 @@ const ContentPanel: React.SFC<ContentPanelProps> = ({
       alignItems="center"
     >
       <EuiFlexItem>
-        <EuiTitle size={titleSize}>
-          <h3>
+        <EuiText size={titleSize}>
+          <h2>
             {title}
             {total !== undefined ? (
               <span
                 style={{ color: '#9f9f9f', fontWeight: 300 }}
               >{` (${total})`}</span>
             ) : null}
-          </h3>
-        </EuiTitle>
+          </h2>
+        </EuiText>
       </EuiFlexItem>
       {actions ? (
         <EuiFlexItem grow={false}>

diff --git a/public/pages/Channels/Channels.tsx b/public/pages/Channels/Channels.tsx
@@ -14,6 +14,7 @@ import {
   EuiTableSortingType,
   EuiTitle,
   SortDirection,
+  EuiText,
 } from '@elastic/eui';
 import { Criteria } from '@elastic/eui/src/components/basic_table/basic_table';
 import { Pagination } from '@elastic/eui/src/components/basic_table/pagination_bar';
@@ -257,8 +258,8 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
       isSelectable={true}
       selection={selection}
       noItemsMessage={<EuiEmptyPrompt
-        title={<h2>No channels to display</h2>}
-        body="To send or receive notifications, you will need to create a notification channel."
+        title={<EuiText size="s"><h2>No channels to display</h2></EuiText>}
+        body={<EuiText size="s">"To send or receive notifications, you will need to create a notification channel."</EuiText>}
         actions={<EuiSmallButton href={`#${ROUTES.CREATE_CHANNEL}`}>
           Create channel
         </EuiSmallButton>} />}
@@ -309,7 +310,7 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
           }
           bodyStyles={{ padding: 'initial' }}
           title="Channels"
-          titleSize="m"
+          titleSize="s"
           total={this.state.total}
         >
           {channelControlsComponent}
@@ -318,7 +319,7 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
         </ContentPanel>
       )}
     </>
-    
+
     );
   }
 };

diff --git a/public/pages/Channels/components/ChannelActions.tsx b/public/pages/Channels/components/ChannelActions.tsx
@@ -99,6 +99,7 @@ export function ChannelActions(props: ChannelActionsProps) {
             <EuiContextMenuItem
               key={params.label}
               disabled={params.disabled}
+              size="s"
               onClick={() => {
                 setIsPopoverOpen(false);
                 if (params.modal) {

diff --git a/public/pages/Channels/components/details/ChannelDetails.tsx b/public/pages/Channels/components/details/ChannelDetails.tsx
@@ -11,7 +11,6 @@ import {
   EuiSmallButton,
   EuiSpacer,
   EuiText,
-  EuiTitle,
 } from '@elastic/eui';
 import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
 import React, { useContext, useEffect, useState } from 'react';
@@ -231,9 +230,9 @@ export function ChannelDetails(props: ChannelDetailsProps) {
           <EuiFlexItem grow={false}>
             <EuiFlexGroup gutterSize="m" alignItems="flexEnd">
               <EuiFlexItem grow={false}>
-                <EuiTitle size="l">
+                <EuiText size="s">
                   <h1>{channel?.name ?? '-'}</h1>
-                </EuiTitle>
+                </EuiText>
               </EuiFlexItem>
               {badgeComponent}
             </EuiFlexGroup>

diff --git a/public/pages/Channels/components/details/ChannelDetailsActions.tsx b/public/pages/Channels/components/details/ChannelDetailsActions.tsx
@@ -101,6 +101,7 @@ export function ChannelDetailsActions(props: ChannelDetailsActionsProps) {
             <EuiContextMenuItem
               key={params.label}
               disabled={params.disabled}
+              size="s"
               onClick={() => {
                 setIsPopoverOpen(false);
                 if (params.modal) {

diff --git a/public/pages/Channels/components/modals/DeleteChannelModal.tsx b/public/pages/Channels/components/modals/DeleteChannelModal.tsx
@@ -48,25 +48,30 @@ export const DeleteChannelModal = (props: DeleteChannelModalProps) => {
     <EuiOverlayMask>
       <EuiModal onClose={props.onClose} maxWidth={500}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>{`Delete ${name}?`}</EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>
+            <EuiText size="s">
+              <h2>{`Delete ${name}?`}</h2>
+            </EuiText>
+          </EuiModalHeaderTitle>
         </EuiModalHeader>
         <EuiModalBody>
-          <EuiText>{message}</EuiText>
+          <EuiText size="s">{message}</EuiText>
           {num >= 2 && (
             <>
               <EuiSpacer />
               {props.selected.map((channel, i) => (
                 <EuiText
                   key={`channel-list-item-${i}`}
                   style={{ marginLeft: 20 }}
+                  size="s"
                 >
                   <li>{channel.name}</li>
                 </EuiText>
               ))}
             </>
           )}
           <EuiSpacer />
-          <EuiText>
+          <EuiText size="s">
             To confirm delete, type <i>delete</i> in the field.
           </EuiText>
           <EuiCompressedFieldText

diff --git a/public/pages/Channels/components/modals/DetailsListModal.tsx b/public/pages/Channels/components/modals/DetailsListModal.tsx
@@ -13,6 +13,7 @@ import {
   EuiModalHeaderTitle,
   EuiOverlayMask,
   EuiTitle,
+  EuiText,
 } from '@elastic/eui';
 import React from 'react';
 import { ModalRootProps } from '../../../../components/Modal/ModalRoot';
@@ -30,7 +31,11 @@ export function DetailsListModal(props: DetailsListModalProps) {
       <EuiOverlayMask>
         <EuiModal onClose={props.onClose} maxWidth={800}>
           <EuiModalHeader>
-            <EuiModalHeaderTitle>{props.header}</EuiModalHeaderTitle>
+            <EuiModalHeaderTitle>
+              <EuiText size="s">
+                <h2>{props.header}</h2>
+              </EuiText>
+            </EuiModalHeaderTitle>
           </EuiModalHeader>
           <EuiModalBody>
             <EuiTitle size="xxs">

diff --git a/public/pages/Channels/components/modals/DetailsTableModal.tsx b/public/pages/Channels/components/modals/DetailsTableModal.tsx
@@ -13,6 +13,7 @@ import {
   EuiModalHeaderTitle,
   EuiOverlayMask,
   EuiTableFieldDataColumnType,
+  EuiText,
 } from '@elastic/eui';
 import React from 'react';
 import { ModalRootProps } from '../../../../components/Modal/ModalRoot';
@@ -49,7 +50,11 @@ export function DetailsTableModal(props: DetailsTableModalProps) {
       <EuiOverlayMask>
         <EuiModal onClose={props.onClose} maxWidth={800}>
           <EuiModalHeader>
-            <EuiModalHeaderTitle>{props.header}</EuiModalHeaderTitle>
+            <EuiModalHeaderTitle>
+              <EuiText size="s">
+                <h2>{props.header}</h2>
+              </EuiText>
+            </EuiModalHeaderTitle>
           </EuiModalHeader>
           <EuiModalBody>
             <EuiInMemoryTable items={props.items} columns={columns} />

diff --git a/public/pages/Channels/components/modals/MuteChannelModal.tsx b/public/pages/Channels/components/modals/MuteChannelModal.tsx
@@ -37,10 +37,14 @@ export const MuteChannelModal = (props: MuteChannelModalProps) => {
     <EuiOverlayMask>
       <EuiModal onClose={props.onClose} maxWidth={500}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>{`Mute ${props.selected[0].name}?`}</EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>
+            <EuiText size="s">
+              <h2>{`Mute ${props.selected[0].name}?`}</h2>
+            </EuiText>
+          </EuiModalHeaderTitle>
         </EuiModalHeader>
         <EuiModalBody>
-          <EuiText>
+          <EuiText size="s">
             This channel will stop sending notifications to its recipients.
             However, the channel will remain available for selection.
           </EuiText>

diff --git a/public/pages/CreateChannel/CreateChannel.tsx b/public/pages/CreateChannel/CreateChannel.tsx
@@ -14,7 +14,6 @@ import {
   EuiCompressedSuperSelect,
   EuiSuperSelectOption,
   EuiText,
-  EuiTitle,
 } from '@elastic/eui';
 import queryString from 'query-string';
 import React, { createContext, useContext, useEffect, useState } from 'react';
@@ -365,9 +364,9 @@ export function CreateChannel(props: CreateChannelsProps) {
         value={{ edit: props.edit, inputErrors, setInputErrors }}
       >
        {!getUseUpdatedUx() && (
-          <EuiTitle size="l">
+          <EuiText size="s">
             <h1>{`${props.edit ? 'Edit' : 'Create'} channel`}</h1>
-          </EuiTitle>
+          </EuiText>
         )}
 
         <EuiSpacer />

diff --git a/public/pages/CreateChannel/components/modals/CreateRecipientGroupModal.tsx b/public/pages/CreateChannel/components/modals/CreateRecipientGroupModal.tsx
@@ -13,6 +13,7 @@ import {
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiOverlayMask,
+  EuiText,
 } from '@elastic/eui';
 import React, { useContext, useState } from 'react';
 import { CoreServicesContext } from '../../../../components/coreServices';
@@ -66,7 +67,11 @@ export function CreateRecipientGroupModal(
     <EuiOverlayMask>
       <EuiModal onClose={props.onClose} style={{ width: 650 }}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>Create recipient group</EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>
+            <EuiText size="s">
+              <h2>Create recipient group</h2>
+            </EuiText>
+          </EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>

diff --git a/public/pages/CreateChannel/components/modals/CreateSESSenderModal.tsx b/public/pages/CreateChannel/components/modals/CreateSESSenderModal.tsx
@@ -13,6 +13,7 @@ import {
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiOverlayMask,
+  EuiText,
 } from '@elastic/eui';
 import React, { useContext, useState } from 'react';
 import { CoreServicesContext } from '../../../../components/coreServices';
@@ -70,7 +71,11 @@ export function CreateSESSenderModal(props: CreateSESSenderModalProps) {
     <EuiOverlayMask>
       <EuiModal onClose={props.onClose} style={{ width: 750 }}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>Create SES sender</EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>
+            <EuiText size="s">
+              <h2>Create SES sender</h2>
+            </EuiText>
+          </EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>

diff --git a/public/pages/CreateChannel/components/modals/CreateSenderModal.tsx b/public/pages/CreateChannel/components/modals/CreateSenderModal.tsx
@@ -13,6 +13,7 @@ import {
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiOverlayMask,
+  EuiText,
 } from '@elastic/eui';
 import React, { useContext, useState } from 'react';
 import { CoreServicesContext } from '../../../../components/coreServices';
@@ -68,7 +69,11 @@ export function CreateSenderModal(props: CreateSenderModalProps) {
     <EuiOverlayMask>
       <EuiModal onClose={props.onClose} style={{ width: 750 }}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>Create SMTP sender</EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>
+            <EuiText size="s">
+              <h2>Create SMTP sender</h2>
+            </EuiText>
+          </EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>

diff --git a/public/pages/Emails/CreateRecipientGroup.tsx b/public/pages/Emails/CreateRecipientGroup.tsx
@@ -10,7 +10,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
-  EuiTitle,
+  EuiText,
 } from '@elastic/eui';
 import React, { useContext, useEffect, useState } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
@@ -105,9 +105,9 @@ export function CreateRecipientGroup(props: CreateRecipientGroupProps) {
   return (
     <>
       {!getUseUpdatedUx() && (
-        <EuiTitle size="l">
+        <EuiText size="s">
           <h1>{`${props.edit ? 'Edit' : 'Create'} recipient group`}</h1>
-        </EuiTitle>
+        </EuiText>
       )}
 
       <EuiSpacer />

diff --git a/public/pages/Emails/CreateSESSender.tsx b/public/pages/Emails/CreateSESSender.tsx
@@ -9,7 +9,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
-  EuiTitle,
+  EuiText,
 } from '@elastic/eui';
 import React, { useContext, useEffect, useState } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
@@ -102,9 +102,9 @@ export function CreateSESSender(props: CreateSESSenderProps) {
   return (
     <>
       {!getUseUpdatedUx() && (
-        <EuiTitle size="l">
+        <EuiText size="s">
           <h1>{`${props.edit ? 'Edit' : 'Create'} SES sender`}</h1>
-        </EuiTitle>
+        </EuiText>
       )}
 
       <EuiSpacer />

diff --git a/public/pages/Emails/CreateSender.tsx b/public/pages/Emails/CreateSender.tsx
@@ -9,7 +9,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
-  EuiTitle,
+  EuiText,
 } from '@elastic/eui';
 import React, { useContext, useEffect, useState } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
@@ -99,9 +99,9 @@ export function CreateSender(props: CreateSenderProps) {
   return (
     <>
       {!getUseUpdatedUx() && (
-        <EuiTitle size="l">
+        <EuiText size="s">
           <h1>{`${props.edit ? 'Edit' : 'Create'} SMTP sender`}</h1>
-        </EuiTitle>
+        </EuiText>
       )}
 
       <EuiSpacer />

diff --git a/public/pages/Emails/EmailGroups.tsx b/public/pages/Emails/EmailGroups.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiSpacer, EuiText } from '@elastic/eui';
 import React, { useContext, useEffect } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { CoreServicesContext } from '../../components/coreServices';
@@ -29,9 +29,9 @@ export function EmailGroups(props: EmailGroupsProps) {
   return (
     <>
       {!getUseUpdatedUx() && (
-        <EuiTitle size="l">
+        <EuiText size="s">
           <h1>Email recipient groups</h1>
-        </EuiTitle>
+        </EuiText>
       )}
 
       <EuiSpacer />