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.

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

beta badges on panels #884

Closed
wants to merge 6 commits into from
Closed

Conversation

snide
Copy link
Contributor

@snide snide commented May 29, 2018

Feature request of @nreese.

  • Moved the beta badge sass from EuiCard to a more generic mixin, then imported into cards.
  • Added badges to EuiPanel

image

@snide snide requested review from cchaos and nreese May 29, 2018 17:08
@snide
Copy link
Contributor Author

snide commented May 29, 2018

cc @ruflin who also requested this.

Copy link
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There were just a couple of issues with just pulling out the css into a mixin.

}],
text: (
<p>
Similar to <Link to="/display/card">EuiCard</Link> panels can also accept
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add comma before 'panels'

@@ -0,0 +1,30 @@

/**
* 1. Extend beta badges to at least 40% of the card's width
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'card's width' -> 'container's width'

max-width: calc(100% - #{$euiCardSpacing*2});
}

.euiToolTipAnchor,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will now cause problems because it needs to be inside &--hasBetaBadge or else it will target any tooltips inside the container.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch.

transform: translateX(-50%);
z-index: 3; // get above abs positioned image
min-width: 40%; /* 1 */
max-width: calc(100% - #{$euiCardSpacing*2});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line is specific to cards and their padding.

Copy link
Contributor

@nreese nreese left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

@snide snide mentioned this pull request May 29, 2018
@snide
Copy link
Contributor Author

snide commented May 29, 2018

Closing for #888

@snide snide closed this May 29, 2018
@snide snide deleted the feature/badge_panels branch May 29, 2018 23:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants