/>
{displayName}
{isMainBranch(branchLike) && (
- <div className="outline-badge spacer-left">{translate('branches.main_branch')}</div>
+ <div className="badge spacer-left">{translate('branches.main_branch')}</div>
)}
</div>
<div className="big-spacer-left note">
render() {
return (
<>
- <div className="badge badge-focus badge-medium display-inline-flex-center js-component-analysis-warnings flex-1">
+ <div className="badge display-inline-flex-center js-component-analysis-warnings flex-1">
<WarningIcon className="spacer-right" />
<FormattedMessage
defaultMessage={translate('component_navigation.last_analysis_had_warnings')}
/>
master
<div
- className="outline-badge spacer-left"
+ className="badge spacer-left"
>
branches.main_branch
</div>
exports[`should render 1`] = `
<Fragment>
<div
- className="badge badge-focus badge-medium display-inline-flex-center js-component-analysis-warnings flex-1"
+ className="badge display-inline-flex-center js-component-analysis-warnings flex-1"
>
<WarningIcon
className="spacer-right"
<>
<li className="navbar-latest-notification" onClick={this.props.onClick}>
<div className="navbar-latest-notification-wrapper">
- <span className="badge badge-new">{translate('new')}</span>
+ <span className="badge badge-info">{translate('new')}</span>
<span className="label">{lastNews.notification}</span>
</div>
</li>
className="navbar-latest-notification-wrapper"
>
<span
- className="badge badge-new"
+ className="badge badge-info"
>
new
</span>
color: var(--sonarcloudBlack300);
}
-.navbar-latest-notification-wrapper .badge-new {
+.navbar-latest-notification-wrapper .badge-info {
position: absolute;
margin-right: var(--gridSize);
- left: calc(var(--gridSize) / 2);
- top: 5px;
+ left: 6px;
+ top: 6px;
}
.navbar-latest-notification-wrapper .label {
*/
.badge {
display: inline-block;
- vertical-align: middle;
- height: var(--smallControlHeight);
- line-height: calc(var(--smallControlHeight) - 1px);
- padding: 0 var(--gridSize);
- border-radius: 10px;
+ padding: 2px 4px;
+ background-color: var(--barBorderColor);
+ border-radius: 3px;
font-size: var(--smallFontSize);
- min-width: 10px;
- letter-spacing: 0.03em;
- color: #ffffff;
+ font-weight: normal;
+ color: var(--baseFontColor);
+ text-transform: uppercase;
white-space: nowrap;
- text-align: center;
- background-color: var(--blue);
+ line-height: 1;
}
-
.badge:empty {
display: none;
}
a.badge:active {
color: #ffffff;
}
-
a.badge {
border-bottom: none;
}
-.badge-medium {
- height: var(--controlHeight);
- line-height: calc(var(--controlHeight));
- letter-spacing: 0.01em;
-}
-
.list-group-item > .badge,
.list-group-item-heading > .badge {
float: right;
margin: 3px;
}
-
.list-group-item > .badge + .badge,
.list-group-item-heading > .badge + .badge {
margin-right: 5px;
}
-.badge-normal-size {
- font-size: inherit;
- letter-spacing: inherit;
-}
-
-.badge-tiny-height {
- height: var(--tinyControlHeight) !important;
- line-height: var(--tinyControlHeight) !important;
+.badge-info {
+ background-color: var(--alertBackgroundInfo);
+ color: var(--alertTextInfo);
}
-.badge-new {
- height: 18px;
- font-size: var(--verySmallFontSize);
- text-transform: uppercase;
- background-color: var(--lightBlue);
- color: var(--veryDarkBlue);
- font-weight: 600;
+.badge-success {
+ background-color: var(--alertBackgroundSuccess);
+ color: var(--alertTextSuccess);
}
-.badge-muted {
- background-color: var(--gray80);
- color: var(--secondFontColor);
+.badge-warning {
+ background-color: var(--alertBackgroundWarning);
+ color: var(--alertTextWarning);
}
-.badge-success,
-.badge-ok {
- background-color: var(--green);
-}
-
-.badge-warning,
-.badge-warn {
- background-color: var(--orange);
-}
-
-.badge-danger,
.badge-error {
- background-color: var(--red);
-}
-
-.badge-danger-light {
- border: 1px solid var(--alertBorderError) !important;
background-color: var(--alertBackgroundError);
- color: #a94442;
-}
-
-a.badge-danger-light:hover,
-a.badge-danger-light:focus,
-a.badge-danger-light:active {
- color: #a94442;
-}
-
-.badge-focus {
- border: 1px solid #faebcc;
- background-color: #fcf8e3;
- color: #8a6d3b;
- font-weight: 400;
-}
-
-a.badge-focus:hover,
-a.badge-focus:focus,
-a.badge-focus:active {
- color: #8a6d3b;
-}
-
-.badge-secondary {
- background-color: var(--gray71);
-}
-
-.outline-badge {
- display: inline-block;
- vertical-align: middle;
- height: var(--smallControlHeight);
- line-height: calc(var(--smallControlHeight) - 1px);
- padding: 0 var(--gridSize);
- border: 1px solid var(--gray80);
- border-radius: 10px;
- box-sizing: border-box;
- background-color: var(--gray80);
- font-size: var(--smallFontSize);
- font-weight: 400;
- white-space: nowrap;
+ color: var(--alertTextError);
}
-.outline-badge.active {
- color: var(--baseFontColor);
- border-color: var(--blue);
- background-color: var(--lightBlue);
-}
-
-.outline-badge.badge-info {
- border-color: var(--blue);
- background-color: var(--lightBlue);
-}
-
-.outline-badge.badge-icon {
+/* TODO: remove after SC fork */
+.badge-icon {
padding-left: calc(var(--gridSize) / 2);
}
-
-.outline-badge.badge-icon svg {
+.badge-icon svg {
height: calc(var(--smallControlHeight) - 2px);
}
<OrganizationLink className="spacer-left text-middle" organization={organization}>
{organization.name}
</OrganizationLink>
- {actions.admin && <span className="outline-badge spacer-left">{translate('admin')}</span>}
+ {actions.admin && <span className="badge spacer-left">{translate('admin')}</span>}
</h3>
{!!organization.description && (
break;
case STATUSES.FAILED:
inner = (
- <span className="badge badge-danger">{translate('background_task.status.FAILED')}</span>
+ <span className="badge badge-error">{translate('background_task.status.FAILED')}</span>
);
break;
case STATUSES.CANCELED:
- inner = (
- <span className="badge badge-muted">{translate('background_task.status.CANCELED')}</span>
- );
+ inner = <span className="badge">{translate('background_task.status.CANCELED')}</span>;
break;
default:
inner = '';
className="thin spacer-right"
>
<span
- className="badge badge-danger"
+ className="badge badge-error"
>
background_task.status.FAILED
</span>
className="thin spacer-right"
>
<span
- className="badge badge-muted"
+ className="badge"
>
background_task.status.CANCELED
</span>
}
@media (max-width: 1200px) {
- .code-name-cell .badge,
- .code-name-cell .outline-badge {
+ .code-name-cell .badge {
display: none;
}
}
<span className="note">{component.branch}</span>
</span>
) : (
- <span className="spacer-left outline-badge flex-1">
- {translate('branches.main_branch')}
- </span>
+ <span className="spacer-left badge flex-1">{translate('branches.main_branch')}</span>
)}
</span>
);
</span>
</span>
<span
- className="spacer-left outline-badge flex-1"
+ className="spacer-left badge flex-1"
>
branches.main_branch
</span>
return (
<Tooltip overlay={translate('status')}>
<li className="coding-rules-detail-property" data-meta="status">
- <span className="badge badge-normal-size badge-danger-light">
- {translate('rules.status', ruleDetails.status)}
- </span>
+ <span className="badge badge-error">{translate('rules.status', ruleDetails.status)}</span>
</li>
</Tooltip>
);
return (
<Tooltip overlay={translateWithParameters('coding_rules.external_rule.engine', engine)}>
<li className="coding-rules-detail-property">
- <div className="outline-badge badge-tiny-height spacer-left text-text-top">{engine}</div>
+ <div className="badge spacer-left text-text-top">{engine}</div>
</li>
</Tooltip>
);
</Link>
{rule.isTemplate && (
<Tooltip overlay={translate('coding_rules.rule_template.title')}>
- <span className="outline-badge spacer-left">
+ <span className="badge spacer-left">
{translate('coding_rules.rule_template')}
</span>
</Tooltip>
<td className="coding-rule-table-meta-cell">
<div className="display-flex-center coding-rule-meta">
{rule.status !== 'READY' && (
- <span className="spacer-left badge badge-normal-size badge-tiny-height badge-danger-light">
+ <span className="spacer-left badge badge-error">
{translate('rules.status', rule.status)}
</span>
)}
className="coding-rules-detail-property"
>
<div
- className="outline-badge badge-tiny-height spacer-left text-text-top"
+ className="badge spacer-left text-text-top"
>
xoo
</div>
<span className="note">{component.branch}</span>
</>
) : (
- <span className="spacer-left outline-badge">{translate('branches.main_branch')}</span>
+ <span className="spacer-left badge">{translate('branches.main_branch')}</span>
)}
</>
)}
{organization.name}
<span className="note little-spacer-left">{organization.key}</span>
</span>
- {isPaidOrg && (
- <div className="outline-badge">{translate('organization.paid_plan.badge')}</div>
- )}
+ {isPaidOrg && <div className="badge">{translate('organization.paid_plan.badge')}</div>}
</div>
);
};
/>
<span className="spacer-left">{this.props.repository.label}</span>
{repository.private && (
- <div className="outline-badge spacer-left">{translate('visibility.private')}</div>
+ <div className="badge spacer-left">{translate('visibility.private')}</div>
)}
</div>
Awesome Project
</span>
<div
- className="outline-badge spacer-left"
+ className="badge spacer-left"
>
visibility.private
</div>
<DocTooltip
className="spacer-right"
doc={import(/* webpackMode: "eager" */ 'Docs/tooltips/organizations/subscription-paid-plan.md')}>
- <div className="outline-badge">{translate('organization.paid_plan.badge')}</div>
+ <div className="badge">{translate('organization.paid_plan.badge')}</div>
</DocTooltip>
)}
<div className="text-muted">
/>
{getBranchLikeDisplayName(branchLike)}
{isMainBranch(branchLike) && (
- <div className="outline-badge spacer-left">{translate('branches.main_branch')}</div>
+ <div className="badge spacer-left">{translate('branches.main_branch')}</div>
)}
</td>
<td className="thin nowrap">
/>
master
<div
- className="outline-badge spacer-left"
+ className="badge spacer-left"
>
branches.main_branch
</div>
}
export default function BuiltInQualityGateBadge({ className }: Props) {
- const badge = (
- <div className={classNames('outline-badge', className)}>
- {translate('quality_gates.built_in')}
- </div>
- );
-
return (
<DocTooltip
doc={import(/* webpackMode: "eager" */ 'Docs/tooltips/quality-gates/built-in-quality-gate.md')}>
- {badge}
+ <div className={classNames('badge', className)}>{translate('quality_gates.built_in')}</div>
</DocTooltip>
);
}
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+import { shallow } from 'enzyme';
+import * as React from 'react';
+import BuiltInQualityGateBadge from '../BuiltInQualityGateBadge';
+
+it('should render correctly', () => {
+ expect(shallowRender()).toMatchSnapshot();
+});
+
+function shallowRender(props = {}) {
+ return shallow(<BuiltInQualityGateBadge {...props} />);
+}
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<DocTooltip
+ doc={Promise {}}
+>
+ <div
+ className="badge"
+ >
+ quality_gates.built_in
+ </div>
+</DocTooltip>
+`;
export default function BuiltInQualityProfileBadge({ className, tooltip = true }: Props) {
const badge = (
- <div className={classNames('outline-badge', className)}>
+ <div className={classNames('badge badge-info', className)}>
{translate('quality_profiles.built_in')}
</div>
);
--- /dev/null
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+import { shallow } from 'enzyme';
+import * as React from 'react';
+import BuiltInQualityProfileBadge from '../BuiltInQualityProfileBadge';
+
+it('should render correctly', () => {
+ expect(shallowRender()).toMatchSnapshot();
+ expect(shallowRender({ tooltip: false })).toMatchSnapshot();
+});
+
+function shallowRender(props = {}) {
+ return shallow(<BuiltInQualityProfileBadge {...props} />);
+}
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<DocTooltip
+ doc={Promise {}}
+>
+ <div
+ className="badge badge-info"
+ >
+ quality_profiles.built_in
+ </div>
+</DocTooltip>
+`;
+
+exports[`should render correctly 2`] = `
+<div
+ className="badge badge-info"
+>
+ quality_profiles.built_in
+</div>
+`;
{profile.activeDeprecatedRuleCount > 0 && (
<span className="spacer-right">
<Tooltip overlay={translate('quality_profiles.deprecated_rules')}>
- <Link className="badge badge-normal-size badge-danger-light" to={deprecatedRulesUrl}>
+ <Link className="badge badge-error" to={deprecatedRulesUrl}>
{profile.activeDeprecatedRuleCount}
</Link>
</Tooltip>
{isAutoScanEnabled && (
<div className={`${getClassnames(autoScanMode)} huge-spacer-top huge-spacer-bottom`}>
<div className="icon">
- <div className="badge badge-new">BETA</div>
+ <div className="badge badge-info">BETA</div>
</div>
<p>{autoScanMode.name}</p>
<button
className="icon"
>
<div
- className="badge badge-new"
+ className="badge badge-info"
>
BETA
</div>
export default function InternalBadge() {
return (
<Tooltip overlay={translate('api_documentation.internal_tooltip')}>
- <span className="badge badge-danger">{translate('internal')}</span>
+ <span className="badge badge-error">{translate('internal')}</span>
</Tooltip>
);
}
const badge = (
<div
- className={classNames('outline-badge', className, {
+ className={classNames('badge', className, {
'badge-info': Boolean(icon),
'badge-icon': Boolean(icon)
})}>
overlay="visibility.private.description.TRK"
>
<div
- className="outline-badge"
+ className="badge"
>
visibility.private
</div>
}
>
<div
- className="outline-badge"
+ className="badge"
>
visibility.public
</div>
}
>
<div
- className="outline-badge badge-info badge-icon"
+ className="badge badge-info badge-icon"
>
<VisibleIcon
className="little-spacer-right"
const value =
values.length === 1 ? values[0] : translateWithParameters('x_selected', values.length);
return (
- <span className="badge badge-secondary text-ellipsis" title={value}>
+ <span className="badge text-ellipsis" title={value}>
{value}
</span>
);
className="search-navigator-facet-header-value spacer-left spacer-right "
>
<span
- className="badge badge-secondary text-ellipsis"
+ className="badge text-ellipsis"
title="x_selected.3"
>
x_selected.3
className="search-navigator-facet-header-value spacer-left spacer-right "
>
<span
- className="badge badge-secondary text-ellipsis"
+ className="badge text-ellipsis"
title="foo"
>
foo
className="search-navigator-facet-header-value spacer-left spacer-right "
>
<span
- className="badge badge-secondary text-ellipsis"
+ className="badge text-ellipsis"
title="foo"
>
foo
{this.props.engine && (
<Tooltip
overlay={translateWithParameters('issue.from_external_rule_engine', this.props.engine)}>
- <div className="outline-badge badge-tiny-height spacer-right text-top">
- {this.props.engine}
- </div>
+ <div className="badge spacer-right text-top">{this.props.engine}</div>
</Tooltip>
)}
{this.props.manualVulnerability && (
<Tooltip overlay={translate('issue.manual_vulnerability.description')}>
- <div className="outline-badge badge-tiny-height spacer-right text-top">
+ <div className="badge spacer-right text-top">
{translate('issue.manual_vulnerability')}
</div>
</Tooltip>
<OrganizationAvatar organization={organization} small={true} />
<span className="spacer-left">{organization.name}</span>
</div>
- {actions.admin && <span className="outline-badge spacer-left">{translate('admin')}</span>}
+ {actions.admin && <span className="badge spacer-left">{translate('admin')}</span>}
</OrganizationLink>
</li>
);
</span>
</div>
<span
- className="outline-badge spacer-left"
+ className="badge spacer-left"
>
admin
</span>
projects / sonarqube.git / commitdiff