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

add lifecycle badge component #4528

Merged
merged 9 commits into from
Nov 27, 2023
Merged

add lifecycle badge component #4528

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c15b27e
add index and styles
mirnawong1 Nov 17, 2023
b5153af
Merge branch 'current' into add-lifecycle-badge
mirnawong1 Nov 22, 2023
e5bff71
add css colors
mirnawong1 Nov 22, 2023
e9b6d95
adjust css
mirnawong1 Nov 22, 2023
523dede
add null function
mirnawong1 Nov 24, 2023
4217431
Merge branch 'current' into add-lifecycle-badge
mirnawong1 Nov 24, 2023
10bbcbb
combine
mirnawong1 Nov 25, 2023
5106f4e
Merge branch 'current' into add-lifecycle-badge
mirnawong1 Nov 27, 2023
dd956f9
adjust to rem
mirnawong1 Nov 27, 2023
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
1 change: 1 addition & 0 deletions website/docs/docs/introduction.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ pagination_next: null
pagination_prev: null
---


<Snippet path="what-is-dbt-intro" />

dbt compiles and runs your analytics code against your data platform, enabling you and your team to collaborate on a single source of truth for metrics, insights, and business definitions. This single source of truth, combined with the ability to define tests for your data, reduces errors when logic changes, and alerts you when issues arise.
Expand Down
8 changes: 8 additions & 0 deletions website/src/components/lifeCycle/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import React from 'react'
import styles from './styles.module.css';

export default function Lifecycle(props) {
return (
<span className={styles.lifecycle}>{props.status}</span>
);
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

We didn't get to this during our meeting today, but I think there's more more improvement we can make with this. As-is, it will always apply the span tag, even if a user forgets to pass in content into the status prop. This will cause the pill to still appear with no text within it.

What we can do is check if props.status is set before adding the span tag to the page. If not, we should return null here rather than returning the span tag.

Here's React's documentation on how you can do this.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

hey @JKarlavige ! thank you and great flag -- i added the null conditional rendering and if a user doesn't add anything, a small '-' appears at the end but i think it's related to the docusaurus' id assignment.

i also experimented to see if i could pass a props from the frontmatter object (as opposed to the string) and it works too!

Screenshot 2023-11-24 at 05 01 47

13 changes: 13 additions & 0 deletions website/src/components/lifeCycle/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.lifecycle {
background-color: #047377; /* Teal background to align with dbt Labs' color */
color: #fff; /* Light text color for contrast */
font-size: 0.4em; /* Slightly smaller text */
Copy link
Collaborator

@JKarlavige JKarlavige Nov 27, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

Regarding the font-size - em is making the font size relative to the parent element the lifecyle component is a part of, so in this case the header size. One situation where this might cause an issue is if the lifecycle component is used outside of the header.

In this case, .4em would make the font size relative to it's parent. For example, if i add the lifecycle component on it's own line, it's parent element becomes a div, which has a smaller font size set than headers. .4em of the div's font size (1.125rem) would end up small and difficult to read.

image

One adjustment you can make here is switch from em to rem, which makes the font size relative to the root, which is usually 1rem. If you adjust the font-size to use rem, that size will remain consistent no matter where the component is used. .4rem would be pretty small, but bumping it up a bit should get you close to the font size you had when using em.

Using .9rem for example would say 'this text should always be slightly smaller than the default font size for the site.'

As long as the component is always used with headers, this won't be an issue. But if this is ever used outside of the headers, the font size will likely need to be adjusted.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

thank you @JKarlavige ! ok i've changed it to 0.78rem so it's a bit more relative to the parent. this component should mostly be used for headers so hopefully won't be an issue but it's good to allow flexibility.

padding: 1px 8px; /* Adjust padding for a more pill-like shape */
border-radius: 16px; /* Larger border-radius for rounded edges */
margin-left: 8px; /* Margin to separate from the header text */
vertical-align: middle; /* Align with the title */
display: inline-block; /* Use inline-block for better control */
font-weight: bold; /* Bold text */
text-transform: capitalize; /* Uppercase text */
line-height: 1.6; /* Adjust line height for vertical alignment */
}
2 changes: 2 additions & 0 deletions website/src/theme/MDXComponents/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ import CommunitySpotlightCard from '@site/src/components/communitySpotlightCard'
import CommunitySpotlightList from '@site/src/components/communitySpotlightList';
import dbtEditor from '@site/src/components/dbt-editor';
import Icon from '@site/src/components/icon';
import Lifecycle from '@site/src/components/lifeCycle';

const MDXComponents = {
head: MDXHead,
Expand Down Expand Up @@ -90,5 +91,6 @@ const MDXComponents = {
CommunitySpotlightList,
dbtEditor: dbtEditor,
Icon: Icon,
Lifecycle: Lifecycle,
};
export default MDXComponents;
Loading