comments_async: add btn and row classes back in.

There seems to be a bug in sass which makes the css size increase around
50x when a certain number of @extends is present. As a workaround for
now I just added some of the classes back in so we don't need to extend
them.

adhocracy4/comments_async/static/comments_async/comment_form.jsx

@@ -118,7 +118,7 @@ export default class CommentForm extends React.Component {
     const actionButton = (
       <button
         type="submit"
-        className="a4-comments__submit-input"
+        className="btn btn--default a4-comments__submit-input"
         disabled={this.props.useTermsOfUse && !this.state.agreedTermsOfUse && !this.state.checkedTermsOfUse}
       >
         {translated.post}
@@ -127,7 +127,7 @@ export default class CommentForm extends React.Component {
     const cancelButton = this.props.showCancel && (
       <button
         type="submit"
-        className="a4-comments__cancel-edit-input"
+        className="btn btn--light me-2 a4-comments__cancel-edit-input"
         value={translated.cancel}
         onClick={this.props.handleCancel}
       >
@@ -175,7 +175,7 @@ export default class CommentForm extends React.Component {
                 <span className="a4-sr-only">{this.state.commentCharCount}/4000{translated.characters}</span>
               </p>
             </div>
-            <div className="a4-comments__comment-form__terms-and-buttons">
+            <div className="row a4-comments__comment-form__terms-and-buttons">
               <div className="a4-comments__comment-form__terms-of-use">
                 {this.props.useTermsOfUse && !this.state.agreedTermsOfUse &&
                   <div className="form-group" id={'group_terms-of-use-checkbox' + (typeof this.props.parentIndex === 'number' ? this.props.parentIndex : 'rootForm')}>

changelog/7863.md

@@ -13,12 +13,9 @@
 - **Breaking Change** comments_async/comment_form: the default height of the
   textarea has been increased from 46 to 75. We might have to add a way to set
   the initial height dynamically in the future.
-- **Breaking Change** comments_async/comment_form: remove btn class from
-  actionButton as we want to move away from using bootstrap classes directly.
-  You can extend a4-comments__submit-input instead.
-- **Breaking Change** comments_async/comment_form: remove btn and me-2 classes from
+- **Breaking Change** comments_async/comment_form: remove me-2 class from
   submitButton as we want to move away from using bootstrap classes directly.
-  You can extend a4-comments__cancel-edit-input instead.
+  You can apply it to a4-comments__cancel-edit-input instead.
 - **Breaking Change** comments_async/comment_form: rename general-form to
   a4-comments__comment-form__form to be more in line with BEM naming.
 - **Breaking Change** comments_async/comment_form: wrap form elements in a form-group class according to
@@ -30,9 +27,6 @@
   a4-comments__comment-form__actions on the div wrapping the cancel and action button. You
   can use @extend .d-flex, @extend .col-12 and @extend .col-sm-6 to retain
   bootstrap behavior.
-- **Breaking Change** comments_async/comment_form: replace row with
-  a4-comments__comment-form__terms-and-buttons on the div wrapping the terms of
-  use checkbox and the form actions. You can use @extend .row to retain bootstrap behavior.
 - **Breaking Change** comments_async/comment_form: replace col with
   a4-comments__comment-form_terms-of-use on the the div wrapping the terms of
   use checkbox. You can use @extend .col-12 and @extend .col-sm-6 to retain