Skip to content
This repository has been archived by the owner on Nov 19, 2024. It is now read-only.

Markdown linting: Enable rule MD036 (emphasis used instead of a header) #6023

Merged
merged 5 commits into from
Nov 18, 2019
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
Removed emphasis from captions
  • Loading branch information
jeff-matthews committed Nov 18, 2019
commit e913858651ed5ed5efbee2b0b3d617c065dc18d9
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ When the slideout is triggered (by an action taken on the "parent page"), the pa

![Example of panel animation](img/slideout-panel1.png)

_Example of panel animation_
Example of panel animation

### Anatomy of Slideout

Expand All @@ -41,15 +41,15 @@ The active panel should include the following elements:

![Example of active panel positioned over "parent"](img/slideout-panel2.png)

_Example of active panel positioned over "parent"_
Example of active panel positioned over "parent"

### Cancel and Close controls

The close control ( × ) and the "Cancel" link/button will cancel the sub-process, close the panel and return the user to their primary path. The ESC-key via keyboard will close/cancel the upper-most open panel.

![Close and cancel controls](img/slideout-panel3.png)

_Close and cancel controls_
Close and cancel controls

### Passive Close

Expand All @@ -61,13 +61,13 @@ When two panels are open (one over the other), only the topmost is active. Click

![](img/slideout-panel5.png)

_Passive close "zone" - one level down_
Passive close "zone" - one level down

Clicking or tapping the "alley" that represents the parent page (lowest level) will slide each panel out of view, closing them, and return the user to the parent page. It is recommended that no more than two panels be used in any given "task flow".

![](img/slideout-panel6.png)

_Passive close "zone" - two levels down_
Passive close "zone" - two levels down

### Slideout Button Bar actions

Expand Down Expand Up @@ -106,13 +106,13 @@ In its final position the panel does not snap to the page-grid of the parent pag

![](img/slideout-panel7.png)

_Panel position in relation to browser edge_
Panel position in relation to browser edge

A 12-column page-grid is nested inside the content area of the slideout panel, with an additional 15px of padding added to the left edge.

![](img/slideout-panel8.png)

_Nested page-grid with additional padding_
Nested page-grid with additional padding

This method of nesting a 12-column page-grid inside the slideout panel is repeated with each subsequent panel. This is done so that the panels can easily accommodate established page templates used in the Magento framework. With each additional panel, the position of the active panel should indent to create the page-over-page metaphor and allow a zone(s) for the passive close interaction mentioned above.

Expand All @@ -127,7 +127,7 @@ When an action is taken that triggers a modal, the modal window should appear ce

![](img/modal1.png)

_Example of a Confirmation Modal_
Example of a Confirmation Modal

### Anatomy of a Modal

Expand All @@ -146,7 +146,7 @@ Every modal should include a close control ( × ) in the upper right corner as w

![](img/modal3.png)

_Modal "Cancel" and "Close" controls_
Modal "Cancel" and "Close" controls

### Modal Dimensions

Expand All @@ -158,11 +158,11 @@ The distance of the modal to the top of the browser should have a fixed distance

![Placement and Padding of Modal](img/modal5.png)

_Placement and Padding of Modal_
Placement and Padding of Modal

![Sample of progress bar in modal](img/modal6.png)

_Sample of progress bar in modal_
Sample of progress bar in modal

### Implementation

Expand All @@ -181,45 +181,45 @@ Drop down overlays behave just as drop down form elements do. A button or contro

![Examples of drop down overlays](img/overlay1.jpg)

_Examples of drop down overlays_
Examples of drop down overlays

### Flyouts

Flyouts are overlays that typically emerge from a link, menu heading, or other control. They are somewhat different than drop downs in that they create a sort of "tab" around the control that triggered them.

![Data-table Filtering Flyout](img/overlay2.jpg)

_Data-table Filtering Flyout_
Data-table Filtering Flyout

![Data-table In-line Editing Flyout](img/overlay3.jpg)

_Data-table In-line Editing Flyout_
Data-table In-line Editing Flyout

![Sub-menu Navigation Flyout](img/overlay4.jpg)

_Sub-menu Navigation Flyout_
Sub-menu Navigation Flyout

### Contextual Help

Contextual Help is similar to a "tooltip" element, except that it is revealed by clicking or tapping a control and dismissed by tapping again, or by opening another Contextual Help element on the page.

![Example of Contextual Help](img/overlay5.jpg)

_Example of Contextual Help_
Example of Contextual Help

### Alerts and Messages

Within the Magento application it is often necessary and helpful to provide feedback to the user as to the success or failure of an action or process. This feedback may come in the form of client-side validation or server-side validation.

![Field Level Validation message](img/overlay6.jpg)

_Field Level Validation message_
Field Level Validation message

When field level validation is triggered resulting message should appear and persist until the user has taken an action to correct the error (for example, clicks into the form field to re-type an incorrect password).

![Data-table with Confirmation Message](img/overlay7.jpg)

_Data-table with Confirmation Message_
Data-table with Confirmation Message

## Assets

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
group: admin-pattern-library
title: Expandable sections
---
_(AKA Expand-Collapse, Collapsible panels)_

(AKA Expand-Collapse, Collapsible panels)

Expandable sections are expandable content areas which are useful in cases where a lot of information must be accommodated in limited space, thereby reducing clutter and allowing you focus on the primary task. Typically the information to be accommodated can be separated into various sections and/or sub-sections, or topics.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -116,27 +116,27 @@ Field selection works the same as a typical text field with

## Style

**Single Date Picker**
**Single Date Picker:**

![](img/datepicker.png)

**Date Range Picker**
**Date Range Picker:**

![](img/rangedatepicker.png)

**Single Time Picker**
**Single Time Picker:**

![](img/timepicker.png)

**Time Range Picker**
**Time Range Picker:**

![](img/timerangepicker.png)

**Single Date and Time Picker**
**Single Date and Time Picker:**

![](img/date&timepicker.png)

**Date and Time Range Picker**
**Date and Time Range Picker:**

![](img/rangedate&timepicker.png)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ _* "best" is a relative term, but there are User Experience principles and best

In most cases every text field, text box, radio button group, checkbox or checkbox group, drop down selector and multi-select box will have a label. There are two variations of form [layout](https://glossary.magento.com/layout) – "label-left" and "label-top". Depending on the layout of the page and/or task-at-hand, either of these may be implemented, but whichever layout is deemed appropriate it should be used consistency throughout a given task.

**Example of label-top**
**Example of label-top:**

![](img/form_sample_horiz.png)

**Example of label-left**
**Example of label-left:**

![](img/form_sample_vert.png)

Expand All @@ -41,11 +41,11 @@ otherwise selecting outside the form element that has focus.

For *label-left* form elements the amount of horizontal real estate allowed for the labels should only span a maximum of 3 columns of the page grid. While the element itself should typically span no more than 4 columns. For *label-top* form elements, the label and the form element overall should typically not exceed 5 columns of the page grid, however page layout and/or the amount of information to be collected will influence this.

**Grid and label-left form**
**Grid and label-left form:**

![](img/grid_horiz.png)

**Grid and label-top form**
**Grid and label-top form:**

![](img/grid_vert.png)

Expand Down Expand Up @@ -183,7 +183,7 @@ Akin to progressive disclosure is "contextual help". This may be used whenever i

For specific details concerning styling including fonts, colors and effects and spacing and padding, please refer to the source PSD files and exports located on Box or contact the Magento Product Design and User Experience team.

**Sample of specs**
**Sample of specs:**

![](img/spec_sample.png)

Expand Down