diff --git a/jekyll/_components/panes.md b/jekyll/_components/panes.md new file mode 100644 index 000000000..37bd3aa7b --- /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.gif) + +
+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 000000000..29397974d Binary files /dev/null and b/jekyll/images/components/pane/pane-arrow.png differ diff --git a/jekyll/images/components/pane/pane-behaviour.gif b/jekyll/images/components/pane/pane-behaviour.gif new file mode 100644 index 000000000..23268300b Binary files /dev/null and b/jekyll/images/components/pane/pane-behaviour.gif differ diff --git a/jekyll/images/components/pane/pane-buttons.png b/jekyll/images/components/pane/pane-buttons.png new file mode 100644 index 000000000..5b153c069 Binary files /dev/null and b/jekyll/images/components/pane/pane-buttons.png differ diff --git a/jekyll/images/components/pane/pane-dark-mode.png b/jekyll/images/components/pane/pane-dark-mode.png new file mode 100644 index 000000000..735ee6caf Binary files /dev/null and b/jekyll/images/components/pane/pane-dark-mode.png differ diff --git a/jekyll/images/components/pane/pane-icon-sizes.svg b/jekyll/images/components/pane/pane-icon-sizes.svg new file mode 100644 index 000000000..f8bfe5f5b --- /dev/null +++ b/jekyll/images/components/pane/pane-icon-sizes.svg @@ -0,0 +1,54 @@ + + + + icon-sizes + Created with Sketch. + + + + + + + + + + Panel Header Title + + + Panel Content + + + + + + + + + + + + + + + 8px + + + + + + + + + + 10px + + + + + + + 12px, regular 400 + + + + \ No newline at end of file diff --git a/jekyll/images/components/pane/pane-light-mode.png b/jekyll/images/components/pane/pane-light-mode.png new file mode 100644 index 000000000..460977c2e Binary files /dev/null and b/jekyll/images/components/pane/pane-light-mode.png differ diff --git a/jekyll/images/components/pane/pane-sizes.svg b/jekyll/images/components/pane/pane-sizes.svg new file mode 100644 index 000000000..c4af0f388 --- /dev/null +++ b/jekyll/images/components/pane/pane-sizes.svg @@ -0,0 +1,67 @@ + + + + pane-sizes + Created with Sketch. + + + + + + + + + + Panel Header Title + + + Panel Content + + + + + + + + + + + + + + + 24px + + + + + + + + + + 4px + + + + + + + + + + 20px + + + + + + + + + + 6px + + + + \ No newline at end of file diff --git a/jekyll/images/components/pane/pane-title.png b/jekyll/images/components/pane/pane-title.png new file mode 100644 index 000000000..f4d585b32 Binary files /dev/null and b/jekyll/images/components/pane/pane-title.png differ diff --git a/jekyll/images/components/pane/pane-usage.png b/jekyll/images/components/pane/pane-usage.png new file mode 100644 index 000000000..d264515e2 Binary files /dev/null and b/jekyll/images/components/pane/pane-usage.png differ