Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixing anchor and disabled styles, updating example #2

Merged
merged 1 commit into from
Mar 13, 2020
Merged

Fixing anchor and disabled styles, updating example #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 5 additions & 7 deletions src-docs/src/views/badge/badge_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,12 +74,7 @@ const badgeButtonSnippet = [
import BadgeHref from './badge_href';
const badgeHrefSource = require('!!raw-loader!./badge_href');
const badgeHrefHtml = renderToHtml(BadgeHref);
const badgeHrefSnippet = [
`<EuiBadgeGroup gutterSize="s">
<EuiBadge href="https://elastic.github.io/" />
<EuiBadge href="https://elastic.github.io/" target="blank/>
</EuiBadgeGroup>`,
];
const badgeHrefSnippet = ['<EuiBadge href="#" />'];

import BadgeTruncate from './badge_truncate';
const badgeTruncateSource = require('!!raw-loader!./badge_truncate');
Expand Down Expand Up @@ -201,7 +196,10 @@ export const BadgeExample = {
],
text: (
<div>
<p>Badges can have href attributes also the target attribute.</p>
<p>
Badges can also be made to render anchor tags by passing an{' '}
<EuiCode>href</EuiCode>.
</p>
</div>
),
snippet: badgeHrefSnippet,
Expand Down
34 changes: 8 additions & 26 deletions src-docs/src/views/badge/badge_href.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,46 +9,28 @@ import {
export default () => (
<EuiFlexGroup wrap responsive={false} gutterSize="xs">
<EuiFlexItem grow={false}>
<EuiBadge
color="#BADA55"
href="/#/display/badge"
onClickAriaLabel="Example of href badge"
data-test-sub="testExample3">
href on text within badge
<EuiBadge color="#BADA55" href="/#/display/badge">
badge as an anchor
</EuiBadge>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiBadge
color="#0000FF"
href="/#/display/badge"
target="blank"
onClickAriaLabel="Example of href badge with target=blank"
data-test-sub="testExample4">
an anchor badge with target=blank
<EuiBadge color="hollow" href="/#/display/badge" target="blank">
anchor with target specified
</EuiBadge>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiBadge
color="accent"
href="/#/display/badge"
iconType="bolt"
iconSide="right"
href="/#/display/badge"
onClickAriaLabel="Example of href event for the badge"
iconOnClick={() => window.alert('Icon inside badge clicked')}
iconOnClickAriaLabel="Example of onClick event for icon within the anchor"
data-test-sub="testExample5">
href on both text and icon within badge
iconOnClickAriaLabel="Example of onClick event for icon within the anchor">
anchor with an icon and iconOnClick
</EuiBadge>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiBadge
color="secondary"
isDisabled={true}
href="/#/display/badge"
onClickAriaLabel="Example of disabled badge"
iconOnClick={() => window.alert('Icon inside badge clicked')}
iconOnClickAriaLabel="Example disabled anchor"
data-test-sub="testExample5">
<EuiBadge color="secondary" href="/#/display/badge" isDisabled={true}>
disabled anchor badge
</EuiBadge>
</EuiFlexItem>
Expand Down
3 changes: 2 additions & 1 deletion src/components/badge/_badge.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@
&.euiBadge-isDisabled {
// sass-lint:disable-block no-important
// Using !important to override inline styles
color: makeHighContrastColor($euiButtonColorDisabled, $euiButtonColorDisabled, 2) !important;
background-color: $euiButtonColorDisabled !important;
color: $euiButtonColorDisabledText !important;
}

&:focus-within {
Expand All @@ -46,6 +46,7 @@
text-align: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;

&:disabled {
cursor: not-allowed;
Expand Down
2 changes: 1 addition & 1 deletion src/components/badge/badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ export const EuiBadge: FunctionComponent<EuiBadgeProps> = ({
const classes = classNames(
'euiBadge',
{
'euiBadge-isClickable': onClick && !iconOnClick,
'euiBadge-isClickable': (onClick || href) && !iconOnClick,
'euiBadge-isDisabled': isDisabled,
'euiBadge--hollow': color === 'hollow',
},
Expand Down