API

<release-notes-displayer>

Displays release notes

Attributes

NameDescriptionTypeDefault
disableShadowDOMCan be used to turn off shadow DOM; usage not recommendedbooleanfalse
showNoDataSetAnimationDefines if the component should show a little loading animation, when no data is setbooleantrue
dataThe data used for displayingReleaseData[][]
changeTypeBadgeNameFuncCan be used to i18n the changeTypeBadge(name: string) => string"name => name"
dateFormatterFormats the date(date: Date) => string"date => date.toLocaleDateString()"
issueMatchingUsed for parsing e.g. #3 in the release notesRegExp | undefined"/(#\\d+)/i"
issueBaseUrlThe url for building issue references If a matching issue is found in the release notes, e.g #3 it will become a link based on that url (the numer will be appendend)string""
issueLinkGeneratorAnother way for building issue references If a matching issue is found in the release notes, e.g #3 it will become a link based on what the function returns (null results in no link)((issueKey: string) => string | null) | undefined"undefined"

Properties

NameAttributeDescriptionTypeDefault
stylesundefinedStylesCSSResult"css`
.release-notes-container {
--background-color-primary: var(
--release-notes-background-color-primary,
#24292e
);
--color-primary: var(--release-notes-color-primary, 255, 255, 255);

--text-color-primary: var(
--release-notes-text-color-primary,
rgba(var(--color-primary), 0.75)
);
--font-size-primary: var(--release-notes-font-size-primary, 14px);
--font-family-primary: var(
--release-notes-font-family-primary,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Helvetica,
'Apple Color Emoji',
Arial,
sans-serif,
'Segoe UI Emoji',
'Segoe UI Symbol'
);

--justify-content-primary: var(
--release-notes-justify-conent-primary,
center
);

--badge-text-color-primary: var(
--release-notes-badge-text-color-primary,
rgba(255, 255, 255, 0.75)
);

--version-badge-font-size: var(
--release-notes-version-badge-font-size,
calc(var(--font-size-primary) * 0.95)
);
--version-badge-background-color: var(
--release-notes-version-badge-background-color,
#6f42c1
);
--version-badge-width: var(--release-notes-version-badge-width, 65px);

--header-title-font-size: var(
--release-notes-header-title-font-size,
calc(var(--font-size-primary) * 1.5)
);

--timeline-width: var(--release-notes-timeline-width, 3px);
--timeline-color-primary: var(
--release-notes-timeline-color-primary,
rgba(var(--color-primary), 0.1)
);
--timeline-color-fade-out: var(
--release-notes-timeline-color-fade-out,
rgba(var(--color-primary), 0)
);

--release-note-padding-y: var(
--release-notes-release-note-padding-y,
20px
);
--release-note-padding-x: var(
--release-notes-release-note-padding-x,
16px
);

--change-badge-font-size: var(
--release-notes-change-badge-font-size,
calc(var(--font-size-primary) * 0.7)
);
--change-text-font-size: var(
--release-notes-change-text-font-size,
var(--font-size-primary)
);
--change-text-link-color: var(
--release-notes-change-text-link-color,
#9f7be1
);

color: var(--text-color-primary);
background-color: var(--background-color-primary);

font-size: var(--font-size-primary);
font-family: var(--font-family-primary);

justify-content: var(--justify-content-primary);
}

.loading-indicator {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
background-color: var(--background-color-primary);
}
.loading-indicator div {
display: inline-block;
position: absolute;
left: 8px;
width: 16px;
background: var(--text-color-primary);
animation: loading-indicator 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.loading-indicator div:nth-child(1) {
left: 8px;
animation-delay: -0.24s;
}
.loading-indicator div:nth-child(2) {
left: 32px;
animation-delay: -0.12s;
}
.loading-indicator div:nth-child(3) {
left: 56px;
animation-delay: 0;
}
@keyframes loading-indicator {
0% {
top: 8px;
height: 64px;
}
50%,
100% {
top: 24px;
height: 32px;
}
}

.position-relative {
position: relative;
}

.d-flex {
display: flex;
}

.release-note:first-of-type .timeline-decorator::before {
background-image: linear-gradient(
to bottom,
var(--timeline-color-fade-out),
var(--timeline-color-primary) var(--release-note-padding-y)
);
}

.release-note:last-of-type .timeline-decorator::before {
background-image: linear-gradient(
to bottom,
var(--timeline-color-primary) calc(100% - var(--release-note-padding-y)),
var(--timeline-color-fade-out)
);
}

.timeline-decorator::before {
content: '';
width: var(--timeline-width);
position: absolute;

background-image: linear-gradient(
to bottom,
var(--timeline-color-primary),
var(--timeline-color-primary)
);
top: 0;
bottom: 0;
left: calc(
var(--version-badge-width) / 2 + var(--release-note-padding-x)
);
}

.release-note {
display: block;

color: var(--badge-text-color-primary);

padding-top: var(--release-note-padding-y);
padding-bottom: var(--release-note-padding-y);
padding-left: var(--release-note-padding-x);
padding-right: var(--release-note-padding-x);
}

.list-style-none {
list-style: none;
}

.border-box {
box-sizing: border-box;
}

.release-version-badge {
color: var(--badge-text-color-primary);

min-width: var(--version-badge-width);
text-align: center;
background-color: var(--version-badge-background-color);
align-self: flex-start;

z-index: 1;

font-weight: 600;
font-size: var(--version-badge-font-size);
border-radius: 3px;

padding: 4px;
margin-right: 8px;
}

.release-title {
color: var(--text-color-primary);
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;

font-weight: 300;
font-size: var(--header-title-font-size);
}

.change-log {
list-style: none;
line-height: 1.5;
margin-left: calc(
var(--version-badge-width) + var(--release-note-padding-x)
);
padding-left: 0px;
}

.change-log-list-entry {
align-items: flex-start;
}

.change-badge {
color: var(--badge-text-color-primary);
background-color: #0366d6;
min-width: calc(var(--font-size-primary) * 4.5 + 5px);
font-size: var(--change-badge-font-size);
font-weight: 600;
border-radius: 3px;
margin-right: 8px;
padding: 2px 5px;
text-transform: uppercase;
text-align: center;
}

.change-badge-added,
.change-badge-new {
background-color: #28a745;
}

.change-badge-improved,
.change-badge-fixed {
background-color: #0366d6;
}

.change-badge-removed {
background-color: #d73a49;
}

.change-text {
color: var(--text-color-primary);
font-size: var(--change-text-font-size);

overflow-wrap: anywhere;
}

a.change-text-link {
text-decoration: none;
color: var(--change-text-link-color);
}

a.change-text-link:hover {
text-decoration: underline;
color: var(--change-text-link-color);
}
`"
disableShadowDOMdisableShadowDOMCan be used to turn off shadow DOM; usage not recommendedbooleanfalse
showNoDataSetAnimationshowNoDataSetAnimationDefines if the component should show a little loading animation, when no data is setbooleantrue
datadataThe data used for displayingReleaseData[][]
changeTypeBadgeNameFuncchangeTypeBadgeNameFuncCan be used to i18n the changeTypeBadge(name: string) => string"name => name"
dateFormatterdateFormatterFormats the date(date: Date) => string"date => date.toLocaleDateString()"
issueMatchingissueMatchingUsed for parsing e.g. #3 in the release notesRegExp | undefined"/(#\\d+)/i"
issueBaseUrlissueBaseUrlThe url for building issue references If a matching issue is found in the release notes, e.g #3 it will become a link based on that url (the numer will be appendend)string""
issueLinkGeneratorissueLinkGeneratorAnother way for building issue references If a matching issue is found in the release notes, e.g #3 it will become a link based on what the function returns (null results in no link)((issueKey: string) => string | null) | undefined"undefined"