docs(date-picker): usage content updates (#1209)

* docs(date-picker): usage content updates * Update src/pages/components/date-picker/usage.mdx Co-authored-by: emyarod <[email protected]> * image-updates * anatomy-add-description * bold-labels * Update src/pages/components/date-picker/usage.mdx Co-authored-by: Jan Child <[email protected]> * Update src/pages/components/date-picker/usage.mdx Co-authored-by: Jan Child <[email protected]> * Update src/pages/components/date-picker/usage.mdx Co-authored-by: Jan Child <[email protected]> * Update src/pages/components/date-picker/usage.mdx Co-authored-by: Jan Child <[email protected]> * Update src/pages/components/date-picker/usage.mdx Co-authored-by: Jan Child <[email protected]> * Update src/pages/components/date-picker/usage.mdx Co-authored-by: Jan Child <[email protected]> * Update src/pages/components/date-picker/usage.mdx Co-authored-by: Jan Child <[email protected]> * Update src/pages/components/date-picker/usage.mdx Co-authored-by: Jan Child <[email protected]> * Update src/pages/components/date-picker/usage.mdx Co-authored-by: Jan Child <[email protected]> * Update src/pages/components/date-picker/usage.mdx Co-authored-by: Jan Child <[email protected]> * Update src/pages/components/date-picker/usage.mdx Co-authored-by: Jan Child <[email protected]> * Update src/pages/components/date-picker/usage.mdx Co-authored-by: Jan Child <[email protected]> * Update src/pages/components/date-picker/usage.mdx Co-authored-by: Jan Child <[email protected]> * Update src/pages/components/date-picker/usage.mdx Co-authored-by: Jan Child <[email protected]> * Update src/pages/components/date-picker/usage.mdx Co-authored-by: Jan Child <[email protected]> * Update src/pages/components/date-picker/usage.mdx Co-authored-by: Jan Child <[email protected]> * Update src/pages/components/date-picker/usage.mdx Co-authored-by: Jan Child <[email protected]> * Update src/pages/components/date-picker/usage.mdx Co-authored-by: Jan Child <[email protected]> * Apply suggestions from code review Co-authored-by: Jan Child <[email protected]> * Update src/pages/components/date-picker/usage.mdx Co-authored-by: Jan Child <[email protected]> * Update src/pages/components/date-picker/style.mdx Co-authored-by: emyarod <[email protected]> Co-authored-by: emyarod <[email protected]> Co-authored-by: Jan Child <[email protected]>
carbon-design-system · May 28, 2020 · 5922d24 · 5922d24 · vercel · May 28, 2020
1 parent 750c75c
commit 5922d24
Show file tree

Hide file tree

Showing 23 changed files with 362 additions and 60 deletions.
diff --git a/src/pages/components/date-picker/images/calendar-picker-min-max.png b/src/pages/components/date-picker/images/calendar-picker-min-max.png
diff --git a/src/pages/components/date-picker/images/date-format-placement.png b/src/pages/components/date-picker/images/date-format-placement.png
diff --git a/src/pages/components/date-picker/images/date-picker-alignment-01.png b/src/pages/components/date-picker/images/date-picker-alignment-01.png
diff --git a/src/pages/components/date-picker/images/date-picker-alignment-02.png b/src/pages/components/date-picker/images/date-picker-alignment-02.png
diff --git a/src/pages/components/date-picker/images/date-picker-anatomy.png b/src/pages/components/date-picker/images/date-picker-anatomy.png
diff --git a/src/pages/components/date-picker/images/date-picker-light-prop.png b/src/pages/components/date-picker/images/date-picker-light-prop.png
diff --git a/src/pages/components/date-picker/images/date-picker-style-2.png b/src/pages/components/date-picker/images/date-picker-style-2.png
diff --git a/src/pages/components/date-picker/images/date-picker-style-3.png b/src/pages/components/date-picker/images/date-picker-style-3.png
diff --git a/src/pages/components/date-picker/images/date-picker-style-4.png b/src/pages/components/date-picker/images/date-picker-style-4.png
diff --git a/src/pages/components/date-picker/images/date-picker-usage-1.png b/src/pages/components/date-picker/images/date-picker-usage-1.png
diff --git a/src/pages/components/date-picker/images/date-picker-usage-animation-1.gif b/src/pages/components/date-picker/images/date-picker-usage-animation-1.gif
diff --git a/src/pages/components/date-picker/images/date-picker-validation.png b/src/pages/components/date-picker/images/date-picker-validation.png
diff --git a/src/pages/components/date-picker/images/range-date-picker.png b/src/pages/components/date-picker/images/range-date-picker.png
diff --git a/src/pages/components/date-picker/images/simple-date-input-states.png b/src/pages/components/date-picker/images/simple-date-input-states.png
diff --git a/src/pages/components/date-picker/images/simple-date-input.png b/src/pages/components/date-picker/images/simple-date-input.png
diff --git a/src/pages/components/date-picker/images/simple-date-picker.png b/src/pages/components/date-picker/images/simple-date-picker.png
diff --git a/src/pages/components/date-picker/images/single-date-input.png b/src/pages/components/date-picker/images/single-date-input.png
diff --git a/src/pages/components/date-picker/images/single-date-picker.png b/src/pages/components/date-picker/images/single-date-picker.png
diff --git a/src/pages/components/date-picker/images/time-picker-anatomy.png b/src/pages/components/date-picker/images/time-picker-anatomy.png
diff --git a/src/pages/components/date-picker/images/time-picker-example.png b/src/pages/components/date-picker/images/time-picker-example.png
diff --git a/src/pages/components/date-picker/images/time-picker-type.png b/src/pages/components/date-picker/images/time-picker-type.png
diff --git a/src/pages/components/date-picker/style.mdx b/src/pages/components/date-picker/style.mdx
@@ -6,49 +6,32 @@ tabs: ["Usage", "Style", "Code", "Accessibility"]
 
 ## Color
 
-Inputs come in two different colors. The default input color is `$field-01` and is used on `$ui-background` and `$ui-02` page backgrounds. The `--light` version input color is `$field-02` and is used on `$ui-01` page backgrounds.
-
-If a `min date` is set on the calendar, then any text appearing before that date will be `$disabled-03`, otherwise all text should be `$text-01` (unless the number is selected or highlighted).
-
-| Class                                                    | Property         | Color token                                |
-| -------------------------------------------------------- | ---------------- | ------------------------------------------ |
-| `.bx--label`                                             | text color       | `$text-02`                                 |
-| `.bx--date-picker__input`                                | background-color | `$field-01`                                |
-| `.bx--date-picker__input` <br/> `.bx--text-input--light` | background-color | `$field-02`                                |
-| `.bx--date-picker__input`                                | border-bottom    | `$ui-04`                                   |
-| `.bx--date-picker__input`                                | text color       | `$text-01`                                 |
-| `:placeholder`                                           | text color       | `$text-03`                                 |
-| `.bx--date-picker__icon`                                 | color            | `$icon-01`                                 |
-| `calendar`                                               | background-color | `$ui-01`                                   |
-| `calendar`                                               | box-shadow       | `0 12px 24px 0` <br/> `rgba(0, 0, 0, 0.1)` |
-| `day`                                                    | text color       | `$text-01`                                 |
-| `day.selected`                                           | text color       | `$text-04`                                 |
-| `day.selected`                                           | background-color | `$interactive-01`                          |
-| `day.inRange`                                            | text color       | `$interactive-01`                          |
-| `day.endRange`                                           | border           | `$interactive-01`                          |
-| `day.nextMonthDay`                                       | text color       | `$text-02`                                 |
-| `.today`                                                 | background-color | `$interactive-01`                          |
+Inputs come in two different colors. The default input color is `$field-01` and is used on `$ui-background` and `$ui-02` page backgrounds. The `light` version input color is `$field-02` and is used on `$ui-01` page backgrounds.
 
-<div className="image--fixed">
+### Date input
 
-![Example of a date picker](images/date-picker-style-1.png)
+| Class                                                    | Property         | Color token |
+| -------------------------------------------------------- | ---------------- | ----------- |
+| `.bx--label`                                             | text color       | `$text-02`  |
+| `.bx--date-picker__input`                                | background-color | `$field-01` |
+| `.bx--date-picker__input` <br/> `.bx--text-input--light` | background-color | `$field-02` |
+| `.bx--date-picker__input`                                | border-bottom    | `$ui-04`    |
+| `.bx--date-picker__input`                                | text color       | `$text-01`  |
+| `:placeholder`                                           | text color       | `$text-03`  |
+| `.bx--date-picker__icon`                                 | color            | `$icon-01`  |
 
-</div>
+<br />
 
-<Caption>
-  Date picker example using both $field-02 (top) and $field-01 (bottom)
-</Caption>
+#### Interactive states
 
-### Interactive states
+<br />
 
 | Class                       | Property         | Color token    |
 | --------------------------- | ---------------- | -------------- |
 | `input:focus`               | border           | `$focus`       |
 | `input[data-invalid]`       | border-bottom    | `$support-01`  |
 | `.bx--form-requirement`     | text color       | `$support-01`  |
 | `input[data-invalid]:focus` | border-bottom    | `$support-01`  |
-| `day:focus`                 | border           | `$focus`       |
-| `day:hover`                 | background-color | `$hover-ui`    |
 | `.bx--label:disabled`       | text color       | `$disabled-02` |
 | `input:disabled`            | background-color | `$disabled-01` |
 | `input:disabled`            | text color       | `$disabled-02` |
@@ -60,19 +43,46 @@ If a `min date` is set on the calendar, then any text appearing before that date
 
 **Disabled:** Disabled state should have a `.not-allowed` cursor on hover.
 
+### Calendar menu
+
+| Class              | Property         | Color token                                |
+| ------------------ | ---------------- | ------------------------------------------ |
+| `calendar`         | background-color | `$ui-01`                                   |
+| `calendar`         | box-shadow       | `0 12px 24px 0` <br/> `rgba(0, 0, 0, 0.1)` |
+| `today`            | background-color | `$interactive-01`                          |
+| `day`              | text color       | `$text-01`                                 |
+| `day.selected`     | text color       | `$text-04`                                 |
+| `day.selected`     | background-color | `$interactive-01`                          |
+| `day.inRange`      | text color       | `$interactive-01`                          |
+| `day.endRange`     | border           | `$interactive-01`                          |
+| `day.nextMonthDay` | text color       | `$text-02`                                 |
+| `day:focus`        | border           | `$focus`                                   |
+| `day:hover`        | background-color | `$hover-ui`                                |
+| `day:disabled`     | text color       | `$text-02`                                 |
+
+<div className="image--fixed">
+
+![Example of a date picker](images/date-picker-style-1.png)
+
+</div>
+
+<Caption>
+  Date picker example using both $field-02 (top) and $field-01 (bottom)
+</Caption>
+
 ## Typography
 
 Labels should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized, and no more than three words.
 
-| Class                     | Font-size  | Font-weight   | Type token       |
-| ------------------------- | ---------- | ------------- | ---------------- |
-| `.bx--label`              | 14 / 0.875 | Regular / 400 | `$label-01`      |
-| `.bx--date-picker__input` | 14 / 0.875 | Regular / 400 | `$body-short-01` |
-| `.bx--form-requirement`   | 12 / 0.75  | Regular / 400 | `$label-01`      |
+| Class                     | Font-size  | Font-weight   | Type token  |
+| ------------------------- | ---------- | ------------- | ----------- |
+| `.bx--label`              | 14 / 0.875 | Regular / 400 | `$label-01` |
+| `.bx--date-picker__input` | 14 / 0.875 | Regular / 400 | `$code-02`  |
+| `.bx--form-requirement`   | 12 / 0.75  | Regular / 400 | `$label-01` |
 
 ## Structure
 
-### Simple date pickers
+### Simple date input
 
 | Class                     | Property                    | px / rem | Spacing token |
 | ------------------------- | --------------------------- | -------- | ------------- |
@@ -91,7 +101,7 @@ Labels should be set in sentence case, with only the first word in a phrase and
   Structure and spacing for simple and single date pickers | px / rem
 </Caption>
 
-### Single & range date pickers
+### Calendar date pickers
 
 | Class                        | Property                                 | px / rem | Spacing token |
 | ---------------------------- | ---------------------------------------- | -------- | ------------- |