Merge pull request #8016 from weseek/support/128306-129174-bs-five-buttons

support: Bootstrap v5 braking changes Buttons

apps/app/src/components/Admin/Security/SamlSecuritySettingContents.jsx

@@ -479,7 +479,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
                           <div className="card-header p-1">
                             <h2 className="mb-0">
                               <button
-                                className="btn btn-link btn-block text-left"
+                                className="btn btn-link text-left"
                                 type="button"
                                 onClick={() => this.setState({ isHelpOpened: !this.state.isHelpOpened })}
                                 aria-expanded="true"

apps/app/src/components/CustomNavigation/CustomNav.tsx

@@ -49,9 +49,9 @@ export const CustomNavDropdown = (props: CustomNavDropdownProps): JSX.Element =>
   }, [onNavSelected]);
 
   return (
-    <div className="grw-custom-nav-dropdown btn-group btn-block">
+    <div className="grw-custom-nav-dropdown btn-group">
       <button
-        className="btn btn-outline-primary btn-lg btn-block dropdown-toggle text-right"
+        className="btn btn-outline-primary btn-lg dropdown-toggle text-right"
         type="button"
         data-toggle="dropdown"
         aria-haspopup="true"

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

@@ -104,7 +104,7 @@ export const Cheatsheet = (): JSX.Element => {
         {renderCheetSheetElm(imageStr)}
 
         <hr />
-        <a href="/Sandbox" className="btn btn-info btn-block" target="_blank">
+        <a href="/Sandbox" className="btn btn-info" target="_blank">
           <i className="icon-share-alt" /> {t('sandbox.open_sandbox')}
         </a>
       </div>

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

@@ -340,7 +340,7 @@ const Editor: ForwardRefRenderFunction<IEditorMethods, EditorPropsType> = (props
           && (
             <button
               type="button"
-              className="btn btn-outline-secondary btn-block btn-open-dropzone"
+              className="btn btn-outline-secondary btn-open-dropzone"
               onClick={addAttachmentHandler}
             >
               <i className="icon-paper-clip" aria-hidden="true"></i>&nbsp;

apps/app/src/components/PageSideContents.tsx

@@ -45,7 +45,7 @@ export const PageSideContents = (props: PageSideContentsProps): JSX.Element => {
         {!isSharedUser && (
           <button
             type="button"
-            className="btn btn-block btn-outline-secondary grw-btn-page-accessories rounded-pill d-flex justify-content-between align-items-center"
+            className="btn btn-outline-secondary grw-btn-page-accessories rounded-pill d-flex justify-content-between align-items-center"
             onClick={() => openDescendantPageListModal(pagePath)}
             data-testid="pageListButton"
           >
@@ -68,7 +68,7 @@ export const PageSideContents = (props: PageSideContentsProps): JSX.Element => {
           <Link to="page-comments" offset={-120}>
             <button
               type="button"
-              className="btn btn-block btn-outline-secondary grw-btn-page-accessories rounded-pill d-flex justify-content-between align-items-center"
+              className="btn btn-outline-secondary grw-btn-page-accessories rounded-pill d-flex justify-content-between align-items-center"
               data-testid="page-comment-button"
             >
               <i className="icon-fw icon-bubbles grw-page-accessories-control-icon"></i>

apps/app/src/components/PasswordResetExecutionForm.tsx

@@ -78,7 +78,7 @@ const PasswordResetExecutionForm: FC = () => {
         )}
       </div>
       <div className="form-group">
-        <input name="reset-password-btn" className="btn btn-lg btn-primary btn-block" value={t('forgot_password.reset_password')} type="submit" />
+        <input name="reset-password-btn" className="btn btn-lg btn-primary" value={t('forgot_password.reset_password')} type="submit" />
       </div>
       <Link href="/login" prefetch={false}>
         <i className="icon-login mr-1"></i>{t('forgot_password.sign_in_instead')}

apps/app/src/components/PasswordResetRequestForm.tsx

@@ -57,7 +57,7 @@ const PasswordResetRequestForm: FC = () => {
           </div>
           <div className="form-group">
             <button
-              className="btn btn-lg btn-primary btn-block"
+              className="btn btn-lg btn-primary"
               type="submit"
               disabled={!isMailerSetup}
             >

apps/app/src/components/Sidebar/Bookmarks/BookmarkContents.tsx

@@ -42,7 +42,7 @@ export const BookmarkContents = (): JSX.Element => {
       <div className="col-8 mb-2 ">
         <button
           type="button"
-          className="btn btn-block btn-outline-secondary rounded-pill d-flex justify-content-start align-middle"
+          className="btn btn-outline-secondary rounded-pill d-flex justify-content-start align-middle"
           onClick={onClickNewBookmarkFolder}
         >
           <FolderPlusIcon />

apps/app/src/components/Sidebar/PersonalDropdown.tsx

@@ -67,7 +67,7 @@ export const PersonalDropdown = (): JSX.Element => {
               <i className="icon-envelope icon-fw"></i><span className="grw-email-sm">{currentUser.email}</span>
             </div>
 
-            <div className="btn-group btn-block mt-2" role="group">
+            <div className="btn-group mt-2" role="group">
               <Link
                 href={pagePathUtils.userHomepagePath(currentUser)}
                 className="btn btn-sm btn-outline-secondary col"

apps/app/src/features/questionnaire/client/components/Question.tsx

@@ -21,7 +21,7 @@ const Question = ({ question, inputNamePrefix }: QuestionProps): JSX.Element =>
         </span>
       </div>
       <div className="col-6 d-flex align-items-center pl-0">
-        <div className="btn-group btn-group-toggle flex-fill grw-questionnaire-btn-group" data-toggle="buttons">
+        <div className="btn-group flex-fill grw-questionnaire-btn-group">
           <label className="btn btn-outline-primary active mr-4 rounded">
             <input type="radio" name={`${inputNamePrefix + question._id}`} id={`${question._id}-noAnswer`} value="0" defaultChecked /> -
           </label>

packages/remark-lsx/src/client/components/Lsx.tsx

@@ -111,7 +111,7 @@ const LsxSubstance = React.memo(({
         <div className="col-12 col-sm-8 d-flex flex-column align-items-center lsx-load-more-container">
           <button
             type="button"
-            className="btn btn btn-block btn-outline-secondary btn-load-more"
+            className="btn btn btn-outline-secondary btn-load-more"
             onClick={() => setSize(size => size + 1)}
           >
             Load more<br />