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

Badge: border and color updates #2022

Merged
merged 10 commits into from
Nov 26, 2024
Merged

Badge: border and color updates #2022

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
512543e
chore(ci): updating rails gem version [ci skip]
kajabi-bot Nov 22, 2024
2aa7b76
chore(release): publish [skip ci]
kajabi-bot Nov 22, 2024
3397d38
style(badge): rework documentation and styles for border and color up…
monicawheeler Nov 9, 2024
87d76ef
fix(linter): remove extra spaces and reorg style order
monicawheeler Nov 9, 2024
634d37d
style(badge): rearrange badge preview and update styles
monicawheeler Nov 21, 2024
2ccc5ca
fix: linting issue in the scss for order of props
monicawheeler Nov 21, 2024
092c145
docs(badge): minor adjustments to grammar
monicawheeler Nov 22, 2024
5cbfb46
style(dot): adjust sage-badge dot spacing to align with designs
monicawheeler Nov 25, 2024
cfcd699
revert versions to match develop
monicawheeler Nov 25, 2024
0b17ced
fix: remove extra space in changelog
monicawheeler Nov 25, 2024
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
162 changes: 72 additions & 90 deletions docs/app/views/examples/components/badge/_preview.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,102 +1,84 @@
<%
configs = [
{
color: "draft",
icon: "draft",
},
{
color: "published",
icon: "check",
},
{
color: "info",
icon: "draft",
},
{
color: "warning",
icon: "warning",
},
{
color: "danger",
icon: "danger",
},
{
color: "locked",
icon: "lock",
}
]
%>
<%= sage_component SagePanelBlock, {} do %>
<h3 class="t-sage-heading-6">Default Badge</h3>
<%= sage_component SageLabelGroup, {} do %>
<% configs.each do | config | %>
<%= sage_component SageBadge, {
color: config[:color],
value: config[:color].capitalize,
}%>
<% end %>
<% end %>
<h2>Variants</h2>

<h3>Default Badge</h3>
<p>Demonstrates the use of the default badge with various color options.</p>

<%= sage_component SageLabelGroup, { gap: :md, spacer: { bottom: :sm }} do %>
<%= sage_component SageBadge, { color: "draft", value: "Neutral" } %>
<%= sage_component SageBadge, { color: "info", value: "Info" } %>
<%= sage_component SageBadge, { color: "published", value: "Success" } %>
<%= sage_component SageBadge, { color: "warning", value: "Warning" } %>
<%= sage_component SageBadge, { color: "danger", value: "Danger" } %>
<%= sage_component SageBadge, { color: "locked", value: "Accent" } %>
<% end %>

<%= sage_component SagePanelBlock, {} do %>
<h3 class="t-sage-heading-6">Indicator Badge</h3>
<%= sage_component SageLabelGroup, {} do %>
<% configs.each do | config | %>
<%= sage_component SageBadge, {
color: config[:color],
value: config[:color].capitalize,
} do %>
<% content_for :sage_badge_dot do %>
<%= sage_component SageDot, { color: "primary" } %>
<% end %>
<% end %>
<%= sage_component SageDivider, {} %>

<h3>Dot</h3>
<p>Demostrates a badge with an indicator dot.</p>

<%= sage_component SageLabelGroup, { gap: :md, spacer: { bottom: :sm }} do %>
<%= sage_component SageBadge, { color: "draft", value: "Neutral" } do %>
<% content_for :sage_badge_dot do %>
<%= sage_component SageDot, { color: "primary" } %>
<% end %>
<% end %>
<% end %>

<%= sage_component SagePanelBlock, {} do %>
<h3 class="t-sage-heading-6">Interactive Badge</h3>
<%= sage_component SageLabelGroup, {} do %>
<% configs.each do | config | %>
<%= sage_component SageBadge, {
color: config[:color],
value: config[:color].capitalize,
interactive_type: :dropdown
} do %>
<% content_for :sage_badge_dot do %>
<%= sage_component SageDot, { color: "primary" } %>
<% end %>
<% end %>
<%= sage_component SageBadge, { color: "info", value: "Info" } do %>
<% content_for :sage_badge_dot do %>
<%= sage_component SageDot, { color: "primary" } %>
<% end %>
<% end %>
<%= sage_component SageBadge, { color: "published", value: "Success" } do %>
<% content_for :sage_badge_dot do %>
<%= sage_component SageDot, { color: "primary" } %>
<% end %>
<% end %>
<%= sage_component SageBadge, { color: "warning", value: "Warning" } do %>
<% content_for :sage_badge_dot do %>
<%= sage_component SageDot, { color: "primary" } %>
<% end %>
<% end %>
<%= sage_component SageBadge, { color: "danger", value: "Danger" } do %>
<% content_for :sage_badge_dot do %>
<%= sage_component SageDot, { color: "primary" } %>
<% end %>
<% end %>
<%= sage_component SageBadge, { color: "locked", value: "Accent" } do %>
<% content_for :sage_badge_dot do %>
<%= sage_component SageDot, { color: "primary" } %>
<% end %>
<% end %>
<% end %>

<%= sage_component SagePanelBlock, {} do %>
<h3 class="t-sage-heading-6">Large Badge</h3>
<%= sage_component SageLabelGroup, {} do %>
<%= sage_component SageBadge, {
color: "draft",
value: "Draft",
large: true,
} %>
<%= sage_component SageBadge, {
color: "published",
value: "Published",
large: true,
} do %>
<% content_for :sage_badge_dot do %>
<%= sage_component SageDot, {} %>
<% end %>
<%= sage_component SageDivider, {} %>

<h3>Interactive Badge</h3>
<p>Demonstrates an interactive badge with dropdown functionality.</p>

<%= sage_component SageLabelGroup, { gap: :md, spacer: { bottom: :sm }} do %>
<%= sage_component SageBadge, { color: "draft", value: "Neutral", interactive_type: :dropdown } %>
<%= sage_component SageBadge, { color: "info", value: "Info", interactive_type: :dropdown } %>
<%= sage_component SageBadge, { color: "published", value: "Success", interactive_type: :dropdown } %>
<%= sage_component SageBadge, { color: "warning", value: "Warning", interactive_type: :dropdown } %>
<%= sage_component SageBadge, { color: "danger", value: "Danger", interactive_type: :dropdown } %>
<%= sage_component SageBadge, { color: "locked", value: "Accent", interactive_type: :dropdown } %>
<% end %>

<%= sage_component SageDivider, {} %>

<h3>Large Badge</h3>
<p>Demonstrates larger badge sizes for emphasis.</p>

<%= sage_component SageLabelGroup, { gap: :md, spacer: { bottom: :sm }} do %>
<%= sage_component SageBadge, { color: "draft", value: "Neutral", large: true } %>
<%= sage_component SageBadge, { color: "published", value: "Success", large: true } do %>
<% content_for :sage_badge_dot do %>
<%= sage_component SageDot, {} %>
<% end %>
<%= sage_component SageBadge, {
color: "warning",
value: "Warning",
large: true,
interactive_type: :dropdown
} do %>
<% content_for :sage_badge_dot do %>
<%= sage_component SageDot, {} %>
<% end %>
<% end %>
<%= sage_component SageBadge, { color: "warning", value: "Warning", large: true, interactive_type: :dropdown } do %>
<% content_for :sage_badge_dot do %>
<%= sage_component SageDot, {} %>
<% end %>
<% end %>
<% end %>
16 changes: 8 additions & 8 deletions docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ module SageDictionary
SD_SAGE_COLOR_BASE_BLUE_200_HEX = "#bfdbfe"
SD_SAGE_COLOR_BASE_BLUE_200_CODE = "blue-200"
SD_SAGE_COLOR_BASE_BLUE_200_CLASSNAME = "t-sage--color-blue-200"
SD_SAGE_COLOR_BASE_BLUE_300_HEX = "#92c5fd"
SD_SAGE_COLOR_BASE_BLUE_300_HEX = "#93c5fd"
SD_SAGE_COLOR_BASE_BLUE_300_CODE = "blue-300"
SD_SAGE_COLOR_BASE_BLUE_300_CLASSNAME = "t-sage--color-blue-300"
SD_SAGE_COLOR_BASE_BLUE_400_HEX = "#60a5fa"
Expand Down Expand Up @@ -132,7 +132,7 @@ module SageDictionary
SD_SAGE_COLOR_BASE_PRIMARY_100_HEX = "#dbe9fe"
SD_SAGE_COLOR_BASE_PRIMARY_100_CODE = "primary-100"
SD_SAGE_COLOR_BASE_PRIMARY_100_CLASSNAME = "t-sage--color-primary-100"
SD_SAGE_COLOR_BASE_PRIMARY_200_HEX = "#92c5fd"
SD_SAGE_COLOR_BASE_PRIMARY_200_HEX = "#93c5fd"
SD_SAGE_COLOR_BASE_PRIMARY_200_CODE = "primary-200"
SD_SAGE_COLOR_BASE_PRIMARY_200_CLASSNAME = "t-sage--color-primary-200"
SD_SAGE_COLOR_BASE_PRIMARY_300_HEX = "#2463eb"
Expand Down Expand Up @@ -975,7 +975,7 @@ module SageDictionary
#
SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_FOREGROUND = "#343332"
SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_FOREGROUND_ACCENT = "#1a1a19"
SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_BACKGROUND = "#e4e4e4"
SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_BACKGROUND = "#f0f0f0"
SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_BACKGROUND_ACCENT = "#d2d1d1"
SD_SAGE_COLOR_COMBOS_DRAFT_DEFAULT_ICON_BACKGROUND_ACCENT = "#6c6a69"
SD_SAGE_COLOR_COMBOS_DRAFT_SUBTLE_FOREGROUND = "#6c6a69"
Expand All @@ -996,11 +996,11 @@ module SageDictionary
SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_FOREGROUND = "#1c4ed8"
SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_FOREGROUND_ACCENT = "#172554"
SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_BACKGROUND = "#dbe9fe"
SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_BACKGROUND_ACCENT = "#92c5fd"
SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_BACKGROUND_ACCENT = "#93c5fd"
SD_SAGE_COLOR_COMBOS_INFO_DEFAULT_ICON_BACKGROUND_ACCENT = "#2463eb"
SD_SAGE_COLOR_COMBOS_INFO_SUBTLE_FOREGROUND = "#1c4ed8"
SD_SAGE_COLOR_COMBOS_INFO_SUBTLE_FOREGROUND_ACCENT = "#2463eb"
SD_SAGE_COLOR_COMBOS_INFO_SUBTLE_BACKGROUND = "#92c5fd"
SD_SAGE_COLOR_COMBOS_INFO_SUBTLE_BACKGROUND = "#93c5fd"
SD_SAGE_COLOR_COMBOS_INFO_BOLD_FOREGROUND = "#dbe9fe"
SD_SAGE_COLOR_COMBOS_INFO_BOLD_BACKGROUND = "#2463eb"
SD_SAGE_COLOR_COMBOS_LOCKED_DEFAULT_FOREGROUND = "#402fa4"
Expand Down Expand Up @@ -1035,12 +1035,12 @@ module SageDictionary
SD_SAGE_COLOR_COMBOS_DANGER_BOLD_BACKGROUND = "#fda5a5"
SD_SAGE_COLOR_COMBOS_PRIMARY_DEFAULT_FOREGROUND = "#fff"
SD_SAGE_COLOR_COMBOS_PRIMARY_DEFAULT_FOREGROUND_ACCENT = "#fff"
SD_SAGE_COLOR_COMBOS_PRIMARY_DEFAULT_BACKGROUND = "#92c5fd"
SD_SAGE_COLOR_COMBOS_PRIMARY_DEFAULT_BACKGROUND = "#93c5fd"
SD_SAGE_COLOR_COMBOS_PRIMARY_SUBTLE_FOREGROUND = "#fff"
SD_SAGE_COLOR_COMBOS_PRIMARY_SUBTLE_FOREGROUND_ACCENT = "#fff"
SD_SAGE_COLOR_COMBOS_PRIMARY_SUBTLE_BACKGROUND = "#92c5fd"
SD_SAGE_COLOR_COMBOS_PRIMARY_SUBTLE_BACKGROUND = "#93c5fd"
SD_SAGE_COLOR_COMBOS_PRIMARY_BOLD_FOREGROUND = "#fff"
SD_SAGE_COLOR_COMBOS_PRIMARY_BOLD_BACKGROUND = "#92c5fd"
SD_SAGE_COLOR_COMBOS_PRIMARY_BOLD_BACKGROUND = "#93c5fd"

#
# Map for COLOR COMBOS
Expand Down
24 changes: 14 additions & 10 deletions packages/sage-assets/lib/stylesheets/components/_badge.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,9 @@
$-badge-min-height: rem(20px);
$-badge-interactive-icon-size: rem(24px);
$-badge-interactive-icon-size-decor: rem(28px);
$-badge-padding: sage-spacing(3xs) rem(10px) sage-spacing(3xs) sage-spacing(xs);
$-badge-padding: 1px sage-spacing(xs);
$-badge-padding-lg: sage-spacing(2xs) rem(12px);
$-badge-border-radius: sage-border(radius-x-large);
$-badge-inset-border: 0 0 0 1px inset;
$-badge-statuses: (
danger,
draft,
Expand All @@ -26,22 +25,23 @@ $-badge-statuses: (
align-items: center;
position: relative;
border-radius: $-badge-border-radius;
border-width: 1px;
border-style: solid;

&[class*="sage-badge--icon-only"] {
background-color: transparent;
}
}

.sage-badge__value {
@extend %t-sage-body-small-med;

@extend %t-sage-body-med;
appearance: none;
display: flex;
align-items: center;
max-width: 100%;
min-height: $-badge-min-height;
padding: $-badge-padding;
color: sage-color(grey, 950);
letter-spacing: sage-letter-spacing(md);
white-space: nowrap;
background-color: transparent;
border-radius: $-badge-border-radius;
Expand All @@ -59,8 +59,14 @@ $-badge-statuses: (
}

.sage-badge--large & {
@extend %t-sage-body-med;
@extend %t-sage-heading-6;
padding: $-badge-padding-lg;
font-family: $-heading-font;

.sage-badge__value-text {
font-size: sage-font-size(lg, false);
letter-spacing: sage-letter-spacing(sm);
}
}
}

Expand All @@ -84,11 +90,9 @@ $-badge-statuses: (
$-color-modifier: ".sage-badge--#{$-color-name}";

#{$-color-modifier} {
color: sage-color-combo($-color-name, default, foreground-accent);
background-color: sage-color-combo($-color-name, default, background);

&:hover:not(:focus):not(:active):not(:disabled):not(.disabled) {
color: sage-color-combo($-color-name, default, background-accent);
}
border-color: sage-color-combo($-color-name, default, background-accent);
}

#{$-color-modifier} .sage-dot {
Expand Down
2 changes: 1 addition & 1 deletion packages/sage-assets/lib/stylesheets/components/_dot.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ $-sage-dot-size--badge: rem(6px);
}

.sage-badge & {
margin-inline-start: rem(6px);
margin-inline-start: sage-spacing(xs);
}

.sage-badge--large & {
Expand Down
16 changes: 8 additions & 8 deletions packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ $sd-sage-color-base-blue-200-classname: "t-sage--color-blue-200";
///
/// color color-base-blue-300-hex
///
$sd-sage-color-base-blue-300-hex: #92c5fd;
$sd-sage-color-base-blue-300-hex: #93c5fd;
///
/// color color-base-blue-300-code
///
Expand Down Expand Up @@ -468,7 +468,7 @@ $sd-sage-color-base-primary-100-classname: "t-sage--color-primary-100";
///
/// color color-base-primary-200-hex
///
$sd-sage-color-base-primary-200-hex: #92c5fd;
$sd-sage-color-base-primary-200-hex: #93c5fd;
///
/// color color-base-primary-200-code
///
Expand Down Expand Up @@ -2028,7 +2028,7 @@ $sd-sage-color-combos-draft-default-foreground-accent: #1a1a19;
///
/// color combos color-combos-draft-default-background
///
$sd-sage-color-combos-draft-default-background: #e4e4e4;
$sd-sage-color-combos-draft-default-background: #f0f0f0;
///
/// color combos color-combos-draft-default-background-accent
///
Expand Down Expand Up @@ -2112,7 +2112,7 @@ $sd-sage-color-combos-info-default-background: #dbe9fe;
///
/// color combos color-combos-info-default-background-accent
///
$sd-sage-color-combos-info-default-background-accent: #92c5fd;
$sd-sage-color-combos-info-default-background-accent: #93c5fd;
///
/// color combos color-combos-info-default-icon-background-accent
///
Expand All @@ -2128,7 +2128,7 @@ $sd-sage-color-combos-info-subtle-foreground-accent: #2463eb;
///
/// color combos color-combos-info-subtle-background
///
$sd-sage-color-combos-info-subtle-background: #92c5fd;
$sd-sage-color-combos-info-subtle-background: #93c5fd;
///
/// color combos color-combos-info-bold-foreground
///
Expand Down Expand Up @@ -2268,7 +2268,7 @@ $sd-sage-color-combos-primary-default-foreground-accent: #fff;
///
/// color combos color-combos-primary-default-background
///
$sd-sage-color-combos-primary-default-background: #92c5fd;
$sd-sage-color-combos-primary-default-background: #93c5fd;
///
/// color combos color-combos-primary-subtle-foreground
///
Expand All @@ -2280,15 +2280,15 @@ $sd-sage-color-combos-primary-subtle-foreground-accent: #fff;
///
/// color combos color-combos-primary-subtle-background
///
$sd-sage-color-combos-primary-subtle-background: #92c5fd;
$sd-sage-color-combos-primary-subtle-background: #93c5fd;
///
/// color combos color-combos-primary-bold-foreground
///
$sd-sage-color-combos-primary-bold-foreground: #fff;
///
/// color combos color-combos-primary-bold-background
///
$sd-sage-color-combos-primary-bold-background: #92c5fd;
$sd-sage-color-combos-primary-bold-background: #93c5fd;

///
/// Map for color combos
Expand Down
Loading
Loading