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
  • [x] #1334
  • [ ] Rework variables page to show all themes
• [ ] Components
  • [x] Alert #1656
  • [ ] Anchor #1206 (add this: https://github.com/iTwin/iTwinUI/issues/961#issuecomment-1954478799 )
  • [x] Avatar #963 #1667
  • [x] Badge #956
  • [x] Blockquote #1260
  • [x] Breadcrumbs #957
  • [x] Button #1158
  • [x] Button group #1162
  • [x] Carousel #1165 #1675
  • [x] Checkbox #1160
  • [x] Code #1766
  • [x] Color picker #1189
  • [x] ComboBox
  • [x] DatePicker #1326
  • [x] Dialog
  • [x] Dropdown menu #1207
  • [x] Expandable block #1184
  • [x] Fieldset #1168
  • [x] File upload #1552
  • [x] Footer #1490
  • [x] Header #1646
  • [x] Information panel #1721
  • [x] Input #1180
  • [x] Input group #1192
  • [x] Input with decorations #1539
  • [x] Kbd #1755
  • [x] List
  • [x] Non ideal state #1274
  • [x] NotificationMarker #1999
  • [x] Overlay
  • [ ] Progress indicator
  • [x] Radio #1164
  • [x] Radio tile #1179
  • [x] SearchBox
  • [x] Select #1241
  • [x] Side navigation #1240
  • [x] Slider #1059
  • [ ] SkipToContentLink
  • [x] Stepper #1161
  • [x] Surface #1219
  • [ ] Table
    • [ ] Document differences between getRowId and rowProps's id (https://github.com/iTwin/iTwinUI/issues/1647#issuecomment-1775837165)
    • [ ] 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)
  • [x] Tabs #1736
  • [x] Tag #1173
  • [x] Textarea #1178
  • [x] ThemeProvider #1745
  • [x] Tile #1538
  • [ ] Toast
  • [x] Toggle switch #1175
  • [x] Tooltip #1205, #1747
  • [x] TransferList #1546
  • [ ] Tree
  • [ ] Typography
• [ ] Utilities
  • [ ] Flex
  • [x] Input grid #1539
  • [x] LinkAction #1762
  • [x] Popover #1598
  • [x] Status Message
  • [x] Visually hidden
  • [ ] Divider
  • [ ] TruncateInMiddle

[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