mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
Merge pull request #12566 from overleaf/jdt-ghost-danger-buttons
feat: adding danger ghost buttons GitOrigin-RevId: 2ee6ea1c395ba4a73fbe09b36acde3145c590a6b
This commit is contained in:
Jimmy Domagala-Tang
Copybot
parent
b07535f15b
commit
77c2db38fc
6 changed files with 109 additions and 66 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>All button styles</h3>
|
||||
{theme.includes('main') ? (
|
||||
<p>Includes styles being deprecated</p>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
<div className="btn-toolbar">
|
||||
<Button bsStyle="primary">Primary</Button>
|
||||
<h3>Secondary Button</h3>
|
||||
{theme.includes('main') ? (
|
||||
<button className="btn btn-secondary">Secondary</button>
|
||||
<>
|
||||
<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>
|
||||
</>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
<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>
|
||||
<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>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>All button styles</h3>
|
||||
{theme.includes('main') ? (
|
||||
<p>Includes styles being deprecated</p>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
<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>
|
||||
|
||||
<h2>Hyperlinks</h2>
|
||||
<p>
|
||||
Hyperlinks are highlighted <a href="#">as shown</a>.
|
||||
</p>
|
||||
</Col>
|
||||
</Row>
|
||||
</Grid>
|
||||
<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>
|
||||
</fieldset>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const Buttons = ButtonsTemplate.bind({})
|
||||
Buttons.args = {
|
||||
disabled: false,
|
||||
}
|
||||
|
||||
export const Alerts = () => {
|
||||
return (
|
||||
<div className="content content-alt">
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue