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

Next Version Bump #1821

Merged
merged 12 commits into from
Oct 19, 2023
+176 −82
Merged

Next Version Bump #1821

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
6af0dd4
chore(deps): bump @babel/traverse from 7.18.11 to 7.23.2
dependabot[bot] Oct 16, 2023
451a9bc
fix(sortable): fixes issue with title dictating content's width
anechol Oct 18, 2023
7945af0
fix(dropdown): resolve contact ui dropdown getting cut off on small s…
QuintonJason Oct 16, 2023
a1ff19c
fix(dropdown): remove unnecessary duplicate selector
QuintonJason Oct 16, 2023
81e5011
Merge pull request #1817 from Kajabi/AUD-933/qj-contact-ui-cut-off-sm…
QuintonJason Oct 18, 2023
47d4c26
fix(tooltip): add closing on click
QuintonJason Oct 16, 2023
0a812f7
chore(tooltip): update yarn.lock
QuintonJason Oct 16, 2023
d8becb1
Merge pull request #1814 from Kajabi/DSSINBOX-4/tooltip-onclick-prop
QuintonJason Oct 18, 2023
995c83c
Merge pull request #1820 from Kajabi/sortable-width-bug
anechol Oct 18, 2023
08d94be
Merge pull request #1816 from Kajabi/dependabot/npm_and_yarn/babel/tr…
ju-Skinner Oct 18, 2023
18f2efc
docs(panel): updates Panel documentation for Rails
anechol Oct 18, 2023
6ef2eeb
Merge pull request #1813 from Kajabi/docs/panel-docs-update
anechol Oct 18, 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
106 changes: 41 additions & 65 deletions docs/app/views/examples/components/panel/_preview.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,15 @@ Ut elementum id leo ac fringilla.
icon_name: "sage-icon-warning",
} %>

<%= sage_component SagePanelHeader, { title: "Basic Panel" } %>
<h2>Overview</h2>

<p>Panels are rich containers that allow for grouping and organizing content details.</p>

<p>Example:</p>

<%= sage_component SagePanel, {} do %>
<%= sage_component SagePanelHeader, {
title: "Panel Header Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi rhoncus mauris ut turpis gravida bibendum",
title: "Panel Header",
title_tag: "h3",
} do %>
<%= sage_component SageButton, {
Expand All @@ -43,48 +46,25 @@ Ut elementum id leo ac fringilla.
<% end %>
<% end %>

<%= sage_component SagePanel, {} do %>
<%= sage_component SagePanelHeader, {
title: "Panel Header",
tag: "h3",
} do %>
<%= sage_component SageSwitch, {
hide_text: true,
id: "sage-switch-1",
label_text: "Switch (checkbox)",
name: "sage-switch-1",
type: "checkbox",
value: "switch-1-value",
} %>
<%= content_for :sage_panel_header_subtext do %>
<%= sample_copy.html_safe %>
<% end %>
<% end %>
<%= sage_component SagePanelBlock, { type_block: true } do %>
<%= sample_copy.html_safe %>
<% end %>
<% end %>
<p>All panels are made up of three basic building blocks: Header, Body, and Footer.</p>

<%= md("
Panels are rich containers that allow for grouping and organizing content details. They have the following overall setup available:
<h2>Panel Building Blocks</h2>

- **Header**
`SagePanelHeader`
(optional) This area usually contains at least a title (`sage-panel__title`) and often an icon or menu positioned in the right corner. An optional subtext element (`sage-panel__subtext`) is useful for documenting the panel objective. It employs the Sage Row layout base with `24px` gutters.
<h3>Header</h3>

- **Body**
While there is no specific container for the body itself, there are a variety of panel components that can be used to create most panel configurations. The simplest of these is **Panel Block** `SagePanelBlock` (shown above), allowing open text or elements without any preset spacing between them. Others, such as **Panel Stack** `SagePanelStack` are more opinionated, enforcing specific spacing or layout features. Each of the Panel components is explained and demonstrated in more detail below.
<p>This area usually contains at least a title and an icon or menu positioned in the right corner, both optional. An optional subtext element is useful for documenting the panel objective. It employs the Sage Row layout base with <code>24px</code> gutters.</p>

- **Footer**
`SagePanelFooter` (optional) This area often contains one or more buttons that can be sent to the right edge of the panel with the `align_spread: true` component attribute. It employs the Sage Row layout base with `24px` gutters.", use_sage_type: true) %>
<h3>Body</h3>

<%= sage_component SagePanelHeader, { title: "Panel Block <code>.sage-panel__block</code>".html_safe } %>
<%= md("A block is a completely unopinionated container meant to provide the most flexible way to group elements within a panel. This component is purely a wrapper and does not apply any layout or spacing by default so it is great for blocks of text or small groups of content within some of the other panel components. Set `type_block` to `true` to enforce open text spacing rules as established by the `sage-type` class.", use_sage_type: true) %>
There are a few for the panel body container.

<%= sage_component SagePanelHeader, { title: "Panel Stack <code>.sage-panel__stack</code>".html_safe } %>
<%= md("A stack is a single column of elements sitting atop each other with the standard 8px gap between each item in the stack. A common use is for stacking cards, but this is also help for presentation of several distinct lines of text content beyond open type formatting.", use_sage_type: true) %>
<h4>Panel Block</h4>

<%= sage_component SagePanelSubheader, { title: "Example:" } %>
<p>A block is a completely unopinionated container meant to provide the most flexible way to group elements within a panel. This component is purely a wrapper and does not apply any layout or spacing by default so it is great for blocks of text or small groups of content within some of the other panel components. Set <code>type_block</code> to <code>true</code> to enforce open text spacing rules as established by the <code>sage-type</code> class.</p>

<h4>Panel Stack</h4>

<p>A stack is a single column of elements sitting atop each other with the standard 8px gap between each item in the stack. A common use is for stacking cards, but this is also help for presentation of several distinct lines of text content beyond open type formatting.</p>

<%= sage_component SagePanel, {} do %>
<%= sage_component SagePanelStack, {} do %>
Expand Down Expand Up @@ -115,10 +95,10 @@ Panels are rich containers that allow for grouping and organizing content detail
<% end %>
<% end %>

<%= sage_component SagePanelHeader, { title: "Panel List <code>.sage-panel__list</code>".html_safe } %>
<%= md("A list is a similar to a stack but has no space between items, and each item has a border that extends into the panel's outer gutters. Lists can also have row-like layouts with elements setup inline.", use_sage_type: true) %>
<h4>Panel List</h4>

<p>A list is a similar to a stack but has no space between items, and each item has a border that extends into the panel's outer gutters. Lists can also have row-like layouts with elements setup inline.</p>

<%= sage_component SagePanelSubheader, { title: "Example:" } %>
<%= sage_component SagePanel, {} do %>
<%= sage_component SagePanelList, {} do %>
<%= sage_component SagePanelListItem, { grid_template: "et" } do %>
Expand All @@ -140,10 +120,16 @@ Panels are rich containers that allow for grouping and organizing content detail
<% end %>
<% end %>

<%= sage_component SagePanelHeader, { title: "Panel Row <code>.sage-panel__row</code>".html_safe } %>
<%= md("A panel row is a single or isolated inline arrangement of elements. It can either be a custom component or employ one of the standard Grid Template Patterns.", use_sage_type: true) %>
<h3>Footer</h3>

<p>This area often contains one or more buttons that can be sent to the right edge of the panel with the <code>align_spread: true</code> component attribute. It employs the Sage Row layout base with <code>24px</code> gutters.</p>

<h3>Miscellaneous</h3>

<h4>Panel Row</h4>

<p>A panel row is a single or isolated inline arrangement of elements. It can either be a custom component or employ one of the standard Grid Template Patterns.</p>

<%= sage_component SagePanelSubheader, { title: "Example:" } %>
<%= sage_component SagePanel, {} do %>
<%= sage_component SagePanelRow, { grid_template: "ete" } do %>
<i class="sage-icon-check-circle-xl t-sage--color-sage"></i>
Expand All @@ -163,10 +149,10 @@ Panels are rich containers that allow for grouping and organizing content detail
<% end %>
<% end %>

<%= sage_component SagePanelHeader, { title: "Panel Tiles <code>.sage-panel__tiles</code>".html_safe } %>
<%= md("Tiles are groups of elements that typically also each contain additional content but are laid out in a neat tiling pattern. Items can use the generic `.sage-panel__tile`, or be another Sage Component such as a Card. Use one of the tiling pattern modifiers to determine how many tiles appear in a row of the grid: 2-up, 3-up, and 4-up patterns.", use_sage_type: true) %>
<h4>Panel Tiles</h4>

<p>Tiles are groups of elements that typically also each contain additional content but are laid out in a neat tiling pattern. Items can use the generic `.sage-panel__tile`, or be another Sage Component such as a Card. Use one of the tiling pattern modifiers to determine how many tiles appear in a row of the grid: 2-up, 3-up, and 4-up patterns.</p>

<%= sage_component SagePanelSubheader, { title: "Example:" } %>
<%= sage_component SagePanel, {} do %>
<%= sage_component SagePanelTiles, { tiles_in_row: 3 } do %>
<%= sage_component SageCard, {} do %>
Expand Down Expand Up @@ -202,22 +188,10 @@ Panels are rich containers that allow for grouping and organizing content detail
<% end %>
<% end %>

<%= sage_component SagePanelHeader, { title: "Panel Subheader <code>.sage-panel__subheader</code>".html_safe } %>
<%= md("The Panel Subheader provides specific styles for a subheading within a panel. It is very similar in configuration to the panel header but shows with smaller type. Format the text content itself with `.sage-panel__subtitle`, which can also be used independently. An optional subtext attribute (`subtext: ""`) is useful for documenting the panel objective.", use_sage_type: true) %>
<h4>Panel Divider</h4>

<%= sage_component SagePanelSubheader, { title: "Example:" } %>
<%= sage_component SagePanel, {} do %>
<%= sage_component SagePanelHeader, { title: "Panel header here" } %>
<%= sage_component SagePanelSubheader, { title: "Panel subheader here" } %>
<%= sage_component SagePanelBlock, { type_block: true } do %>
<%= sample_copy.html_safe %>
<% end %>
<% end %>

<%= sage_component SagePanelHeader, { title: "Panel Divider <code>.sage-panel__divider</code>".html_safe } %>
<%= md("The Divider is a thin rule that helps to provide additional visual separation between groups within the panel.", use_sage_type: true) %>
<p>The Divider is a thin rule that helps to provide additional visual separation between groups within the panel.</p>

<%= sage_component SagePanelSubheader, { title: "Example:" } %>
<%= md("Dividers can also be set to extend to the panel edges with the `--full-bleed` modifier. They may also contain label text.", use_sage_type: true) %>
<%= sage_component SagePanel, {} do %>
<%= sage_component SagePanelHeader, { title: "Divider:" } %>
Expand All @@ -228,8 +202,10 @@ Panels are rich containers that allow for grouping and organizing content detail
<%= sage_component SagePanelDivider, { bleed: true } %>
<% end %>

<%= sage_component SagePanelHeader, { title: "Panel Figure <code>.sage-panel__figure</code>".html_safe } %>
<%= md("A Panel Figure contains an image that occupies a substantive space in the panel, typically filling edge to edge.See the #{link_to("Panel Figure component", pages_component_path("panel_figure"), class: "sage-link")} for more details.", use_sage_type: true) %>
<h4>Panel Figure</h4>

<p>A panel figure contains an image that occupies a substantive space in the panel, typically filling edge to edge. See the <a classs="sage-link" href="panel_figure">Panel Figure component</a>, for more details.</p>

<h5>Panel Figure Utility</h5>

<%= sage_component SagePanelHeader, { title: "Panel Grid Utility <code>.sage-panel-grid</code>".html_safe } %>
<%= md("The `.sage-panel-grid` utility class can be added onto containers in order to enforce the Panel's internal grid settings.This is helpful in cases where a container of some sort is needed around contents but those contents should still recieve the standard Panel-scoped gaps.", use_sage_type: true) %>
<p>The <code>.sage-panel-grid`</code> utility class can be added onto containers in order to enforce the Panel's internal grid settings.This is helpful in cases where a container of some sort is needed around contents but those contents should still recieve the standard Panel-scoped gaps.</p>
6 changes: 6 additions & 0 deletions packages/sage-assets/lib/stylesheets/components/_dropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ $-dropdown-item-focus-line-spacing-x: sage-spacing(sm);
$-dropdown-option-menu-size: rem(40px);

$-dropdown-panel-max-height: rem(400px);
$-dropdown-panel-max-height-small: rem(185px);
$-dropdown-panel-max-height-breakpoint: 700px;

$-dropdown-trigger-label-color-label-background: map-get($sage-field-colors, label-background);
$-dropdown-trigger-label-color-default: map-get($sage-field-colors, default);
Expand Down Expand Up @@ -286,6 +288,10 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
.sage-dropdown--page-size & {
min-width: 100%;
}

@media (max-height: $-dropdown-panel-max-height-breakpoint) {
max-height: $-dropdown-panel-max-height-small;
}
}

.sage-dropdown__panel {
Expand Down
3 changes: 2 additions & 1 deletion packages/sage-assets/lib/stylesheets/components/_sortable.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ $-sortable-image-height: rem(48px);

.sage-sortable__item {
display: grid;
grid-template-columns: min-content minmax(0, min-content) auto auto;
grid-template-columns: min-content minmax(0, 1fr) auto auto;
gap: sage-spacing(card);
align-items: center;
padding: sage-spacing(xs) sage-spacing(panel);
Expand Down Expand Up @@ -114,6 +114,7 @@ $-sortable-image-height: rem(48px);

.sage-sortable__item-subtitle {
@extend %t-sage-body-xsmall;
@include truncate();
color: sage-color(charcoal, 100);
}

Expand Down
10 changes: 8 additions & 2 deletions packages/sage-system/lib/tooltip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,16 @@ Sage.tooltip = (function() {
// TODO: Reverting tooltip reveal on focus/blur until further investigation of persistent focus
// can resolve it lingering when it shouldn't.

function init(el) {
function init(el, onClick) {
el.addEventListener("mouseenter", buildToolTip);
// el.addEventListener("focus", buildToolTip);
el.addEventListener("mouseleave", removeTooltip);
el.addEventListener("click", function(ev) {
removeTooltip(ev);
if (onClick) {
onClick(ev);
}
});
// el.addEventListener("blur", removeTooltip);
}

Expand Down Expand Up @@ -50,7 +56,7 @@ Sage.tooltip = (function() {

// Removes tooltip from DOM
function removeTooltip(evt) {
if (!evt.target.hasAttribute(DATA_ATTR) || !document.querySelector(SELECTOR) || !evt.target.dataset.jsTooltip) return;
if (!evt.target.hasAttribute(DATA_ATTR) || !document.querySelector(SELECTOR) || !document.querySelector(`.${TOOLTIP_CLASS}`) || !evt.target.dataset.jsTooltip) return;

window.requestAnimationFrame(function() {
document.body.removeChild(document.querySelector(`.${TOOLTIP_CLASS}`));
Expand Down
Loading
Loading