Docs: Fluid dropdown (#3199)

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

Co-authored-by: tay1orjones <[email protected]>

* 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 <[email protected]>

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

Co-authored-by: Anna Gonzales <[email protected]>

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

Co-authored-by: Anna Gonzales <[email protected]>

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

Co-authored-by: Anna Gonzales <[email protected]>

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

Co-authored-by: Anna Gonzales <[email protected]>

* 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 <[email protected]>

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

Co-authored-by: Anna Gonzales <[email protected]>

* 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 <[email protected]>
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 <[email protected]>

* 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 <[email protected]>

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

Co-authored-by: Lauren Rice <[email protected]>

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

Co-authored-by: Lauren Rice <[email protected]>

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

Co-authored-by: Lauren Rice <[email protected]>

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

Co-authored-by: Lauren Rice <[email protected]>

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

Co-authored-by: Lauren Rice <[email protected]>

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

Co-authored-by: Lauren Rice <[email protected]>

* chore: output of yarn format

Co-authored-by: Lauren Rice <[email protected]>
Co-authored-by: Taylor Jones <[email protected]>

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

* Compressed Images (#3162)

Co-authored-by: kodiakhq <[email protected]>
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 <[email protected]>

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

Co-authored-by: Anna Gonzales <[email protected]>

* 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 <[email protected]>
Co-authored-by: Taylor Jones <[email protected]>
Co-authored-by: Taylor Jones <[email protected]>
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 <[email protected]>

* 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 <[email protected]>

* Compressed Images (#3184)

Co-authored-by: kodiakhq <[email protected]>

* 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 <[email protected]>

Co-authored-by: Anna Gonzales <[email protected]>

* 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 <[email protected]>
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 <[email protected]>

* 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 <[email protected]>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* docs(fluid): dropdown

* 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 <[email protected]>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

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

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

* Add-style-tab-updates

* update-structure-sections

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

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

* docs(Fluid inputs): text input and text area (#3158)

* docs(main): Fluid inputs

* Update src/pages/components/text-input/usage.mdx

Co-authored-by: Lauren Rice <[email protected]>

* Apply suggestions from design review

Co-authored-by: Lauren Rice <[email protected]>

* fixed-image-names

* update image

* update-placeholder-images

* Update usage.mdx

* remove italic headings

* manually fixed typos from lauren

Co-authored-by: Lauren Rice <[email protected]>

* docs(fluid): dropdown

* Add-style-tab-updates

* update-structure-sections

* Update style.mdx

* Apply suggestions from design review

Co-authored-by: Lauren Rice <[email protected]>

* update-images-for-review

Co-authored-by: carbon-automation[bot] <103539138+carbon-automation[bot]@users.noreply.github.com>
Co-authored-by: tay1orjones <[email protected]>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: Alison Joseph <[email protected]>
Co-authored-by: Lauren Rice <[email protected]>
Co-authored-by: Scott Strubberg <[email protected]>
Co-authored-by: Alessandra Davila <[email protected]>
Co-authored-by: Abhilipsa Sahoo <[email protected]>
Co-authored-by: Mike Gower <[email protected]>
Co-authored-by: Taylor Jones <[email protected]>
Co-authored-by: Francine Lucca <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: kodiakhq <[email protected]>
Co-authored-by: D.A. Kahn <[email protected]>
Co-authored-by: Eliad Moosavi <[email protected]>
Co-authored-by: abbeyhrt <[email protected]>
Co-authored-by: TJ Egan <[email protected]>
Co-authored-by: Michael Zuliani <[email protected]>
Co-authored-by: Jan Hassel <[email protected]>
Co-authored-by: metonym <[email protected]>
Co-authored-by: Jeff Chew <[email protected]>
Co-authored-by: aledavila <[email protected]>

src/pages/components/dropdown/style.mdx

@@ -33,7 +33,21 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 <Row>
 <Column colLg={12}>
 
-![Dropdown variant examples](images/dropdown-style-1.png)
+<Tabs>
+
+<Tab label="Fixed">
+
+![Fixed dropdown variant examples](images/dropdown-style-1.png)
+
+</Tab>
+
+<Tab label="Fluid">
+
+![Fluid dropdown variant examples](images/dropdown-style-1b.png)
+
+</Tab>
+
+</Tabs>
 
 </Column>
 </Row>
@@ -74,7 +88,21 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 <Row>
 <Column colLg={12}>
 
-![Dropdown and combo-box states](images/dropdown-style-2.png)
+<Tabs>
+
+<Tab label="Fixed">
+
+![Fixed dropdown and combo-box states](images/dropdown-style-2.png)
+
+</Tab>
+
+<Tab label="Fluid">
+
+![Fluid dropdown and combo-box states](images/dropdown-style-2b.png)
+
+</Tab>
+
+</Tabs>
 
 </Column>
 </Row>
@@ -84,7 +112,21 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 <Row>
 <Column colLg={12}>
 
-![Multi-select dropdown states](images/dropdown-style-3.png)
+<Tabs>
+
+<Tab label="Fixed">
+
+![Fixed multi-select dropdown states](images/dropdown-style-3.png)
+
+</Tab>
+
+<Tab label="Fluid">
+
+![Fluid multi-select dropdown states](images/dropdown-style-3b.png)
+
+</Tab>
+
+</Tabs>
 
 </Column>
 </Row>
@@ -142,10 +184,9 @@ exceed three words.
 ## Structure
 
 Dropdowns have two states, open and closed. An open and closed dropdown should
-be the same width and appropriately fit the design, layout, and content. The
-height of a closed dropdown stays consistent while the height of an open
-dropdown will vary based on the amount of options it has. Please note the
-various color differences for closed and open dropdowns.
+be the same width and appropriately fit the design, layout, and content.
+
+### Fixed dropdown
 
 | Element      | Property                    | px / rem | Spacing token |
 | ------------ | --------------------------- | -------- | ------------- |
@@ -159,33 +200,35 @@ various color differences for closed and open dropdowns.
 
 <div className="image--fixed">
 
-![Structure and spacing for a closed dropdown](images/dropdown-style-5.png)
+![Structure and spacing for a fixed dropdown](images/dropdown-style-5.png)
 
 </div>
 
-<Caption>Structure and spacing measurements for dropdown | px / rem</Caption>
-
-### Sizes
+<Caption>
+  Structure and spacing measurements for fixed dropdown | px / rem
+</Caption>
 
-The field height and menu option height should always match. These sizes options
-can be applied to all variants of dropdown.
+### Fluid dropdown
 
-| Element     | Size        | Height px / rem |
-| ----------- | ----------- | --------------- |
-| Field       | Small (sm)  | 32 / 2          |
-|             | Medium (md) | 40 / 2.5        |
-|             | Large (lg)  | 48 / 3          |
-| Menu option | Small (sm)  | 32 / 2          |
-|             | Medium (sm) | 40 / 2.5        |
-|             | Large (lg)  | 48 / 3          |
+| Element      | Property                    | px / rem   | Spacing token |
+| ------------ | --------------------------- | ---------- | ------------- |
+| Label        | margin-bottom               | 4 / 0.25   | `$spacing-02` |
+| Field        | padding-left                | 16 / 1     | `$spacing-05` |
+|              | padding-right               | 48 / 3     | `$spacing-09` |
+|              | border-bottom               | 1px        | –             |
+|              | margin-top, margin-bottom    | 13 / .8125 | –             |
+| Chevron icon | padding-right, padding-left | 16 / 1     | `$spacing-05` |
+| State icon   | padding-right, padding-left | 16 / 1     | `$spacing-05` |
 
 <div className="image--fixed">
 
-![Sizes for dropdown](images/dropdown-style-size.png)
+![Structure and spacing for a fluid dropdown](images/dropdown-style-5b.png)
 
 </div>
 
-<Caption>Dropdown sizes | px / rem</Caption>
+<Caption>
+  Structure and spacing measurements for a fluid dropdown | px / rem
+</Caption>
 
 ### Combo box
 
@@ -243,3 +286,50 @@ can be applied to all variants of dropdown.
 </div>
 
 <Caption>Structure and spacing for inline dropdown | px / rem</Caption>
+
+## Sizes
+
+### Fixed inputs
+
+The field height and menu option height should always match. These size options
+can be applied to all variants of dropdown.
+
+| Element   | Size        | Height px / rem |
+| --------- | ----------- | --------------- |
+| Field     | Small (sm)  | 32 / 2          |
+|           | Medium (md) | 40 / 2.5        |
+|           | Large (lg)  | 48 / 3          |
+| Menu item | Small (sm)  | 32 / 2          |
+|           | Medium (md) | 40 / 2.5        |
+|           | Large (lg)  | 48 / 3          |
+
+<Row>
+<Column colLg={12}>
+
+![Sizes for dropdown](images/dropdown-style-size-fixed.png)
+
+</Column>
+</Row>
+
+<Caption>Fixed dropdown sizes | px / rem</Caption>
+
+### Fluid inputs
+
+There is only one input height but there are two menu item sizes–default and
+condensed.
+
+| Element   | Size      | Height px / rem |
+| --------- | --------- | --------------- |
+| Field     | Default   | 64 / 4          |
+| Menu item | Default   | 64 / 4          |
+|           | Condensed | 40 / 2.5        |
+
+<Row>
+<Column colLg={8}>
+
+![Sizes for dropdown](images/dropdown-style-size-fluid.png)
+
+</Column>
+</Row>
+
+<Caption>Fluid dropdown sizes | px / rem</Caption>