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,81 +151,92 @@ export const Headings = () => {
   )
 }
 
-export const Buttons = (args, { globals: { theme } }) => {
+const ButtonsTemplate = (args, { globals: { theme } }) => {
   return (
     <div className="content content-alt">
-      <Grid>
-        <Row>
-          <Col md={8} mdOffset={2}>
-            <h2>Buttons</h2>
+      <fieldset disabled={args.disabled}>
+        <Grid>
+          <Row>
+            <Col md={8} mdOffset={2}>
+              <h2>Buttons</h2>
 
-            <h3>Primary Button</h3>
-            <p>
-              <Button bsStyle="primary">Primary Button</Button>
-            </p>
+              <h3>Primary Button</h3>
+              <p>
+                <Button bsStyle="primary">Primary Button</Button>
+              </p>
 
-            <h3>Secondary Button</h3>
-            {theme.includes('main') ? (
-              <>
-                <p>
-                  <button className="btn btn-secondary">
-                    Secondary Button
-                  </button>
-                </p>
-                <h3>Deprecated Styles</h3>
-                <p>
-                  These are being transitioned to the new secondary style above
-                </p>
-              </>
-            ) : (
-              ''
-            )}
-            <p>Our secondary button is blue or dark gray:</p>
-            <div className="btn-toolbar">
-              <Button bsStyle="info">Info Button</Button>
-              <Button bsStyle="default">Default Button</Button>
-            </div>
+              <h3>Secondary Button</h3>
+              {theme.includes('main') ? (
+                <>
+                  <p>
+                    <button className="btn btn-secondary">
+                      Secondary Button
+                    </button>
+                  </p>
+                  <h3>Deprecated Styles</h3>
+                  <p>
+                    These are being transitioned to the new secondary style
+                    above
+                  </p>
+                </>
+              ) : (
+                ''
+              )}
+              <p>Our secondary button is blue or dark gray:</p>
+              <div className="btn-toolbar">
+                <Button bsStyle="info">Info Button</Button>
+                <Button bsStyle="default">Default Button</Button>
+              </div>
 
-            <h3>All button styles</h3>
-            {theme.includes('main') ? (
-              <p>Includes styles being deprecated</p>
-            ) : (
-              ''
-            )}
-            <div className="btn-toolbar">
-              <Button bsStyle="primary">Primary</Button>
+              <h3>All button styles</h3>
               {theme.includes('main') ? (
-                <button className="btn btn-secondary">Secondary</button>
+                <p>Includes styles being deprecated</p>
               ) : (
                 ''
               )}
-              <Button bsStyle="info">Info</Button>
-              <Button bsStyle="default">Default</Button>
-              <Button bsStyle="primary">Success</Button>
-              <Button bsStyle="warning">Warning</Button>
-              <Button bsStyle="danger">Danger</Button>
-            </div>
+              <div className="btn-toolbar">
+                <Button bsStyle="primary">Primary</Button>
+                {theme.includes('main') ? (
+                  <button className="btn btn-secondary">Secondary</button>
+                ) : (
+                  ''
+                )}
+                <Button bsStyle="info">Info</Button>
+                <Button bsStyle="default">Default</Button>
+                <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>
-            <div className="btn-toolbar">
-              <button className="btn btn-primary btn-xs">Extra Small</button>
-              <button className="btn btn-primary btn-sm">Small</button>
-              <button className="btn btn-primary">Default</button>
-              <button className="btn btn-primary btn-lg">Large</button>
-              <button className="btn btn-primary btn-xl">Extra Large</button>
-            </div>
+              <h3>Sizes</h3>
+              <div className="btn-toolbar">
+                <button className="btn btn-primary btn-xs">Extra Small</button>
+                <button className="btn btn-primary btn-sm">Small</button>
+                <button className="btn btn-primary">Default</button>
+                <button className="btn btn-primary btn-lg">Large</button>
+                <button className="btn btn-primary btn-xl">Extra Large</button>
+              </div>
 
-            <h2>Hyperlinks</h2>
-            <p>
-              Hyperlinks are highlighted <a href="#">as shown</a>.
-            </p>
-          </Col>
-        </Row>
-      </Grid>
+              <h2>Hyperlinks</h2>
+              <p>
+                Hyperlinks are highlighted <a href="#">as shown</a>.
+              </p>
+            </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