Skip to content

Commit

Permalink
MessageBanner: Make both hide and show public (OfficeDev#322)
Browse files Browse the repository at this point in the history 
* hideBanner Private to Pubic method change and rename

_hidebanner is private method not public
As public should be hideBanner() not private _hideBanner()
Renamed methods as no other component included component name in their
public methods

* Moved hide code location under show() and removed overlooked underscore

* Remove white space and rename event handler

Removed white spaces as per gulp warnings.
Updated event handler method name in _setListners with new method name
'hide', was '_hide'

* Reinstated showBanner()

Reinstated showBanner() as deprecated method, as not to break existing
dep.
Calls new method show()

* Update HB/Docs & Test fix for GitHub .md pages showing inline <script> tags

Update HB/Docs & Test fix for GitHub .md files all showing <script> tags
at bottom of all .md pages

* Revert "Update HB/Docs & Test fix for GitHub .md pages showing inline <script> tags"

This reverts commit 3be0502.

* Update HB/Docs & Trial fix GitHub .md pages showing inline <script> tags

Update HB/Docs & Test fix for GitHub .md files showing <script> tags
at bottom of all .md pages on github site and also tested with two
online editors and they also show <script> as plain text

* .md file cleanup

Button , Callout, CheckBox, ChoiceFieldGroup, CommandBar,CommandButton,
ContextualMenu, Dialog & MessageBanner

* GHDocs Components Clean Up

Decoded html encoded strings back to tags.
FacePile.md still needs work

* GHDocs Compnents MarkDown Cleanup

Edited all components MD
Note: Dialog Component MD needing help to fix broken Button layout

* Fix Dialog MarkDown

Found format error
  • Loading branch information
@PRIMETSS @Jahnp
PRIMETSS authored and Jahnp committed Jun 7, 2017
1 parent 9e82ee5 commit 4eb45bf
Show file tree
Hide file tree
Showing 33 changed files with 2,072 additions and 2,696 deletions.
119 changes: 55 additions & 64 deletions ghdocs/components/Breadcrumb.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
```
<head>

```
<head>
<link rel="stylesheet" href="fabric.min.css">
<link rel="stylesheet" href="fabric.components.min.css">
<script src="fabric.min.js"></script>
</head>
```
```

2. Copy the HTML from the sample above into your page. For example:

<pre>
<code>
&lt;div class&#x3D;&quot;ms-Breadcrumb &quot;&gt;
&lt;div class&#x3D;&quot;ms-Breadcrumb-overflow&quot;&gt;
&lt;div class&#x3D;&quot;ms-Breadcrumb-overflowButton ms-Icon ms-Icon--More&quot; tabindex&#x3D;&quot;1&quot;&gt;&lt;/div&gt;
&lt;div class&#x3D;&quot;ms-Breadcrumb-overflowMenu&quot;&gt;
&lt;ul class&#x3D;&quot;ms-ContextualMenu is-open&quot;&gt;&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;ul class&#x3D;&quot;ms-Breadcrumb-list&quot;&gt;
&lt;li class&#x3D;&quot;ms-Breadcrumb-listItem&quot;&gt;
&lt;a class&#x3D;&quot;ms-Breadcrumb-itemLink&quot; tabindex&#x3D;&quot;0&quot;&gt;Files&lt;/a&gt;
&lt;i class&#x3D;&quot;ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight&quot;&gt;&lt;/i&gt;
&lt;/li&gt;
&lt;li class&#x3D;&quot;ms-Breadcrumb-listItem&quot;&gt;
&lt;a class&#x3D;&quot;ms-Breadcrumb-itemLink&quot; tabindex&#x3D;&quot;0&quot;&gt;Folder 1&lt;/a&gt;
&lt;i class&#x3D;&quot;ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight&quot;&gt;&lt;/i&gt;
&lt;/li&gt;
&lt;li class&#x3D;&quot;ms-Breadcrumb-listItem&quot;&gt;
&lt;a class&#x3D;&quot;ms-Breadcrumb-itemLink&quot; tabindex&#x3D;&quot;0&quot;&gt;Folder 2&lt;/a&gt;
&lt;i class&#x3D;&quot;ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight&quot;&gt;&lt;/i&gt;
&lt;/li&gt;
&lt;li class&#x3D;&quot;ms-Breadcrumb-listItem&quot;&gt;
&lt;a class&#x3D;&quot;ms-Breadcrumb-itemLink&quot; tabindex&#x3D;&quot;0&quot;&gt;Folder 3&lt;/a&gt;
&lt;i class&#x3D;&quot;ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight&quot;&gt;&lt;/i&gt;
&lt;/li&gt;
&lt;li class&#x3D;&quot;ms-Breadcrumb-listItem&quot;&gt;
&lt;a class&#x3D;&quot;ms-Breadcrumb-itemLink&quot; tabindex&#x3D;&quot;0&quot;&gt;Folder 4&lt;/a&gt;
&lt;i class&#x3D;&quot;ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight&quot;&gt;&lt;/i&gt;
&lt;/li&gt;
&lt;li class&#x3D;&quot;ms-Breadcrumb-listItem&quot;&gt;
&lt;a class&#x3D;&quot;ms-Breadcrumb-itemLink&quot; tabindex&#x3D;&quot;0&quot;&gt;Folder 5&lt;/a&gt;
&lt;i class&#x3D;&quot;ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight&quot;&gt;&lt;/i&gt;
&lt;/li&gt;
&lt;li class&#x3D;&quot;ms-Breadcrumb-listItem&quot;&gt;
&lt;a class&#x3D;&quot;ms-Breadcrumb-itemLink&quot; tabindex&#x3D;&quot;0&quot;&gt;Folder 6&lt;/a&gt;
&lt;i class&#x3D;&quot;ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight&quot;&gt;&lt;/i&gt;
&lt;/li&gt;
&lt;li class&#x3D;&quot;ms-Breadcrumb-listItem&quot;&gt;
&lt;a class&#x3D;&quot;ms-Breadcrumb-itemLink&quot; tabindex&#x3D;&quot;0&quot;&gt;Folder 7&lt;/a&gt;
&lt;i class&#x3D;&quot;ms-Breadcrumb-chevron ms-Icon ms-Icon--ChevronRight&quot;&gt;&lt;/i&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</code>
</pre>
```
<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 `<script>` tag to your page, below the references to Fabric's JS, to instantiate all Breadcrumb components on the page:

<pre>
<code>
&lt;script type&#x3D;&quot;text/javascript&quot;&gt;
var BreadcrumbHTML &#x3D; document.querySelector(&#x27;.ms-Breadcrumb&#x27;);
var Breadcrumb &#x3D; new fabric[&#x27;Breadcrumb&#x27;](BreadcrumbHTML);
&lt;/script&gt;
</code>
</pre>
```
<script type="text/javascript">
var BreadcrumbHTML = document.querySelector('.ms-Breadcrumb');
var Breadcrumb = new fabric['Breadcrumb'](BreadcrumbHTML);
</script>
```

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.
Expand All @@ -99,9 +96,3 @@ ContextualMenu

## Accessibility
The component's JavaScript will apply the correct `tabindex` values to ensure keyboard accessibility.
<script type="text/javascript">
var BreadcrumbHTML = document.querySelector('.ms-Breadcrumb');
var Breadcrumb = new fabric['Breadcrumb'](BreadcrumbHTML);
</script>
54 changes: 18 additions & 36 deletions ghdocs/components/Button.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,41 +57,34 @@ State | Applied to | Result

## Using this component
1. Confirm that you have references to Fabric's CSS on your page:
```
```
<head>
<link rel="stylesheet" href="fabric.min.css">
<link rel="stylesheet" href="fabric.components.min.css">
<script src="fabric.min.js"></script>
</head>
```
```

2. Copy the HTML from one of the samples above into your page. For example:

<pre>
<code>
&lt;button class&#x3D;&quot;ms-Button
&quot;&gt;
&lt;span class&#x3D;&quot;ms-Button-label&quot;&gt;Create Account&lt;/span&gt;
&lt;/button&gt;
</code>
</pre>
```
<button class="ms-Button">
<span class="ms-Button-label">Create Account</span>
</button>
```

3. Add the following `<script>` tag to your page, below the references to Fabric's JS, to instantiate all Button components on the page:

<pre>
<code>
&lt;script type&#x3D;&quot;text/javascript&quot;&gt;
var ButtonElements &#x3D; document.querySelectorAll(&quot;.ms-Button&quot;);
for(var i &#x3D; 0; i &lt; ButtonElements.length; i++) {
new fabric[&#x27;Button&#x27;](ButtonElements[i], function() {
// Insert Event Here
});
}
&lt;/script&gt;
</code>
</pre>
```
<script type="text/javascript">
var ButtonElements = document.querySelectorAll(".ms-Button");
for(var i = 0; i < ButtonElements.length; i++) {
new fabric['Button'](ButtonElements[i], function() {
// Insert Event Here
});
}
</script>
```

4. Replace the sample HTML content (such as the content of `.ms-Button-label`) with your content.

Expand All @@ -100,14 +93,3 @@ This component has no dependencies.

## Accessibility
Focus styles are included for keyboard navigation.
<script type="text/javascript">
var ButtonElements = document.querySelectorAll(".ms-Button");
for(var i = 0; i < ButtonElements.length; i++) {
new fabric['Button'](ButtonElements[i], function() {
// Insert Event Here
});
}
</script>
113 changes: 41 additions & 72 deletions ghdocs/components/Callout.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
```
```
<head>
<link rel="stylesheet" href="fabric.min.css">
<link rel="stylesheet" href="fabric.components.min.css">
<script src="fabric.min.js"></script>
</head>
```
```

2. Copy the HTML from one of the samples above into your page. For example:

<pre>
<code>
&lt;div class&#x3D;&quot;ms-CalloutExample&quot;&gt;
&lt;div class&#x3D;&quot;ms-Callout
is-hidden&quot;&gt;
&lt;div class&#x3D;&quot;ms-Callout-main&quot;&gt;
&lt;div class&#x3D;&quot;ms-Callout-header&quot;&gt;
&lt;p class&#x3D;&quot;ms-Callout-title&quot;&gt;All of your favorite people&lt;/p&gt;
&lt;/div&gt;
&lt;div class&#x3D;&quot;ms-Callout-inner&quot;&gt;
&lt;div class&#x3D;&quot;ms-Callout-content&quot;&gt;
&lt;p class&#x3D;&quot;ms-Callout-subText ms-Callout-subText-- &quot;&gt;Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.&lt;/p&gt;
&lt;/div&gt;
&lt;div class&#x3D;&quot;ms-Callout-actions&quot;&gt;
&lt;a class&#x3D;&quot;ms-Link &quot;
&gt;Learn more&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class&#x3D;&quot;ms-CalloutExample-button&quot;&gt;
&lt;button class&#x3D;&quot;ms-Button
&quot;&gt;
&lt;span class&#x3D;&quot;ms-Button-label&quot;&gt;Open Callout&lt;/span&gt;
&lt;/button&gt; &lt;/div&gt;
&lt;/div&gt;
</code>
</pre>
```
<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 `<script>` tag to your page, below the references to Fabric's JS, to instantiate a Callout component on the page:

<pre>
<code>
&lt;script type&#x3D;&quot;text/javascript&quot;&gt;
var CalloutExamples &#x3D; document.querySelectorAll(&quot;.ms-CalloutExample&quot;);
for(var i &#x3D; 0; i &lt; CalloutExamples.length; i++) {
var Example &#x3D; CalloutExamples[i];
var ExampleButtonElement &#x3D; Example.querySelector(&quot;.ms-CalloutExample-button .ms-Button&quot;);
var CalloutElement &#x3D; Example.querySelector(&quot;.ms-Callout&quot;);
new fabric[&#x27;Callout&#x27;](
CalloutElement,
ExampleButtonElement,
&quot;right&quot;
);
}
&lt;/script&gt;
</code>
</pre>
```
<script type="text/javascript">
var CalloutExamples = document.querySelectorAll(".ms-CalloutExample");
for (var i = 0; i < CalloutExamples.length; i++) {
var Example = CalloutExamples[i];
var ExampleButtonElement = Example.querySelector(".ms-CalloutExample-button .ms-Button");
var CalloutElement = Example.querySelector(".ms-Callout");
new fabric['Callout'](
CalloutElement,
ExampleButtonElement,
"right");
}
</script>
```

3. Replace the sample HTML content (such as the content of `.ms-Callout-title`) with your content.

Expand All @@ -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.

<script type="text/javascript">
var CalloutExamples = document.querySelectorAll(".ms-CalloutExample");
for(var i = 0; i < CalloutExamples.length; i++) {
var Example = CalloutExamples[i];
var ExampleButtonElement = Example.querySelector(".ms-CalloutExample-button .ms-Button");
var CalloutElement = Example.querySelector(".ms-Callout");
new fabric['Callout'](
CalloutElement,
ExampleButtonElement,
"right"
);
}
</script>
Loading

0 comments on commit 4eb45bf

Please sign in to comment.