v11: update size prop docs

[aagonzales]

Task

Refer to the audit to know where sizes are being used. Update any tables or content with the new size prop names. Follow the "edit this page on github" path that we used for updating color token. Beware, this task is a lot more hands on with content restructuring and not just about updating tokens. When the update has been made check the "Updated in V11" box in the audit notion doc.

• Update size prop names across existing website guidance.
• Add size section to components style tabs that have size variants in code but are missing in docs.
• Note any images that have incorrect size names in them

New size prop names

To migrate name correctly reference the size of the container height to match the name.

Name	Size
xs	24
sm	32
md	40
lg	48
xl	64
2xl	80

[laurenmrice]

Style tab
Size table audit

[aagonzales]

Style tabs

• In the Component / Style page under the Structure section, sizes should be it its own separate H3 table by themselves.
• Tables should be organized as follows: | Element | Size | Height (px / rem) |

To-do's:

• Replace Class column header with Element
• In a row, replace existing classname in code snippet to be plain element name, for example .bx--accordion__heading should now just be "Heading".
• Remove any Property columns
• Remove any Spacing token column

Remove property column example

• As-is
  

• To-be
  

No element column example

If a size table only has one type of element then you don't need to include the "Elements" Column. For example, Data Table has a specific "Row" section and therefor we don't need specify "Row" as the element in the table.

• As-is table:
  

• To-be table:
  

If sizes are currently in the main structure table example

• As-is:

• Remove the rows from the structure table
  

• To-be:

• Create a new separate table for sizes following the normal size format