-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Badge: border and color updates (#2022)
* chore(ci): updating rails gem version [ci skip] * chore(release): publish [skip ci] * style(badge): rework documentation and styles for border and color updates * fix(linter): remove extra spaces and reorg style order * style(badge): rearrange badge preview and update styles * fix: linting issue in the scss for order of props * docs(badge): minor adjustments to grammar * style(dot): adjust sage-badge dot spacing to align with designs * revert versions to match develop * fix: remove extra space in changelog --------- Co-authored-by: Kajabi Automation Bot <[email protected]>
- Loading branch information
1 parent
7b95a32
commit c55c8ac
Showing
8 changed files
with
113 additions
and
127 deletions.
There are no files selected for viewing
162 changes: 72 additions & 90 deletions
162
docs/app/views/examples/components/badge/_preview.html.erb
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 %> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.