From 6af3ce713f066ad2b3aca19b4b93bd0ddffa60d5 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Thu, 28 Dec 2017 17:43:30 +0200 Subject: [PATCH] Documented modals --- docs/doc-fragments/docFragments.js | 2 +- docs/doc-fragments/modalDialogs.js | 62 ++++++++++++++++++++++++++++++ docs/v3/DEVLOG.md | 4 ++ docs/v3/docs.html | 41 +++++++++++++++++++- 4 files changed, 106 insertions(+), 3 deletions(-) diff --git a/docs/doc-fragments/docFragments.js b/docs/doc-fragments/docFragments.js index d267bf0..73b806a 100644 --- a/docs/doc-fragments/docFragments.js +++ b/docs/doc-fragments/docFragments.js @@ -25,5 +25,5 @@ module.exports = [ grid, cards, cardSections, formsAndInput, buttons, inputGrouping, header, navigationBar, footer, drawer, - textHighlighting, toasts, tooltips,// modalDialogs + textHighlighting, toasts, tooltips, modalDialogs ] diff --git a/docs/doc-fragments/modalDialogs.js b/docs/doc-fragments/modalDialogs.js index e69de29..7308b24 100644 --- a/docs/doc-fragments/modalDialogs.js +++ b/docs/doc-fragments/modalDialogs.js @@ -0,0 +1,62 @@ +module.exports = { + id: 'modal-dialogs', + title: 'Modal dialogs', + keywords: [`modal`, `dialog`, `contextual`, `alert`, `notification`], + description: `

mini.css provides you with a modal dialog component to display messages to users. It is composed of three components - the modal dialog, the toggle button and the close button:

+ `, + example: `

Modal

This is a modal dialog!

`, + samples: [`
<label for="modal-control">Show modal</label>
+
+<input type="checkbox" id="modal-control" class="modal">
+<div>
+  <div class="card">
+    <label for="modal-control" class="modal-close" ></label>
+    <h3 class="section">Modal</h3>
+    <p class="section">This is a modal dialog!</p>
+  </div>
+</div>
`], + notes: [ + `Modal dialogs should be used in combination with the card component for best results.`, + `Remember to apply the appropriate classes to any and all elements, as indicated in the examples. Failing to do so will result in the modal dialog not rendering or behaving properly.`, + `You can omit the toggle for the modal dialog and use Javascript to show/hide it, instead. You can also use any correctly linked label inside the modal dialog to change its state.` + ], + customization: [ + `Background color for the modal dialog overlay can be changed by changing the value of --modal-overlay-color.`, + `Text color for the modal dialog close button can be changed by changing the value of the --modal-close-color.`, + `Background color for the modal dialog close button when focused or hovered over can be changed by changing the value of the --modal-close-hover-color.`, + `Universal margin for elements can be changed globally by changing the value of the --universal-margin variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.`, + `Universal padding for elements can be changed globally by changing the value of the --universal-padding variable.`, + `Universal border radius for elements can be changed globally by changing the value of the --universal-border-radius variable.` + ], + modifiers: [], + dos: [ + { + description: `You can use the role="dialog" to add accessibility to your modal dialogs. Remember to properly label it and manage keyboard focus, as required.`, + sample: `
<input type="checkbox" id="modal-control" class="modal">
+<div role="dialog" aria-labelledby="dialog-title">
+  <div class="card">
+    <label for="modal-control" class="modal-close" ></label>
+    <h3 class="section" id="dialog-title">Modal</h3>
+    <p class="section">This is a modal dialog!</p>
+  </div>
+</div>
` + } + ], + donts: [ + { + description: `You should not place anything between the checkbox controlling the modal dialog and the container.`, + sample: `
<input type="checkbox" id="modal-control" class="modal">
+<!-- Do not place other stuff between these -->
+<div>
+  <div class="card">
+    <label for="modal-control" class="modal-close" ></label>
+    <h3 class="section">Modal</h3>
+    <p class="section">This is a modal dialog!</p>
+  </div>
+</div>
` + } + ] +} diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index e6608ad..846dce0 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -234,3 +234,7 @@ ## 20171217 - Documented `.tooltip`. + +## 20171228 + +- Documented `.modal`. diff --git a/docs/v3/docs.html b/docs/v3/docs.html index e0ce4f0..66c18bd 100644 --- a/docs/v3/docs.html +++ b/docs/v3/docs.html @@ -26,7 +26,7 @@
- +

Getting started

You can get started using mini.css in one of many ways. It is published on npm and yarn, so you can easily download it, using your preferred package manager:

@@ -639,11 +639,48 @@

Notes

  • Tooltips depend on the aria-label property, so they are fully accessible on screen readers.

Customization

  • Text color for tooltips can be changed by changing the value of the --tooltip-fore-color variable.
  • Background color for tooltips can be changed by changing the value of the --tooltip-back-color variable.
  • Universal margin for elements can be changed globally by changing the value of the --universal-margin variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.
  • Universal padding for elements can be changed globally by changing the value of the --universal-padding variable.
  • Universal border radius for elements can be changed globally by changing the value of the --universal-border-radius variable.
+