Merge pull request #12566 from overleaf/jdt-ghost-danger-buttons

feat: adding danger ghost buttons
GitOrigin-RevId: 2ee6ea1c395ba4a73fbe09b36acde3145c590a6b

services/web/frontend/js/features/settings/components/linking/integration-widget.tsx

@@ -117,7 +117,12 @@ function ActionButton({
     )
   } else if (linked) {
     return (
-      <Button bsStyle="danger" onClick={handleUnlinkClick} disabled={disabled}>
+      <Button
+        className="btn-danger-ghost"
+        onClick={handleUnlinkClick}
+        bsStyle={null}
+        disabled={disabled}
+      >
         {t('unlink')}
       </Button>
     )
@@ -186,7 +191,7 @@ function UnlinkConfirmationModal({
           >
             {t('cancel')}
           </Button>
-          <Button type="submit" bsStyle="danger">
+          <Button type="submit" className="btn-danger-ghost" bsStyle={null}>
             {t('unlink')}
           </Button>
         </form>

services/web/frontend/js/features/settings/components/linking/sso-widget.tsx

@@ -112,13 +112,17 @@ function ActionButton({
   const { t } = useTranslation()
   if (unlinkRequestInflight) {
     return (
-      <Button bsStyle="danger" disabled>
+      <Button className="btn-danger-ghost" bsStyle={null} disabled>
         {t('unlinking')}
       </Button>
     )
   } else if (accountIsLinked) {
     return (
-      <Button bsStyle="danger" onClick={onUnlinkClick}>
+      <Button
+        className="btn-danger-ghost"
+        bsStyle={null}
+        onClick={onUnlinkClick}
+      >
         {t('unlink')}
       </Button>
     )
@@ -169,7 +173,11 @@ function UnlinkConfirmModal({
         >
           {t('cancel')}
         </Button>
-        <Button bsStyle="danger" onClick={handleConfirmation}>
+        <Button
+          className="btn-danger-ghost"
+          bsStyle={null}
+          onClick={handleConfirmation}
+        >
           {t('unlink')}
         </Button>
       </Modal.Footer>

services/web/frontend/stories/style-guide.stories.js

@@ -151,9 +151,10 @@ export const Headings = () => {
   )
 }
 
-export const Buttons = (args, { globals: { theme } }) => {
+const ButtonsTemplate = (args, { globals: { theme } }) => {
   return (
     <div className="content content-alt">
+      <fieldset disabled={args.disabled}>
         <Grid>
           <Row>
             <Col md={8} mdOffset={2}>
@@ -174,7 +175,8 @@ export const Buttons = (args, { globals: { theme } }) => {
                   </p>
                   <h3>Deprecated Styles</h3>
                   <p>
-                  These are being transitioned to the new secondary style above
+                    These are being transitioned to the new secondary style
+                    above
                   </p>
                 </>
               ) : (
@@ -204,6 +206,9 @@ export const Buttons = (args, { globals: { theme } }) => {
                 <Button bsStyle="primary">Success</Button>
                 <Button bsStyle="warning">Warning</Button>
                 <Button bsStyle="danger">Danger</Button>
+                <Button className="btn-danger-ghost" bsStyle={null}>
+                  Danger Ghost
+                </Button>
               </div>
 
               <h3>Sizes</h3>
@@ -222,10 +227,16 @@ export const Buttons = (args, { globals: { theme } }) => {
             </Col>
           </Row>
         </Grid>
+      </fieldset>
     </div>
   )
 }
 
+export const Buttons = ButtonsTemplate.bind({})
+Buttons.args = {
+  disabled: false,
+}
+
 export const Alerts = () => {
   return (
     <div className="content content-alt">

services/web/frontend/stylesheets/components/buttons.less

@@ -148,6 +148,17 @@
 .btn-danger when(@is-new-css = true) {
   .btn-borderless(@white, @red, @red-60);
 }
+// Danger Ghost and error appear as light red with no border
+.btn-danger-ghost when (@is-new-css = false) {
+  .button-variant(@btn-danger-ghost-color; @btn-danger-ghost-bg; @btn-danger-ghost-border);
+  // hover for ghost acts different from typical variants, as it's default state has no bg
+  &:hover {
+    background-color: @red-10;
+  }
+}
+.btn-danger-ghost when (@is-new-css = true) {
+  .btn-borderless(@red-50, @btn-danger-ghost-bg, @red-10);
+}
 // btn-secondary
 .btn-secondary when(@is-new-css = false) {
   &:not(.btn-secondary-info) {

services/web/frontend/stylesheets/core/variables.less

@@ -234,6 +234,10 @@
 @btn-danger-bg: @ol-red;
 @btn-danger-border: transparent;
 
+@btn-danger-ghost-color: @red-50;
+@btn-danger-ghost-bg: transparent;
+@btn-danger-ghost-border: transparent;
+
 @btn-link-disabled-color: @gray-light;
 
 //== Forms

services/web/frontend/stylesheets/variables/all.less

@@ -178,6 +178,10 @@
 @btn-danger-bg: @red;
 @btn-danger-border: transparent;
 
+@btn-danger-ghost-color: @red-50;
+@btn-danger-ghost-bg: transparent;
+@btn-danger-ghost-border: transparent;
+
 @btn-link-disabled-color: @gray-light;
 
 //== Forms