Merge pull request #917 from intellihr/release/399

Release 399

Author: intellibot-access[bot]

docs/Language.md

@@ -0,0 +1,93 @@
+The following guidelines for writing copy are intended to create a consistent style and voice for the intelliHR product.
+
+## Language
+* **Keep text short and simple** to make text accessible to people of all backgrounds
+    * **Do**: This person doesn't have a job record
+    * **Don't**: This individual whose digital profile you are viewing does not appear to have a job record
+
+* **Use industry standard proper nouns** as feature names
+    * **Do**:  Private Notes
+    * **Don't**: Diary Notes
+
+* **Use a friendly tone and avoid niceties** to appear more conversational
+    * Toasts
+       * **Do**: All done. The job end date has been finalized.
+       * **Don't**: Job end date has successfully been finalized.
+       * **Do**: Exciting! Your new starter has been created.
+       * **Don't**: Person successfully created.
+       * **Do**: All set. John Wick's job record is ready to go.
+       * **Don't**: Job successfully created.
+       * **Do**: 8 forms have been scheduled. We'll automatically email the recipients when it's time.
+       * **Don't**: Successfully scheduled 8 forms.
+       * **Do**: Goal Template has been enabled.
+       * **Don't**: Goal Template has been enabled successfully.
+       * **Do**: Your changes have been saved.
+       * **Do**: Your changes to John Wick have been saved.
+       * **Don't**: Person successfully updated.
+       * **Do**: Thanks! Your answers have been saved.
+       * **Don't**: Task completed successfully.
+    * Empty State
+       * **Do**: Great! You've completed all of your outstanding tasks.
+       * **Don't**: No outstanding tasks.
+       * **Do**: We couldn't find any results matching your search terms.
+       * **Don't**: No results found.
+
+* **Use contractions** to sound more natural
+    * **Do**: You can't delete an active goal
+    * **Don't**: You cannot delete an active goal
+
+* **When to use 'My' and 'Your'**
+    * **You/Your**: When asking questions, giving instructions, or describing things to the user. Imagine writing from the perspective of a personal assistant.
+    * **Me/My**: When the user is interacting with the product on things like buttons- ONLY if absolutely necessary for clarity. _First person is not preferred._
+
+* **Dates**
+    * **Do**: Always respect the user's shorthand date format (DD/MM/YY, MM/DD/YY, YY/MM/DD, etc.)
+    * **Do**: Use `d MMM YYYY` (eg: 7 Jul 1977) in contexts where a more conversational date is required
+
+* **Use input agnostic language** where possible instead of input specific terminology
+    * **Do**: Pick your preferred email address
+    * **Don't**: Click on your preferred email address
+
+* **Action words should follow the following rules** 
+    * **Create/Delete**: When a user will be creating/deleting a system object like a Self-Service Action, Pulse, or Person
+    * **Add/Remove**: When a user is adding/removing additional data to a system object like a Phone Number to a Person, or Measurements to a Goal
+    * **Update**: When a user is editing a system object
+    * **Exceptions**: Occasionally there will be more context appropriate action words such as `Set Goal` and `Issue Task` which are preferred to the above. The appropriate destructive action word should still be used.
+    * **Page Titles and Submit Buttons**: For titles and buttons, use the following format `[Action Name] [System Object Name]`. For example: `Create Person`, `Add Phone Number`, `Set Goal`. On edit forms the submit button should always be `Save`
+    * **Don't**: Use the word `new` on creation actions. It is implied.
+
+## Capitalization and Punctuation
+* **Use Title Case for buttons, page titles, menu items, and labels** most words are capitalized
+    * **Example**: Expected Start/End Date
+    * **Example**: Set a Goal
+    * **Example**: Check-in Now
+    * **Example**: Create a Self-Service Action Tile
+    * **Do**: Capitalize all words except articles (“a,” “an,” “the”) and short prepositions (“to,” “on,” “at,” “by,” “from”) which should only be capitalized if they are the first or last word (eg: 'A Goal')
+
+* **Use Sentence Case for descriptions, help text, and anything conversational** most words are lowercase
+    * **Example**: You haven't completed any training in the last quarter.
+    * **Do**: Only capitalize the first word of the text element, as well as any proper nouns.
+
+* **Explain acronyms at the first instance on the page** when using acronyms
+    * **Example**: Performance Improvement Plan (PIP)
+
+* **Use serial (Oxford) commas** for clarity in lists
+    * **Do**: The Performance Improvement page features all of your skills, goals, and training records
+    * **Don't**: The Performance Improvement page features all of your skills, goals and training records
+
+* **Numbers should always be digits** to make text easier to scan
+    * **Do**: You have 27 outstanding tasks
+    * **Don't**: You have twenty-seven outstanding tasks
+    
+* **Plurals should always be context sensitive** 
+    * **Do**: You have 1 task remaining
+    * **Do**: You have 5 tasks remaining
+    * **Don't**: You have 1 task(s) remaining
+    * **Don't**: You have 5 task(s) remaining
+
+## References
+Many of these guidelines have been lifted from Google and Firefox's design standards.
+* https://designguidelines.withgoogle.com/conversation/style-guide/language.html
+* https://designguidelines.withgoogle.com/conversation/style-guide/capitalization-punctuation.html
+* https://design.firefox.com/photon/copy/capitalization.html
+* https://medium.com/@jsaito/is-this-my-interface-or-yours-b09a7a795256

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@intellihr/ui-components",
   "description": "A common React components library that is used in our company",
-  "version": "50.10.1",
+  "version": "50.10.2",
   "main": "./dist/",
   "types": "./types/index.d.ts",
   "files": [

src/domain/Inputs/SelectInput/style.scss

@@ -49,9 +49,18 @@
     .Select-control {
       border: 1px solid $n400;
       cursor: pointer;
+      height: 39px;
       margin-bottom: 1rem;
       transition: border-color .3s ease-in-out, background-color .3s ease;
 
+      .Select-multi-value-wrapper {
+        height: 37px;
+
+        .Select-value-label {
+          vertical-align: middle;
+        }
+      }
+
       &:hover {
         background-color: $n200;
       }
@@ -102,7 +111,7 @@
 
     &.Select--multi {
       .Select-control {
-        height: 40px;
+        height: 39px;
       }
 
       .Select-placeholder {

styleguide.config.js

@@ -60,6 +60,10 @@ module.exports = {
       name: 'Design Pattern',
       sectionDepth: 2,
       sections: [
+        {
+          name: 'Language and Copy',
+          content: 'docs/Language.md'
+        },
         {
           name: 'Content Page',
           content: 'docs/ContentPage.md'