fix: added self-contained styles for alert component #123
Conversation
|
Deploy preview for fundamental-styles ready! Built with commit 02b4f50 |
components/alert.scss
Outdated
| @import "../scss/components/alert"; | ||
| @import "../scss/components/link"; | ||
| @import "../scss/core/elements"; | ||
| @import "../scss/core/root"; |
There was a problem hiding this comment.
Importing the entire core elements and root files is not what we want to do here. We need to find out what from these files is necessary to render alerts properly and bring those into the link class definitions -- either via common mixins or directly. The whole point of self-contained styles is not only bring along what is needed and not do the changes using elements.
scss/components/alert.scss
Outdated
| p { | ||
| margin-bottom: 0; | ||
| margin-top: 0; | ||
| } |
There was a problem hiding this comment.
Styles cannot be applied directly to elements (<p> in this case) as they can bleed into other components on the page.
There was a problem hiding this comment.
@greg-a-smith Thank you for the review, will create a class for it to prevent the bleeding.
scss/mixins/_mixins.scss
Outdated
| &:focus { | ||
| outline-style: dotted; | ||
| outline-width: 1px; | ||
| @include fd-var-color("outline-color", fd-color-state("hover", "action"), --fd-color-action-focus); |
There was a problem hiding this comment.
If all the changes in this file are needed, I would expect these to be part of the link component's PR. Once they are there, this PR can take advantage of those same styles.
…to fix/self-contained-alert
Closes #97
This PR contains the self-contained styling for the alert component.
This PR is part of the larger task of making all components self-contained #136