From 71b543dd10ae082864b2df337d0a3e90f11ce78b Mon Sep 17 00:00:00 2001 From: mcroud Date: Fri, 16 Nov 2018 15:16:41 +0000 Subject: [PATCH 1/2] First iteration of Panes documentation --- jekyll/_components/panes.md | 209 ++++++++++++++++++ jekyll/_components/radio-buttons.md | 2 +- jekyll/_components/splitters.md | 2 +- jekyll/_components/tables.md | 2 +- jekyll/_components/trees.md | 2 +- jekyll/images/components/pane/pane-arrow.png | Bin 0 -> 72336 bytes .../images/components/pane/pane-behaviour.png | Bin 0 -> 80135 bytes .../images/components/pane/pane-buttons.png | Bin 0 -> 67720 bytes .../images/components/pane/pane-dark-mode.png | Bin 0 -> 115177 bytes .../components/pane/pane-icon-sizes.svg | 54 +++++ .../components/pane/pane-light-mode.png | Bin 0 -> 114323 bytes jekyll/images/components/pane/pane-sizes.svg | 67 ++++++ jekyll/images/components/pane/pane-title.png | Bin 0 -> 32180 bytes jekyll/images/components/pane/pane-usage.png | Bin 0 -> 64391 bytes 14 files changed, 334 insertions(+), 4 deletions(-) create mode 100644 jekyll/_components/panes.md create mode 100644 jekyll/images/components/pane/pane-arrow.png create mode 100644 jekyll/images/components/pane/pane-behaviour.png create mode 100644 jekyll/images/components/pane/pane-buttons.png create mode 100644 jekyll/images/components/pane/pane-dark-mode.png create mode 100644 jekyll/images/components/pane/pane-icon-sizes.svg create mode 100644 jekyll/images/components/pane/pane-light-mode.png create mode 100644 jekyll/images/components/pane/pane-sizes.svg create mode 100644 jekyll/images/components/pane/pane-title.png create mode 100644 jekyll/images/components/pane/pane-usage.png diff --git a/jekyll/_components/panes.md b/jekyll/_components/panes.md new file mode 100644 index 000000000..5fd10f288 --- /dev/null +++ b/jekyll/_components/panes.md @@ -0,0 +1,209 @@ +--- +layout: page +title: Panes +order: 7 +draft: true +--- + +Panes are the visual containers which separate and group tools by areas of functionality. An example would be the Breakpoints pane in the Debugger, which groups all controls which govern the creation, deletion and management of breakpoints. + +Panes are themselves often grouped together to form a panel. The Layout panel for example, contains the Flex Container, Grid and Box Model panes. + +## Usage + +
+![Pane example](../images/components/pane/pane-usage.png) + +
+A pane should be used when a series of controls which relate to the same task or piece of functionality need to be visually grouped under a single umbrella term. +
+
+ + +## Structure + +Striped of their unique content, a pane is simply a container for other elements and controls. A pane has a header, a bar which runs the width of the pane and is positioned at the very top of the pane. The header must contain the following item: + +### Pane Title + +
+![Pane title](../images/components/pane/pane-title.png) + +
+The pane title appears to the right of the arrow icon (or simply left aligned in the event that the panel does not expand or collapse) and provides a fitting label to the grouped content within the pane. +
+
+ +In addition to the required element above, a header can also contain: + +### Arrow (expand/collapse) + +
+![Pane arrow](../images/components/pane/pane-arrow.png) + +
+The arrow icon indicates that a particular pane can be expanded and collapsed and what the current expanded state is (a downward pointing arrow indicates that the pane is expanded). When present, The arrow appears as the leftmost element in the pane header. +
+
+ +### Button(s) + +
+![Pane buttons](../images/components/pane/pane-buttons.png) + +
+Primary functions belonging to a pane may be exposed within the pane header to increase visibility and to reduce the need for an additional toolbar. + +The Watch Expressions pane in the Debugger is a good example, the pane header offers an “Add Watch Expression” button (represented by a plus symbol) allowing users to quickly add new expressions. +Functional buttons must appear right aligned within the pane header. +
+
+ + + + + +## Style + +
+ + +
+ +### Color + +
+![pairing example](../images/components/pane/pane-light-mode.png) + +
+#### Pane + +Background: white `#ffffff` + +Border/Splitter: Grey 25 `#e0e0e2` + +#### Header + +Background: Grey 10 `#f9f9fa` + +Text: Grey 90 `#0c0c0d` + +Arrow: `rgba(0, 0, 0, 0.3)` + +Icon: Grey 60 `#4a4a4f` + +#### Header Hover + +Background: Grey 20 `#ededf0` + +Cursor: `default` +
+
+
+ + + + +
+ +### Color + +
+![pairing example](../images/components/pane/pane-dark-mode.png) + +
+#### Pane + +Background: Grey 85 `#1b1b1d` + +Border/Splitter: `#3c3c3d` *Photon color needed* + +#### Header + +Background: `#222225` *Photon color needed* + +Text: Grey 40 `#b1b1b3` + +Arrow: `rgba(255, 255, 255, 0.4)` + +Icon: Grey 40 `#b1b1b3` + +#### Header Hover + +Background: Grey 80 `#2a2a2e` + +Cursor: `default` +
+
+
+
+ + + + + +### Sizes + +
+![Pane sizes and measurements](../images/components/pane/pane-sizes.svg) + +
+ +#### Pane + +Padding `4px 20px` + +#### Header + +Height: `24px` + +Text: `12px, regular 400` + +Padding: `4px 20px` + +**Note:** The 20px left padding is the sum of 6px padding either side of the 8px arrow icon. + +
+
+ + + +
+![Pane icon sizes and measurements](../images/components/pane/pane-icon-sizes.svg) + +
+ +#### Arrow + +Width: `8px` + +Height: `8px` + +Containing an `8px` x `5px` SVG + +#### Icons + +width: `10px` + +height: `10px` + +
+
+ + +## Behaviours + +### Expand and collapse + +
+![Pane behaviour](../images/components/pane/pane-behaviour.png) + +
+Panes which include an arrow icon within the header indicate that their content can be expanded or collapsed. + +The expanded state is toggled by single clicking the header and any element within it excluding buttons. + +When a pane is collapsed only the pane header is visible. +
+
+ diff --git a/jekyll/_components/radio-buttons.md b/jekyll/_components/radio-buttons.md index 80d508d66..45cbeac45 100644 --- a/jekyll/_components/radio-buttons.md +++ b/jekyll/_components/radio-buttons.md @@ -1,7 +1,7 @@ --- layout: page title: Radio Buttons -order: 7 +order: 8 --- Radio buttons allow a selection of one option from a group of mutually exclusive options. diff --git a/jekyll/_components/splitters.md b/jekyll/_components/splitters.md index b33cfacdf..43017a0f1 100644 --- a/jekyll/_components/splitters.md +++ b/jekyll/_components/splitters.md @@ -1,7 +1,7 @@ --- layout: page title: Splitters -order: 8 +order: 9 draft: true --- diff --git a/jekyll/_components/tables.md b/jekyll/_components/tables.md index e4540a54b..d42719970 100644 --- a/jekyll/_components/tables.md +++ b/jekyll/_components/tables.md @@ -1,7 +1,7 @@ --- layout: page title: Tables -order: 9 +order: 10 draft: true --- diff --git a/jekyll/_components/trees.md b/jekyll/_components/trees.md index bc311a67d..ef7dbb88d 100644 --- a/jekyll/_components/trees.md +++ b/jekyll/_components/trees.md @@ -1,7 +1,7 @@ --- layout: page title: Trees -order: 10 +order: 11 draft: true --- diff --git a/jekyll/images/components/pane/pane-arrow.png b/jekyll/images/components/pane/pane-arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..29397974d5c9bb671f0a5aecc012741fde3ad25b GIT binary patch literal 72336 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