chore(docs): correct use of its vs. it's and minor tweaks (bootstrap-vue#4664)

jacobmllr95 · tmorehouse · commit a64d5ccb7dcd · 2020-01-22T09:51:57.000-04:00
diff --git a/docs/markdown/reference/starter-templates/README.md b/docs/markdown/reference/starter-templates/README.md
@@ -111,7 +111,7 @@ created when you run `yarn build`.
 
 ### Importing individual components and directives
 
-As an example, you can import `<b-card>` (plus some of it's sub components) and `<b-table>` as
+As an example, you can import `<b-card>` (plus some of its sub components) and `<b-table>` as
 follows:
 
 ```js
diff --git a/docs/markdown/reference/validation/README.md b/docs/markdown/reference/validation/README.md
@@ -6,8 +6,8 @@
 ## Vuelidate
 
 [Vuelidate](https://github.com/vuelidate/vuelidate/) provides "Simple, lightweight model-based
-validation for Vue.js". Installation instructions and other documentation can be found at
-https://vuelidate.netlify.com/.
+validation for Vue.js". Installation instructions and other documentation can be found at their
+[website](https://vuelidate.js.org/).
 
 ### Vuelidate example
 
diff --git a/docs/pages/play.vue b/docs/pages/play.vue
@@ -340,7 +340,7 @@ const STORAGE_MAX_RETENTION = 7 * 24 * 60 * 60 * 1000 // 7 days
 
 // --- Helper functions ---
 
-// Remove a node from it's parent's children
+// Remove a node from its parent's children
 const removeNode = node => node && node.parentNode && node.parentNode.removeChild(node)
 
 // Indent a value by the given count
diff --git a/src/components/button/package.json b/src/components/button/package.json
@@ -13,7 +13,7 @@
         "props": [
           {
             "prop": "block",
-            "description": "Renders a 100% width button (expands to the width of it's parent container)"
+            "description": "Renders a 100% width button (expands to the width of its parent container)"
           },
           {
             "prop": "type",
diff --git a/src/components/card/README.md b/src/components/card/README.md
@@ -91,7 +91,7 @@ The title is rendered using the sub-component `<b-card-title>` while the Sub Tit
 the sub-component `<b-card-sub-title>`.
 
 With sub-component `<b-card-text>`, paragraph text can be added to the card. The last
-`<b-card-text>` in the card body will have it's bottom margin automatically removed (via CSS). Text
+`<b-card-text>` in the card body will have its bottom margin automatically removed (via CSS). Text
 within `<b-card-text>` can also be styled with the standard HTML tags.
 
 Links can be added and placed next to each other by adding the `.card-link` class to a `<a>` tag (or
@@ -119,7 +119,7 @@ Links can be added and placed next to each other by adding the `.card-link` clas
 
 The `<b-card>` prop `img-src` places an image on the top of the card, and use the `img-alt` prop to
 specify a string to be placed in the image's `alt` attribute. The image specified by the `img-src`
-prop will be responsive and will adjust it's width when the width of the card is changed.
+prop will be responsive and will adjust its width when the width of the card is changed.
 
 Alternatively you can manually place images inside `<b-card>` using the sub-component
 `<b-card-img>`. See the kitchen sink example below for usage.
diff --git a/src/components/dropdown/README.md b/src/components/dropdown/README.md
@@ -486,7 +486,7 @@ constrain/set the menu width.
 ```
 
 `<b-dropdown-text>` has the BootstrapVue custom class `.b-dropdown-text` applied to it which sets
-some basic styles which are suitable in most situations. By default it's width will be the same as
+some basic styles which are suitable in most situations. By default its width will be the same as
 the widest `<b-dropdown-item>` content. You may need to place additional styles or helper classes on
 the component.
 
@@ -547,7 +547,7 @@ regular form.
 ```
 
 `<b-dropdown-form>` has the BootstrapVue custom class `.b-dropdown-form` applied to it which sets
-some basic styles which are suitable in most situations. By default it's width will be the same as
+some basic styles which are suitable in most situations. By default its width will be the same as
 the widest `<b-dropdown-item>` content. You may need to place additional styles or helper classes on
 the component.
 
diff --git a/src/components/dropdown/_dropdown-form.scss b/src/components/dropdown/_dropdown-form.scss
@@ -17,7 +17,7 @@ $bv-dropdown-form-defined: false !default;
       // From https://github.com/twbs/bootstrap/blob/master/scss/_reboot.scss
       // mimicking button:focus styling.
       // We add important here as anything with tabindex `-1` and focused will not
-      // have a focus ring due to reboot.scss and it's `!important` override.
+      // have a focus ring due to reboot.scss and its `!important` override.
       // Needed for keyboard navigation high-lighting
       outline: 1px dotted !important;
       outline: 5px auto -webkit-focus-ring-color !important;
diff --git a/src/components/dropdown/package.json b/src/components/dropdown/package.json
@@ -70,7 +70,7 @@
           {
             "prop": "block",
             "version": "2.1.0",
-            "description": "Renders a 100% width toggle button (expands to the width of it's parent container)"
+            "description": "Renders a 100% width toggle button (expands to the width of its parent container)"
           },
           {
             "prop": "noCaret",
diff --git a/src/components/form-input/README.md b/src/components/form-input/README.md
@@ -84,7 +84,7 @@ rendered and a console warning will be issued.
   separate inputs.
 - `date` and `time` inputs are native browser types, and are not a custom date/time picker.
 - For date and time style inputs, where supported, the displayed value in the GUI may be different
-  than what is returned by it's value (i.e. ordering of year-month-date).
+  than what is returned by its value (i.e. ordering of year-month-date).
 - Regardless of input type, the value is **always** returned as a string representation.
 - `v-model.lazy` is not supported by `<b-form-input>` (nor any custom Vue component). Use the `lazy`
   prop instead.
diff --git a/src/components/form-input/_form-input.scss b/src/components/form-input/_form-input.scss
@@ -97,7 +97,7 @@ input[type="color"].form-control:disabled {
     @include transition($input-transition);
     // Bootstrap v4.3.2 has deprecated this mixin
     // @include form-control-focus();
-    // So we manually add it's content here
+    // So we manually add its content here
     &:focus {
       color: $input-focus-color; // only needed for fallback to text input
       background-color: $input-focus-bg;
diff --git a/src/components/form-select/README.md b/src/components/form-select/README.md
@@ -403,7 +403,7 @@ Note that not all mobile browsers will show the select as a list-box.
 
 Enable multiple select mode by setting the prop `multiple`, and control how many rows are displayed
 in the multiple select list-box by setting `select-size` to the number of rows to display. The
-default is to let the browser use it's default (typically 4).
+default is to let the browser use its default (typically 4).
 
 ### Value in multiple mode
 
diff --git a/src/components/form-tags/README.md b/src/components/form-tags/README.md
@@ -241,7 +241,7 @@ not validated.
 
 The event `tag-state` will be emitted whenever new tags are entered into the new tag input element,
 tags that do not pass validation, or duplicate tags are detected. The event handler will receive
-three arrays as it's arguments:
+three arrays as its arguments:
 
 - `validTags` (tags that pass validation)
 - `invalidTags` (tags that do not pass validation)
diff --git a/src/components/form/README.md b/src/components/form/README.md
@@ -244,8 +244,8 @@ feedback helper, or set the `was-validated` class on a parent element (such as a
 Use the optional Boolean prop `tooltip` to change the display from a block to a static tooltip
 style. The feedback will typically appear below the form control. When this mode is enabled, it is
 important that the parent container have a `position: relative:` css style (or `position-relative`
-class). Note that tooltip style feedback may, since it's positioning is static, obscure other
-inputs, labels, etc.
+class). Note that tooltip style feedback may, since its positioning is static, obscure other inputs,
+labels, etc.
 
 **Note:** Some form controls, such as
 [`<b-form-radio>`](/docs/components/form-radio#contextual-states),
diff --git a/src/components/image/README.md b/src/components/image/README.md
@@ -34,7 +34,7 @@ the maximum native width of the image.
 <!-- b-img-fluid.vue -->
 ```
 
-To make a fluid image that will grow to fill the width of it's container, use the `fluid-grow` prop.
+To make a fluid image that will grow to fill the width of its container, use the `fluid-grow` prop.
 Note this may cause blurring on small bitmap images.
 
 ```html
diff --git a/src/components/image/package.json b/src/components/image/package.json
@@ -22,7 +22,7 @@
           },
           {
             "prop": "fluidGrow",
-            "description": "Similar to the 'fluid' prop, but allows the image to scale up past it's native width"
+            "description": "Similar to the 'fluid' prop, but allows the image to scale up past its native width"
           },
           {
             "prop": "thumbnail",
@@ -89,7 +89,7 @@
           },
           {
             "prop": "fluidGrow",
-            "description": "Similar to the 'fluid' prop, but allows the image to scale up past it's native width"
+            "description": "Similar to the 'fluid' prop, but allows the image to scale up past its native width"
           },
           {
             "prop": "thumbnail",
diff --git a/src/components/jumbotron/README.md b/src/components/jumbotron/README.md
@@ -74,7 +74,7 @@ breakpoints). To change this to a fluid container, set the `container-fluid` pro
 
 ## Component tag
 
-By default, `<b-jumbotron>` will render it's root element as a `div`. Change the element tag to any
+By default, `<b-jumbotron>` will render its root element as a `div`. Change the element tag to any
 other appropriate element by setting the `tag` prop to the desired element tag name.
 
 ## Variants
diff --git a/src/components/layout/README.md b/src/components/layout/README.md
@@ -71,9 +71,10 @@ like the
 ## Containers `<b-container>`
 
 Containers (`<b-container>`) are the most basic layout element in Bootstrap. Choose from a
-responsive, fixed-width container (meaning its max-width changes at each breakpoint) by default, or
-fluid-width (meaning it's 100% wide all the time) by setting 'fluid' prop, or responsive containers
-where the container is fluid up until a specific breakpoint (requires Bootstrap CSS `v4.4+`).
+responsive, fixed-width container (meaning its `max-width` changes at each breakpoint) by default,
+or fluid-width (meaning it's 100% wide all the time) by setting 'fluid' prop, or responsive
+containers where the container is fluid up until a specific breakpoint (requires Bootstrap CSS
+`v4.4+`).
 
 While containers can be nested, most layouts do not require a nested container.
 
diff --git a/src/components/link/link.js b/src/components/link/link.js
@@ -112,13 +112,13 @@ export const BLink = /*#__PURE__*/ Vue.extend({
         // Stop event from bubbling up
         evt.stopPropagation()
         // Kill the event loop attached to this specific `EventTarget`
-        // Needed to prevent `vue-router` for doing it's thing
+        // Needed to prevent `vue-router` for doing its thing
         evt.stopImmediatePropagation()
       } else {
         /* istanbul ignore next: difficult to test, but we know it works */
         if (isRouterLink && evt.currentTarget.__vue__) {
           // Router links do not emit instance `click` events, so we
-          // add in an $emit('click', evt) on it's vue instance
+          // add in an `$emit('click', evt)` on its Vue instance
           evt.currentTarget.__vue__.$emit('click', evt)
         }
         // Call the suppliedHandler(s), if any provided
@@ -127,7 +127,7 @@ export const BLink = /*#__PURE__*/ Vue.extend({
           .forEach(handler => {
             handler(...arguments)
           })
-        // Emit the global $root click event
+        // Emit the global `$root` click event
         this.$root.$emit('clicked::link', evt)
       }
       // Stop scroll-to-top behavior or navigation on
diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
@@ -648,7 +648,7 @@ export const BModal = /*#__PURE__*/ Vue.extend({
     emitEvent(bvModalEvt) {
       const type = bvModalEvt.type
       // We emit on root first incase a global listener wants to cancel
-      // the event first before the instance emits it's event
+      // the event first before the instance emits its event
       this.emitOnRoot(`bv::modal::${type}`, bvModalEvt, bvModalEvt.componentId)
       this.$emit(type, bvModalEvt)
     },
diff --git a/src/components/modal/package.json b/src/components/modal/package.json
@@ -363,7 +363,7 @@
           },
           {
             "event": "bv::toggle::modal",
-            "description": "Toggle a modal's visibility given it's ID",
+            "description": "Toggle a modal's visibility given its ID",
             "args": [
               {
                 "arg": "modalId",
diff --git a/src/components/pagination-nav/README.md b/src/components/pagination-nav/README.md
@@ -456,7 +456,7 @@ The `label-page` will optionally accept a function to generate the aria-label. T
 passed a single argument which is the page number (indexed from 1 to number of pages).
 
 You can remove any label by setting the prop to an empty string (`''`), although this is not
-recommended unless the content of the button textually conveys it's purpose.
+recommended unless the content of the button textually conveys its purpose.
 
 ### Keyboard navigation
 
diff --git a/src/components/pagination/README.md b/src/components/pagination/README.md
@@ -338,7 +338,7 @@ The `label-page` will optionally accept a function to generate the aria-label. T
 passed a single argument which is the page number (indexed from 1 to number of pages).
 
 You can remove any label by setting the prop to an empty string (`''`), although this is not
-recommended unless the content of the button textually conveys it's purpose.
+recommended unless the content of the button textually conveys its purpose.
 
 ### Keyboard navigation support
 
diff --git a/src/components/progress/README.md b/src/components/progress/README.md
@@ -138,7 +138,7 @@ Precedence order for label methods (top-most has precedence):
 
 ## Width and height
 
-`<b-progress>` will always expand to the maximum with of it's parent container. To change the width,
+`<b-progress>` will always expand to the maximum with of its parent container. To change the width,
 place `<b-progress>` in a standard Bootstrap column or apply one of the standard Bootstrap width
 classes.
 
diff --git a/src/components/spinner/README.md b/src/components/spinner/README.md
@@ -55,7 +55,7 @@ If you don't fancy a `border` spinner, switch to the `grow` spinner by setting t
 
 Spinners use `currentColor` for their color, meaning it inherits the current font color. You can
 customize the color using the standard text color variants using the `variant` prop, or place
-classes or styles on the component to change it's color.
+classes or styles on the component to change its color.
 
 The `variant` prop translates the variant name to the Bootstrap v4 class `.text-{variant}`, so if
 you have custom defined text color variants, feel free to use them via the `variant` prop.
diff --git a/src/components/table/README.md b/src/components/table/README.md
@@ -1397,7 +1397,7 @@ If you would optionally like to display additional record information (such as c
 in the fields definition array), you can use the scoped slot `row-details`, in combination with the
 special item record Boolean property `_showDetails`.
 
-If the record has it's `_showDetails` property set to `true`, **and** a `row-details` scoped slot
+If the record has its `_showDetails` property set to `true`, **and** a `row-details` scoped slot
 exists, a new row will be shown just below the item, with the rendered contents of the `row-details`
 scoped slot.
 
@@ -1407,7 +1407,7 @@ scoped fields slot variable `detailsShowing` to determine the visibility of the
 
 **Note:** If manipulating the `_showDetails` property directly on the item data (i.e. not via the
 `toggleDetails` function reference), the `_showDetails` properly **must** exist in the items data
-for proper reactive detection of changes to it's value. Read more about
+for proper reactive detection of changes to its value. Read more about
 [Vue's reactivity limitations](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats).
 
 **Available `row-details` scoped variable properties:**
@@ -2260,12 +2260,12 @@ function myProvider(ctx) {
 
 ### Automated table busy state
 
-`<b-table>` automatically tracks/controls it's `busy` state when items provider functions are used,
+`<b-table>` automatically tracks/controls its `busy` state when items provider functions are used,
 however it also provides a `busy` prop that can be used either to override the inner `busy` state,
 or to monitor `<b-pagination>`'s current busy state in your application using the 2-way `.sync`
 modifier.
 
-**Note:** in order to allow `<b-table>` fully track it's `busy` state, the custom items provider
+**Note:** in order to allow `<b-table>` fully track its `busy` state, the custom items provider
 function should handle errors from data sources and return an empty array to `<b-table>`.
 
 **Example: usage of busy state**
diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js
@@ -471,7 +471,7 @@ export const BTabs = /*#__PURE__*/ Vue.extend({
     getButtonForTab(tab) {
       return (this.$refs.buttons || []).find(btn => btn.tab === tab)
     },
-    // Force a button to re-render it's content, given a <b-tab> instance
+    // Force a button to re-render its content, given a <b-tab> instance
     // Called by <b-tab> on `update()`
     updateButton(tab) {
       const button = this.getButtonForTab(tab)
@@ -516,7 +516,7 @@ export const BTabs = /*#__PURE__*/ Vue.extend({
       /* istanbul ignore next: should never/rarely happen */
       return false
     },
-    // Focus a tab button given it's <b-tab> instance
+    // Focus a tab button given its <b-tab> instance
     focusButton(tab) {
       // Wrap in `$nextTick()` to ensure DOM has completed rendering/updating before focusing
       this.$nextTick(() => {
diff --git a/src/components/toast/README.md b/src/components/toast/README.md
@@ -539,7 +539,7 @@ corners. We also set the `z-index` to a large value to ensure the alert appears
 content on the page (the default for `fixed-top` and `fixed-bottom` is `1030`). You may need to
 adjust the `z-index` for your specific layout.
 
-Since the alert markup remains in the DOM where you placed the `<b-alert>` component, it's tab
+Since the alert markup remains in the DOM where you placed the `<b-alert>` component, its tab
 sequence (for accessing the dismiss button) is easily accessible to screen reader and keyboard-only
 users.
 
diff --git a/src/components/tooltip/helpers/bv-tooltip.js b/src/components/tooltip/helpers/bv-tooltip.js
@@ -734,7 +734,7 @@ export const BVTooltip = /*#__PURE__*/ Vue.extend({
       if (!target || !this.$root || !this.isDropdown) {
         return
       }
-      // We can listen for dropdown shown events on it's instance
+      // We can listen for dropdown shown events on its instance
       // TODO:
       //   We could grab the ID from the dropdown, and listen for
       //   $root events for that particular dropdown id
diff --git a/src/components/tooltip/tooltip.spec.js b/src/components/tooltip/tooltip.spec.js
@@ -860,7 +860,7 @@ describe('b-tooltip', () => {
     expect(tip.tagName).toEqual('DIV')
     expect(tip.classList.contains('tooltip')).toBe(true)
 
-    // Tooltip should ignore when ID is not it's own
+    // Tooltip should ignore when ID is not its own
     wrapper.vm.$root.$emit('bv::hide::tooltip', 'wrong-id')
     await waitNT(wrapper.vm)
     await waitRAF()
diff --git a/src/directives/scrollspy/scrollspy.class.js b/src/directives/scrollspy/scrollspy.class.js
@@ -435,7 +435,7 @@ class ScrollSpy /* istanbul ignore next: not easy to test */ {
 
     links.forEach(link => {
       if (hasClass(link, ClassName.DROPDOWN_ITEM)) {
-        // This is a dropdown item, so find the .dropdown-toggle and set it's state
+        // This is a dropdown item, so find the .dropdown-toggle and set its state
         const dropdown = closest(Selector.DROPDOWN, link)
         if (dropdown) {
           this.setActiveState(select(Selector.DROPDOWN_TOGGLE, dropdown), true)
diff --git a/src/directives/toggle/toggle.js b/src/directives/toggle/toggle.js
@@ -64,7 +64,7 @@ const handleUpdate = (el, binding, vnode) => {
 
   // Ensure the collapse class and aria-* attributes persist
   // after element is updated (either by parent re-rendering
-  // or changes to this element or it's contents
+  // or changes to this element or its contents
   if (el[BV_TOGGLE_STATE] === true) {
     addClass(el, 'collapsed')
     setAttr(el, 'aria-expanded', 'true')
diff --git a/src/icons/README.md b/src/icons/README.md
@@ -345,7 +345,7 @@ Note that any [flipping](#flipping) is performed before the rotation is applied.
 ### Scale
 
 Scale the icon by any positive factor via the `scale` prop. Note this changes the icon's visual size
-but not it's physical font size. To illustrate this we have added a background color to the icons.
+but not its physical font size. To illustrate this we have added a background color to the icons.
 
 ```html
 <template>
diff --git a/src/mixins/dropdown.js b/src/mixins/dropdown.js
@@ -396,7 +396,7 @@ export default {
         }
         // When we are in a navbar (which has been responsively stacked), we
         // delay the dropdown's closing so that the next element has a chance
-        // to have it's click handler fired (in case it's position moves on
+        // to have its click handler fired (in case its position moves on
         // the screen do to a navbar menu above it collapsing)
         // https://github.com/bootstrap-vue/bootstrap-vue/issues/4113
         this.clearHideTimeout()
diff --git a/src/utils/dom.js b/src/utils/dom.js
diff --git a/src/utils/transporter.js b/src/utils/transporter.js

Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@`
`13`	`13`	`"props": [`
`14`	`14`	`{`
`15`	`15`	`"prop": "block",`
`16`		`- "description": "Renders a 100% width button (expands to the width of it's parent container)"`
	`16`	`+ "description": "Renders a 100% width button (expands to the width of its parent container)"`
`17`	`17`	`},`
`18`	`18`	`{`
`19`	`19`	`"prop": "type",`
Original file line number	Diff line number	Diff line change
`@@ -70,7 +70,7 @@`
`70`	`70`	`{`
`71`	`71`	`"prop": "block",`
`72`	`72`	`"version": "2.1.0",`
`73`		`- "description": "Renders a 100% width toggle button (expands to the width of it's parent container)"`
	`73`	`+ "description": "Renders a 100% width toggle button (expands to the width of its parent container)"`
`74`	`74`	`},`
`75`	`75`	`{`
`76`	`76`	`"prop": "noCaret",`