Skip to content

Commit

Permalink
feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
andreadelrio committed May 18, 2021
1 parent b3dfaac commit b68cf8b
Show file tree
Hide file tree
Showing 7 changed files with 97 additions and 3 deletions.
16 changes: 16 additions & 0 deletions src-docs/src/views/badge/beta_badge.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,25 @@ export default () => (
Beta badges will also line up nicely with titles  
<EuiBetaBadge
label="Lab"
href="https://elcomercio.pe"
tooltipContent="This module is not GA. Please help us by reporting any bugs."
/>
</h3>
</EuiTitle>
<EuiTitle size="xxs">
<h4>Clickable beta badges</h4>
</EuiTitle>
<EuiSpacer size="s" />
<EuiBetaBadge
label="Lens"
iconType="lensApp"
onClick={() => alert('Goes to Lens')}
/>
&emsp;
<EuiBetaBadge
label="Basic"
href="http://www.elastic.co/subscriptions"
target="_blank"
/>
</div>
);
15 changes: 14 additions & 1 deletion src/components/badge/beta_badge/_beta_badge.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,15 @@
}

&.euiBetaBadge--small {
@include fontSize($euiFontSize * .625)
@include fontSize($euiFontSize * .625);
line-height: $euiSize + $euiSizeXS;
padding: 0 $euiSizeM;
}

&.euiBetaBadge-isClickable {
color: inherit;
}

}

// When it's just an icon, make it a circle
Expand Down Expand Up @@ -59,10 +64,18 @@
$backgroundColor: tint($euiColorLightShade, 30%);
background: $backgroundColor;
color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk);

&.euiBetaBadge-isClickable {
color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk);
}
}

.euiBetaBadge--accent {
$backgroundColor: $euiColorAccentText;
background: $backgroundColor;
color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk);

&.euiBetaBadge-isClickable {
color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk);
}
}
3 changes: 3 additions & 0 deletions src/components/badge/beta_badge/beta_badge.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,9 @@ export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps> = ({
{
'euiBetaBadge--singleLetter': singleLetter,
},
{
'euiBetaBadge-isClickable': onClick || href,
},
colorToClassMap[color],
sizeToClassMap[size],
className
Expand Down
37 changes: 37 additions & 0 deletions src/components/card/__snapshots__/card.test.tsx.snap
Original file line number Diff line number Diff line change
@@ -1,5 +1,42 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`EuiCard betaBadgeProps renders href 1`] = `
<div
class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned euiCard--hasBetaBadge"
>
<div
class="euiCard__content"
>
<span
class="euiTitle euiTitle--small euiCard__title"
id="generated-idTitle"
>
Card title
</span>
<div
class="euiText euiText--small euiCard__description"
id="generated-idDescription"
>
<p>
Card description
</p>
</div>
</div>
<span
class="euiCard__betaBadgeWrapper"
>
<a
class="euiBetaBadge euiBetaBadge-isClickable euiBetaBadge--hollow euiCard__betaBadge"
href="http://www.elastic.co/"
id="generated-idBetaBadge"
rel=""
>
Link
</a>
</span>
</div>
`;

exports[`EuiCard horizontal selectable 1`] = `
<div
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--centerAligned euiCard--horizontal euiCard--isClickable euiCard--isSelectable euiCard--isSelectable--text"
Expand Down
15 changes: 15 additions & 0 deletions src/components/card/card.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -287,4 +287,19 @@ describe('EuiCard', () => {

expect(component).toMatchSnapshot();
});

test('betaBadgeProps renders href', () => {
const component = render(
<EuiCard
title="Card title"
description="Card description"
betaBadgeProps={{
href: 'http://www.elastic.co/',
}}
betaBadgeLabel="Link"
/>
);

expect(component).toMatchSnapshot();
});
});
8 changes: 7 additions & 1 deletion src/components/card/card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import { CommonProps, ExclusiveUnion, keysOf } from '../common';
import { getSecureRelForTarget } from '../../services';
import { EuiText } from '../text';
import { EuiTitle } from '../title';
import { EuiBetaBadge } from '../badge/beta_badge';
import { EuiBetaBadge, EuiBetaBadgeProps } from '../badge/beta_badge';
import { EuiIconProps } from '../icon';
import {
EuiCardSelect,
Expand Down Expand Up @@ -147,6 +147,10 @@ export type EuiCardProps = Omit<CommonProps, 'aria-label'> &
* Optional title will be supplied as tooltip title or title attribute otherwise the label will be used
*/
betaBadgeTitle?: string;
betaBadgeProps?: Omit<
EuiBetaBadgeProps,
'label' | 'tooltipContent' | 'title'
>;
/**
* Matches to the color property of EuiPanel. If defined, removes any border & shadow.
* Leave as `undefined` to display as a default panel.
Expand Down Expand Up @@ -192,6 +196,7 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
betaBadgeLabel,
betaBadgeTooltipContent,
betaBadgeTitle,
betaBadgeProps,
layout = 'vertical',
selectable,
display,
Expand Down Expand Up @@ -298,6 +303,7 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
label={betaBadgeLabel}
title={betaBadgeTitle}
tooltipContent={betaBadgeTooltipContent}
{...betaBadgeProps}
className="euiCard__betaBadge"
/>
</span>
Expand Down
6 changes: 5 additions & 1 deletion src/global_styling/mixins/_beta_badge.scss
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,11 @@
#{$selector}__betaBadge {
overflow: hidden;
text-overflow: ellipsis;
background-color: $euiColorEmptyShade;

&.euiBetaBadge--hollow {
background-color: $euiColorEmptyShade;
color: inherit;
}
}
}
}
Expand Down

0 comments on commit b68cf8b

Please sign in to comment.