diff --git a/ghdocs/components/Breadcrumb.md b/ghdocs/components/Breadcrumb.md index 8d089812..98fb6b99 100644 --- a/ghdocs/components/Breadcrumb.md +++ b/ghdocs/components/Breadcrumb.md @@ -23,73 +23,70 @@ State | Applied to | Result ## Using this component 1. Confirm that you have references to Fabric's CSS and JavaScript on your page: - ``` - + + ``` + - ``` + ``` + 2. Copy the HTML from the sample above into your page. For example: -
-    
- 
-<div class="ms-Breadcrumb ">
-  <div class="ms-Breadcrumb-overflow">
-    <div class="ms-Breadcrumb-overflowButton ms-Icon ms-Icon--More" tabindex="1"></div>
-    <div class="ms-Breadcrumb-overflowMenu">
-      <ul class="ms-ContextualMenu is-open"></ul>
-    </div>
-  </div>
-  <ul class="ms-Breadcrumb-list">
-      <li class="ms-Breadcrumb-listItem">
-        <a class="ms-Breadcrumb-itemLink" tabindex="0">Files</a>
-        <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
-      </li>
-      <li class="ms-Breadcrumb-listItem">
-        <a class="ms-Breadcrumb-itemLink" tabindex="0">Folder 1</a>
-        <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
-      </li>
-      <li class="ms-Breadcrumb-listItem">
-        <a class="ms-Breadcrumb-itemLink" tabindex="0">Folder 2</a>
-        <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
-      </li>
-      <li class="ms-Breadcrumb-listItem">
-        <a class="ms-Breadcrumb-itemLink" tabindex="0">Folder 3</a>
-        <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
-      </li>
-      <li class="ms-Breadcrumb-listItem">
-        <a class="ms-Breadcrumb-itemLink" tabindex="0">Folder 4</a>
-        <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
-      </li>
-      <li class="ms-Breadcrumb-listItem">
-        <a class="ms-Breadcrumb-itemLink" tabindex="0">Folder 5</a>
-        <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
-      </li>
-      <li class="ms-Breadcrumb-listItem">
-        <a class="ms-Breadcrumb-itemLink" tabindex="0">Folder 6</a>
-        <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
-      </li>
-      <li class="ms-Breadcrumb-listItem">
-        <a class="ms-Breadcrumb-itemLink" tabindex="0">Folder 7</a>
-        <i class="ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight"></i>
-      </li>
-  </ul>
-</div>
-    
-
+ ``` +
+
+
+
+
    +
    +
    + +
    + ``` 3. Add the following ` + ``` 4. Verify that the component is working the same as in the sample above. 5. Replace the sample HTML content (such as the `.ms-Breadcrumb-listItem` elements) with your content. @@ -99,9 +96,3 @@ ContextualMenu ## Accessibility The component's JavaScript will apply the correct `tabindex` values to ensure keyboard accessibility. - - - \ No newline at end of file diff --git a/ghdocs/components/Button.md b/ghdocs/components/Button.md index fe387dc7..3dddcda0 100644 --- a/ghdocs/components/Button.md +++ b/ghdocs/components/Button.md @@ -57,41 +57,34 @@ State | Applied to | Result ## Using this component 1. Confirm that you have references to Fabric's CSS on your page: - ``` + ``` - ``` + ``` + 2. Copy the HTML from one of the samples above into your page. For example: -
    -    
- 
-<button class="ms-Button 
-  
-  ">
-  <span class="ms-Button-label">Create Account</span>
-</button>
-    
-
    + ``` + + ``` 3. Add the following ` + ``` 4. Replace the sample HTML content (such as the content of `.ms-Button-label`) with your content. @@ -100,14 +93,3 @@ This component has no dependencies. ## Accessibility Focus styles are included for keyboard navigation. - - - - diff --git a/ghdocs/components/Callout.md b/ghdocs/components/Callout.md index 7756882a..4db91cc8 100644 --- a/ghdocs/components/Callout.md +++ b/ghdocs/components/Callout.md @@ -63,74 +63,57 @@ This component has only the default state. ## Using this component 1. Confirm that you have references to Fabric's CSS and JavaScript on your page: - ``` + ``` - ``` + ``` + 2. Copy the HTML from one of the samples above into your page. For example: -
    -    
- <div class="ms-CalloutExample">  
-  
-  
-  <div class="ms-Callout 
-       
-       is-hidden">
-    <div class="ms-Callout-main">
-      <div class="ms-Callout-header">
-        <p class="ms-Callout-title">All of your favorite people</p>
-      </div>
-      <div class="ms-Callout-inner">
-        <div class="ms-Callout-content">
-          <p class="ms-Callout-subText  ms-Callout-subText-- ">Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.</p>
-        </div>
-        <div class="ms-Callout-actions">
-              
-  
-  <a class="ms-Link  " 
-     
-     
-    >Learn more</a>
-  
-  
-        </div>
-      </div>     
-    </div>
-  </div>
-  <div class="ms-CalloutExample-button">
-    
-    <button class="ms-Button 
-      
-      ">
-      <span class="ms-Button-label">Open Callout</span>
-    </button>  </div>
-</div>
-    
-
    + ``` +
    + +
    + +
    +
    + ``` 3. Add the following ` + ``` 3. Replace the sample HTML content (such as the content of `.ms-Callout-title`) with your content. @@ -140,17 +123,3 @@ Button, Label, Link, ContextualHost, CommandButton ## Accessibility Focus styles are included for all of the actions (links and buttons) included within a Callout. - - diff --git a/ghdocs/components/CheckBox.md b/ghdocs/components/CheckBox.md index 15f8aea4..e44e80af 100644 --- a/ghdocs/components/CheckBox.md +++ b/ghdocs/components/CheckBox.md @@ -20,46 +20,40 @@ State | Applied to | Result ## Using this component 1. Confirm that you have references to Fabric's CSS and JavaScript on your page: - ``` + + ``` - ``` + ``` + 2. Copy the HTML from one of the samples above into your page. For example: -
    -    
- 
-
-<div class="ms-CheckBox"> 
-    <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
-    <label role="checkbox"
-        class="ms-CheckBox-field "
-        tabindex="0"
-        aria-checked="false"
-        name="checkboxa"
->
-        <span class="ms-Label">Checkbox</span>
-    </label>
-</div>
-
-    
-
    + ``` +
    + + +
    + ``` 3. Add the following ` + ``` 4. Replace the sample HTML content (such as the content of `.ms-Label`) with your content. @@ -68,11 +62,3 @@ Label ## Accessibility Focus styles are included for these fields. Ensure that you use descriptive labels. - - - \ No newline at end of file diff --git a/ghdocs/components/ChoiceFieldGroup.md b/ghdocs/components/ChoiceFieldGroup.md index 99b3e9a3..48853d5c 100644 --- a/ghdocs/components/ChoiceFieldGroup.md +++ b/ghdocs/components/ChoiceFieldGroup.md @@ -14,93 +14,81 @@ Used to indicate a single choice from multiple options. ## Using this component 1. Confirm that you have references to Fabric's CSS and JavaScript on your page: - ``` + + ``` - ``` + ``` + 2. Copy the HTML from the sample above into your page. For example: -
    -    
- 
-<div class="ms-ChoiceFieldGroup" id="choicefieldgroup" role="radiogroup">
-  <div class="ms-ChoiceFieldGroup-title">
-    <label class="ms-Label  is-required ">Unselected</label>
-  </div>
-  <ul class="ms-ChoiceFieldGroup-list">
-    
-
-<li class="ms-RadioButton"> 
-    <input tabindex="-1" type="radio" class="ms-RadioButton-input">
-    <label role="radio"
-        class="ms-RadioButton-field "
-        tabindex="0"
-        aria-checked="false"
-        name="choicefieldgroup"
->
-        <span class="ms-Label">Option 1</span>
-    </label>
-</li> 
-    
-
-<li class="ms-RadioButton"> 
-    <input tabindex="-1" type="radio" class="ms-RadioButton-input">
-    <label role="radio"
-        class="ms-RadioButton-field "
-        tabindex="0"
-        aria-checked="false"
-        name="choicefieldgroup"
->
-        <span class="ms-Label">Option 2</span>
-    </label>
-</li> 
-    
-
-<li class="ms-RadioButton"> 
-    <input tabindex="-1" type="radio" class="ms-RadioButton-input">
-    <label role="radio"
-        class="ms-RadioButton-field  is-disabled "
-        tabindex="0"
-        aria-checked="false"
-        name="choicefieldgroup"
-        aria-disabled="true"
-        >
-        <span class="ms-Label">Option 3</span>
-    </label>
-</li> 
-    
-
-<li class="ms-RadioButton"> 
-    <input tabindex="-1" type="radio" class="ms-RadioButton-input">
-    <label role="radio"
-        class="ms-RadioButton-field "
-        tabindex="0"
-        aria-checked="false"
-        name="choicefieldgroup"
->
-        <span class="ms-Label">Option 4</span>
-    </label>
-</li> 
-  </ul>
-</div> 
-    
-
    + ``` +
    +
    + +
    + + +
    + ``` 3. Add the following ` + ``` 4. Replace the sample HTML content (such as the `.ms-Label` elements) with your content. diff --git a/ghdocs/components/CommandBar.md b/ghdocs/components/CommandBar.md index 08b3fb57..c1c3823c 100644 --- a/ghdocs/components/CommandBar.md +++ b/ghdocs/components/CommandBar.md @@ -30,150 +30,159 @@ State | Applied to | Result ## Using this component 1. Confirm that you have references to Fabric's CSS and JavaScript on your page: - ``` + + ``` - ``` + ``` + 2. Copy the HTML from the sample above into your page. For example: -
    -    
- 
-<div class="ms-CommandBar ">
-    <div class="ms-CommandBar-sideCommands">
-        
-<div class="ms-CommandButton  ms-CommandButton--noLabel  ">
-  <button class="ms-CommandButton-button"  >
-      <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span><span class="ms-CommandButton-label"></span>  </button>
-</div>
-    </div>
-  <div class="ms-CommandBar-mainArea">
-      
-
-<div class="ms-SearchBox  ms-SearchBox--commandBar  ">
-  <input class="ms-SearchBox-field" type="text" value="">
-  <label class="ms-SearchBox-label">
-    <i class="ms-SearchBox-icon ms-Icon ms-Icon--Search"></i>
-    <span class="ms-SearchBox-text">Search</span>
-  </label>
-  
-<div class="ms-CommandButton ms-SearchBox-clear ms-CommandButton--noLabel  ">
-  <button class="ms-CommandButton-button"  >
-      <span class="ms-CommandButton-icon "><i class="ms-Icon ms-Icon--Cancel"></i></span><span class="ms-CommandButton-label"></span>  </button>
-</div>
-  
-<div class="ms-CommandButton ms-SearchBox-exit ms-CommandButton--noLabel  ">
-  <button class="ms-CommandButton-button"  >
-      <span class="ms-CommandButton-icon "><i class="ms-Icon ms-Icon--ChromeBack"></i></span><span class="ms-CommandButton-label"></span>  </button>
-</div>
-  
-<div class="ms-CommandButton ms-SearchBox-filter ms-CommandButton--noLabel  ">
-  <button class="ms-CommandButton-button"  >
-      <span class="ms-CommandButton-icon "><i class="ms-Icon ms-Icon--Filter"></i></span><span class="ms-CommandButton-label"></span>  </button>
-</div>
-</div>
-      
-<div class="ms-CommandButton    ">
-  <button class="ms-CommandButton-button"  >
-      <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span><span class="ms-CommandButton-label">Command</span>  </button>
-</div>
-      
-<div class="ms-CommandButton    ">
-  <button class="ms-CommandButton-button"  >
-      <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span><span class="ms-CommandButton-label">New</span><span class="ms-CommandButton-dropdownIcon"><i class="ms-Icon ms-Icon--ChevronDown"></i></span>
-  </button>
-    
-<ul class="ms-ContextualMenu  is-opened ms-ContextualMenu--hasIcons">
-      <li class="ms-ContextualMenu-item ">
-        <a class="ms-ContextualMenu-link " tabindex="1" >Folder</a>
-        <i class="ms-Icon ms-Icon--Folder "></i>
-      </li>
-      <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
-      <li class="ms-ContextualMenu-item ">
-        <a class="ms-ContextualMenu-link " tabindex="1" >Plain Text Document</a>
-        <i class="ms-Icon ms-Icon--Page "></i>
-      </li>
-      <li class="ms-ContextualMenu-item ">
-        <a class="ms-ContextualMenu-link " tabindex="1" >A Coffee</a>
-        <i class="ms-Icon ms-Icon--Coffee "></i>
-      </li>
-      <li class="ms-ContextualMenu-item ">
-        <a class="ms-ContextualMenu-link " tabindex="1" >Picture</a>
-        <i class="ms-Icon ms-Icon--Picture "></i>
-      </li>
-      <li class="ms-ContextualMenu-item ">
-        <a class="ms-ContextualMenu-link " tabindex="1" >Money</a>
-        <i class="ms-Icon ms-Icon--Money "></i>
-      </li>
-</ul>
-</div>
-      
-<div class="ms-CommandButton    ">
-  <button class="ms-CommandButton-button"  >
-      <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span><span class="ms-CommandButton-label">Command</span>  </button>
-</div>
-      
-<div class="ms-CommandButton    ">
-  <button class="ms-CommandButton-button"  >
-      <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span><span class="ms-CommandButton-label">Command</span>  </button>
-</div>
-      
-<div class="ms-CommandButton    ">
-  <button class="ms-CommandButton-button"  >
-      <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span><span class="ms-CommandButton-label">Command</span>  </button>
-</div>
-      
-        
-<div class="ms-CommandButton ms-CommandBar-overflowButton ms-CommandButton--noLabel  ">
-  <button class="ms-CommandButton-button"  >
-      <span class="ms-CommandButton-icon "><i class="ms-Icon ms-Icon--More"></i></span><span class="ms-CommandButton-label"></span>  </button>
-    
-<ul class="ms-ContextualMenu  is-opened ms-ContextualMenu--hasIcons">
-      <li class="ms-ContextualMenu-item ">
-        <a class="ms-ContextualMenu-link " tabindex="1" >Folder</a>
-        <i class="ms-Icon ms-Icon--Folder "></i>
-      </li>
-      <li class="ms-ContextualMenu-item ms-ContextualMenu-item--divider"></li>
-      <li class="ms-ContextualMenu-item ">
-        <a class="ms-ContextualMenu-link " tabindex="1" >Plain Text Document</a>
-        <i class="ms-Icon ms-Icon--Page "></i>
-      </li>
-      <li class="ms-ContextualMenu-item ">
-        <a class="ms-ContextualMenu-link " tabindex="1" >A Coffee</a>
-        <i class="ms-Icon ms-Icon--Coffee "></i>
-      </li>
-      <li class="ms-ContextualMenu-item ">
-        <a class="ms-ContextualMenu-link " tabindex="1" >Picture</a>
-        <i class="ms-Icon ms-Icon--Picture "></i>
-      </li>
-      <li class="ms-ContextualMenu-item ">
-        <a class="ms-ContextualMenu-link " tabindex="1" >Money</a>
-        <i class="ms-Icon ms-Icon--Money "></i>
-      </li>
-</ul>
-</div>
-      
-  </div>
-</div>
-    
-
    + ``` +
    +
    +
    + +
    +
    + +
    +
    + + + +
    + +
    + +
    + +
    + +
    + +
    +
    + +
    + +
    + +
    + + + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + + + +
    +
    +
    + ``` 3. Add the following ` + ``` 4. Verify that the component is working the same as in the sample above. 5. Replace the sample HTML content (such as `.ms-CommandBarItem` elements) with your content. @@ -184,11 +193,3 @@ This component has no dependencies. ## Accessibility Refer to the sample code to see how `tabindex` attributes should be set to support keyboard navigation. - - - diff --git a/ghdocs/components/CommandButton.md b/ghdocs/components/CommandButton.md index 865c2153..f0861418 100644 --- a/ghdocs/components/CommandButton.md +++ b/ghdocs/components/CommandButton.md @@ -70,52 +70,40 @@ State | Applied to | Result ## Using this component 1. Confirm that you have references to Fabric's CSS and JavaScript on your page: - ``` + + ``` - ``` + ``` + 2. Copy the HTML from one of the samples above into your page. For example: -
    -    
- 
-<div class="ms-CommandButton    ">
-  <button class="ms-CommandButton-button"  >
-      <span class="ms-CommandButton-icon ms-fontColor-themePrimary"><i class="ms-Icon ms-Icon--CircleRing"></i></span><span class="ms-CommandButton-label">Command</span>  </button>
-</div>
-    
-
    + ``` +
    + +
    + ``` 3. Replace the sample HTML content (such as the content of `.ms-CommandButton-label`) with your content. 4. If you are using any of CommandButton's variants that use a dropdown, the below JavaScript is required. -
    -    
- <script type="text/javascript">
-  var CommandButtonElements = document.querySelectorAll(".ms-CommandButton");
-  for(var i = 0; i < CommandButtonElements.length; i++) {
-    new fabric['CommandButton'](CommandButtonElements[i]);
-  }
-</script>
-
-    
-
    - - + ``` + + ``` ## Dependencies ContextualMenu, ContextualHost ## Accessibility Focus styles are included for keyboard navigation. - - - diff --git a/ghdocs/components/ContextualMenu.md b/ghdocs/components/ContextualMenu.md index f611fd66..05ddca76 100644 --- a/ghdocs/components/ContextualMenu.md +++ b/ghdocs/components/ContextualMenu.md @@ -47,60 +47,51 @@ State | Applied to | Result ## Using this component 1. Confirm that you have references to Fabric's CSS and JavaScript on your page: - ``` + + ``` - ``` + ``` + 2. Copy the HTML from one of the samples above into your page. For example: -
    -    
- <div class="ms-ContextualMenu-basic">
-    
-    <button class="ms-Button 
-      ms-Button--primary
-      ">
-      <span class="ms-Button-label">Open Example</span>
-    </button>    
-    <ul class="ms-ContextualMenu  is-hidden ">
-          <li class="ms-ContextualMenu-item ">
-            <a class="ms-ContextualMenu-link " tabindex="1" >Animals</a>
-            
-          </li>
-          <li class="ms-ContextualMenu-item ">
-            <a class="ms-ContextualMenu-link " tabindex="1" >Books</a>
-            
-          </li>
-          <li class="ms-ContextualMenu-item ">
-            <a class="ms-ContextualMenu-link  is-selected " tabindex="1" >Education</a>
-            
-          </li>
-          <li class="ms-ContextualMenu-item ">
-            <a class="ms-ContextualMenu-link " tabindex="1" >Music</a>
-            
-          </li>
-          <li class="ms-ContextualMenu-item ">
-            <a class="ms-ContextualMenu-link  is-disabled " tabindex="1" >Sports</a>
-            
-          </li>
-    </ul></div>
-    
-
    + ``` +
    + + +
    + ``` 3. Add the following ` + ``` 4. Verify that the component is working the same as in the sample above. 5. Replace the sample HTML content (such as the `.ms-ContextualMenu-link` elements) with your content. @@ -110,10 +101,3 @@ This component has no dependencies. ## Accessibility More details will be added here. - - - \ No newline at end of file diff --git a/ghdocs/components/DatePicker.md b/ghdocs/components/DatePicker.md index 24a93779..52e25e8d 100644 --- a/ghdocs/components/DatePicker.md +++ b/ghdocs/components/DatePicker.md @@ -18,7 +18,8 @@ State | Applied to | Result ## Using this component 1. Confirm that you have references to Fabric's CSS and JavaScript on your page, as well as jQuery and PickaDate.js library: - ``` + + ``` @@ -26,73 +27,66 @@ State | Applied to | Result - ``` + ``` + 2. Copy the HTML from one of the samples above into your page. For example: -
    -    
- 
-
-
-<div class="ms-DatePicker">
-  <div class="ms-TextField">
-    <label class="ms-Label">Start date</label>
-    <i class="ms-DatePicker-event ms-Icon ms-Icon--Event"></i>
-    <input class="ms-TextField-field" type="text" placeholder="Select a date&hellip;">
-  </div>
-  <div class="ms-DatePicker-monthComponents">
-    <span class="ms-DatePicker-nextMonth js-nextMonth"><i class="ms-Icon ms-Icon--ChevronRight"></i></span>
-    <span class="ms-DatePicker-prevMonth js-prevMonth"><i class="ms-Icon ms-Icon--ChevronLeft"></i></span>
-    <div class="ms-DatePicker-headerToggleView js-showMonthPicker"></div>
-  </div>
-  <span class="ms-DatePicker-goToday js-goToday">Go to today</span>
-  <div class="ms-DatePicker-monthPicker">
-    <div class="ms-DatePicker-header">
-      <div class="ms-DatePicker-yearComponents">
-        <span class="ms-DatePicker-nextYear js-nextYear"><i class="ms-Icon ms-Icon--ChevronRight"></i></span>
-        <span class="ms-DatePicker-prevYear js-prevYear"><i class="ms-Icon ms-Icon--ChevronLeft"></i></span>
-      </div>
-      <div class="ms-DatePicker-currentYear js-showYearPicker"></div>
-    </div>
-    <div class="ms-DatePicker-optionGrid">
-      <span class="ms-DatePicker-monthOption js-changeDate" data-month="0">Jan</span>
-      <span class="ms-DatePicker-monthOption js-changeDate" data-month="1">Feb</span>
-      <span class="ms-DatePicker-monthOption js-changeDate" data-month="2">Mar</span>
-      <span class="ms-DatePicker-monthOption js-changeDate" data-month="3">Apr</span>
-      <span class="ms-DatePicker-monthOption js-changeDate" data-month="4">May</span>
-      <span class="ms-DatePicker-monthOption js-changeDate" data-month="5">Jun</span>
-      <span class="ms-DatePicker-monthOption js-changeDate" data-month="6">Jul</span>
-      <span class="ms-DatePicker-monthOption js-changeDate" data-month="7">Aug</span>
-      <span class="ms-DatePicker-monthOption js-changeDate" data-month="8">Sep</span>
-      <span class="ms-DatePicker-monthOption js-changeDate" data-month="9">Oct</span>
-      <span class="ms-DatePicker-monthOption js-changeDate" data-month="10">Nov</span>
-      <span class="ms-DatePicker-monthOption js-changeDate" data-month="11">Dec</span>
-    </div>
-  </div>
-  <div class="ms-DatePicker-yearPicker">
-    <div class="ms-DatePicker-decadeComponents">
-      <span class="ms-DatePicker-nextDecade js-nextDecade"><i class="ms-Icon ms-Icon--ChevronRight"></i></span>
-      <span class="ms-DatePicker-prevDecade js-prevDecade"><i class="ms-Icon ms-Icon--ChevronLeft"></i></span>
-    </div>
-  </div>
-</div>
-
-    
-
    + ``` +
    +
    + + + +
    +
    + + +
    +
    + Go to today +
    +
    +
    + + +
    +
    +
    +
    + Jan + Feb + Mar + Apr + May + Jun + Jul + Aug + Sep + Oct + Nov + Dec +
    +
    +
    +
    + + +
    +
    +
    + ``` -3. Add the following ` + ``` 4. Verify that the component is working the same as in the sample above. @@ -102,11 +96,3 @@ This component has no dependencies on other components. It does, however, requir ## Accessibility More details will be added here. - - - diff --git a/ghdocs/components/Dialog.md b/ghdocs/components/Dialog.md index 5ce4af2f..44b96c42 100644 --- a/ghdocs/components/Dialog.md +++ b/ghdocs/components/Dialog.md @@ -49,99 +49,79 @@ This component has only the default state. ## Using this component 1. Confirm that you have references to Fabric's CSS and JavaScript on your page: - ``` + + ``` - ``` + ``` + 2. Copy the HTML from one of the samples above into your page. For example: -
    -    
- 
-<div class="ms-Dialog ">
-    <div class="ms-Dialog-title">All emails together</div>
-    <div class="ms-Dialog-content">
-        <p class="ms-Dialog-subText">Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.</p>
-          
-
-<div class="ms-CheckBox"> 
-    <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
-    <label role="checkbox"
-        class="ms-CheckBox-field "
-        tabindex="0"
-        aria-checked="false"
-        name="checkboxa"
->
-        <span class="ms-Label">Option1</span>
-    </label>
-</div>
-
-          
-
-<div class="ms-CheckBox"> 
-    <input tabindex="-1" type="checkbox" class="ms-CheckBox-input">
-    <label role="checkbox"
-        class="ms-CheckBox-field "
-        tabindex="0"
-        aria-checked="false"
-        name="checkboxa"
->
-        <span class="ms-Label">Option2</span>
-    </label>
-</div>
-
-    </div>
-      <div class="ms-Dialog-actions">
-          
-<button class="ms-Button ms-Dialog-action
-  ms-Button--primary
-  ">
-  <span class="ms-Button-label">Save</span>
-</button>
-          
-<button class="ms-Button ms-Dialog-action
-  
-  ">
-  <span class="ms-Button-label">Cancel</span>
-</button>
-      </div>
-</div>
-
-    
-
    + ``` +
    +
    All emails together
    +
    +

    Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.

    +
    + + +
    +
    + + +
    +
    +
    + + + +
    +
    + ``` 3. Add the following ` + ``` + + or add the following ` + ``` + 4. Verify that the component is working the same as in the sample above. 5. Replace the sample HTML content (such as the content of `.ms-Dialog-content`) with your content. diff --git a/ghdocs/components/Dropdown.md b/ghdocs/components/Dropdown.md index 85e49976..768a7b2f 100644 --- a/ghdocs/components/Dropdown.md +++ b/ghdocs/components/Dropdown.md @@ -22,47 +22,41 @@ State | Applied to | Result ## Using this component 1. Confirm that you have references to Fabric's CSS and JavaScript on your page: - ``` + + ``` - ``` + ``` + 2. Copy the HTML from the sample above into your page. For example: -
    -    
- 
-
-
-<div class="ms-Dropdown  " tabindex="0">
-  <label class="ms-Label">Dropdown label</label>
-  <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
-  <select class="ms-Dropdown-select">
-      <option>Choose a sound&amp;hellip;</option>
-      <option>Dog barking</option>
-      <option>Wind blowing</option>
-      <option>Duck quacking</option>
-      <option>Cow mooing</option>
-  </select>
-</div>
-    
-
    + ``` +
    + + + +
    + ``` 3. Add the following ` + ``` 4. Verify that the component is working the same as in the sample above. 5. Replace the sample HTML content (such as the options within `.ms-Dropdown-select`) with your content. @@ -72,11 +66,3 @@ This component depends on Panel for when it is rendered on mobile. ## Accessibility More details will be added here. - - - diff --git a/ghdocs/components/FacePile.md b/ghdocs/components/FacePile.md index 59b58688..5799b406 100644 --- a/ghdocs/components/FacePile.md +++ b/ghdocs/components/FacePile.md @@ -17,718 +17,599 @@ State | Applied to | Result ## Using this component 1. Confirm that you have references to Fabric's CSS and JavaScript on your page: - ``` + + ``` - ``` + ``` + 2. Copy the HTML from the sample above into your page. For example: -
    -    
- 
+	```
+    
    
+        
+
+        
    
+            
    
+                
    AL
    
+                
+            
    
+            
    
+            
    
+            
    
+                
    Alton Lafferty
    
+                
    Accountant
    
+            
    
+
+            
    
+                
    
+                    
    
+                        
    
+                            
    AL
    
+                            
+                        
    
+                        
    
+                        
    
+                        
    
+                            
    Alton Lafferty
    
+                            
    Accountant
    
+                            
    In a meeting
    
+                            
    Available at 4:00pm
    
+                        
    
+                    
    
+                
    
+                
      
+                    
      • 
+                    
      • 
+                    
      • 
+                    
      • 
+                    
    • View profile
      • 
+                    
      • 
+                
    
+                
    
+                    
    
+                        
    Personal: alton.lafferty@outlook.com
    
+                        
    Work: altonlafferty@contoso.com
    
+                    
    
+                    
    
+                        
    Lync: Start Lync call
    
+                    
    
+                    
    
+                        
    
+                        
    Details
    
+                        
    Personal: 555.206.2443
    
+                        
    Work: 555.929.8240
    
+                    
    
+                    
    
+                        
    Skype:Start Skype call
    
+                    
    
+                    
    
+                        
    
+                            
    
+                                
      
+                                    
    • 
+                                        
+                                    
      • 
+                                    
    • 
+                                        
+                                    
      • 
+                                
    
+                            
    
+                            
    
+                                
    Manager
    
+                                
      
+                                    
    • 
+                                        
+                                    
      • 
+                                
    
+                            
    
+                            
    
+                                
    Staff
    
+                                
      
+                                    
    • 
+                                        
+                                    
      • 
+                                    
    • 
+                                        
+                                    
      • 
+                                    
    • 
+                                        
+                                    
      • 
+                                    
    • 
+                                        
+                                    
      • 
+                                
    
+                            
    
+                        
    
+                    
    
+                
    
+            
    
+        
    
 
-<div class="ms-FacePile">
-  <button class="ms-FacePile-addButton ms-FacePile-addButton--addPerson">
-    <i class="ms-FacePile-addPersonIcon ms-Icon ms-Icon--AddFriend"></i>
-  </button>
-  
-      
-      
-      <div class="ms-Persona
-            ms-Persona--facePile
-        ">
-        <div class="ms-Persona-imageArea">
-            <div class="ms-Persona-initials ms-Persona-initials--blue">AL</div>
-            <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-        </div>
-        <div class="ms-Persona-presence">
-        </div>
-        <div class="ms-Persona-details">
-            <div class="ms-Persona-primaryText">Alton Lafferty</div>
-            <div class="ms-Persona-secondaryText">Accountant</div>
-        </div>
-          
-          <div class="ms-PersonaCard ">
-            <div class="ms-PersonaCard-persona">
-              
-              
-              <div class="ms-Persona
-                    ms-Persona--lg
-                ">
-                <div class="ms-Persona-imageArea">
-                    <div class="ms-Persona-initials ms-Persona-initials--blue">AL</div>
-                    <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-                </div>
-                <div class="ms-Persona-presence">
-                </div>
-                <div class="ms-Persona-details">
-                    <div class="ms-Persona-primaryText">Alton Lafferty</div>
-                    <div class="ms-Persona-secondaryText">Accountant</div>
-                    <div class="ms-Persona-tertiaryText">In a meeting</div>
-                    <div class="ms-Persona-optionalText">Available at 4:00pm</div>
-                </div>
-              </div>
-            </div>
-            <ul class="ms-PersonaCard-actions">
-              <li data-action-id="chat" class="ms-PersonaCard-action" tabindex="1"><i class="ms-Icon ms-Icon--Chat"></i></li>
-              <li data-action-id="phone" class="ms-PersonaCard-action is-active" tabindex="2"><i class="ms-Icon ms-Icon--Phone"></i></li>
-              <li data-action-id="video" class="ms-PersonaCard-action" tabindex="3"><i class="ms-Icon ms-Icon--Video"></i></li>
-              <li data-action-id="mail" class="ms-PersonaCard-action" tabindex="4"><i class="ms-Icon ms-Icon--Mail"></i></li>
-              <li class="ms-PersonaCard-overflow" alt="View profile in Delve" title="View profile in Delve" >View profile</li>
-              <li data-action-id="org" class="ms-PersonaCard-action ms-PersonaCard-orgChart" tabindex="5"><i class="ms-Icon ms-Icon--Org"></i></li>
-            </ul>
-            <div class="ms-PersonaCard-actionDetailBox">
-              <div data-detail-id="mail" class="ms-PersonaCard-details">
-                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</a></div>
-                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</a></div>
-              </div>
-              <div data-detail-id="chat" class="ms-PersonaCard-details">
-                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Lync:</span> <a class="ms-Link" href="#">Start Lync call</a></div>
-              </div>
-              <div data-detail-id="phone" class="ms-PersonaCard-details">
-                <div class="ms-PersonaCard-detailExpander"></div>
-                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Details</div>
-                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> 555.206.2443</div>
-                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> 555.929.8240</div>
-              </div>
-              <div data-detail-id="video" class="ms-PersonaCard-details">
-                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Skype:</span> <a class="ms-Link" href="#">Start Skype call</a></div>
-              </div>
-                
-              <div data-detail-id="org" class="ms-PersonaCard-details">
-                
-                
-                <div class="ms-OrgChart ">
-                    <div class="ms-OrgChart-group">
-                      
-                      <ul class="ms-OrgChart-list">
-                          <li class="ms-OrgChart-listItem">
-                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                              
-                
-                <div class="ms-Persona
-                ">
-                  <div class="ms-Persona-imageArea">
-                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-                  </div>
-                  <div class="ms-Persona-presence">
-                  </div>
-                  <div class="ms-Persona-details">
-                      <div class="ms-Persona-primaryText">Russel Miller</div>
-                      <div class="ms-Persona-secondaryText">Sales</div>
-                  </div>
-                </div>
-                
-                            </button>
-                          </li>
-                          <li class="ms-OrgChart-listItem">
-                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                              
-                
-                <div class="ms-Persona
-                ">
-                  <div class="ms-Persona-imageArea">
-                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-                  </div>
-                  <div class="ms-Persona-presence">
-                  </div>
-                  <div class="ms-Persona-details">
-                      <div class="ms-Persona-primaryText">Douglas Fielder</div>
-                      <div class="ms-Persona-secondaryText">Public Relations</div>
-                  </div>
-                </div>
-                
-                            </button>
-                          </li>
-                      </ul>
-                    </div>
-                    <div class="ms-OrgChart-group">
-                      <div class="ms-OrgChart-groupTitle">Manager</div>
-                      <ul class="ms-OrgChart-list">
-                          <li class="ms-OrgChart-listItem">
-                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                              
-                
-                <div class="ms-Persona
-                ">
-                  <div class="ms-Persona-imageArea">
-                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-                  </div>
-                  <div class="ms-Persona-presence">
-                  </div>
-                  <div class="ms-Persona-details">
-                      <div class="ms-Persona-primaryText">Grant Steel</div>
-                      <div class="ms-Persona-secondaryText">Sales</div>
-                  </div>
-                </div>
-                
-                            </button>
-                          </li>
-                      </ul>
-                    </div>
-                    <div class="ms-OrgChart-group">
-                      <div class="ms-OrgChart-groupTitle">Staff</div>
-                      <ul class="ms-OrgChart-list">
-                          <li class="ms-OrgChart-listItem">
-                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                              
-                
-                <div class="ms-Persona
-                ">
-                  <div class="ms-Persona-imageArea">
-                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-                  </div>
-                  <div class="ms-Persona-presence">
-                  </div>
-                  <div class="ms-Persona-details">
-                      <div class="ms-Persona-primaryText">Harvey Wallin</div>
-                      <div class="ms-Persona-secondaryText">Public Relations</div>
-                  </div>
-                </div>
-                
-                            </button>
-                          </li>
-                          <li class="ms-OrgChart-listItem">
-                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                              
-                
-                <div class="ms-Persona
-                ">
-                  <div class="ms-Persona-imageArea">
-                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-                  </div>
-                  <div class="ms-Persona-presence">
-                  </div>
-                  <div class="ms-Persona-details">
-                      <div class="ms-Persona-primaryText">Marcus Lauer</div>
-                      <div class="ms-Persona-secondaryText">Technical Support</div>
-                  </div>
-                </div>
-                
-                            </button>
-                          </li>
-                          <li class="ms-OrgChart-listItem">
-                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                              
-                
-                <div class="ms-Persona
-                ">
-                  <div class="ms-Persona-imageArea">
-                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-                  </div>
-                  <div class="ms-Persona-presence">
-                  </div>
-                  <div class="ms-Persona-details">
-                      <div class="ms-Persona-primaryText">Marcel Groce</div>
-                      <div class="ms-Persona-secondaryText">Delivery</div>
-                  </div>
-                </div>
-                
-                            </button>
-                          </li>
-                          <li class="ms-OrgChart-listItem">
-                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                              
-                
-                <div class="ms-Persona
-                ">
-                  <div class="ms-Persona-imageArea">
-                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-                  </div>
-                  <div class="ms-Persona-presence">
-                  </div>
-                  <div class="ms-Persona-details">
-                      <div class="ms-Persona-primaryText">Jessica Fischer</div>
-                      <div class="ms-Persona-secondaryText">Marketing</div>
-                  </div>
-                </div>
-                
-                            </button>
-                          </li>
-                      </ul>
-                    </div>
-                </div>    </div>
-            </div>
-          </div>
-      </div>
-      
-      
-      <div class="ms-Persona
-            ms-Persona--facePile
-        ">
-        <div class="ms-Persona-imageArea">
-            <div class="ms-Persona-initials ms-Persona-initials--purple">ML</div>
-        </div>
-        <div class="ms-Persona-presence">
-        </div>
-        <div class="ms-Persona-details">
-            <div class="ms-Persona-primaryText">Marcus Lauer</div>
-            <div class="ms-Persona-secondaryText">Accountant</div>
-        </div>
-          
-          <div class="ms-PersonaCard ">
-            <div class="ms-PersonaCard-persona">
-              
-              
-              <div class="ms-Persona
-                    ms-Persona--lg
-                ">
-                <div class="ms-Persona-imageArea">
-                    <div class="ms-Persona-initials ms-Persona-initials--purple">ML</div>
-                </div>
-                <div class="ms-Persona-presence">
-                </div>
-                <div class="ms-Persona-details">
-                    <div class="ms-Persona-primaryText">Marcus Lauer</div>
-                    <div class="ms-Persona-secondaryText">Accountant</div>
-                    <div class="ms-Persona-tertiaryText">In a meeting</div>
-                    <div class="ms-Persona-optionalText">Available at 4:00pm</div>
-                </div>
-              </div>
-            </div>
-            <ul class="ms-PersonaCard-actions">
-              <li data-action-id="chat" class="ms-PersonaCard-action" tabindex="1"><i class="ms-Icon ms-Icon--Chat"></i></li>
-              <li data-action-id="phone" class="ms-PersonaCard-action is-active" tabindex="2"><i class="ms-Icon ms-Icon--Phone"></i></li>
-              <li data-action-id="video" class="ms-PersonaCard-action" tabindex="3"><i class="ms-Icon ms-Icon--Video"></i></li>
-              <li data-action-id="mail" class="ms-PersonaCard-action" tabindex="4"><i class="ms-Icon ms-Icon--Mail"></i></li>
-              <li class="ms-PersonaCard-overflow" alt="View profile in Delve" title="View profile in Delve" >View profile</li>
-              <li data-action-id="org" class="ms-PersonaCard-action ms-PersonaCard-orgChart" tabindex="5"><i class="ms-Icon ms-Icon--Org"></i></li>
-            </ul>
-            <div class="ms-PersonaCard-actionDetailBox">
-              <div data-detail-id="mail" class="ms-PersonaCard-details">
-                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</a></div>
-                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</a></div>
-              </div>
-              <div data-detail-id="chat" class="ms-PersonaCard-details">
-                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Lync:</span> <a class="ms-Link" href="#">Start Lync call</a></div>
-              </div>
-              <div data-detail-id="phone" class="ms-PersonaCard-details">
-                <div class="ms-PersonaCard-detailExpander"></div>
-                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Details</div>
-                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> 555.206.2443</div>
-                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> 555.929.8240</div>
-              </div>
-              <div data-detail-id="video" class="ms-PersonaCard-details">
-                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Skype:</span> <a class="ms-Link" href="#">Start Skype call</a></div>
-              </div>
-                
-              <div data-detail-id="org" class="ms-PersonaCard-details">
-                
-                
-                <div class="ms-OrgChart ">
-                    <div class="ms-OrgChart-group">
-                      
-                      <ul class="ms-OrgChart-list">
-                          <li class="ms-OrgChart-listItem">
-                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                              
-                
-                <div class="ms-Persona
-                ">
-                  <div class="ms-Persona-imageArea">
-                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-                  </div>
-                  <div class="ms-Persona-presence">
-                  </div>
-                  <div class="ms-Persona-details">
-                      <div class="ms-Persona-primaryText">Russel Miller</div>
-                      <div class="ms-Persona-secondaryText">Sales</div>
-                  </div>
-                </div>
-                
-                            </button>
-                          </li>
-                          <li class="ms-OrgChart-listItem">
-                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                              
-                
-                <div class="ms-Persona
-                ">
-                  <div class="ms-Persona-imageArea">
-                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-                  </div>
-                  <div class="ms-Persona-presence">
-                  </div>
-                  <div class="ms-Persona-details">
-                      <div class="ms-Persona-primaryText">Douglas Fielder</div>
-                      <div class="ms-Persona-secondaryText">Public Relations</div>
-                  </div>
-                </div>
-                
-                            </button>
-                          </li>
-                      </ul>
-                    </div>
-                    <div class="ms-OrgChart-group">
-                      <div class="ms-OrgChart-groupTitle">Manager</div>
-                      <ul class="ms-OrgChart-list">
-                          <li class="ms-OrgChart-listItem">
-                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                              
-                
-                <div class="ms-Persona
-                ">
-                  <div class="ms-Persona-imageArea">
-                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-                  </div>
-                  <div class="ms-Persona-presence">
-                  </div>
-                  <div class="ms-Persona-details">
-                      <div class="ms-Persona-primaryText">Grant Steel</div>
-                      <div class="ms-Persona-secondaryText">Sales</div>
-                  </div>
-                </div>
-                
-                            </button>
-                          </li>
-                      </ul>
-                    </div>
-                    <div class="ms-OrgChart-group">
-                      <div class="ms-OrgChart-groupTitle">Staff</div>
-                      <ul class="ms-OrgChart-list">
-                          <li class="ms-OrgChart-listItem">
-                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                              
-                
-                <div class="ms-Persona
-                ">
-                  <div class="ms-Persona-imageArea">
-                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-                  </div>
-                  <div class="ms-Persona-presence">
-                  </div>
-                  <div class="ms-Persona-details">
-                      <div class="ms-Persona-primaryText">Harvey Wallin</div>
-                      <div class="ms-Persona-secondaryText">Public Relations</div>
-                  </div>
-                </div>
-                
-                            </button>
-                          </li>
-                          <li class="ms-OrgChart-listItem">
-                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                              
-                
-                <div class="ms-Persona
-                ">
-                  <div class="ms-Persona-imageArea">
-                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-                  </div>
-                  <div class="ms-Persona-presence">
-                  </div>
-                  <div class="ms-Persona-details">
-                      <div class="ms-Persona-primaryText">Marcus Lauer</div>
-                      <div class="ms-Persona-secondaryText">Technical Support</div>
-                  </div>
-                </div>
-                
-                            </button>
-                          </li>
-                          <li class="ms-OrgChart-listItem">
-                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                              
-                
-                <div class="ms-Persona
-                ">
-                  <div class="ms-Persona-imageArea">
-                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-                  </div>
-                  <div class="ms-Persona-presence">
-                  </div>
-                  <div class="ms-Persona-details">
-                      <div class="ms-Persona-primaryText">Marcel Groce</div>
-                      <div class="ms-Persona-secondaryText">Delivery</div>
-                  </div>
-                </div>
-                
-                            </button>
-                          </li>
-                          <li class="ms-OrgChart-listItem">
-                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                              
-                
-                <div class="ms-Persona
-                ">
-                  <div class="ms-Persona-imageArea">
-                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-                  </div>
-                  <div class="ms-Persona-presence">
-                  </div>
-                  <div class="ms-Persona-details">
-                      <div class="ms-Persona-primaryText">Jessica Fischer</div>
-                      <div class="ms-Persona-secondaryText">Marketing</div>
-                  </div>
-                </div>
-                
-                            </button>
-                          </li>
-                      </ul>
-                    </div>
-                </div>    </div>
-            </div>
-          </div>
-      </div>
-      
-      
-      <div class="ms-Persona
-            ms-Persona--facePile
-        ">
-        <div class="ms-Persona-imageArea">
-            <div class="ms-Persona-initials ms-Persona-initials--green">DF</div>
-        </div>
-        <div class="ms-Persona-presence">
-        </div>
-        <div class="ms-Persona-details">
-            <div class="ms-Persona-primaryText">Douglas Fielder</div>
-            <div class="ms-Persona-secondaryText">Accountant</div>
-        </div>
-          
-          <div class="ms-PersonaCard ">
-            <div class="ms-PersonaCard-persona">
-              
-              
-              <div class="ms-Persona
-                    ms-Persona--lg
-                ">
-                <div class="ms-Persona-imageArea">
-                    <div class="ms-Persona-initials ms-Persona-initials--green">DF</div>
-                </div>
-                <div class="ms-Persona-presence">
-                </div>
-                <div class="ms-Persona-details">
-                    <div class="ms-Persona-primaryText">Douglas Fielder</div>
-                    <div class="ms-Persona-secondaryText">Accountant</div>
-                    <div class="ms-Persona-tertiaryText">In a meeting</div>
-                    <div class="ms-Persona-optionalText">Available at 4:00pm</div>
-                </div>
-              </div>
-            </div>
-            <ul class="ms-PersonaCard-actions">
-              <li data-action-id="chat" class="ms-PersonaCard-action" tabindex="1"><i class="ms-Icon ms-Icon--Chat"></i></li>
-              <li data-action-id="phone" class="ms-PersonaCard-action is-active" tabindex="2"><i class="ms-Icon ms-Icon--Phone"></i></li>
-              <li data-action-id="video" class="ms-PersonaCard-action" tabindex="3"><i class="ms-Icon ms-Icon--Video"></i></li>
-              <li data-action-id="mail" class="ms-PersonaCard-action" tabindex="4"><i class="ms-Icon ms-Icon--Mail"></i></li>
-              <li class="ms-PersonaCard-overflow" alt="View profile in Delve" title="View profile in Delve" >View profile</li>
-              <li data-action-id="org" class="ms-PersonaCard-action ms-PersonaCard-orgChart" tabindex="5"><i class="ms-Icon ms-Icon--Org"></i></li>
-            </ul>
-            <div class="ms-PersonaCard-actionDetailBox">
-              <div data-detail-id="mail" class="ms-PersonaCard-details">
-                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</a></div>
-                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</a></div>
-              </div>
-              <div data-detail-id="chat" class="ms-PersonaCard-details">
-                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Lync:</span> <a class="ms-Link" href="#">Start Lync call</a></div>
-              </div>
-              <div data-detail-id="phone" class="ms-PersonaCard-details">
-                <div class="ms-PersonaCard-detailExpander"></div>
-                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Details</div>
-                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> 555.206.2443</div>
-                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> 555.929.8240</div>
-              </div>
-              <div data-detail-id="video" class="ms-PersonaCard-details">
-                <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Skype:</span> <a class="ms-Link" href="#">Start Skype call</a></div>
-              </div>
-                
-              <div data-detail-id="org" class="ms-PersonaCard-details">
-                
-                
-                <div class="ms-OrgChart ">
-                    <div class="ms-OrgChart-group">
-                      
-                      <ul class="ms-OrgChart-list">
-                          <li class="ms-OrgChart-listItem">
-                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                              
-                
-                <div class="ms-Persona
-                ">
-                  <div class="ms-Persona-imageArea">
-                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-                  </div>
-                  <div class="ms-Persona-presence">
-                  </div>
-                  <div class="ms-Persona-details">
-                      <div class="ms-Persona-primaryText">Russel Miller</div>
-                      <div class="ms-Persona-secondaryText">Sales</div>
-                  </div>
-                </div>
-                
-                            </button>
-                          </li>
-                          <li class="ms-OrgChart-listItem">
-                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                              
-                
-                <div class="ms-Persona
-                ">
-                  <div class="ms-Persona-imageArea">
-                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-                  </div>
-                  <div class="ms-Persona-presence">
-                  </div>
-                  <div class="ms-Persona-details">
-                      <div class="ms-Persona-primaryText">Douglas Fielder</div>
-                      <div class="ms-Persona-secondaryText">Public Relations</div>
-                  </div>
-                </div>
-                
-                            </button>
-                          </li>
-                      </ul>
-                    </div>
-                    <div class="ms-OrgChart-group">
-                      <div class="ms-OrgChart-groupTitle">Manager</div>
-                      <ul class="ms-OrgChart-list">
-                          <li class="ms-OrgChart-listItem">
-                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                              
-                
-                <div class="ms-Persona
-                ">
-                  <div class="ms-Persona-imageArea">
-                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-                  </div>
-                  <div class="ms-Persona-presence">
-                  </div>
-                  <div class="ms-Persona-details">
-                      <div class="ms-Persona-primaryText">Grant Steel</div>
-                      <div class="ms-Persona-secondaryText">Sales</div>
-                  </div>
-                </div>
-                
-                            </button>
-                          </li>
-                      </ul>
-                    </div>
-                    <div class="ms-OrgChart-group">
-                      <div class="ms-OrgChart-groupTitle">Staff</div>
-                      <ul class="ms-OrgChart-list">
-                          <li class="ms-OrgChart-listItem">
-                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                              
-                
-                <div class="ms-Persona
-                ">
-                  <div class="ms-Persona-imageArea">
-                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-                  </div>
-                  <div class="ms-Persona-presence">
-                  </div>
-                  <div class="ms-Persona-details">
-                      <div class="ms-Persona-primaryText">Harvey Wallin</div>
-                      <div class="ms-Persona-secondaryText">Public Relations</div>
-                  </div>
-                </div>
-                
-                            </button>
-                          </li>
-                          <li class="ms-OrgChart-listItem">
-                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                              
-                
-                <div class="ms-Persona
-                ">
-                  <div class="ms-Persona-imageArea">
-                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-                  </div>
-                  <div class="ms-Persona-presence">
-                  </div>
-                  <div class="ms-Persona-details">
-                      <div class="ms-Persona-primaryText">Marcus Lauer</div>
-                      <div class="ms-Persona-secondaryText">Technical Support</div>
-                  </div>
-                </div>
-                
-                            </button>
-                          </li>
-                          <li class="ms-OrgChart-listItem">
-                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                              
-                
-                <div class="ms-Persona
-                ">
-                  <div class="ms-Persona-imageArea">
-                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-                  </div>
-                  <div class="ms-Persona-presence">
-                  </div>
-                  <div class="ms-Persona-details">
-                      <div class="ms-Persona-primaryText">Marcel Groce</div>
-                      <div class="ms-Persona-secondaryText">Delivery</div>
-                  </div>
-                </div>
-                
-                            </button>
-                          </li>
-                          <li class="ms-OrgChart-listItem">
-                            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                              
-                
-                <div class="ms-Persona
-                ">
-                  <div class="ms-Persona-imageArea">
-                      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-                      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-                  </div>
-                  <div class="ms-Persona-presence">
-                  </div>
-                  <div class="ms-Persona-details">
-                      <div class="ms-Persona-primaryText">Jessica Fischer</div>
-                      <div class="ms-Persona-secondaryText">Marketing</div>
-                  </div>
-                </div>
-                
-                            </button>
-                          </li>
-                      </ul>
-                    </div>
-                </div>    </div>
-            </div>
-          </div>
-      </div>
-  
-  <button class="ms-FacePile-addButton ms-FacePile-addButton--overflow">
-    <span class="ms-FacePile-overflowText">+3</span>
-  </button>
-</div>
-        
-
    + +
    +
    +
    ML
    +
    +
    +
    +
    +
    Marcus Lauer
    +
    Accountant
    +
    +
    +
    +
    +
    +
    ML
    +
    +
    +
    +
    +
    Marcus Lauer
    +
    Accountant
    +
    In a meeting
    +
    Available at 4:00pm
    +
    +
    +
    + +
    +
    +
    Personal: alton.lafferty@outlook.com
    +
    Work: altonlafferty@contoso.com
    +
    +
    +
    Lync: Start Lync call
    +
    +
    +
    +
    Details
    +
    Personal: 555.206.2443
    +
    Work: 555.929.8240
    +
    +
    +
    Skype:Start Skype call
    +
    +
    +
    +
    +
      +
    • + +
      • +
    • + +
      • +
    +
    +
    +
    Manager
    +
      +
    • + +
      • +
    +
    +
    +
    Staff
    +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    DF
    +
    +
    +
    +
    +
    Douglas Fielder
    +
    Accountant
    +
    +
    +
    +
    +
    +
    DF
    +
    +
    +
    +
    +
    Douglas Fielder
    +
    Accountant
    +
    In a meeting
    +
    Available at 4:00pm
    +
    +
    +
    + +
    +
    +
    Personal: alton.lafferty@outlook.com
    +
    Work: altonlafferty@contoso.com
    +
    +
    +
    Lync: Start Lync call
    +
    +
    +
    +
    Details
    +
    Personal: 555.206.2443
    +
    Work: 555.929.8240
    +
    +
    +
    Skype: Start Skype call
    +
    +
    +
    +
    +
      +
    • + +
      • +
    • + +
      • +
    +
    +
    +
    Manager
    +
      +
    • + +
      • +
    +
    +
    +
    Staff
    +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    +
    +
    +
    +
    +
    +
    + + + + ``` 3. Add the following ` + ``` 4. Verify that the component is working the same as in the sample above. 5. Replace the sample HTML content with your content. diff --git a/ghdocs/components/Label.md b/ghdocs/components/Label.md index 0a32c25d..e57972ef 100644 --- a/ghdocs/components/Label.md +++ b/ghdocs/components/Label.md @@ -29,21 +29,19 @@ State | Applied to | Result ## Using this component 1. Confirm that you have references to Fabric's CSS on your page: + ``` ``` -2. Copy the HTML from one of the samples above into your page. For example: -
    -    
- 
-<label class="ms-Label  ">Name</label>
+2. Copy the HTML from one of the samples above into your page. For example:
 
-    
-
    + ``` + + ``` 3. Replace the sample HTML content (such as the content of `.ms-Label`) with your content. diff --git a/ghdocs/components/Link.md b/ghdocs/components/Link.md index 03c8a618..1f799f8e 100644 --- a/ghdocs/components/Link.md +++ b/ghdocs/components/Link.md @@ -14,27 +14,21 @@ This component has only the default state. ## Using this component 1. Confirm that you have references to Fabric's CSS on your page: + ``` ``` + 2. Copy the HTML from one of the samples above into your page. For example: -
    -    
- <div class="ms-font-m">
-    
-    
-    <a class="ms-Link  " 
-       href="#"  
-       title="More info about Example Link"  
-      >Example Link</a>
-    
-</div>
-    
-
    + ``` +
    + Example Link +
    + ``` 3. Replace the sample text with the text of your link. diff --git a/ghdocs/components/List.md b/ghdocs/components/List.md index c8818b2a..36c8f771 100644 --- a/ghdocs/components/List.md +++ b/ghdocs/components/List.md @@ -16,189 +16,143 @@ This component has only the default state. ## Using this component 1. Confirm that you have references to Fabric's CSS and JavaScript on your page: - ``` + + ``` - ``` + ``` + 2. Copy the HTML from the sample above into your page. For example: -
    -    
- 
-
-<ul class="ms-List ">
-    
-    
-    <li class="ms-ListItem  is-unread is-selectable" tabindex="0">
-      
-      <span class="ms-ListItem-primaryText">Alton Lafferty</span>
-      <span class="ms-ListItem-secondaryText">Meeting notes</span>
-      <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
-      <span class="ms-ListItem-metaText">2:42p</span>
-      
-      <div class="ms-ListItem-selectionTarget"></div>
-      <div class="ms-ListItem-actions">
-        
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
-      </div>
-    </li>
-    
-    
-    
-    <li class="ms-ListItem  is-unread is-selectable" tabindex="0">
-      
-      <span class="ms-ListItem-primaryText">Alton Lafferty</span>
-      <span class="ms-ListItem-secondaryText">Meeting notes</span>
-      <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
-      <span class="ms-ListItem-metaText">2:42p</span>
-      
-      <div class="ms-ListItem-selectionTarget"></div>
-      <div class="ms-ListItem-actions">
-        
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
-      </div>
-    </li>
-    
-    
-    
-    <li class="ms-ListItem  is-unread is-selectable" tabindex="0">
-      
-      <span class="ms-ListItem-primaryText">Alton Lafferty</span>
-      <span class="ms-ListItem-secondaryText">Meeting notes</span>
-      <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
-      <span class="ms-ListItem-metaText">2:42p</span>
-      
-      <div class="ms-ListItem-selectionTarget"></div>
-      <div class="ms-ListItem-actions">
-        
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
-      </div>
-    </li>
-    
-    
-    
-    <li class="ms-ListItem  is-unread is-selectable" tabindex="0">
-      
-      <span class="ms-ListItem-primaryText">Alton Lafferty</span>
-      <span class="ms-ListItem-secondaryText">Meeting notes</span>
-      <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
-      <span class="ms-ListItem-metaText">2:42p</span>
-      
-      <div class="ms-ListItem-selectionTarget"></div>
-      <div class="ms-ListItem-actions">
-        
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
-      </div>
-    </li>
-    
-    
-    
-    <li class="ms-ListItem  is-unread is-selectable" tabindex="0">
-      
-      <span class="ms-ListItem-primaryText">Alton Lafferty</span>
-      <span class="ms-ListItem-secondaryText">Meeting notes</span>
-      <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
-      <span class="ms-ListItem-metaText">2:42p</span>
-      
-      <div class="ms-ListItem-selectionTarget"></div>
-      <div class="ms-ListItem-actions">
-        
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
-      </div>
-    </li>
-    
-    
-    
-    <li class="ms-ListItem  is-selectable" tabindex="0">
-      
-      <span class="ms-ListItem-primaryText">Alton Lafferty</span>
-      <span class="ms-ListItem-secondaryText">Meeting notes</span>
-      <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
-      <span class="ms-ListItem-metaText">2:42p</span>
-      
-      <div class="ms-ListItem-selectionTarget"></div>
-      <div class="ms-ListItem-actions">
-        
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
-      </div>
-    </li>
-    
-    
-    
-    <li class="ms-ListItem  is-selectable" tabindex="0">
-      
-      <span class="ms-ListItem-primaryText">Alton Lafferty</span>
-      <span class="ms-ListItem-secondaryText">Meeting notes</span>
-      <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
-      <span class="ms-ListItem-metaText">2:42p</span>
-      
-      <div class="ms-ListItem-selectionTarget"></div>
-      <div class="ms-ListItem-actions">
-        
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
-      </div>
-    </li>
-    
-    
-    
-    <li class="ms-ListItem  is-selectable" tabindex="0">
-      
-      <span class="ms-ListItem-primaryText">Alton Lafferty</span>
-      <span class="ms-ListItem-secondaryText">Meeting notes</span>
-      <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
-      <span class="ms-ListItem-metaText">2:42p</span>
-      
-      <div class="ms-ListItem-selectionTarget"></div>
-      <div class="ms-ListItem-actions">
-        
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
-        <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
-      </div>
-    </li>
-    
-</ul>
-
-    
-
    + ``` + + ``` 3. Add the following ` + ``` 4. Replace the content with whatever you'd like to display as a list. The samples use `.ms-ListItem` components, but you can place any content within `.ms-List`. @@ -207,11 +161,3 @@ This component has no dependencies on other components, although it does often c ## Accessibility You can use a `ul` element if your content is unordered, or `ol` if the order of the content is important. - - - \ No newline at end of file diff --git a/ghdocs/components/ListItem.md b/ghdocs/components/ListItem.md index cf5ad30c..de2a6536 100644 --- a/ghdocs/components/ListItem.md +++ b/ghdocs/components/ListItem.md @@ -40,6 +40,7 @@ Use `is-unread` to indicate that the item has not been read. ## Using this component 1. Confirm that you have references to Fabric's CSS and JavaScript on your page: + ``` @@ -47,45 +48,35 @@ Use `is-unread` to indicate that the item has not been read. ``` + 2. Copy the HTML from one of the samples above into your page. For example: -
    -    
- 
-
-<li class="ms-ListItem  " tabindex="0">
-  
-  <span class="ms-ListItem-primaryText">Alton Lafferty</span>
-  <span class="ms-ListItem-secondaryText">Meeting notes</span>
-  <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span>
-  <span class="ms-ListItem-metaText">2:42p</span>
-  
-  <div class="ms-ListItem-selectionTarget"></div>
-  <div class="ms-ListItem-actions">
-    
-    <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Mail"></i></div>
-    <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Delete"></i></div>
-    <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Flag"></i></div>
-    <div class="ms-ListItem-action"><i class="ms-Icon ms-Icon--Pinned"></i></div>
-  </div>
-</li>
-
-
-    
-
    + ``` +
  • + Alton Lafferty + Meeting notes + Today we discussed the importance of a, b, and c in regards to d. + 2:42p +
    +
    +
    +
    +
    +
    +
    +
    • + ``` 3. Add the following ` + ``` 4. Verify that the component is working the same as in the sample above. 5. Replace the sample HTML content (such as the content of `.ms-ListItem-primaryText`) with your content. @@ -95,11 +86,3 @@ This component has no dependencies on other components, although it is most ofte ## Accessibility More details will be added here. - - - diff --git a/ghdocs/components/MessageBanner.md b/ghdocs/components/MessageBanner.md index ac3e7801..bdae597b 100644 --- a/ghdocs/components/MessageBanner.md +++ b/ghdocs/components/MessageBanner.md @@ -14,6 +14,7 @@ This component has only the default state. ## Using this component 1. Confirm that you have references to Fabric's CSS and JavaScript on your page: + ``` @@ -23,64 +24,55 @@ This component has only the default state. ``` 2. Copy the HTML from the sample above into your page. For example: -
    -    
- <div class="docs-MessageBannerExample">
-  
-  
-  <div class="ms-MessageBanner">
-    <div class="ms-MessageBanner-content">
-      <div class="ms-MessageBanner-text">
-        <div class="ms-MessageBanner-clipper">
-          You&#x27;ve reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage.
-        </div>
-      </div>
-      <button class="ms-MessageBanner-expand">
-        <i class="ms-Icon ms-Icon--ChevronDown"></i>
-      </button>
-      <div class="ms-MessageBanner-action">
-        
-  <button class="ms-Button 
-    ms-Button--primary
-    ">
-    <span class="ms-Button-label">Get More Storage</span>
-  </button>
-      </div>
-    </div>
-    <button class="ms-MessageBanner-close">
-      <i class="ms-Icon ms-Icon--Clear"></i>
-    </button>
-  </div>
-  <button class="ms-Button docs-MessageBannerExample-button is-hidden">Show the banner</button>
-</div>
-    
-
    + ``` +
    +
    +
    +
    +
    + You've reached your total storage on OneDrive. Please upgrade your storage plan if you need more storage. +
    +
    + +
    + +
    +
    + +
    + +
    + ``` 3. Add the following ` + ``` 4. Verify that the component is working the same as in the sample above. 5. Replace the sample HTML content (such as the text in `.ms-MessageBanner-action`) with your content. @@ -88,23 +80,3 @@ This component has only the default state. ## Dependencies This component has a dependency on Button. - - \ No newline at end of file diff --git a/ghdocs/components/MessageBar.md b/ghdocs/components/MessageBar.md index 0705ef28..75cc3fd0 100644 --- a/ghdocs/components/MessageBar.md +++ b/ghdocs/components/MessageBar.md @@ -52,6 +52,7 @@ Use sparingly when there's an exceptional need to tell the use that something we ## Using this component 1. Confirm that you have references to Fabric's CSS on your page: + ``` @@ -60,24 +61,19 @@ Use sparingly when there's an exceptional need to tell the use that something we ``` 2. Copy the HTML from one of the samples above into your page. For example: -
    -    
- 
-
-<div class="ms-MessageBar ">
-  <div class="ms-MessageBar-content">
-    <div class="ms-MessageBar-icon">
-      <i class="ms-Icon ms-Icon--Info"></i>
-    </div>
-    <div class="ms-MessageBar-text">
-      Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.<br>
-      <a href="" class="ms-Link">Hyperlink string</a>
-    </div>
-  </div>
-</div>
-
-    
-
    + ``` +
    +
    +
    + +
    +
    + Lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.
    + Hyperlink string +
    +
    +
    + ``` 3. Verify that the component is working the same as in the sample above. 4. Replace the sample HTML content (such as the content of `.ms-MessageBar-text`) with your content. diff --git a/ghdocs/components/OrgChart.md b/ghdocs/components/OrgChart.md index 1e5f29a3..20a7ffd2 100644 --- a/ghdocs/components/OrgChart.md +++ b/ghdocs/components/OrgChart.md @@ -12,177 +12,147 @@ Displays multiple Persona components in groups with headers in order to show the ## Using this component 1. Confirm that you have references to Fabric's CSS on your page: + ``` ``` -2. Copy the HTML from the samples above into your page. For example: - -
    -    
- 
-
-<div class="ms-OrgChart ">
-    <div class="ms-OrgChart-group">
-      
-      <ul class="ms-OrgChart-list">
-          <li class="ms-OrgChart-listItem">
-            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-              
-
-<div class="ms-Persona
-">
-  <div class="ms-Persona-imageArea">
-      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-  </div>
-  <div class="ms-Persona-presence">
-  </div>
-  <div class="ms-Persona-details">
-      <div class="ms-Persona-primaryText">Russel Miller</div>
-      <div class="ms-Persona-secondaryText">Sales</div>
-  </div>
-</div>
-
-            </button>
-          </li>
-          <li class="ms-OrgChart-listItem">
-            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-              
-
-<div class="ms-Persona
-">
-  <div class="ms-Persona-imageArea">
-      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-  </div>
-  <div class="ms-Persona-presence">
-  </div>
-  <div class="ms-Persona-details">
-      <div class="ms-Persona-primaryText">Douglas Fielder</div>
-      <div class="ms-Persona-secondaryText">Public Relations</div>
-  </div>
-</div>
-
-            </button>
-          </li>
-      </ul>
-    </div>
-    <div class="ms-OrgChart-group">
-      <div class="ms-OrgChart-groupTitle">Manager</div>
-      <ul class="ms-OrgChart-list">
-          <li class="ms-OrgChart-listItem">
-            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-              
 
-<div class="ms-Persona
-">
-  <div class="ms-Persona-imageArea">
-      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-  </div>
-  <div class="ms-Persona-presence">
-  </div>
-  <div class="ms-Persona-details">
-      <div class="ms-Persona-primaryText">Grant Steel</div>
-      <div class="ms-Persona-secondaryText">Sales</div>
-  </div>
-</div>
-
-            </button>
-          </li>
-      </ul>
-    </div>
-    <div class="ms-OrgChart-group">
-      <div class="ms-OrgChart-groupTitle">Staff</div>
-      <ul class="ms-OrgChart-list">
-          <li class="ms-OrgChart-listItem">
-            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-              
-
-<div class="ms-Persona
-">
-  <div class="ms-Persona-imageArea">
-      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-  </div>
-  <div class="ms-Persona-presence">
-  </div>
-  <div class="ms-Persona-details">
-      <div class="ms-Persona-primaryText">Harvey Wallin</div>
-      <div class="ms-Persona-secondaryText">Public Relations</div>
-  </div>
-</div>
-
-            </button>
-          </li>
-          <li class="ms-OrgChart-listItem">
-            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-              
-
-<div class="ms-Persona
-">
-  <div class="ms-Persona-imageArea">
-      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-  </div>
-  <div class="ms-Persona-presence">
-  </div>
-  <div class="ms-Persona-details">
-      <div class="ms-Persona-primaryText">Marcus Lauer</div>
-      <div class="ms-Persona-secondaryText">Technical Support</div>
-  </div>
-</div>
-
-            </button>
-          </li>
-          <li class="ms-OrgChart-listItem">
-            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-              
-
-<div class="ms-Persona
-">
-  <div class="ms-Persona-imageArea">
-      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-  </div>
-  <div class="ms-Persona-presence">
-  </div>
-  <div class="ms-Persona-details">
-      <div class="ms-Persona-primaryText">Marcel Groce</div>
-      <div class="ms-Persona-secondaryText">Delivery</div>
-  </div>
-</div>
-
-            </button>
-          </li>
-          <li class="ms-OrgChart-listItem">
-            <button class="ms-OrgChart-listItemBtn" tabindex="1">
-              
+2. Copy the HTML from the samples above into your page. For example:
 
-<div class="ms-Persona
-">
-  <div class="ms-Persona-imageArea">
-      <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-      <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-  </div>
-  <div class="ms-Persona-presence">
-  </div>
-  <div class="ms-Persona-details">
-      <div class="ms-Persona-primaryText">Jessica Fischer</div>
-      <div class="ms-Persona-secondaryText">Marketing</div>
-  </div>
-</div>
 
-            </button>
-          </li>
-      </ul>
-    </div>
-</div>
-    
-
    + ``` +
    +
    + +
    +
    +
    Manager
    + +
    +
    +
    Staff
    + +
    +
    + ``` 3. Replace the Persona components with your own. diff --git a/ghdocs/components/Overlay.md b/ghdocs/components/Overlay.md index 000d3443..4e8807fd 100644 --- a/ghdocs/components/Overlay.md +++ b/ghdocs/components/Overlay.md @@ -17,6 +17,7 @@ Partially obscures the page to create a modal experience and focus the user's at ## Using this component 1. Confirm that you have references to Fabric's CSS and JavaScript on your page: + ``` @@ -24,20 +25,21 @@ Partially obscures the page to create a modal experience and focus the user's at ``` + 2. Copy the HTML from one of the samples above into your page. For example: + ```
    ``` + 3. Add the following ` + ``` 3. Replace the sample HTML content (such as the content of `.ms-Button-label`) with your content. diff --git a/ghdocs/components/Panel.md b/ghdocs/components/Panel.md index 2c3e6778..bcf9e1f4 100644 --- a/ghdocs/components/Panel.md +++ b/ghdocs/components/Panel.md @@ -41,6 +41,7 @@ State | Applied to | Result ## Using this component 1. Confirm that you have references to Fabric's CSS and JavaScript on your page: + ``` @@ -48,63 +49,44 @@ State | Applied to | Result ``` + 2. Copy the HTML from the sample above into your page. For example: -
    -    
- <div class="ms-PanelDefaultExample ms-PanelExample">
-    
-    <button class="ms-Button 
-      
-      ">
-      <span class="ms-Button-label">Open Panel</span>
-    </button>    
-    <div class="ms-Panel ">
-        <button class="ms-Panel-closeButton ms-PanelAction-close">
-            <i class="ms-Panel-closeIcon ms-Icon ms-Icon--Cancel"></i>
-        </button>
-        <div class="ms-Panel-contentInner">
-            <p class="ms-Panel-headerText">Panel</p>
-            <div class="ms-Panel-content">
-                <span class="ms-font-m">Content goes here</span>
-            </div>
-        </div>
-    </div></div>
-    
-
    + ``` +
    + +
    + +
    +

    Panel

    +
    + Content goes here +
    +
    +
    +
    + ``` 3. Add the following ` + ``` 4. Verify that the component is working the same as in the sample above. 5. Replace the sample HTML content (such as the content of `.ms-Panel-content`) with your content. - - - \ No newline at end of file diff --git a/ghdocs/components/PeoplePicker.md b/ghdocs/components/PeoplePicker.md index f71bcfcf..871cc4a8 100644 --- a/ghdocs/components/PeoplePicker.md +++ b/ghdocs/components/PeoplePicker.md @@ -27,6 +27,7 @@ Presents the selected people in a list below the search field, rather than inlin ## Using this component 1. Confirm that you have references to Fabric's CSS and JavaScript on your page: + ``` @@ -34,129 +35,100 @@ Presents the selected people in a list below the search field, rather than inlin ``` + 2. Copy the HTML from one of the samples above into your page. For example: -
    -    
- 
-
-<div class="ms-PeoplePicker
-">
-  <div class="ms-PeoplePicker-searchBox">
-    
-    
-    <div class="ms-TextField  ms-TextField--textFieldUnderlined ">
-      
-      <input class="ms-TextField-field" type="text" value="" placeholder="Select or enter an option" >
-      
-      
-    </div>
-  </div>
-  <div class="ms-PeoplePicker-results
-  ">
-      <div class="ms-PeoplePicker-resultGroup">
-        <div class="ms-PeoplePicker-resultGroupTitle">
-          Contacts
-        </div>
-          <div class="ms-PeoplePicker-result " tabindex="1">
-            
-            
-            <div class="ms-Persona
-                  ms-Persona--sm
-              ">
-              <div class="ms-Persona-imageArea">
-                  <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-              </div>
-              <div class="ms-Persona-presence">
-              </div>
-              <div class="ms-Persona-details">
-                  <div class="ms-Persona-primaryText">Russel Miller</div>
-                  <div class="ms-Persona-secondaryText">Sales</div>
-              </div>
-            </div>
-              <button class="ms-PeoplePicker-resultAction"><i class="ms-Icon ms-Icon--Clear"></i></button>
-          </div>
-          <div class="ms-PeoplePicker-result " tabindex="1">
-            
-            
-            <div class="ms-Persona
-                  ms-Persona--sm
-              ">
-              <div class="ms-Persona-imageArea">
-                  <div class="ms-Persona-initials ms-Persona-initials--purple">DF</div>
-              </div>
-              <div class="ms-Persona-presence">
-              </div>
-              <div class="ms-Persona-details">
-                  <div class="ms-Persona-primaryText">Douglas Fielder</div>
-                  <div class="ms-Persona-secondaryText">Public Relations</div>
-              </div>
-            </div>
-              <button class="ms-PeoplePicker-resultAction"><i class="ms-Icon ms-Icon--Clear"></i></button>
-          </div>
-          <div class="ms-PeoplePicker-result " tabindex="1">
-            
-            
-            <div class="ms-Persona
-                  ms-Persona--sm
-              ">
-              <div class="ms-Persona-imageArea">
-                  <div class="ms-Persona-initials ms-Persona-initials--black">GS</div>
-              </div>
-              <div class="ms-Persona-presence">
-              </div>
-              <div class="ms-Persona-details">
-                  <div class="ms-Persona-primaryText">Grant Steel</div>
-                  <div class="ms-Persona-secondaryText">Sales</div>
-              </div>
-            </div>
-              <button class="ms-PeoplePicker-resultAction"><i class="ms-Icon ms-Icon--Clear"></i></button>
-          </div>
-          <div class="ms-PeoplePicker-result " tabindex="1">
-            
-            
-            <div class="ms-Persona
-                  ms-Persona--sm
-              ">
-              <div class="ms-Persona-imageArea">
-                  <div class="ms-Persona-initials ms-Persona-initials--green">HW</div>
-              </div>
-              <div class="ms-Persona-presence">
-              </div>
-              <div class="ms-Persona-details">
-                  <div class="ms-Persona-primaryText">Harvey Wallin</div>
-                  <div class="ms-Persona-secondaryText">Public Relations</div>
-              </div>
-            </div>
-              <button class="ms-PeoplePicker-resultAction"><i class="ms-Icon ms-Icon--Clear"></i></button>
-          </div>
-      </div>
-      <button class="ms-PeoplePicker-searchMore">
-        <div class="ms-PeoplePicker-searchMoreIcon">
-          <i class="ms-Icon ms-Icon--Search"></i>
-        </div>
-        <div class="ms-PeoplePicker-searchMoreText">
-          Search my groups
-        </div>
-      </button>
-  </div>
-</div>
-    
-
    + ``` +
    +
    +
    + +
    +
    +
    +
    +
    + Contacts +
    +
    +
    +
    +
    RM
    +
    +
    +
    +
    +
    Russel Miller
    +
    Sales
    +
    +
    + +
    +
    +
    +
    +
    DF
    +
    +
    +
    +
    +
    Douglas Fielder
    +
    Public Relations
    +
    +
    + +
    +
    +
    +
    +
    GS
    +
    +
    +
    +
    +
    Grant Steel
    +
    Sales
    +
    +
    + +
    +
    +
    +
    +
    HW
    +
    +
    +
    +
    +
    Harvey Wallin
    +
    Public Relations
    +
    +
    + +
    +
    + +
    +
    + ``` 3. Add the following ` + ``` 4. Verify that the component is working the same as in the sample above. 5. Replace the sample HTML content with your content. @@ -165,10 +137,3 @@ Presents the selected people in a list below the search field, rather than inlin This component uses Persona and PersonaCard to display people and Label for the Members List variant. It also uses a Spinner when searching for results. - - diff --git a/ghdocs/components/Persona.md b/ghdocs/components/Persona.md index ebb9d7d9..67ded41e 100644 --- a/ghdocs/components/Persona.md +++ b/ghdocs/components/Persona.md @@ -38,53 +38,36 @@ A persona can have one of seven presences: available, away, blocked, busy, do no ``` + 2. Copy the HTML from one of the samples above into your page. For example: -
    -    
- 
-
-<div class="ms-Persona
-">
-  <div class="ms-Persona-imageArea">
-      <img class="ms-Persona-image" src="Persona.Person2.png">
-  </div>
-  <div class="ms-Persona-presence">
-      <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
-  </div>
-  <div class="ms-Persona-details">
-      <div class="ms-Persona-primaryText">Alton Lafferty</div>
-      <div class="ms-Persona-secondaryText">Accountant</div>
-  </div>
-</div>
-
-    
-
    + ``` +
    +
    + +
    +
    + +
    +
    +
    Alton Lafferty
    +
    Accountant
    +
    +
    + ``` 3. Add the following ` + ``` 4. Replace the sample HTML content (such as the name within `.ms-Persona-primaryText`) with your content. ## Dependencies This component has no dependencies. - - - - diff --git a/ghdocs/components/PersonaCard.md b/ghdocs/components/PersonaCard.md index c2cb2303..e63f1154 100644 --- a/ghdocs/components/PersonaCard.md +++ b/ghdocs/components/PersonaCard.md @@ -11,6 +11,7 @@ The visualization of details of an individual including Skype contact details, e ## Using this component 1. Confirm that you have references to Fabric's CSS and JavaScript on your page: + ``` @@ -18,255 +19,208 @@ The visualization of details of an individual including Skype contact details, e ``` + 2. Copy the HTML from one of the samples above into your page. For example: -
    -    
- 
-<div class="ms-PersonaCard ">
-  <div class="ms-PersonaCard-persona">
-    
-    
-    <div class="ms-Persona
-          ms-Persona--lg
-      ">
-      <div class="ms-Persona-imageArea">
-          <div class="ms-Persona-initials ms-Persona-initials--blue">AL</div>
-          <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-      </div>
-      <div class="ms-Persona-presence">
-          <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
-      </div>
-      <div class="ms-Persona-details">
-          <div class="ms-Persona-primaryText">Alton Lafferty</div>
-          <div class="ms-Persona-secondaryText">Accountant</div>
-          <div class="ms-Persona-tertiaryText">In a meeting</div>
-          <div class="ms-Persona-optionalText">Available at 4:00pm</div>
-      </div>
-    </div>
-  </div>
-  <ul class="ms-PersonaCard-actions">
-    <li data-action-id="chat" class="ms-PersonaCard-action" tabindex="1"><i class="ms-Icon ms-Icon--Chat"></i></li>
-    <li data-action-id="phone" class="ms-PersonaCard-action is-active" tabindex="2"><i class="ms-Icon ms-Icon--Phone"></i></li>
-    <li data-action-id="video" class="ms-PersonaCard-action" tabindex="3"><i class="ms-Icon ms-Icon--Video"></i></li>
-    <li data-action-id="mail" class="ms-PersonaCard-action" tabindex="4"><i class="ms-Icon ms-Icon--Mail"></i></li>
-    <li class="ms-PersonaCard-overflow" alt="View profile in Delve" title="View profile in Delve" >View profile</li>
-    <li data-action-id="org" class="ms-PersonaCard-action ms-PersonaCard-orgChart" tabindex="5"><i class="ms-Icon ms-Icon--Org"></i></li>
-  </ul>
-  <div class="ms-PersonaCard-actionDetailBox">
-    <div data-detail-id="mail" class="ms-PersonaCard-details">
-      <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">alton.lafferty@outlook.com</a></div>
-      <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> <a class="ms-Link" href="mailto:alton.lafferty@outlook.com">altonlafferty@contoso.com</a></div>
-    </div>
-    <div data-detail-id="chat" class="ms-PersonaCard-details">
-      <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Lync:</span> <a class="ms-Link" href="#">Start Lync call</a></div>
-    </div>
-    <div data-detail-id="phone" class="ms-PersonaCard-details">
-      <div class="ms-PersonaCard-detailExpander"></div>
-      <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Details</div>
-      <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Personal:</span> 555.206.2443</div>
-      <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Work:</span> 555.929.8240</div>
-    </div>
-    <div data-detail-id="video" class="ms-PersonaCard-details">
-      <div class="ms-PersonaCard-detailLine"><span class="ms-PersonaCard-detailLabel">Skype:</span> <a class="ms-Link" href="#">Start Skype call</a></div>
-    </div>
-      
-    <div data-detail-id="org" class="ms-PersonaCard-details">
-      
-      
-      <div class="ms-OrgChart ">
-          <div class="ms-OrgChart-group">
-            
-            <ul class="ms-OrgChart-list">
-                <li class="ms-OrgChart-listItem">
-                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                    
-      
-      <div class="ms-Persona
-      ">
-        <div class="ms-Persona-imageArea">
-            <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-            <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-        </div>
-        <div class="ms-Persona-presence">
-            <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
-        </div>
-        <div class="ms-Persona-details">
-            <div class="ms-Persona-primaryText">Russel Miller</div>
-            <div class="ms-Persona-secondaryText">Sales</div>
-        </div>
-      </div>
-      
-                  </button>
-                </li>
-                <li class="ms-OrgChart-listItem">
-                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                    
-      
-      <div class="ms-Persona
-      ">
-        <div class="ms-Persona-imageArea">
-            <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-            <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-        </div>
-        <div class="ms-Persona-presence">
-            <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
-        </div>
-        <div class="ms-Persona-details">
-            <div class="ms-Persona-primaryText">Douglas Fielder</div>
-            <div class="ms-Persona-secondaryText">Public Relations</div>
-        </div>
-      </div>
-      
-                  </button>
-                </li>
-            </ul>
-          </div>
-          <div class="ms-OrgChart-group">
-            <div class="ms-OrgChart-groupTitle">Manager</div>
-            <ul class="ms-OrgChart-list">
-                <li class="ms-OrgChart-listItem">
-                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                    
-      
-      <div class="ms-Persona
-      ">
-        <div class="ms-Persona-imageArea">
-            <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-            <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-        </div>
-        <div class="ms-Persona-presence">
-            <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
-        </div>
-        <div class="ms-Persona-details">
-            <div class="ms-Persona-primaryText">Grant Steel</div>
-            <div class="ms-Persona-secondaryText">Sales</div>
-        </div>
-      </div>
-      
-                  </button>
-                </li>
-            </ul>
-          </div>
-          <div class="ms-OrgChart-group">
-            <div class="ms-OrgChart-groupTitle">Staff</div>
-            <ul class="ms-OrgChart-list">
-                <li class="ms-OrgChart-listItem">
-                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                    
-      
-      <div class="ms-Persona
-      ">
-        <div class="ms-Persona-imageArea">
-            <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-            <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-        </div>
-        <div class="ms-Persona-presence">
-            <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
-        </div>
-        <div class="ms-Persona-details">
-            <div class="ms-Persona-primaryText">Harvey Wallin</div>
-            <div class="ms-Persona-secondaryText">Public Relations</div>
-        </div>
-      </div>
-      
-                  </button>
-                </li>
-                <li class="ms-OrgChart-listItem">
-                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                    
-      
-      <div class="ms-Persona
-      ">
-        <div class="ms-Persona-imageArea">
-            <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-            <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-        </div>
-        <div class="ms-Persona-presence">
-            <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
-        </div>
-        <div class="ms-Persona-details">
-            <div class="ms-Persona-primaryText">Marcus Lauer</div>
-            <div class="ms-Persona-secondaryText">Technical Support</div>
-        </div>
-      </div>
-      
-                  </button>
-                </li>
-                <li class="ms-OrgChart-listItem">
-                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                    
-      
-      <div class="ms-Persona
-      ">
-        <div class="ms-Persona-imageArea">
-            <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-            <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-        </div>
-        <div class="ms-Persona-presence">
-            <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
-        </div>
-        <div class="ms-Persona-details">
-            <div class="ms-Persona-primaryText">Marcel Groce</div>
-            <div class="ms-Persona-secondaryText">Delivery</div>
-        </div>
-      </div>
-      
-                  </button>
-                </li>
-                <li class="ms-OrgChart-listItem">
-                  <button class="ms-OrgChart-listItemBtn" tabindex="1">
-                    
-      
-      <div class="ms-Persona
-      ">
-        <div class="ms-Persona-imageArea">
-            <div class="ms-Persona-initials ms-Persona-initials--blue">RM</div>
-            <img class="ms-Persona-image" src="../persona/Persona.Person2.png">
-        </div>
-        <div class="ms-Persona-presence">
-            <i class="ms-Persona-presenceIcon ms-Icon ms-Icon--SkypeCheck"></i>
-        </div>
-        <div class="ms-Persona-details">
-            <div class="ms-Persona-primaryText">Jessica Fischer</div>
-            <div class="ms-Persona-secondaryText">Marketing</div>
-        </div>
-      </div>
-      
-                  </button>
-                </li>
-            </ul>
-          </div>
-      </div>    </div>
-  </div>
-</div>
+	```
+    
    
+        
    
+            
    
+                
    
+                    
    AL
    
+                    
+                
    
+                
    
+                    
+                
    
+                
    
+                    
    Alton Lafferty
    
+                    
    Accountant
    
+                    
    In a meeting
    
+                    
    Available at 4:00pm
    
+                
    
+            
    
+        
    
+        
      
+            
      • 
+            
      • 
+            
      • 
+            
      • 
+            
    • View profile
      • 
+            
      • 
+        
    
+        
    
+            
    
+                
    Personal:alton.lafferty@outlook.com
    
+                
    Work:altonlafferty@contoso.com
    
+            
    
+            
    
+                
    Lync:Start Lync call
    
+            
    
+            
    
+                
    
+                
    Details
    
+                
    Personal: 555.206.2443
    
+                
    Work: 555.929.8240
    
+            
    
+            
    
+                
    Skype:Start Skype call
    
+            
    
+            
    
+                
    
+                    
    
+                        
      
+                            
    • 
+                                
+                            
      • 
+                            
    • 
+                                
+                            
      • 
+                        
    
+                    
    
+                    
    
+                        
    Manager
    
+                        
      
+                            
    • 
+                                
+                            
      • 
+                        
    
+                    
    
+                    
    
+                        
    Staff
    
+                        
      
+                            
    • 
+                                
+                            
      • 
+                            
    • 
+                                
+                            
      • 
+                            
    • 
+                                
+                            
      • 
+                            
    • 
+                                
+                            
      • 
+                        
    
+                    
    
+                
    
+            
    
+        
    
+    
    
+	```
 
-        
-
    3. Add the following ` + ``` 4. Verify that the component is working the same as in the sample above. 5. Replace the sample HTML content with your content. ## Dependencies This component uses a Persona component to present the person, an OrgChart to present the persona's position within the organization, and a Link for navigation. - - - \ No newline at end of file diff --git a/ghdocs/components/Pivot.md b/ghdocs/components/Pivot.md index 03c7f05a..f012d8a3 100644 --- a/ghdocs/components/Pivot.md +++ b/ghdocs/components/Pivot.md @@ -29,6 +29,7 @@ A layout component that allows a user to switch between different sets of conten ## Using this component 1. Confirm that you have references to Fabric's CSS and JavaScript on your page: + ``` @@ -36,65 +37,50 @@ A layout component that allows a user to switch between different sets of conten ``` + 2. Copy the HTML from one of the samples above into your page. For example: -
    -    
- 
-
-<div class="ms-Pivot ">
-  <ul class="ms-Pivot-links">
-      <li class="ms-Pivot-link is-selected" data-content="files" title="My files" tabindex="1">
-        My files
-      </li>
-      <li class="ms-Pivot-link " data-content="recent" title="Recent" tabindex="1">
-        Recent
-      </li>
-      <li class="ms-Pivot-link " data-content="shared" title="Shared with me" tabindex="1">
-        Shared with me
-      </li>
-      <li class="ms-Pivot-link" tabindex="1">
-        <i class="ms-Pivot-ellipsis ms-Icon ms-Icon--More"></i>
-      </li>
-  </ul>
-    <div class="ms-Pivot-content" data-content="files">
-      This is the my files tab.
-    </div>
-    <div class="ms-Pivot-content" data-content="recent">
-      This is the recent tab.
-    </div>
-    <div class="ms-Pivot-content" data-content="shared">
-      This is the shared with me tab.
-    </div>
-</div>
-
-    
-
    + ``` +
    + +
    + This is the my files tab. +
    +
    + This is the recent tab. +
    +
    + This is the shared with me tab. +
    +
    + ``` 3. Add the following ` + ``` 4. Verify that the component is working the same as in the sample above. 5. Replace the sample HTML content (such as the name within `.ms-Pivot-link`) with your content. ## Dependencies This component has no dependency on other components. - - - diff --git a/ghdocs/components/ProgressIndicator.md b/ghdocs/components/ProgressIndicator.md index 6ed297d6..a2ecf66b 100644 --- a/ghdocs/components/ProgressIndicator.md +++ b/ghdocs/components/ProgressIndicator.md @@ -33,6 +33,7 @@ Error ## Using this component 1. Confirm that you have references to Fabric's CSS and JavaScript on your page: + ``` @@ -40,43 +41,36 @@ Error ``` -2. Copy the HTML from the sample above into your page. For example: - -
    -    
- 
 
-<div class="ms-ProgressIndicator">
-  <div class="ms-ProgressIndicator-itemName"></div>
-  <div class="ms-ProgressIndicator-itemProgress">
-    <div class="ms-ProgressIndicator-progressTrack"></div>
-    <div class="ms-ProgressIndicator-progressBar"></div>
-  </div>
-  <div class="ms-ProgressIndicator-itemDescription"></div>
-</div>
+2. Copy the HTML from the sample above into your page. For example:
 
-    
-
    + ``` +
    +
    +
    +
    +
    +
    +
    +
    + ``` 3. Add the following ` + ``` 4. Verify that the component is working the same as in the sample above. @@ -85,18 +79,3 @@ This component has no dependency on other components. ## Accessibility Focus styles are included for all of the actions included within a Progress Indicator. - - - - diff --git a/ghdocs/components/SearchBox.md b/ghdocs/components/SearchBox.md index 557d5648..46a21d1e 100644 --- a/ghdocs/components/SearchBox.md +++ b/ghdocs/components/SearchBox.md @@ -26,6 +26,7 @@ A special form field that allows for the input of search text. ## Using this component 1. Confirm that you have references to Fabric's CSS and JavaScript on your page: + ``` @@ -33,54 +34,38 @@ A special form field that allows for the input of search text. ``` + 2. Copy the HTML from one of the samples above into your page. For example: -
    -    
- 
-
-<div class="ms-SearchBox  ">
-  <input class="ms-SearchBox-field" type="text" value="">
-  <label class="ms-SearchBox-label">
-    <i class="ms-SearchBox-icon ms-Icon ms-Icon--Search"></i>
-    <span class="ms-SearchBox-text">Search</span>
-  </label>
-  
-<div class="ms-CommandButton ms-SearchBox-clear ms-CommandButton--noLabel  ">
-  <button class="ms-CommandButton-button"  >
-      <span class="ms-CommandButton-icon "><i class="ms-Icon ms-Icon--Clear"></i></span><span class="ms-CommandButton-label"></span>  </button>
-</div>
-  
-  
-</div>
-    
-
    + ``` + +
    + + +
    + +
    +
    + ``` 3. Add the following ` + ``` 4. Verify that the component is working the same as in the sample above. 5. Replace the sample HTML content (such as the name within `.ms-SearchBox-text`) with your content. ## Dependencies This component has a dependency on the Label component. - - - - diff --git a/ghdocs/components/Spinner.md b/ghdocs/components/Spinner.md index c8f73207..e496333e 100644 --- a/ghdocs/components/Spinner.md +++ b/ghdocs/components/Spinner.md @@ -29,6 +29,7 @@ Displays the progress of an operation when the percentage complete can not be de ## Using this component 1. Confirm that you have references to Fabric's CSS and JavaScript on your page: + ``` @@ -36,52 +37,31 @@ Displays the progress of an operation when the percentage complete can not be de ``` -2. Copy the HTML from the sample above into your page. For example: -
    -    
- 
-
-<div class="ms-Spinner ">
-</div>
+2. Copy the HTML from the sample above into your page. For example:
 
-    
-
    + ``` +
    + ``` 3. Add the following ` + ``` 4. Verify that the component is working the same as in the sample above. ## Dependencies This component has no dependency on other components. - - - \ No newline at end of file diff --git a/ghdocs/components/Table.md b/ghdocs/components/Table.md index 19f7a46b..8281a989 100644 --- a/ghdocs/components/Table.md +++ b/ghdocs/components/Table.md @@ -26,6 +26,7 @@ Rows can be selected. ## Using this component 1. Confirm that you have references to Fabric's CSS and JavaScript on your page: + ``` @@ -33,83 +34,76 @@ Rows can be selected. ``` + 2. Copy the HTML from the sample above into your page. For example: -
    -    
- 
-
-<table class="ms-Table ">
-  <thead>
-    <tr>
-        <th>Location</th>
-        <th>Modified</th>
-        <th>Type</th>
-        <th>File Name</th>
-    </tr>
-  </thead>
-  <tbody>
-      <tr>
-          <td>Location</td>
-          <td>Modified</td>
-          <td>Type</td>
-          <td>File Name</td>
-      </tr>
-      <tr>
-          <td>Location</td>
-          <td>Modified</td>
-          <td>Type</td>
-          <td>File Name</td>
-      </tr>
-      <tr>
-          <td>Location</td>
-          <td>Modified</td>
-          <td>Type</td>
-          <td>File Name</td>
-      </tr>
-      <tr>
-          <td>Location</td>
-          <td>Modified</td>
-          <td>Type</td>
-          <td>File Name</td>
-      </tr>
-      <tr>
-          <td>Location</td>
-          <td>Modified</td>
-          <td>Type</td>
-          <td>File Name</td>
-      </tr>
-      <tr>
-          <td>Location</td>
-          <td>Modified</td>
-          <td>Type</td>
-          <td>File Name</td>
-      </tr>
-      <tr>
-          <td>Location</td>
-          <td>Modified</td>
-          <td>Type</td>
-          <td>File Name</td>
-      </tr>
-  </tbody>
-</table>
-
-    
-
    + ``` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    LocationModifiedTypeFile Name
    LocationModifiedTypeFile Name
    LocationModifiedTypeFile Name
    LocationModifiedTypeFile Name
    LocationModifiedTypeFile Name
    LocationModifiedTypeFile Name
    LocationModifiedTypeFile Name
    LocationModifiedTypeFile Name
    + ``` 3. Add the following ` + ``` 4. Replace the content with your own data. You can add more rows or columns. @@ -117,10 +111,3 @@ Rows can be selected. This component has no dependency on other components. - - diff --git a/ghdocs/components/TextField.md b/ghdocs/components/TextField.md index 14d9b0f3..ebe7c827 100644 --- a/ghdocs/components/TextField.md +++ b/ghdocs/components/TextField.md @@ -37,6 +37,7 @@ Allows for the input of text. Can be a single line or multiple lines. Typically ## Using this component 1. Confirm that you have references to Fabric's CSS and JavaScript on your page: + ``` @@ -44,34 +45,26 @@ Allows for the input of text. Can be a single line or multiple lines. Typically ``` -2. Copy the HTML from one of the samples above into your page. For example: -
    -    
- 
-
-<div class="ms-TextField  ">
-  <label class="ms-Label">Name</label>
-  <input class="ms-TextField-field" type="text" value="" placeholder="" >
-  
-  
-</div>
+2. Copy the HTML from one of the samples above into your page. For example:
 
-    
-
    + ``` +
    + + +
    + ``` 3. Add the following ` + ``` 4. Update the `.ms-Label` to contain your label text. diff --git a/ghdocs/components/Toggle.md b/ghdocs/components/Toggle.md index c2536383..6d3afab7 100644 --- a/ghdocs/components/Toggle.md +++ b/ghdocs/components/Toggle.md @@ -23,6 +23,7 @@ Allows for turning on or off a setting. This is best suited for simple, singular ## Using this component 1. Confirm that you have references to Fabric's CSS and JavaScript on your page: + ``` @@ -30,46 +31,32 @@ Allows for turning on or off a setting. This is best suited for simple, singular ``` -2. Copy the HTML from one of the samples above into your page. For example: - -
    -    
- 
 
-<div class="ms-Toggle  ">
-  <span class="ms-Toggle-description">Let apps use my location</span>
-  <input type="checkbox" id="demo-toggle-3" class="ms-Toggle-input" />
-  <label for="demo-toggle-3" class="ms-Toggle-field"  tabindex="0" >
-    <span class="ms-Label ms-Label--off">Off</span>
-    <span class="ms-Label ms-Label--on">On</span>
-  </label>
-</div>
+2. Copy the HTML from one of the samples above into your page. For example:
 
-    
-
    + ``` +
    + Let apps use my location + + +
    + ``` 3. Add the following ` + ``` 4. Update the `.ms-Label` to contain your label text. ## Dependencies This component has a dependency on the Label component. - - - \ No newline at end of file diff --git a/src/components/MessageBanner/MessageBanner.ts b/src/components/MessageBanner/MessageBanner.ts index 989fde23..a528514e 100644 --- a/src/components/MessageBanner/MessageBanner.ts +++ b/src/components/MessageBanner/MessageBanner.ts @@ -53,10 +53,31 @@ namespace fabric { /** * shows banner if the banner is hidden */ - public showBanner(): void { + public show(): void { this._errorBanner.className = "ms-MessageBanner"; } + /** + * shows banner if the banner is hidden (deprecated) + */ + public showBanner(): void { + this.show(); + } + + /** + * hides banner when close button is clicked + */ + public hide(): void { + if (this._errorBanner.className.indexOf("hide") === -1) { + this._errorBanner.className += " hide"; + setTimeout(this._hideMessageBanner.bind(this), 500); + } + } + + private _hideMessageBanner(): void { + this._errorBanner.className = "ms-MessageBanner is-hidden"; + } + /** * sets styles on resize */ @@ -137,27 +158,13 @@ namespace fabric { } } - private _hideMessageBanner(): void { - this._errorBanner.className = "ms-MessageBanner is-hidden"; - } - - /** - * hides banner when close button is clicked - */ - private _hideBanner(): void { - if (this._errorBanner.className.indexOf("hide") === -1) { - this._errorBanner.className += " hide"; - setTimeout(this._hideMessageBanner.bind(this), 500); - } - } - /** * sets handlers for resize and button click events */ private _setListeners(): void { window.addEventListener("resize", this._onResize.bind(this), false); this._chevronButton.addEventListener("click", this._toggleExpansion.bind(this), false); - this._closeButton.addEventListener("click", this._hideBanner.bind(this), false); + this._closeButton.addEventListener("click", this.hide.bind(this), false); } } } // end fabric namespace diff --git a/src/documentation/pages/Components/MessageBanner/MessageBanner.js b/src/documentation/pages/Components/MessageBanner/MessageBanner.js index a384a0a3..897d050c 100644 --- a/src/documentation/pages/Components/MessageBanner/MessageBanner.js +++ b/src/documentation/pages/Components/MessageBanner/MessageBanner.js @@ -15,9 +15,14 @@ var data = { description: "Initializes component" }, { - name: "showBanner()", + name: "show()", parameters: [], description: "Shows MessageBanner if hidden" + }, + { + name: "showBanner()", + parameters: [], + description: "Shows MessageBanner if hidden, (deprecated) now use show()" } ], jsFile: "MessageBannerExampleJS"