Update all component live demos on the website for v11

[tay1orjones]

We need to update all the live demos on the website to contain the new stuff from v11 as well as the existing components that have changed. This is part of the parent workstream for usage docs.

Mob programming session scheduled for 3/22 🎉

Checklist

• Form spacing/stack

• Update Accordion live demo

• Update Breadcrumb live demo

• Update Button live demo #11267

• Update Checkbox live demo #11268

• Update Code snippet live demo #11369

• Update Content switcher live demo

• Update data table live demo #11283

• Update Date picker live demo

  • Update to v11 components
  • Update size name

• Update Dropdown/Multiselect/FilterableMultiSelect live demo #11284

• Update File uploader live demo

  • Update to v11 components
  • Add sizes
  • Multiple modifier not working
  • Bug: State (loading, success, uploaded) knobs not working

• Update Form live demo #11285

• Update Inline loading live demo

  • Update to v11 components

• Update Link live demo

  • Update to v11 components
  • Add sizes
  • Add "with icon" example

• Update List live demo

  • Update to v11 components

• Update Loading live demo

  • Update to v11 components

• Update Modal live demo

  • Update to v11 components
  • Bug: Buttons in all themes aren't rendering correct. Button group should be spanning the full width of the modal.

• Update v11 Notification live demo & storybook #10894

• Update Number input live demo

  • Update to v11 components
  • Add modifiers for error and warning states.
  • Add sizes

• Update Overflow menu live demo

  • Update to v11 components
  • Add sizes
  • Add flipped direction
  • Add menu direction

• Update Pagination live demo

  • Update to v11 components
  • Bug: Some visual bugs with rule divider not showing up around caret icon.
  • Bug: Disabled prop does not visually disabling everything.
  • Bug: Right caret icon is not the correct color in the dark themes.

• Progress Indicator live demo not working as expected carbon-website#2920

• Update Radio button live demo

  • Update to v11 components

• Update Search live demo

  • Update to v11 components
  • Update size names

• Update Select live demo

  • Update to v11 components
  • Add variants selector for Default and Inline variants. Inline should not be a knob as a modifier.
  • Add sizes
  • Add warning state as a modifier.

• Update Slider live demo

  • Update to v11 components

• Update Structured list live demo

  • Update to v11 components

• Update Tab live demo @aledavila

  • Update to v11 components
  • Update names of the tabs
  • Add "icon only" versions
  • Bug: Dark themes not rendering correctly

• Update Tag live demo

  • Update to v11 components
  • Add sizes
  • Bug: All the tags turn red when filter is selected

• Update Text input live demo

  • Update to v11 components

• Update Tile live demo

  • Update to v11 components

• Update Toggle live demo

  • Update to v11 components

• Update Tooltip live demo @dakahn

  • Update to v11 components
  • Add toggleTip variant (already has it's own page in the left nav)
  • [toggletip] create live demo for the toggletip component carbon-website#2622

• [popover] create live demo for the popover component carbon-website#2487

[dakahn]

actually pretty confused as to the correct way to add styles into a Gatsby page. Any pointers here would be super helpful
carbon-design-system/carbon-website#2804

[aagonzales]

I've noticed some bugs across demos as well.

By the variant switcher there is a line that shouldn't be there.

The theme color background also used to be indented so the gray 10 background wouldn't blend into the page like it is now. Not sure when this changed but can we add a border to the side here?