128848 remove input-group-prepend

apps/app/src/components/Admin/App/ConfirmModal.tsx

@@ -30,7 +30,7 @@ export const ConfirmModal: FC<ConfirmModalProps> = (props: ConfirmModalProps) =>
   };
 
   return (
-    <Modal isOpen={props.isModalOpen} toggle={onCancel} className="">
+    <Modal isOpen={props.isModalOpen} toggle={onCancel}>
       <ModalHeader tag="h4" toggle={onCancel} className="bg-danger">
         <i className="icon-fw icon-question" />
         {t('Warning')}

apps/app/src/components/Admin/AuditLog/DateRangePicker.tsx

@@ -18,7 +18,7 @@ const CustomInput = forwardRef<HTMLInputElement, CustomInputProps>((props: Custo
 
   return (
     <div className="input-group admin-audit-log">
-      <div className="input-group-prepend">
+      <div className="">
         <span className="input-group-text">
           <i className="fa fa-fw fa-calendar" />
         </span>

apps/app/src/components/Admin/AuditLog/SearchUsernameTypeahead.tsx

@@ -110,7 +110,7 @@ const SearchUsernameTypeaheadSubstance: ForwardRefRenderFunction<IClearable, Pro
 
   return (
     <div className="input-group mr-2">
-      <div className="input-group-prepend">
+      <div className="">
         <span className="input-group-text">
           <i className="icon-people" />
         </span>

apps/app/src/components/Admin/G2GDataTransfer.tsx

@@ -265,7 +265,7 @@ const G2GDataTransfer = (): JSX.Element => {
           </button>
         </div>
         <div className="col-md-9">
-          <div className="input-group-prepend mx-1">
+          <div className=" mx-1">
             <input className="form-control" type="text" value={transferKey} readOnly />
             <CustomCopyToClipBoard textToBeCopied={transferKey} message="admin:slack_integration.copied_to_clipboard" />
           </div>

apps/app/src/components/Admin/Notification/ManageGlobalNotification.tsx

@@ -178,7 +178,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
             ? (
               <>
                 <div className="input-group notify-to-option" id="mail-input">
-                  <div className="input-group-prepend">
+                  <div className="">
                     <span className="input-group-text" id="mail-addon"><i className="ti ti-email" /></span>
                   </div>
                   <input
@@ -206,7 +206,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
             : (
               <>
                 <div className="input-group notify-to-option" id="slack-input">
-                  <div className="input-group-prepend">
+                  <div className="">
                     <span className="input-group-text" id="slack-channel-addon"><i className="fa fa-hashtag" /></span>
                   </div>
                   <input

apps/app/src/components/Admin/Notification/UserTriggerNotification.jsx

@@ -111,7 +111,7 @@ class UserTriggerNotification extends React.Component {
 
               <td>
                 <div className="input-group notify-to-option" id="slack-input">
-                  <div className="input-group-prepend">
+                  <div className="">
                     <span className="input-group-text"><i className="fa fa-hashtag" /></span>
                   </div>
                   <input

apps/app/src/components/Admin/SlackIntegration/CustomBotWithoutProxySettingsAccordion.jsx

@@ -147,7 +147,7 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
         <div className="d-flex justify-content-center">
           <form className="form-row align-items-center" onSubmit={e => submitForm(e)}>
             <div className="input-group col-8">
-              <div className="input-group-prepend">
+              <div className="">
                 <span className="input-group-text" id="slack-channel-addon"><i className="fa fa-hashtag" /></span>
               </div>
               <input

apps/app/src/components/Admin/SlackIntegration/WithProxyAccordions.jsx

@@ -140,7 +140,7 @@ const GeneratingTokensAndRegisteringProxyServiceProcess = (props) => {
       <div className="form-group row">
         <label className="text-left text-md-right col-md-3 col-form-label">Access Token Proxy to GROWI</label>
         <div className="col-md-6">
-          <div className="input-group-prepend mx-1">
+          <div className=" mx-1">
             <input className="form-control" type="text" value={props.tokenPtoG || ''} readOnly />
             <CustomCopyToClipBoard textToBeCopied={props.tokenPtoG || ''} message="admin:slack_integration.copied_to_clipboard"></CustomCopyToClipBoard>
           </div>
@@ -149,7 +149,7 @@ const GeneratingTokensAndRegisteringProxyServiceProcess = (props) => {
       <div className="form-group row">
         <label className="text-left text-md-right col-md-3 col-form-label">Access Token GROWI to Proxy</label>
         <div className="col-md-6">
-          <div className="input-group-prepend mx-1">
+          <div className=" mx-1">
             <input className="form-control" type="text" value={props.tokenGtoP || ''} readOnly />
             <CustomCopyToClipBoard textToBeCopied={props.tokenGtoP || ''} message="admin:slack_integration.copied_to_clipboard"></CustomCopyToClipBoard>
           </div>
@@ -184,7 +184,7 @@ const GeneratingTokensAndRegisteringProxyServiceProcess = (props) => {
               dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.accordion.paste_growi_url') }}
             />
             <div className="input-group align-items-center pl-2 mb-3">
-              <div className="input-group-prepend w-75">
+              <div className=" w-75">
                 <input className="form-control" type="text" value={props.growiUrl} readOnly />
                 <CustomCopyToClipBoard textToBeCopied={props.growiUrl} message="admin:slack_integration.copied_to_clipboard"></CustomCopyToClipBoard>
               </div>
@@ -245,7 +245,7 @@ const TestProcess = ({
       <div className="d-flex justify-content-center">
         <form className="form-row justify-content-center" onSubmit={e => submitForm(e)}>
           <div className="input-group col-8">
-            <div className="input-group-prepend">
+            <div className="">
               <span className="input-group-text" id="slack-channel-addon"><i className="fa fa-hashtag" /></span>
             </div>
             <input

apps/app/src/components/CompleteUserRegistrationForm.tsx

@@ -111,14 +111,14 @@ const CompleteUserRegistrationForm: React.FC<Props> = (props: Props) => {
               <input type="hidden" name="token" value={token} />
 
               <div className="input-group">
-                <div className="input-group-prepend">
+                <div>
                   <span className="input-group-text"><i className="icon-envelope"></i></span>
                 </div>
                 <input type="text" className="form-control" placeholder={t('Email')} disabled value={email} />
               </div>
 
               <div className="input-group" id="input-group-username">
-                <div className="input-group-prepend">
+                <div>
                   <span className="input-group-text"><i className="icon-user"></i></span>
                 </div>
                 <input
@@ -138,7 +138,7 @@ const CompleteUserRegistrationForm: React.FC<Props> = (props: Props) => {
               )}
 
               <div className="input-group">
-                <div className="input-group-prepend">
+                <div>
                   <span className="input-group-text"><i className="icon-tag"></i></span>
                 </div>
                 <input
@@ -154,7 +154,7 @@ const CompleteUserRegistrationForm: React.FC<Props> = (props: Props) => {
               </div>
 
               <div className="input-group">
-                <div className="input-group-prepend">
+                <div>
                   <span className="input-group-text"><i className="icon-lock"></i></span>
                 </div>
                 <input

apps/app/src/components/DataTransferForm.tsx

@@ -23,7 +23,7 @@ const DataTransferForm = (): JSX.Element => {
           </button>
         </div>
         <div className="col-md-12 mt-1">
-          <div className="input-group-prepend">
+          <div className="">
             <input className="form-control" type="text" value={transferKey} readOnly />
             <CustomCopyToClipBoard textToBeCopied={transferKey} message="copied_to_clipboard" />
           </div>

apps/app/src/components/InstallerForm.tsx

@@ -100,7 +100,7 @@ const InstallerForm = memo((): JSX.Element => {
         <form role="form" id="register-form" className="col-md-12" onSubmit={submitHandler}>
           <div className="dropdown mb-3">
             <div className="input-group">
-              <div className="input-group-prepend dropdown-with-icon">
+              <div className=" dropdown-with-icon">
                 <i className="input-group-text icon-bubbles border-0 rounded-0" />
               </div>
               <button
@@ -147,7 +147,7 @@ const InstallerForm = memo((): JSX.Element => {
           </div>
 
           <div className={`input-group mb-3${hasErrorClass}`}>
-            <div className="input-group-prepend">
+            <div className="">
               <span className="input-group-text"><i className="icon-user" /></span>
             </div>
             <input
@@ -163,7 +163,7 @@ const InstallerForm = memo((): JSX.Element => {
           <p className="form-text">{ unavailableUserId }</p>
 
           <div className="input-group mb-3">
-            <div className="input-group-prepend">
+            <div className="">
               <span className="input-group-text"><i className="icon-tag" /></span>
             </div>
             <input
@@ -177,7 +177,7 @@ const InstallerForm = memo((): JSX.Element => {
           </div>
 
           <div className="input-group mb-3">
-            <div className="input-group-prepend">
+            <div className="">
               <span className="input-group-text"><i className="icon-envelope" /></span>
             </div>
             <input
@@ -191,7 +191,7 @@ const InstallerForm = memo((): JSX.Element => {
           </div>
 
           <div className="input-group mb-3">
-            <div className="input-group-prepend">
+            <div className="">
               <span className="input-group-text"><i className="icon-lock" /></span>
             </div>
             <input

apps/app/src/components/InvitedForm.tsx

@@ -82,7 +82,7 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
       <form role="form" onSubmit={submitHandler} id="invited-form">
         {/* Email Form */}
         <div className="input-group">
-          <div className="input-group-prepend">
+          <div className="">
             <span className="input-group-text">
               <i className="icon-envelope"></i>
             </span>
@@ -99,7 +99,7 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
         </div>
         {/* UserID Form */}
         <div className="input-group" id="input-group-username">
-          <div className="input-group-prepend">
+          <div className="">
             <span className="input-group-text">
               <i className="icon-user"></i>
             </span>
@@ -115,7 +115,7 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
         </div>
         {/* Name Form */}
         <div className="input-group">
-          <div className="input-group-prepend">
+          <div className="">
             <span className="input-group-text">
               <i className="icon-tag"></i>
             </span>
@@ -131,7 +131,7 @@ export const InvitedForm = (props: InvitedFormProps): JSX.Element => {
         </div>
         {/* Password Form */}
         <div className="input-group">
-          <div className="input-group-prepend">
+          <div className="">
             <span className="input-group-text">
               <i className="icon-lock"></i>
             </span>

apps/app/src/components/LoginForm.tsx

@@ -195,7 +195,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
 
         <form role="form" onSubmit={handleLoginWithLocalSubmit} id="login-form">
           <div className="input-group">
-            <div className="input-group-prepend">
+            <div>
               <span className="input-group-text">
                 <i className="icon-user"></i>
               </span>
@@ -218,7 +218,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
           </div>
 
           <div className="input-group">
-            <div className="input-group-prepend">
+            <div>
               <span className="input-group-text">
                 <i className="icon-lock"></i>
               </span>
@@ -421,7 +421,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
           {!isEmailAuthenticationEnabled && (
             <div>
               <div className="input-group" id="input-group-username">
-                <div className="input-group-prepend">
+                <div>
                   <span className="input-group-text">
                     <i className="icon-user"></i>
                   </span>
@@ -441,7 +441,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
                 <span id="help-block-username"></span>
               </p>
               <div className="input-group">
-                <div className="input-group-prepend">
+                <div>
                   <span className="input-group-text">
                     <i className="icon-tag"></i>
                   </span>
@@ -461,7 +461,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
           )}
 
           <div className="input-group">
-            <div className="input-group-prepend">
+            <div>
               <span className="input-group-text">
                 <i className="icon-envelope"></i>
               </span>
@@ -497,7 +497,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
           {!isEmailAuthenticationEnabled && (
             <div>
               <div className="input-group">
-                <div className="input-group-prepend">
+                <div>
                   <span className="input-group-text">
                     <i className="icon-lock"></i>
                   </span>

apps/app/src/components/Navbar/GlobalSearch.tsx

@@ -90,7 +90,7 @@ export const GlobalSearch = (props: GlobalSearchProps): JSX.Element => {
   return (
     <div className={`grw-global-search ${styles['grw-global-search']} form-group mb-0 d-print-none ${isSearchServiceReachable ? '' : 'has-error'}`}>
       <div className="input-group flex-nowrap">
-        <div className={`input-group-prepend ${dropup ? 'dropup' : ''}`}>
+        <div className={` ${dropup ? 'dropup' : ''}`}>
           <button
             className="btn btn-secondary dropdown-toggle py-0"
             type="button"

apps/app/src/components/PageDuplicateModal.tsx

@@ -163,7 +163,7 @@ const PageDuplicateModal = (): JSX.Element => {
         <div className="form-group">
           <label htmlFor="duplicatePageName">{ t('modal_duplicate.label.New page name') }</label><br />
           <div className="input-group">
-            <div className="input-group-prepend">
+            <div className="">
               <span className="input-group-text">{siteUrl}</span>
             </div>
             <div className="flex-fill">

apps/app/src/components/PageEditor/LinkEditModal.tsx

@@ -245,7 +245,7 @@ export const LinkEditModal = (): JSX.Element => {
         <form className="form-group">
           <div className="form-gorup my-3">
             <div className="input-group flex-nowrap">
-              <div className="input-group-prepend">
+              <div>
                 <span className="input-group-text">{t('link_edit.link')}</span>
               </div>
               <SearchTypeahead
@@ -275,7 +275,7 @@ export const LinkEditModal = (): JSX.Element => {
           </div>
           <div className="form-gorup my-3">
             <div className="input-group flex-nowrap">
-              <div className="input-group-prepend">
+              <div>
                 <span className="input-group-text">{t('link_edit.label')}</span>
               </div>
               <input

apps/app/src/components/PageEditor/OptionsSelector.tsx

@@ -36,7 +36,7 @@ const ThemeSelector = (): JSX.Element => {
 
   return (
     <div className="input-group flex-nowrap">
-      <div className="input-group-prepend">
+      <div>
         <span className="input-group-text" id="igt-theme">Theme</span>
       </div>
       <div className="dropup">
@@ -91,7 +91,7 @@ const KeymapSelector = memo((): JSX.Element => {
 
   return (
     <div className="input-group flex-nowrap">
-      <div className="input-group-prepend">
+      <div>
         <span className="input-group-text" id="igt-keymap">Keymap</span>
       </div>
       <div className="dropup">
@@ -133,7 +133,7 @@ const IndentSizeSelector = memo(({ isIndentSizeForced, selectedIndentSize, onCha
 
   return (
     <div className="input-group flex-nowrap">
-      <div className="input-group-prepend">
+      <div>
         <span className="input-group-text" id="igt-indent">Indent</span>
       </div>
       <div className="dropup">

apps/app/src/components/PageRenameModal.tsx

@@ -216,7 +216,7 @@ const PageRenameModal = (): JSX.Element => {
         <div className="form-group">
           <label htmlFor="newPageName">{ t('modal_rename.label.New page name') }</label><br />
           <div className="input-group">
-            <div className="input-group-prepend">
+            <div className="">
               <span className="input-group-text">{siteUrl}</span>
             </div>
             <form className="flex-fill" onSubmit={(e) => { e.preventDefault(); rename() }}>

apps/app/src/components/PrivateLegacyPages.tsx

@@ -98,7 +98,7 @@ const SearchResultListHead = React.memo((props: SearchResultListHeadProps): JSX.
           ) }
         </div>
         <div className="input-group flex-nowrap search-result-select-group ml-auto d-md-flex d-none">
-          <div className="input-group-prepend">
+          <div>
             <label className="input-group-text text-muted" htmlFor="inputGroupSelect01">{t('search_result.number_of_list_to_display')}</label>
           </div>
           <select

apps/app/src/components/SearchPage.tsx

@@ -68,7 +68,7 @@ const SearchResultListHead = React.memo((props: SearchResultListHeadProps): JSX.
         ) }
       </div>
       <div className="input-group flex-nowrap search-result-select-group ml-auto d-md-flex d-none">
-        <div className="input-group-prepend">
+        <div>
           <label className="input-group-text text-muted" htmlFor="inputGroupSelect01">{t('search_result.number_of_list_to_display')}</label>
         </div>
         <select

apps/app/src/components/SearchPage/SortControl.tsx

@@ -30,7 +30,7 @@ const SortControl: FC <Props> = (props: Props) => {
   return (
     <>
       <div className="input-group flex-nowrap">
-        <div className="input-group-prepend">
+        <div className="">
           <div className="input-group-text border text-muted" id="btnGroupAddon">
             {renderOrderIcon()}
           </div>

apps/app/src/features/growi-plugin/client/components/Admin/PluginsExtensionPageContents/PluginCard.tsx

@@ -87,7 +87,7 @@ export const PluginCard = (props: Props): JSX.Element => {
     };
 
     return (
-      <div className="">
+      <div>
         <button
           type="submit"
           className="btn btn-primary"

apps/app/src/styles/_override-rbt.scss

@@ -21,10 +21,3 @@
   display: none;
 }
 
-// seamless border for .input-group-prepend
-.input-group-prepend + div {
-  .rbt .rbt-input-main {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-}

apps/app/src/styles/theme/_apply-colors-dark.scss

@@ -94,7 +94,7 @@
   //     background-color: hsl.lighten(var(--bgcolor-global),5%);
   //   }
 
-  //   .input-group > .input-group-prepend > .input-group-text {
+  //   .input-group > .input-group-text {
   //     color: theme-color('light');
   //     background-color: theme-color('secondary');
   //     border: 1px solid theme-color('secondary');

apps/app/test/cypress/e2e/30-search/30-search--search.cy.ts

@@ -387,7 +387,7 @@ context('Search current tree with "prefix":', () => {
 
     cy.get('.grw-global-search-container').within(() => {
       cy.get('.dropdown-menu.show').should('be.visible');
-      cy.get('.input-group-prepend.show > div > button:nth-child(2)').click();
+      cy.get('.show > div > button:nth-child(2)').click();
       cy.get('.rbt-input').should('be.focused');
       cy.screenshot(`${ssPrefix}1-search-input-focused`);
     });