Website: Review documentation of each component

[FlyersPh9]

In prep for the new documentation site going live, we need to review the content that we have so far. Here is what we need to do:

• Review the text that was copied over from the internal documentation site.
  • Only document what a component is capable of doing now, remove any documentation on features that we do not yet support.
  • Some documentation mentions restrictions that iTwinUI does not enforce. Reword this from a restriction to a suggestion. Example: "A button can only have 20 characters" 👉 "We suggest a button only have 20 characters"
  • If a component page mentions another component, the first instance of that other component being mentioned should link to that page. Example: see tags link on line 20 of badges PR.
  • Remove any mention of visual composition as the design system handles this. Example of text that could be removed: "A button is 36px tall and has 4px rounded corners"
  • Consistent H2 sections. As of right now, I think we should aim for each page to have Appearance, Usage, & Props.
• Introduce more demos.
  • Each page should have a generic top of page demo.
  • Each section under Appearance Variants should have a demo.
  • Each section should be ordered:
    1. Title
    2. Paragraph(s)
    3. Demo
    4. Paragraph
    5. Demo
    6. etc
  • Demos should be named like exampleCodeCTA: Button.CTA.tsx, do not use generic names like exampleCode1: Button.1.tsx.

To do:

Some of the components which don't have more than one PR needs review.

• Variables
  • website: Update variables documentation & demos #1334
  • Rework variables page to show all themes
• Components
  • Alert updated alert docs. #1656
  • Anchor website: Update Anchor documentation #1206 (add this: Website: Review documentation of each component #961 (comment) )
  • Avatar website: Update avatar documentation & demos #963 updated avatar documentation #1667
  • Badge website: Update badges documentation & demos #956
  • Blockquote website: update blockquote documentation & demo #1260
  • Breadcrumbs website: Update breadcrumbs documentation & demos #957
  • Button website: Buttons documentation update #1158
  • Button group website: ButtonGroup #1162
  • Carousel doc(Carousel): Updated carousel website page #1165 updated carousel docs. #1675
  • Checkbox website: Update checkbox documentation & demos #1160
  • Code Improve Code documentation #1766
  • Color picker doc(ColorPicker): Updated documentation page #1189
  • ComboBox
  • DatePicker updated datepicker documentation #1326
  • Dialog
  • Dropdown menu website: Update Dropdown Menu documentation & demos  #1207
  • Expandable block website: Update Expandable Block documentation #1184
  • Fieldset website: Fieldset #1168
  • File upload updated File Upload documentation. #1552
  • Footer updated footer documentation. #1490
  • Header updated header documentation. #1646
  • Information panel Update Information Panel Docs #1721
  • Input website: Update input documentation & demos #1180
  • Input group website: Update input group documentation & demos #1192
  • Input with decorations Documentation: InputGrid and InputWithDecorations #1539
  • Kbd Improve Keyboard Keys docs. #1755
  • List
  • Non ideal state website: update non ideal state documentation & demos #1274
  • NotificationMarker NotificationMarker docs page #1999
  • Overlay
  • Progress indicator Updated documentation for Progress Indicators #2271
  • Radio website: Update radio documentation & demos #1164
  • Radio tile website: Update radio tiles documentation & demos #1179
  • SearchBox
  • Select website: update select documentation & demo #1241
  • Side navigation website: Update Side Navigation documentation & demos  #1240
  • Slider website: Update slider documentation & demos #1059
  • SkipToContentLink Created documentation for SkipToContentLink #2326
  • Stepper website: Update Stepper documenation #1161
  • Surface website: Update Surface documentation #1219
  • Table
    • Document differences between getRowId and rowProps's id (Table : Set row id #1647 (comment))
    • Possibly document how to do manual sorting using sortType (useSortBy docs) because a user once could not find info about this.
    • How to use initialState, especially to deselect certain columns in the ColumnManager (since a few users had questions about this)
  • Tabs improve tabs documentation #1736
  • Tag website: Tags #1173
  • Textarea website: Textarea #1178
  • ThemeProvider add docs for ThemeProvider #1745
  • Tile Documentation: Tile #1538
  • Toast Updated documentation for Toast component #2261
  • Toggle switch website: Update toggle switch documentation & demos #1175
  • Tooltip website: Update tooltip documentation & demos #1205, improve Tooltip docs #1747
  • TransferList removed TransferList.withlabel example and updated docs. #1546
  • Tree Updated documentation for Tree component #2298
  • Typography Updated documentation for Typography #2324
• Utilities
  • Flex - Updated documentation for Flex #2258
  • Input grid Documentation: InputGrid and InputWithDecorations #1539
  • LinkAction add LinkAction docs #1762
  • Popover add Popover docs #1598
  • Status Message
  • Visually hidden
  • Divider Added documentation for Divider component #2225
  • TruncateInMiddle Created documentation for MiddleTextTruncation #2329

[FlyersPh9]

Does it make sense to document MiddleTextTruncation?

[FlyersPh9]

Add divider component.

[FlyersPh9]

From our iTwinUI community meeting:

document noreferrer for anchors

@veekeys

[veekeys]

From our iTwinUI community meeting:

document noreferrer for anchors

@veekeys

https://cheatsheetseries.owasp.org/cheatsheets/HTML5_Security_Cheat_Sheet.html#tabnabbing