From 7105ace245df68933f81c1b02b918e9f23f7c403 Mon Sep 17 00:00:00 2001
From: Jenn Dodd <jedodd@pivotal.io>
Date: Fri, 17 Oct 2014 11:18:37 -0400
Subject: [PATCH] feat(styleguide): removed parent name from children

- adjusted hologram names and titles

[Finishes #80907306 #80907982]

Signed-off-by: Bebe Peng <bpeng@pivotal.io>
---
 .../components/backgrounds.css.scss           |  4 +-
 src/pivotal-ui/components/button.css.scss     | 10 +--
 src/pivotal-ui/components/code.css.scss       | 10 +--
 src/pivotal-ui/components/colors.css.scss     |  6 +-
 src/pivotal-ui/components/embeds.css.scss     | 10 +--
 src/pivotal-ui/components/forms.css.scss      | 82 +++++++++----------
 src/pivotal-ui/components/grids.css.scss      | 12 +--
 src/pivotal-ui/components/image.css.scss      | 16 ++--
 src/pivotal-ui/components/labels.css.scss     |  2 +-
 src/pivotal-ui/components/lists.css.scss      | 46 +++++------
 src/pivotal-ui/components/media.css.scss      |  4 +-
 src/pivotal-ui/components/pane.css.scss       |  2 +-
 src/pivotal-ui/components/ribbons.css.scss    |  8 +-
 src/pivotal-ui/components/spinners.css.scss   |  2 +-
 src/pivotal-ui/components/table.css.scss      | 34 ++++----
 src/pivotal-ui/components/tabs.css.scss       | 24 +++---
 src/pivotal-ui/components/toggle.css.scss     |  8 +-
 .../components/traffic_lights.css.scss        |  2 +-
 src/pivotal-ui/components/typography.css.scss | 12 +--
 src/pivotal-ui/components/utils.css.scss      |  2 +-
 src/pivotal-ui/components/whitespace.css.scss |  6 +-
 21 files changed, 151 insertions(+), 151 deletions(-)

diff --git a/src/pivotal-ui/components/backgrounds.css.scss b/src/pivotal-ui/components/backgrounds.css.scss
index c01c22924..990fae32a 100644
--- a/src/pivotal-ui/components/backgrounds.css.scss
+++ b/src/pivotal-ui/components/backgrounds.css.scss
@@ -13,7 +13,7 @@ Background color classes can be applied to any element. See [colors](/utilities.
 
 /*doc
 ---
-title: Background Overlays
+title: Overlays
 name: background_overlays
 parent: background
 ---
@@ -46,7 +46,7 @@ parent: background
 
 /*doc
 ---
-title: Full Bleed Background
+title: Full Bleed
 name: background_full_bleed
 parent: background
 ---
diff --git a/src/pivotal-ui/components/button.css.scss b/src/pivotal-ui/components/button.css.scss
index 01dda76cf..09759362e 100644
--- a/src/pivotal-ui/components/button.css.scss
+++ b/src/pivotal-ui/components/button.css.scss
@@ -25,8 +25,8 @@ a form or triggering some javascript event, then use a `<button>` element.
 
 /*doc
 ---
-title: Full width Buttons
-name: full_width_button
+title: Full width
+name: button_full_width
 parent: button
 ---
 
@@ -57,7 +57,7 @@ Create block level buttons—those that span the full width of a parent— by ad
 
 /*doc
 ---
-title: Button Styles
+title: Styles
 name: button_styles
 parent: button
 ---
@@ -109,7 +109,7 @@ Button                                                             | Disabled
 
 /*doc
 ---
-title: Button Sizes
+title: Sizes
 name: button_sizes
 parent: button
 ---
@@ -128,4 +128,4 @@ size modifier class for the desired size.
 .btn-lg {
   // line-height: ensure even-numbered height of button next to large input
   @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-medium, $line-height-large, $border-radius-small);
-}
\ No newline at end of file
+}
diff --git a/src/pivotal-ui/components/code.css.scss b/src/pivotal-ui/components/code.css.scss
index 3ac7e8e4b..6e6c359e7 100644
--- a/src/pivotal-ui/components/code.css.scss
+++ b/src/pivotal-ui/components/code.css.scss
@@ -98,8 +98,8 @@ Scrollable with too little content:
 
 /*doc
 ---
-title: Inline Code
-name: inline_code
+title: Inline
+name: code_inline
 parent: code
 ---
 
@@ -111,8 +111,8 @@ parent: code
 
 /*doc
 ---
-title: Inline Code Dark
-name: inline_code_dark
+title: Inline Dark
+name: code_inline_dark
 parent: code
 ---
 
@@ -131,7 +131,7 @@ parent: code
 /*doc
 ---
 title: Terminal Window
-name: terminal_window
+name: code_terminal_window
 parent: code
 ---
 
diff --git a/src/pivotal-ui/components/colors.css.scss b/src/pivotal-ui/components/colors.css.scss
index 36f046947..51a83829b 100644
--- a/src/pivotal-ui/components/colors.css.scss
+++ b/src/pivotal-ui/components/colors.css.scss
@@ -1,7 +1,7 @@
 /*doc
 ---
 title: Colors
-name: colors
+name: color
 categories:
   - All
   - Elements
@@ -546,8 +546,8 @@ $tabs-active-bg-color: $gray-2;
 /*doc
 ---
 title: Shadows & Glows
-name: shadows
-parent: colors
+name: color_shadows_glows
+parent: color
 ---
 <div class="row">
 <div class="contrast-bar">
diff --git a/src/pivotal-ui/components/embeds.css.scss b/src/pivotal-ui/components/embeds.css.scss
index aadac6f4a..60dff9834 100644
--- a/src/pivotal-ui/components/embeds.css.scss
+++ b/src/pivotal-ui/components/embeds.css.scss
@@ -1,7 +1,7 @@
 /*doc
 ---
 title: Embeds
-name: embeds
+name: embed
 categories:
   - All
   - Elements
@@ -10,9 +10,9 @@ categories:
 
 /*doc
 ---
-title: Responsive Embeds
-name: embeds_responsive
-parent: embeds
+title: Responsive
+name: embed_responsive
+parent: embed
 ---
 
 Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
@@ -63,4 +63,4 @@ Rules are directly applied to `<iframe>`, `<embed>`, and `<object>` elements; op
 </div>
 ```
 
-*/
\ No newline at end of file
+*/
diff --git a/src/pivotal-ui/components/forms.css.scss b/src/pivotal-ui/components/forms.css.scss
index abda32a8e..bdf57d707 100644
--- a/src/pivotal-ui/components/forms.css.scss
+++ b/src/pivotal-ui/components/forms.css.scss
@@ -1,7 +1,7 @@
 /*doc
 ---
 title: Forms
-name: forms
+name: form
 categories:
  - All
  - Forms
@@ -11,8 +11,8 @@ categories:
 /*doc
 ---
 title: Inputs & Labels
-name: input
-parent: forms
+name: form_input
+parent: form
 ---
 
 An input with the label top aligned (this is the default layout).
@@ -106,8 +106,8 @@ label {
 /*doc
 ---
 title: Fancy Select
-name: fancy-select
-parent: forms
+name: form_fancy_select
+parent: form
 ---
 
 This is a fancy select!
@@ -209,8 +209,8 @@ This is a fancy select!
 /*doc
 ---
 title: Fancy Number Input
-name: fancy-number
-parent: forms
+name: form_fancy_number
+parent: form
 ---
 
 This is a fancy number input!
@@ -286,8 +286,8 @@ This is a fancy number input!
 /*doc
 ---
 title: Text Area
-name: textarea
-parent: forms
+name: form_textarea
+parent: form
 ---
 
 Text areas are used for larger amounts of input.
@@ -363,9 +363,9 @@ input[type="radio"] {
 
 /*doc
 ---
-title: Inline Forms
-name: inline_forms
-parent: forms
+title: Inline
+name: form_inline
+parent: form
 ---
 
 Add `.form-inline` to your `<form>` for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.
@@ -400,8 +400,8 @@ Screen readers will have trouble with your forms if you don't include a label fo
 
 /*doc
 ---
-title: Inline Forms with Labels
-name: inline_forms_with_labels
+title: Inline with Labels
+name: form_inline_with_labels
 parent: forms
 ---
 
@@ -435,9 +435,9 @@ Add `.form-inline.inline-labels` to your `<form>` for left-aligned and inline-bl
 
 /*doc
 ---
-title: HTML5 controls
-name: html5_controls
-parent: forms
+title: HTML5 Controls
+name: form_html5_controls
+parent: form
 ---
 
 Examples of standard form controls supported in an example form layout.
@@ -524,7 +524,7 @@ Use this with fields that require telephone numbers to pop up the dialpad on mob
 /*doc
 ---
 title: Validation
-name: validation
+name: form_validation
 categories:
  - All
  - Forms
@@ -612,8 +612,8 @@ input.ng-invalid.ng-dirty {
 /*
 ---
 title: Disabled Inputs
-name: disabled
-parent: forms
+name: form_disabled_inputs
+parent: form
 ---
 ### Disabled Inputs
 
@@ -637,8 +637,8 @@ Inputs will occasionally need to be disabled. You can do that by adding the `dis
 /*doc
 ---
 title: Selects
-name: selects
-parent: forms
+name: form_selects
+parent: form
 ---
 Selects are excellent to use because they will automatically
 behave as expected cross browser on different devices. Prefer
@@ -657,8 +657,8 @@ be changed via the [control sizing options](#control_sizing).
 /*doc
 ---
 title: Sizing
-name: sizing
-parent: forms
+name: form_sizing
+parent: form
 ---
 Set heights using classes like `.input-lg`, and set widths using grid column classes like `.col-lg-*`.
 
@@ -705,8 +705,8 @@ Wrap inputs in grid columns, or any custom parent element, to easily enforce des
 /*doc
 ---
 title: Help Text
-name: help_text
-parent: forms
+name: form_help_text
+parent: form
 ---
 Help text
 Block level help text for form controls.
@@ -722,8 +722,8 @@ Block level help text for form controls.
 /*doc
 ---
 title: Static Control
-name: static_control
-parent: forms
+name: form_static_control
+parent: form
 ---
 When you need to place plain text next to a form label within a horizontal form, use the `.form-control-static` class on a `<p>`.
 
@@ -743,9 +743,9 @@ When you need to place plain text next to a form label within a horizontal form,
 
 /*doc
 ---
-title: Vertical static controls
-name: static_controll
-parent: forms
+title: Vertical Static Controls
+name: form_static_control
+parent: form
 ---
 
 ```haml_example
@@ -788,8 +788,8 @@ p.form-control-static {
 /*doc
 ---
 title: Autoselect Text Input
-name: autoselect_text_input
-parent: forms
+name: form_autoselect_text_input
+parent: form
 ---
 
 This form is used to show information that a user may wish to copy and paste somewhere.
@@ -807,8 +807,8 @@ This form is used to show information that a user may wish to copy and paste som
 /*doc
 ---
 title: Focus Input
-name: focus-input
-parent: forms
+name: form_focus_input
+parent: form
 ---
 
 Add the focus-input directive to an element that should be focused if the focus-input expression changes such that it evalutes as true.
@@ -826,12 +826,12 @@ Add the focus-input directive to an element that should be focused if the focus-
 
 /*doc
 ---
-title: ContentEditable
-name: contenteditable
-parent: forms
+title: Content Editable
+name: form_content_editable
+parent: form
 ---
 
-This form looks and behaves mostly like a contenteditable field
+This form looks and behaves mostly like a content editable field
 
 ```haml_example
 %form.form-contenteditable{'name' => 'newEditableForm',
@@ -918,8 +918,8 @@ This form looks and behaves mostly like a contenteditable field
 /*doc
 ---
 title: Search Input
-name: search-input
-parent: forms
+name: form_search_input
+parent: form
 ---
 
 Use this input when creating a search component. 
diff --git a/src/pivotal-ui/components/grids.css.scss b/src/pivotal-ui/components/grids.css.scss
index 1655c8be8..560c79c40 100644
--- a/src/pivotal-ui/components/grids.css.scss
+++ b/src/pivotal-ui/components/grids.css.scss
@@ -1,7 +1,7 @@
 /*doc
 ---
 title: Grids
-name: grids
+name: grid
 categories:
   - All
   - Layout
@@ -53,8 +53,8 @@ offsets, or responsiveness.
 /*doc
 ---
 title: Gutter Sizes
-name: gutter_sizes
-parent: grids
+name: grid_gutter_sizes
+parent: grid
 ---
 
 ```haml_example
@@ -90,9 +90,9 @@ parent: grids
 
 /*doc
 ---
-title: Responsive Grids
-name: grids_responsive
-parent: grids
+title: Responsive
+name: grid_responsive
+parent: grid
 ---
 
 Having trouble debugging grids? You have a couple options. You can checkout the [grids responsive documentation on the bootstrap site](http://getbootstrap.com/css/#grid-responsive-resets). It is more comprehensive than what we have here. You can also set `$grids-debug: true` in the `grids.css.scss` file. This will allow you to visualize the changes taking place at different device widths.
diff --git a/src/pivotal-ui/components/image.css.scss b/src/pivotal-ui/components/image.css.scss
index a0b5ddc33..a2a21d9e8 100644
--- a/src/pivotal-ui/components/image.css.scss
+++ b/src/pivotal-ui/components/image.css.scss
@@ -1,7 +1,7 @@
 /*doc
 ---
 title: Images
-name: images
+name: image
 categories:
   - All
   - Elements
@@ -10,9 +10,9 @@ categories:
 
 /*doc
 ---
-title: Responsive Images
-name: responsive_images
-parent: images
+title: Responsive
+name: image_responsive
+parent: image
 ---
 
 Images can be made responsive-friendly via the addition of the `.img-responsive` class. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales nicely to the parent element. See bootstrap 3 for further documentation of this feature.
@@ -33,8 +33,8 @@ Images can be made responsive-friendly via the addition of the `.img-responsive`
 /*doc
 ---
 title: Responsive SVG
-name: responsive_svg
-parent: images
+name: image_responsive_svg
+parent: image
 ---
 
 SVG can be made responsive-friendly via the addition of the `.svg-responsive` class on a
@@ -180,8 +180,8 @@ For more information about setting up your svg, read this article about [svg coo
 /*doc
 ---
 title: Avatar Images
-name: avatar_images
-parent: images
+name: image_avatar
+parent: image
 ---
 
 Avatar images are expected to by 100px by 100px.
diff --git a/src/pivotal-ui/components/labels.css.scss b/src/pivotal-ui/components/labels.css.scss
index aa62a837a..7a23bdd29 100644
--- a/src/pivotal-ui/components/labels.css.scss
+++ b/src/pivotal-ui/components/labels.css.scss
@@ -1,7 +1,7 @@
 /*doc
 ---
 title: Labels
-name: labels
+name: label
 categories:
   - All
   - Elements
diff --git a/src/pivotal-ui/components/lists.css.scss b/src/pivotal-ui/components/lists.css.scss
index 4bc71903c..ed211a497 100644
--- a/src/pivotal-ui/components/lists.css.scss
+++ b/src/pivotal-ui/components/lists.css.scss
@@ -1,7 +1,7 @@
 /*doc
 ---
 title: Lists
-name: lists
+name: list
 categories:
   - All
   - Elements
@@ -26,8 +26,8 @@ This section contains different list behaviors. See [lists](/elements.html?targe
 /*doc
 ---
 title: Inline
-name: list-inline
-parent: lists
+name: list_inline
+parent: list
 ---
 
 An inline list is one of the three methods for laying out content (including grids and the media block).
@@ -53,8 +53,8 @@ An inline list is one of the three methods for laying out content (including gri
 /*doc
 ---
 title: Ordered
-name: list-ordered
-parent: lists
+name: list_ordered
+parent: list
 ---
 
 
@@ -72,8 +72,8 @@ parent: lists
 /*doc
 ---
 title: Unordered
-name: list-unordered
-parent: lists
+name: list_unordered
+parent: list
 ---
 
 ```haml_example
@@ -97,8 +97,8 @@ parent: lists
 /*doc
 ---
 title: Unstyled
-name: list-unstyled
-parent: lists
+name: list_unstyled
+parent: list
 ---
 
 Places all list items on a single line with `display: inline-block;` and some light padding. The `.list-unstyled` class can be applied to either a `<ul>` or and `<ol>`.
@@ -117,8 +117,8 @@ Places all list items on a single line with `display: inline-block;` and some li
 /*doc
 ---
 title: Inline Divider
-name: list-inline-divider
-parent: lists
+name: list_inline_divider
+parent: list
 ---
 
 Places all list items on a single line with `display: inline-block;` and some light padding. The `.list-inline-divider`
@@ -168,8 +168,8 @@ also adds a simple gray border (add `.list-inline-divider-light` to make the bor
 /*doc
 ---
 title: Breadcrumb
-name: list-breadcrumb
-parent: lists
+name: list_breadcrumb
+parent: list
 ---
 
 The `.list-breadcrumb` can be used to provide additional page navigation.
@@ -228,9 +228,9 @@ Breadcrumbs use their own monospace font-family.
 
 /*doc
 ---
-title: List group
-name: list-group
-parent: lists
+title: Group
+name: list_group
+parent: list
 ---
 
 Use this list when you need simple gray borders between items
@@ -338,7 +338,7 @@ New elements fade in
 ---
 title: Event
 name: list_event
-parent: lists
+parent: list
 ---
 
 This is a special list-group, with styles per-event for colors and icons
@@ -504,8 +504,8 @@ This is a special list-group, with styles per-event for colors and icons
 /*doc
 ---
 title: Vertical Divider
-name: list-vertical-divider
-parent: lists
+name: list_vertical_divider
+parent: list
 ---
 
 Use this list when you need larger gray borders between
@@ -576,8 +576,8 @@ right min-height.
 /*doc
 ---
 title: Steps
-name: list-steps
-parent: lists
+name: list_steps
+parent: list
 ---
 
 Use this list when you need to show the steps in a flow.
@@ -636,8 +636,8 @@ Use this list when you need to show the steps in a flow.
 /*doc
 ---
 title: Checked
-name: list-checked
-parent: lists
+name: list_checked
+parent: list
 ---
 
 Replaces the default bullet image with the font awesome checkmark.
diff --git a/src/pivotal-ui/components/media.css.scss b/src/pivotal-ui/components/media.css.scss
index 52dc17c27..2323766f5 100644
--- a/src/pivotal-ui/components/media.css.scss
+++ b/src/pivotal-ui/components/media.css.scss
@@ -78,7 +78,7 @@ You can also nest media objects inside of each other (useful for comment threads
 
 /*doc
 ---
-title: Media Alignment
+title: Alignment
 name: media_alignment
 parent: media
 ---
@@ -114,7 +114,7 @@ The images or other media can be aligned top, middle, or bottom. The default is
 
 /*doc
 ---
-title: Media Stackable
+title: Stackable
 name: media_stackable
 parent: media
 ---
diff --git a/src/pivotal-ui/components/pane.css.scss b/src/pivotal-ui/components/pane.css.scss
index 881d162dd..ac9d31d33 100644
--- a/src/pivotal-ui/components/pane.css.scss
+++ b/src/pivotal-ui/components/pane.css.scss
@@ -1,7 +1,7 @@
 /*doc
 ---
 title: Panes
-name: Panes
+name: pane
 categories:
   - All
   - Layout
diff --git a/src/pivotal-ui/components/ribbons.css.scss b/src/pivotal-ui/components/ribbons.css.scss
index 6b9642f55..d0d802909 100644
--- a/src/pivotal-ui/components/ribbons.css.scss
+++ b/src/pivotal-ui/components/ribbons.css.scss
@@ -1,6 +1,6 @@
 /*doc
 ---
-title: Ribbon
+title: Ribbons
 name: ribbon
 categories:
   - All
@@ -13,7 +13,7 @@ Ribbons should be used to call out access, status, enironment, etc.
 
 /*doc
 ---
-title: Inline Ribbon
+title: Inline
 name: ribbon_inline
 parent: ribbon
 ---
@@ -65,7 +65,7 @@ parent: ribbon
 
 /*doc
 ---
-title: Banner Ribbon
+title: Banner
 name: ribbon_banner
 parent: ribbon
 ---
@@ -111,7 +111,7 @@ in other contexts.
 
 /*doc
 ---
-title: Ribbon Colors
+title: Colors
 name: ribbon_colors
 parent: ribbon
 ---
diff --git a/src/pivotal-ui/components/spinners.css.scss b/src/pivotal-ui/components/spinners.css.scss
index e2221a7e2..25a80f6f4 100644
--- a/src/pivotal-ui/components/spinners.css.scss
+++ b/src/pivotal-ui/components/spinners.css.scss
@@ -1,7 +1,7 @@
 /*doc
 ---
 title: Spinners
-name: spinners
+name: spinner
 parent: iconography
 ---
 
diff --git a/src/pivotal-ui/components/table.css.scss b/src/pivotal-ui/components/table.css.scss
index 951abbb01..244faf4f0 100644
--- a/src/pivotal-ui/components/table.css.scss
+++ b/src/pivotal-ui/components/table.css.scss
@@ -1,6 +1,6 @@
 /*doc
 ---
-title: Table
+title: Tables
 name: table
 categories:
   - All
@@ -20,7 +20,7 @@ Class                 | Description
 /*pending
 ---
 title: JS Tables
-name: table-js
+name: table_js
 categories:
   - All
   - JavaScript
@@ -50,7 +50,7 @@ This section contains different table behaviors. See [tables](/objects.html?targ
 /*doc
 ---
 title: Data
-name: table-data
+name: table_data
 parent: table
 ---
 
@@ -171,7 +171,7 @@ This is a table used to display many rows of data (it is pretty much the default
 /*doc
 ---
 title: Horizontal
-name: table-horizontal
+name: table_horizontal
 parent: table
 ---
 
@@ -235,7 +235,7 @@ This is the horizontal table used mainly on the user profile page. Typically it
 /*doc
 ---
 title: Key-Value
-name: table-key-value
+name: table_key_value
 parent: table
 ---
 
@@ -303,7 +303,7 @@ specify column widths for the th/tds.
 /*doc
 ---
 title: Numerical
-name: table-numerical
+name: table_numerical
 parent: table
 ---
 
@@ -368,8 +368,8 @@ This is the table used on the billing page.
 /*pending
 ---
 title: Clickable
-name: table-clickable
-parent: table-js
+name: table_clickable
+parent: table_js
 ---
 
 Use this style of table when rows are clickable. It is possible to prevent a user from clicking on a row w/ a message by adding data-prevent-click and data-prevent-click-message to the row. (N.B.: This does not actually add any sort of permissions to the URL in question).
@@ -421,7 +421,7 @@ We are making the assumption here that table-hover will *only* be used if the ta
 /*doc
 ---
 title: Alignment
-name: table-alignment
+name: table_alignment
 parent: table
 ---
 
@@ -469,8 +469,8 @@ table .txt-m, table tr .txt-m, table tr td.txt-m, table tr th.txt-m {
 /*pending
 ---
 title: Angular Sortable Table
-name: table-angular-sortable
-parent: table-js
+name: table_angular_sortable
+parent: table_js
 ---
 
 USE:
@@ -549,8 +549,8 @@ USE:
 /*pending
 ---
 title: Inline Addable
-name: table-inline-addable
-parent: table-js
+name: table_inline_addable
+parent: table_js
 ---
 
 ```haml_example
@@ -723,8 +723,8 @@ parent: table-js
 /*pending
 ---
 title: Kitchen Sink
-name: table-kitchen-sink
-parent: table-js
+name: table_kitchen_sink
+parent: table_js
 ---
 
 Example of composed behaviors that operate on the same table.
@@ -787,8 +787,8 @@ Example of composed behaviors that operate on the same table.
 
 /*doc
 ---
-title: Scrollable Table
-name: scrollable-table
+title: Scrollable
+name: scrollable_table
 parent: table
 ---
 
diff --git a/src/pivotal-ui/components/tabs.css.scss b/src/pivotal-ui/components/tabs.css.scss
index 17223ee01..8031e720c 100644
--- a/src/pivotal-ui/components/tabs.css.scss
+++ b/src/pivotal-ui/components/tabs.css.scss
@@ -1,7 +1,7 @@
 /*doc
 ---
 title: Tabs
-name: tabs
+name: tab
 categories:
   - All
   - JavaScript
@@ -12,9 +12,9 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
 */
 /*doc
 ---
-title: Highlight Tabs
+title: Highlight
 name: tab_highlight
-parent: tabs
+parent: tab
 ---
 
 ```haml_example
@@ -116,9 +116,9 @@ parent: tabs
 
 /*doc
 ---
-title: Simple Tabs
+title: Simple
 name: tab_simple
-parent: tabs
+parent: tab
 ---
 
 ```haml_example
@@ -211,9 +211,9 @@ $tab-border-size: 3px;
 
 /*doc
 ---
-title: Alt Simple Tabs
+title: Simple Alt
 name: tab_simple_alt
-parent: tabs
+parent: tab
 ---
 
 ```haml_example
@@ -284,9 +284,9 @@ parent: tabs
 
 /*doc
 ---
-title: Responsive Tabs
+title: Responsive
 name: tab_responsive
-parent: tabs
+parent: tab
 ---
 
 ```haml_example
@@ -365,9 +365,9 @@ parent: tabs
 
 /*doc
 ---
-title: Image Tabs
-name: image_tabs
-parent: tabs
+title: Image
+name: tab_image
+parent: tab
 ---
 
 You can use any 130px by 130px svg for the icon in the center of the tab. Please add the class `icon` to any parts of the svg which form part of the icon. You may also use an icon font for the icon.
diff --git a/src/pivotal-ui/components/toggle.css.scss b/src/pivotal-ui/components/toggle.css.scss
index bc076168c..775077d41 100644
--- a/src/pivotal-ui/components/toggle.css.scss
+++ b/src/pivotal-ui/components/toggle.css.scss
@@ -23,8 +23,8 @@ Use this class for sections that can switch into an 'edit' mode.
 
 /*pending
 ---
-title: Data Behavior Toggle
-name: data_behavior_toggle
+title: Data Behavior
+name: toggle_data_behavior
 parent: toggle
 ---
 
@@ -65,8 +65,8 @@ Use this class for sections that can switch into an 'edit' mode.
 
 /*pending
 ---
-title: Angular Toggle
-name: angular toggle
+title: Angular
+name: toggle_angular
 parent: toggle
 ---
 
diff --git a/src/pivotal-ui/components/traffic_lights.css.scss b/src/pivotal-ui/components/traffic_lights.css.scss
index 9ba967b42..1a2675abb 100644
--- a/src/pivotal-ui/components/traffic_lights.css.scss
+++ b/src/pivotal-ui/components/traffic_lights.css.scss
@@ -1,7 +1,7 @@
 /*doc
 ---
 title: Traffic Lights
-name: traffic-lights
+name: traffic_lights
 parent: console
 ---
 
diff --git a/src/pivotal-ui/components/typography.css.scss b/src/pivotal-ui/components/typography.css.scss
index 5c640d7b2..f5dcdee51 100644
--- a/src/pivotal-ui/components/typography.css.scss
+++ b/src/pivotal-ui/components/typography.css.scss
@@ -16,7 +16,7 @@ categories:
 
 /*doc
 ---
-title: Type Sizes
+title: Sizes
 name: 1_type_sizes
 parent: type
 ---
@@ -114,8 +114,8 @@ small,
 
 /*doc
 ---
-title: Type Modifiers
-name: type-modifiers
+title: Modifiers
+name: type_modifiers
 parent: type
 ---
 
@@ -137,8 +137,8 @@ parent: type
 
 /*doc
 ---
-title: Type Colors
-name: type-colors
+title: Colors
+name: type_colors
 parent: type
 ---
 
@@ -253,7 +253,7 @@ a:hover.type-inverse {
 
 /*doc
 ---
-title: Type Alignment
+title: Alignment
 name: type_alignment
 parent: type
 ---
diff --git a/src/pivotal-ui/components/utils.css.scss b/src/pivotal-ui/components/utils.css.scss
index 6c8b3744a..7e8e429d1 100644
--- a/src/pivotal-ui/components/utils.css.scss
+++ b/src/pivotal-ui/components/utils.css.scss
@@ -2,7 +2,7 @@
 /*pending
 ---
 title: No JavaScript
-name: no-js
+name: no_js
 categories:
   - All
   - JavaScript
diff --git a/src/pivotal-ui/components/whitespace.css.scss b/src/pivotal-ui/components/whitespace.css.scss
index 2401524f5..7c81ff68f 100644
--- a/src/pivotal-ui/components/whitespace.css.scss
+++ b/src/pivotal-ui/components/whitespace.css.scss
@@ -36,7 +36,7 @@ n, s, m, l, xl, xxl, xxxl, xxxxl | none(0px), small(5px), medium(7px), large(10p
 
 /*doc
 ---
-title: List Whitespace
+title: List
 name: whitespace_list
 parent: whitespace
 ---
@@ -55,8 +55,8 @@ See [list spacing](/elements.html?target=list-whitespace).
 /*doc
 ---
 title: List Spacing
-name: list-whitespace
-parent: lists
+name: list_whitespace
+parent: list
 ---
 
 Most lists come with built in default spacing that should work for you. However, if you find yourself needing to modify the spacing, you should do that with list spacing classes rather than whitespace classes. A single class can be applied to the list and all direct children will be modified.