Skip to content

Commit

Permalink
Fluid datepicker v2 (#3243)
Browse files Browse the repository at this point in the history
* docs: fluid-inputs

* removed-dup-section

* Add-text-input-style

* Create text-area-counter.png

* fixed-merge-conflict

* image-update

* Create text-input-states.png

* chore(release): update carbon deps (#3159)

Co-authored-by: tay1orjones <tay1orjones@users.noreply.github.com>

* feat(website): add accessibility link, update common js (#3155)

* feat(footer): add accessibility link

* fix(cookies): remove defer from script

* fix(common): move to post body components

* fix(common): remove defer

* fix(common): unique name

* fix(common): re-add defer

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* fix: mdx formatting inside component demo (#3160)

* docs: contained-list (#3145)

* add new mdx pages

* add images for usage tab

* fix content

* fix typos

* update content

* update headers

* Update src/pages/components/contained-list/usage.mdx

Co-authored-by: Anna Gonzales <agonz@us.ibm.com>

* Update src/pages/components/contained-list/usage.mdx

Co-authored-by: Anna Gonzales <agonz@us.ibm.com>

* Update src/pages/components/contained-list/usage.mdx

Co-authored-by: Anna Gonzales <agonz@us.ibm.com>

* Update src/pages/components/contained-list/usage.mdx

Co-authored-by: Anna Gonzales <agonz@us.ibm.com>

* Update src/pages/components/contained-list/usage.mdx

Co-authored-by: Anna Gonzales <agonz@us.ibm.com>

* add in inline notification

* fix images

* update side nav

* update images

* add Mike A feedback

* add code, accessibility, and style tab content

* add style tab images

* rename tab

* fix style images

* update style content

* update from Jan

* stlye image update

* update break

* Update src/pages/components/contained-list/style.mdx

Co-authored-by: Anna Gonzales <agonz@us.ibm.com>

* Update src/pages/components/contained-list/style.mdx

Co-authored-by: Anna Gonzales <agonz@us.ibm.com>

* update style and usage content

* update style and usage images

* update image bug

* insert break

* update structure content

* update style images

* update image

* update style tab

* style tab updates

Co-authored-by: Anna Gonzales <agonz@us.ibm.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* docs(grid): updated with API docs and example (#3136)

* docs(grid): updated with API docs and example

* docs(grid): better description

* docs(grid): progressive disclosure and helpers

* fix(typography): fix controls bug (#3130)

* fix(typography): fix controls bug

* chore(typsets): fix mobile typeset controls bug

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* Updated outdated links to storybook (#3164)

* Change tab text of typography from "Styling strategies" to "Style strategies" (#3163)

* fix: Change tab text from "Styling strategies" to "Style Strategies"

* fix: Change tab text from "Styling strategies" to "Style strategies"

* fix: Change tab text from "Styling strategies" to "Style strategies"

* fix: Change tab text from "Styling strategies" to "Style strategies"

* fix: Update links in page to "Style Strategies"

* fix: Update link in page to "Style strategies"

* fix: rectify verbiage

* fix: fix minor typo

* fix: fix typo

* fix: fix the link to "Style Strategies"

* fix: fix the link to "Style strategies"

* fix: create redirect to "Style strategies"

* Update gatsby-node.js

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>

* Update accessibility.mdx (#3143)

* Update accessibility.mdx

updated accessibility content

* Update accessibility.mdx

Made text updates for consistency

* uploading images for accessibility tab

* Update accessibility.mdx

updates to try to make the ask easier to understand

* Update header-accessibility-5.png

alter annotation example

* Added Lauren's images

* Update src/pages/components/UI-shell-header/accessibility.mdx

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

* Update src/pages/components/UI-shell-header/accessibility.mdx

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

* Update src/pages/components/UI-shell-header/accessibility.mdx

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

* Update src/pages/components/UI-shell-header/accessibility.mdx

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

* Update src/pages/components/UI-shell-header/accessibility.mdx

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

* Update src/pages/components/UI-shell-header/accessibility.mdx

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

* Update src/pages/components/UI-shell-header/accessibility.mdx

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

* chore: output of yarn format

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>
Co-authored-by: Taylor Jones <taylor.jones826@gmail.com>

* Correct verbiage on ibm commerce platform page (#3157)

* Compressed Images (#3162)

Co-authored-by: kodiakhq <kodiakhq@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* docs(Theme): update Theme docs with new guidance/usage (#2998)

* docs(Theme): update Theme docs with new guidance/usage

* Update src/pages/guidelines/themes/code.mdx

Co-authored-by: Anna Gonzales <agonz@us.ibm.com>

* Update src/pages/guidelines/themes/code.mdx

Co-authored-by: Anna Gonzales <agonz@us.ibm.com>

* docs(Themes): update docs with PR changes

* chore(number-input): run prettier

* docs(theme): update theme docs for v11

* docs(themes): update overview page for v11

* docs(theme): update overview page, remove tokens

* docs(theme): rephrase notification for elements packages

Co-authored-by: Anna Gonzales <agonz@us.ibm.com>
Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
Co-authored-by: Taylor Jones <taylor.jones826@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* docs(team): removed team page and removed photos from partners (#3170)

* fix(content): broken links (#3167)

* Update writing-style.mdx

* Update overview.mdx

* fix: mdx formatting

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* docs(meetups): added office hours) (#3165)

* update dataviz meeting time (#3177)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* chore(release): update carbon deps (#3178)

Co-authored-by: abbeyhrt <abbeyhrt@users.noreply.github.com>

* docs: figma v11 release content updates (#3176)

* updated design and migration .mdx files

* update content

* update images

* update figma .mdx

* update figme content

* update migration content

* fix typo

* remove break in figma.mdx

* format fix

* update images

* update component count

* typo update

* add figma migration section

* edit content

* update migration design guide

* add migration steps

* update migration docs

* update figma design kit page with links

* chore(format):  run yarn format

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: TJ Egan <tw15egan@gmail.com>

* Compressed Images (#3184)

Co-authored-by: kodiakhq <kodiakhq@users.noreply.github.com>

* docs(Accordion): match Accordion to ken to code (#3180)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* Ecosystem updates (#3150)

* Update the-carbon-ecosystem.mdx

* Ecosystem updates

Rename: AI Apps > Sustainability Software
Merge: Cloud and Cloud & Cognitive to Carbon for IBM Products

* More updates for IBM internal sites

Bring naming changes to Domain Guidance page.
Update some job titles and membership for team & partners.

* Sync with conflicting changes

 docs(team): removed team page and removed photos from partners #3170

* feat: add crosslink banner to carbon platform on homepage (#3185)

* feat: add crosslink banner to carbon platform on homepage

* fix: remove calc from sass

* Update Banner.module.scss

* Update Banner.module.scss

* Update Banner.js

* Update Banner.module.scss

* Update Banner.js

* Update src/components/Banner/Banner.js

Co-authored-by: Anna Gonzales <agonz@us.ibm.com>

Co-authored-by: Anna Gonzales <agonz@us.ibm.com>

* docs: add flush accordion content (#3168)

* update usage docs with flush modifier

* update usage images

* update: usage

* update: style

* fix break

* update mdx

* update mdx

* update image

* update style tab

* refine style images

* adjust style images in tab comp.

* update style structure

* update style image

* update color  image

* docs(progress-bar): add component live demo (#3182)

* docs(progress-bar): add component live demo

* chore(package): add @carbon/react resolution

* chore(package): update gatsby-theme-carbon

Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* docs(svelte): update resources and intro (#3183)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* Compressed Images (#3189)

Co-authored-by: kodiakhq <kodiakhq@users.noreply.github.com>

* docs(contact-us): minor updates to contact us page (#3186)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* chore(release): update carbon deps (#3194)

Co-authored-by: aledavila <aledavila@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* fix(tutorial): remove optimize sass from step 5 (#3192)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* refactor(tutorial): remove badging (#3197)

Co-authored-by: Alessandra Davila <adavila91@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* chore(release): update carbon deps (#3200)

Co-authored-by: aledavila <aledavila@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* fix(Icons): fix broken link (#3196)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* ci(actions): automatically open content sync issues on platform (#3193)

* ci(actions): automatically open content sync issues on platform

* Update .github/workflows/platform-content-sync.yml

Co-authored-by: Matt Rosno <matt.rosno@gmail.com>

* chore(formatting): output of yarn:format

Co-authored-by: Matt Rosno <matt.rosno@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* fix(switcher): fix app switcher bugs (#3208)

* Update accessibility.mdx (#3187)

* Update accessibility.mdx

first draft of new content. illustrations not yet added

* First image uploads

* Update accessibility.mdx

Minor text updates

* image paid attempt

attempt

* Update accessibility.mdx

attempt to remove the DoDont key word in mdx

* Update accessibility.mdx

Attempt to remove do don't styline on pair of images

* Update accessibility.mdx

attempt to incorporate captions

* addition image and text updates

* Update accessibility.mdx

change caption position. minor tweaks to style

* Update accessibility.mdx

Slight tweaks to wording

* chore(format): output of yarn:format

* Update accessibility.mdx

removing superfluous quotation mark

* Updated images and altered layout

Changes to images from Lauren. Also made side by side images into stacked images, as per her request.

* Update accessibility.mdx

Tried changing case on Row element

Co-authored-by: Taylor Jones <taylor.jones826@gmail.com>
Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

* Compressed Images (#3217)

Co-authored-by: kodiakhq <kodiakhq@users.noreply.github.com>

* ci(content-sync): provide token proper permissions (#3216)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* fix: hyphens to en dashes (#3215)

* chore: untrack git file

- fix vscode settings which shouldn't have been tracked

* docs: replace hyphens with en dashes

* Fix GitHub capitalization (#3225)

* fix: broken link on tag style tab (#3219)

* fix: broken link on tag style tab

Closes #3213 

- Fixes the code link under the Color section on the Tag > Style tab page to point to the correct URL.

* Update src/pages/components/tag/style.mdx

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* chore(release): update carbon deps (#3220)

Co-authored-by: tw15egan <tw15egan@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* fix: broken link ui shell right panel (#3218)

Closes #3214 

- Fixes the React resource card to point to the correct URL.

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* chore(format): fix format error (#3227)

* chore(release): update carbon deps (#3226)

Co-authored-by: tw15egan <tw15egan@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* content for accessibility tab (#3212)

* content for accessibility tab

images and content

* chore(formatting): output of yarn format

Co-authored-by: Taylor Jones <taylor.jones826@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* [docs] Update type token weights (#3221)

Parent issue: carbon-design-system/carbon#12174

Reverting some of the previously changed font weights.

Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* Compressed Images (#3230)

Co-authored-by: kodiakhq <kodiakhq@users.noreply.github.com>

* docs(FluidInputs): DatePicker

* pagination accessibility update (#3224)

* pagination accessibility update

Contains text and images for Pagination accessibility tab

* Update pagination-accessibility-1.png

updated image

* added and updated images

* Update accessibility.mdx

added code tags

* chore(format): fix format error

Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* accessibilty content for right panel (#3223)

* accessibilty content for right panel

added content and images for ui shell right panel

* Update accessibility.mdx

removed an orphan subheading from file copy

* update accessibility content and an image

* Update accessibility.mdx

adjusted some text for design annotation considerations

* chore(format): fix format error

Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* chore(release): update carbon deps (#3234)

Co-authored-by: tay1orjones <tay1orjones@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* fix(analytics): set SPA to false (#3242)

* fix(analytics): set SPA to false

* fix(analytics): update site id

* docs(fluid-input): datepicker v2

* added-missing-images

* Update date-picker-style-7.png

* Add files via upload

* Revert "merge"

* Merge branch 'fluid-inputs' into fluid-datepicker-v2

# Conflicts:
#	package.json
#	src/pages/components/text-input/images/text-area-counter.png
#	src/pages/components/text-input/images/text-input-usage-states-fixed.png
#	src/pages/components/text-input/images/text-input-usage-states-fluid.png
#	src/pages/components/text-input/usage.mdx
#	yarn.lock

* Revert "Merge branch 'fluid-inputs' into fluid-datepicker-v2"

* Apply suggestions from design review

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

* updated-images-add-time

* added-timePicker

* Update style.mdx

* design-review-pt2

* Update date-picker-style-4-fluid.png

* Update style.mdx

* Update package.json

Co-authored-by: carbon-automation[bot] <103539138+carbon-automation[bot]@users.noreply.github.com>
Co-authored-by: tay1orjones <tay1orjones@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>
Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>
Co-authored-by: Scott Strubberg <sstrubberg@protonmail.com>
Co-authored-by: Alessandra Davila <adavila91@gmail.com>
Co-authored-by: Abhilipsa Sahoo <abhilipsasahoo03@gmail.com>
Co-authored-by: Mike Gower <mikegower@gmail.com>
Co-authored-by: Taylor Jones <taylor.jones826@gmail.com>
Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: kodiakhq <kodiakhq@users.noreply.github.com>
Co-authored-by: D.A. Kahn <40970507+dakahn@users.noreply.github.com>
Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>
Co-authored-by: abbeyhrt <abbeyhrt@users.noreply.github.com>
Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: Michael Zuliani <zuliani@ca.ibm.com>
Co-authored-by: Jan Hassel <jan.hassel@ibm.com>
Co-authored-by: metonym <ericyl.us@gmail.com>
Co-authored-by: Jeff Chew <jeff.chew@gmail.com>
Co-authored-by: aledavila <aledavila@users.noreply.github.com>
Co-authored-by: Matt Rosno <matt.rosno@gmail.com>
Co-authored-by: Christian Oliff <christianoliff@pm.me>
Co-authored-by: tw15egan <tw15egan@users.noreply.github.com>
Co-authored-by: Alison Joseph <alisonejoseph@Gmail.com>
  • Loading branch information
1 parent 426464f commit 09d0193
Show file tree
Hide file tree
Showing 54 changed files with 293 additions and 177 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/pages/components/date-picker/images/date-picker-anatomy.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/pages/components/date-picker/images/date-picker-style-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/pages/components/date-picker/images/date-picker-style-4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/pages/components/date-picker/images/date-picker-style-7.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/pages/components/date-picker/images/time-picker-anatomy.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/pages/components/date-picker/images/time-picker-style-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
128 changes: 112 additions & 16 deletions src/pages/components/date-picker/style.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,21 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
<Row>
<Column colLg={8}>

![Date picker input states](images/date-picker-style-7.png)
<Tabs>

<Tab label="Fixed">

![Fixed date picker input colors](images/date-picker-style-7.png)

</Tab>

<Tab label="Fluid">

![Fluid date picker input colors](images/date-picker-style-7-fluid.png)

</Tab>

</Tabs>

</Column>
</Row>
Expand Down Expand Up @@ -56,7 +70,21 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
<Row>
<Column colLg={12}>

![Date picker input states](images/date-picker-style-6.png)
<Tabs>

<Tab label="Fixed">

![Fixed date picker input states](images/date-picker-style-6.png)

</Tab>

<Tab label="Fluid">

![Fluid date picker input states](images/date-picker-style-6-fluid.png)

</Tab>

</Tabs>

</Column>
</Row>
Expand Down Expand Up @@ -119,6 +147,8 @@ any proper nouns capitalized, and no more than three words.

### Date inputs

#### Fixed input

The widths of the date inputs may vary based on the grid and layout.

| Element | Property | px / rem | Spacing token |
Expand All @@ -136,23 +166,31 @@ The widths of the date inputs may vary based on the grid and layout.

</div>

<Caption>Structure and spacing for date picker inputs | px / rem</Caption>
<Caption>Structure and spacing for fixed date picker inputs | px / rem</Caption>

### Sizes
#### Fluid input

| Element | Size | Height px / rem |
| ------- | ----------- | --------------- |
| Field | Small (sm) | 32 / 2 |
| | Medium (md) | 40 / 2.5 |
| | Large (lg) | 48 / 3 |
The widths of the date inputs may vary based on the grid and layout.

| Element | Property | px / rem | Spacing token |
| ------------- | --------------------------- | ----------- | ------------- |
| Label | padding-bottom | 4 / 0.25 | `$spacing-02` |
| Field | height | 64 / 4 | `$spacing-10` |
| | padding-left, padding-right | 16 / 1 | `$spacing-05` |
| | padding-top, padding-bottom | 13 / 0.8125 ||
| | border-bottom | 1px ||
| Calendar icon | height, width | 16 / 1 ||
| | padding-left | 8 / 0.5 | `$spacing-03` |
| Focus | border | 2px ||
| Error | border | 2px ||

<div className="image--fixed">

![Sizes for simple and single date calendar sizes](images/date-picker-style-size.png)
![Structure for date picker inputs](images/date-picker-style-4-fluid.png)

</div>

<Caption>Sizes for simple and single date calendar sizes | px / rem</Caption>
<Caption>Structure and spacing for fluid date picker inputs | px / rem</Caption>

### Calendar menu

Expand Down Expand Up @@ -183,15 +221,19 @@ The widths of the date inputs may vary based on the grid and layout.

### Time picker

There are two types of time pickers; a 12-hour and 24-hour time picker. The
12-hour Time Picker is accompanied by a time period (am/pm) input, while the
24-hour clock is not. Refer to [select](/components/select/code) for inline
select styling.
The time picker is a combination of a
[text input](/components/text-input/style#structure) and
[select](/components/select/style#structure) component. Refer to each component
page for further details.

#### Fixed input

The widths of the time picker may vary based on the grid and layout.

| Element | Property | px / rem | Spacing token |
| ------- | --------------------------- | -------- | ------------- |
| Label | padding-bottom | 8 / 0.5 | `$spacing-03` |
| Field | height | 40 / 2.5 | - |
| Field | height | 40 / 2.5 | |
| | padding-right, padding-left | 16 / 1 | `$spacing-05` |
| Select | padding-right, padding-left | 16 / 1 | `$spacing-05` |

Expand All @@ -202,3 +244,57 @@ select styling.
</div>

<Caption>Structure and spacing for a time picker | px / rem</Caption>

#### Fluid input

The width of each component in the fluid time picker is a percentage of the
group. Time picker's total width will vary based on the grid and layout

| Element | Property | px / rem | Spacing token |
| --------------- | --------------------------- | ---------- | ------------- |
| Label | padding-bottom | 4 / 0.25 | `$spacing-02` |
| Field | height | 64 / 4 ||
| | padding-right, padding-left | 16 / 1 | `$spacing-05` |
| Divider | width | 1px ||
| Time input | width | 25% or 50% ||
| Clock select | width | 25% or 50% ||
| Timezone select | width | 50% ||

<div className="image--fixed">

![Structure for a time picker](images/time-picker-style-1-fluid-a.png)

</div>

<Caption>Structure and spacing for a time picker | px / rem</Caption>

<div className="image--fixed">

![Structure for a time picker](images/time-picker-style-1-fluid-b.png)

</div>

<Caption>
The width of each component in the fluid time picker is a percentage of the
group.
</Caption>

## Sizes

### Fixed inputs

| Element | Size | Height px / rem |
| ------- | ----------- | --------------- |
| Field | Small (sm) | 32 / 2 |
| | Medium (md) | 40 / 2.5 |
| | Large (lg) | 48 / 3 |

<div className="image--fixed">

![Sizes for simple and single date calendar sizes](images/date-picker-style-size.png)

</div>

<Caption>Sizes for simple and single date calendar sizes | px / rem</Caption>


Loading

0 comments on commit 09d0193

Please sign in to comment.