diff --git a/.changeset/eighty-islands-join.md b/.changeset/eighty-islands-join.md new file mode 100644 index 00000000000..91c30dd8549 --- /dev/null +++ b/.changeset/eighty-islands-join.md @@ -0,0 +1,7 @@ +--- +"@primer/react": minor +--- + +Allows consumers to disable the behavior where the AvatarStack expands to show each Avatar on hover. There are also changes that allow users to customize the size of the avatars - even responsively! + + diff --git a/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-dark-colorblind-linux.png b/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-dark-colorblind-linux.png new file mode 100644 index 00000000000..fb79dbe56dd Binary files /dev/null and b/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-dark-dimmed-linux.png b/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-dark-dimmed-linux.png new file mode 100644 index 00000000000..a8567486ace Binary files /dev/null and b/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-dark-high-contrast-linux.png b/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-dark-high-contrast-linux.png new file mode 100644 index 00000000000..b08427fd165 Binary files /dev/null and b/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-dark-linux.png b/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-dark-linux.png new file mode 100644 index 00000000000..1dd3405d9d0 Binary files /dev/null and b/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-dark-linux.png differ diff --git a/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-dark-tritanopia-linux.png b/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-dark-tritanopia-linux.png new file mode 100644 index 00000000000..fb79dbe56dd Binary files /dev/null and b/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-light-colorblind-linux.png b/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-light-colorblind-linux.png new file mode 100644 index 00000000000..5c52fab4596 Binary files /dev/null and b/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-light-high-contrast-linux.png b/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-light-high-contrast-linux.png new file mode 100644 index 00000000000..0fecba8638d Binary files /dev/null and b/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-light-linux.png b/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-light-linux.png new file mode 100644 index 00000000000..00fdb50105c Binary files /dev/null and b/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-light-linux.png differ diff --git a/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-light-tritanopia-linux.png b/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-light-tritanopia-linux.png new file mode 100644 index 00000000000..5c52fab4596 Binary files /dev/null and b/.playwright/snapshots/components/Avatar.test.ts-snapshots/Avatar-Size-Responsive-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-colorblind-linux.png new file mode 100644 index 00000000000..5a5362514a1 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-dimmed-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-dimmed-linux.png new file mode 100644 index 00000000000..e72196d75e9 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-high-contrast-linux.png new file mode 100644 index 00000000000..86cb2c96181 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-linux.png new file mode 100644 index 00000000000..30e8771c24e Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-tritanopia-linux.png new file mode 100644 index 00000000000..5a5362514a1 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-colorblind-linux.png new file mode 100644 index 00000000000..74be0889e81 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-high-contrast-linux.png new file mode 100644 index 00000000000..db51a5e51f5 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-linux.png new file mode 100644 index 00000000000..db51a5e51f5 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-tritanopia-linux.png new file mode 100644 index 00000000000..db51a5e51f5 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-Responsive-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-colorblind-linux.png new file mode 100644 index 00000000000..3a968b6abe3 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-dimmed-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-dimmed-linux.png new file mode 100644 index 00000000000..579165b5405 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-high-contrast-linux.png new file mode 100644 index 00000000000..7448af0475c Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-linux.png new file mode 100644 index 00000000000..6738e718503 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-tritanopia-linux.png new file mode 100644 index 00000000000..6738e718503 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-colorblind-linux.png new file mode 100644 index 00000000000..cfb1cb1c7b6 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-high-contrast-linux.png new file mode 100644 index 00000000000..cfb1cb1c7b6 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-linux.png new file mode 100644 index 00000000000..cfb1cb1c7b6 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-tritanopia-linux.png new file mode 100644 index 00000000000..cfb1cb1c7b6 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Children-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-colorblind-linux.png new file mode 100644 index 00000000000..ce4cd6344bb Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-dimmed-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-dimmed-linux.png new file mode 100644 index 00000000000..e0c5f8b0d76 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-high-contrast-linux.png new file mode 100644 index 00000000000..4f92ced28c1 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-linux.png new file mode 100644 index 00000000000..2a6eb0cdfd6 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-tritanopia-linux.png new file mode 100644 index 00000000000..2a6eb0cdfd6 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-colorblind-linux.png new file mode 100644 index 00000000000..bd9c8c55212 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-high-contrast-linux.png new file mode 100644 index 00000000000..28a30952955 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-linux.png new file mode 100644 index 00000000000..bd9c8c55212 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-tritanopia-linux.png new file mode 100644 index 00000000000..bd9c8c55212 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-Responsive-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-colorblind-linux.png new file mode 100644 index 00000000000..30e8771c24e Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-dimmed-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-dimmed-linux.png new file mode 100644 index 00000000000..a98ebb22493 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-high-contrast-linux.png new file mode 100644 index 00000000000..f711a7b793e Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-linux.png new file mode 100644 index 00000000000..5a5362514a1 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-tritanopia-linux.png new file mode 100644 index 00000000000..30e8771c24e Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-colorblind-linux.png new file mode 100644 index 00000000000..db51a5e51f5 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-high-contrast-linux.png new file mode 100644 index 00000000000..db51a5e51f5 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-linux.png new file mode 100644 index 00000000000..db51a5e51f5 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-tritanopia-linux.png new file mode 100644 index 00000000000..db51a5e51f5 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Custom-Size-On-Parent-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-colorblind-linux.png new file mode 100644 index 00000000000..3a968b6abe3 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-dimmed-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-dimmed-linux.png new file mode 100644 index 00000000000..99ba6fda317 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-high-contrast-linux.png new file mode 100644 index 00000000000..7448af0475c Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-linux.png new file mode 100644 index 00000000000..3a968b6abe3 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-tritanopia-linux.png new file mode 100644 index 00000000000..3a968b6abe3 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-colorblind-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-colorblind-linux.png new file mode 100644 index 00000000000..cfb1cb1c7b6 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-high-contrast-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-high-contrast-linux.png new file mode 100644 index 00000000000..cfb1cb1c7b6 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-linux.png new file mode 100644 index 00000000000..cfb1cb1c7b6 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-linux.png differ diff --git a/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-tritanopia-linux.png b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-tritanopia-linux.png new file mode 100644 index 00000000000..ebe710acd92 Binary files /dev/null and b/.playwright/snapshots/components/AvatarStack.test.ts-snapshots/AvatarStack-Disable-Expand-On-Hover-light-tritanopia-linux.png differ diff --git a/e2e/components/Avatar.test.ts b/e2e/components/Avatar.test.ts index 8cb2711f3fc..dab9f9de809 100644 --- a/e2e/components/Avatar.test.ts +++ b/e2e/components/Avatar.test.ts @@ -71,6 +71,40 @@ test.describe('Avatar', () => { } }) + test.describe('Size Responsive', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatar-features--size-responsive', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Avatar.Size Responsive.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatar-features--size-responsive', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + test.describe('Square', () => { for (const theme of themes) { test.describe(theme, () => { diff --git a/e2e/components/AvatarStack.test.ts b/e2e/components/AvatarStack.test.ts index e1e21efd3ac..4d814a808bf 100644 --- a/e2e/components/AvatarStack.test.ts +++ b/e2e/components/AvatarStack.test.ts @@ -138,4 +138,174 @@ test.describe('AvatarStack', () => { }) } }) + + test.describe('Disable Expand On Hover', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--disable-expand-on-hover', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Disable Expand On Hover.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--disable-expand-on-hover', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Custom Size On Parent', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--custom-size-on-parent', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Custom Size On Parent.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--custom-size-on-parent', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Custom Size On Parent Responsive', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--custom-size-on-parent-responsive', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Custom Size On Parent Responsive.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--custom-size-on-parent-responsive', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Custom Size On Children', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--custom-size-on-children', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Custom Size On Children.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--custom-size-on-children', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Custom Size On Children Responsive', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--custom-size-on-children-responsive', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`AvatarStack.Custom Size On Children Responsive.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-avatarstack-features--custom-size-on-children-responsive', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) }) diff --git a/generated/components.json b/generated/components.json new file mode 100644 index 00000000000..63660e4327b --- /dev/null +++ b/generated/components.json @@ -0,0 +1,5389 @@ +{ + "schemaVersion": 2, + "components": { + "dialog": { + "id": "dialog", + "name": "Dialog", + "status": "alpha", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "isOpen", + "type": "boolean", + "description": "Whether or not the dialog is open" + }, + { + "name": "onDismiss", + "type": "() => void", + "description": "Function that will be called when the dialog is closed" + }, + { + "name": "returnFocusRef", + "type": " React.RefObject", + "description": "The element to restore focus back to after the `Dialog` is closed" + }, + { + "name": "initialFocusRef", + "type": " React.RefObject", + "description": "Element inside of the `Dialog` you'd like to be focused when the Dialog is opened. If nothing is passed to `initialFocusRef` the close button is focused." + }, + { + "name": "aria-labelledby", + "type": "string", + "description": "Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both." + }, + { + "name": "aria-label", + "type": "string", + "description": "Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [ + { + "name": "Dialog.Header", + "props": [ + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + } + ] + }, + "tooltip": { + "id": "tooltip", + "name": "Tooltip", + "status": "alpha", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "align", + "type": "'left' | 'right'" + }, + { + "name": "direction", + "type": "'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'", + "defaultValue": "n", + "description": "Sets where the tooltip renders in relation to the target." + }, + { + "name": "noDelay", + "type": "boolean", + "description": "When set to `true`, tooltip appears without any delay." + }, + { + "name": "aria-label", + "type": "string", + "description": "Text used in `aria-label` (for accessibility)" + }, + { + "name": "wrap", + "type": "boolean", + "description": "Use `true` to allow text within tooltip to wrap." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "action_list": { + "id": "action_list", + "name": "ActionList", + "status": "beta", + "a11yReviewed": false, + "stories": [ + { + "id": "components-actionlist--default", + "code": "() => (\n \n Copy link\n Quote reply\n Edit comment\n \n)" + } + ], + "props": [ + { + "name": "children", + "type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Group[]", + "defaultValue": "", + "required": true, + "description": "" + }, + { + "name": "variant", + "type": "'inset' | 'full'", + "defaultValue": "'inset'", + "description": "`inset` children are offset (vertically and horizontally) from list edges. `full` children are flush (vertically and horizontally) with list edges" + }, + { + "name": "selectionVariant", + "type": "'single' | 'multiple'", + "defaultValue": "", + "description": "Whether multiple items or a single item can be selected." + }, + { + "name": "showDivider", + "type": "boolean", + "defaultValue": "false", + "description": "Display a divider above each item in this list when it does not follow a header or divider." + }, + { + "name": "role", + "type": "AriaRole", + "defaultValue": "", + "description": "ARIA role describing the function of the list. `listbox` and `menu` are a common values." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [ + { + "name": "ActionList.Item", + "props": [ + { + "name": "children", + "type": "React.ReactNode | ActionList.LeadingVisual | ActionList.Description | ActionList.TrailingVisual", + "defaultValue": "", + "required": true, + "description": "" + }, + { + "name": "variant", + "type": "'default' | 'danger'", + "defaultValue": "'default'", + "description": "`danger` indicates that the item is destructive." + }, + { + "name": "onSelect", + "type": "(event: React.MouseEvent | React.KeyboardEvent) => void", + "defaultValue": "", + "description": "Callback that is called when the item is selected using either the mouse or keyboard. `event.preventDefault()` will prevent a menu from closing when within an ``" + }, + { + "name": "selected", + "type": "boolean", + "defaultValue": "false", + "description": "Indicate whether the item is selected. Only applies to items that can be selected." + }, + { + "name": "active", + "type": "boolean", + "defaultValue": "false", + "description": "Indicate whether the item is active. There should never be more than one active item." + }, + { + "name": "disabled", + "type": "boolean", + "defaultValue": "false", + "description": "Items that are disabled can not be clicked, selected, or navigated to." + }, + { + "name": "role", + "type": "AriaRole", + "defaultValue": "", + "description": "ARIA role describing the function of the item. `option` is a common value." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "ActionList.LinkItem", + "props": [ + { + "name": "children", + "type": "React.ReactNode | ActionList.LeadingVisual | ActionList.Description | ActionList.TrailingVisual", + "defaultValue": "", + "required": true, + "description": "" + }, + { + "name": "active", + "type": "boolean", + "defaultValue": "false", + "description": "Indicate whether the item is active. There should never be more than one active item." + }, + { + "name": "ref", + "type": "React.RefObject" + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "\"a\"" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "passthrough": { + "element": "a", + "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes" + } + }, + { + "name": "ActionList.LeadingVisual", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "required": true, + "description": "Icon (or similar) positioned before item text." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "ActionList.TrailingVisual", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "required": true, + "description": "Visual positioned after item text." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "ActionList.Description", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "required": true, + "description": "" + }, + { + "name": "variant", + "type": "'inline' | 'block'", + "defaultValue": "'inline'", + "description": "`inline` descriptions are positioned beside primary text. `block` descriptions are positioned below primary text." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "ActionList.Group", + "props": [ + { + "name": "children", + "type": "ActionList.Item[] | ActionList.LinkItem[]", + "defaultValue": "", + "required": true, + "description": "" + }, + { + "name": "title", + "type": "string", + "defaultValue": "", + "description": "Title of the group." + }, + { + "name": "auxiliaryText", + "type": "string", + "defaultValue": "", + "description": "Secondary text that provides additional information about the group." + }, + { + "name": "variant", + "type": "'filled' | 'subtle'", + "defaultValue": "'subtle'", + "description": "`inline` descriptions are positioned beside primary text. `block` descriptions are positioned below primary text." + }, + { + "name": "selectionVariant", + "type": "'single' | 'multiple' | false", + "defaultValue": "", + "description": "Set `selectionVariant` at the group level." + }, + { + "name": "role", + "type": "AriaRole", + "defaultValue": "", + "description": "ARIA role describing the function of the list inside the group. `listbox` and `menu` are a common values." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + } + ] + }, + "action_menu": { + "id": "action_menu", + "name": "ActionMenu", + "status": "beta", + "a11yReviewed": false, + "stories": [ + { + "id": "components-actionmenu--default", + "code": "() => (\n \n Open menu\n \n \n alert('Copy link clicked')}>\n Copy link\n ⌘C\n \n alert('Quote reply clicked')}>\n Quote reply\n ⌘Q\n \n alert('Edit comment clicked')}>\n Edit comment\n ⌘E\n \n \n alert('Delete file clicked')}\n >\n Delete file\n ⌘D\n \n \n \n \n)" + } + ], + "props": [ + { + "name": "children", + "type": "React.ReactElement[]", + "defaultValue": "", + "required": true, + "description": "Recommended: `ActionMenu.Button` or `ActionMenu.Anchor` with `ActionMenu.Overlay`" + }, + { + "name": "open", + "type": "boolean", + "defaultValue": "false", + "description": "If defined, will control the open/closed state of the overlay. Must be used in conjuction with `onOpenChange`." + }, + { + "name": "onOpenChange", + "type": "(open: boolean) => void", + "defaultValue": "", + "description": "If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`." + }, + { + "name": "anchorRef", + "type": "React.RefObject", + "defaultValue": "", + "description": "Useful for defining an external anchor" + } + ], + "subcomponents": [ + { + "name": "ActionMenu.Button", + "props": [ + { + "name": "children", + "type": "React.ReactElement", + "defaultValue": "", + "required": true, + "description": "" + } + ], + "passthrough": { + "element": "Button", + "url": "/react/Button" + } + }, + { + "name": "ActionMenu.Anchor", + "props": [ + { + "name": "children", + "type": "React.ReactElement", + "defaultValue": "", + "required": true, + "description": "Accepts a single child element" + } + ] + }, + { + "name": "ActionMenu.Overlay", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "required": true, + "description": "" + }, + { + "name": "align", + "type": "start | center | end", + "defaultValue": "start", + "description": "" + } + ], + "passthrough": { + "element": "Overlay", + "url": "/react/Overlay" + } + } + ] + }, + "anchored_overlay": { + "id": "anchored_overlay", + "name": "AnchoredOverlay", + "status": "alpha", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "open", + "type": "boolean", + "defaultValue": "false", + "description": "Determines whether the overlay portion of the component should be shown or not." + }, + { + "name": "onOpen", + "type": "(gesture: 'anchor-click' | 'anchor-key-press') => unknown", + "defaultValue": "", + "description": "A callback that is called whenever the overlay is currently closed and an \"open gesture\" is detected." + }, + { + "name": "onClose", + "type": "(gesture: 'anchor-click' | 'click-outside' | 'escape') => unknown", + "defaultValue": "", + "description": "A callback that is called whenever the overlay is currently open and a \"close gesture\" is detected." + }, + { + "name": "renderAnchor", + "type": ">(props: T) => JSX.Element", + "defaultValue": "", + "description": "A custom function component used to render the anchor element. When renderAnchor is null, an anchorRef is required." + }, + { + "name": "anchorRef", + "type": "React.RefObject", + "defaultValue": "", + "description": "An override to the internal `renderAnchor` ref that will be used to position the overlay. When `renderAnchor` is `null`, this can be used to make an anchor that is detached from ` AnchoredOverlay `." + }, + { + "name": "anchorId", + "type": "string", + "defaultValue": "", + "description": "An override to the internal id that will be passed to the anchor." + }, + { + "name": "side", + "type": "| 'inside-top' | 'inside-bottom' | 'inside-left' | 'inside-right' | 'inside-center' | 'outside-top' | 'outside-bottom' | 'outside-left' | 'outside-right'", + "defaultValue": "'outside-bottom'", + "description": "" + }, + { + "name": "align", + "type": "'start' | 'center' | 'end'", + "defaultValue": "'start'", + "description": "" + }, + { + "name": "overlayProps", + "type": "Partial", + "defaultValue": "", + "description": "Props to be spread on the internal `Overlay` component." + }, + { + "name": "focusTrapSettings", + "type": "Partial", + "defaultValue": "", + "description": "Settings to apply to the focus trap on the internal `Overlay` component." + }, + { + "name": "focusZoneSettings", + "type": "Partial", + "defaultValue": "", + "description": "Settings to apply to the focus zone on the internal `Overlay` component." + } + ] + }, + "autocomplete": { + "id": "autocomplete", + "name": "Autocomplete", + "status": "alpha", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "children", + "type": "React.ReactNode" + } + ], + "subcomponents": [ + { + "name": "Autocomplete.Input", + "props": [ + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "TextInput" + } + ], + "passthrough": { + "element": "TextInput", + "url": "/react/TextInput" + } + }, + { + "name": "Autocomplete.Overlay", + "props": [ + { + "name": "menuAnchorRef", + "type": "React.RefObject" + }, + { + "name": "children", + "type": "React.ReactNode" + }, + { + "name": "overlayProps", + "deprecated": true, + "type": "Partial", + "description": "Props to be spread on the internal `Overlay` component." + } + ], + "passthrough": { + "element": "Overlay", + "url": "/react/Overlay" + } + }, + { + "name": "Autocomplete.Menu", + "props": [ + { + "name": "items", + "required": true, + "type": "T[]", + "description": "The options for field values that are displayed in the dropdown menu. One or more may be selected depending on the value of the `selectionVariant` prop." + }, + { + "name": "selectedItemIds", + "required": true, + "type": "(string | number)[]", + "description": "The IDs of the selected items" + }, + { + "name": "aria-labelledby", + "required": true, + "type": "string" + }, + { + "name": "addNewItem", + "type": "Omit & { handleAddItem: (item: Omit) => void; }", + "description": "A menu item that is used to allow users make a selection that is not available in the array passed to the `items` prop. This menu item gets appended to the end of the list of options." + }, + { + "name": "emptyStateText", + "type": "React.ReactNode | false", + "description": "The text that appears in the menu when there are no options in the array passed to the `items` prop." + }, + { + "name": "filterFn", + "type": "(item: T, i: number) => boolean", + "description": "A custom function used to filter the options in the array passed to the `items` prop. By default, we filter out items that don't match the value of the autocomplete text input. The default filter is not case-sensitive." + }, + { + "name": "loading", + "type": "boolean", + "description": "Whether the data is loading for the menu items" + }, + { + "name": "sortOnCloseFn", + "type": "(itemIdA: string | number, itemIdB: string | number) => number", + "description": "The sort function that is applied to the options in the array passed to the `items` prop after the user closes the menu. By default, selected items are sorted to the top after the user closes the menu." + }, + { + "name": "selectionVariant", + "type": "'single' | 'multiple'", + "description": "Whether there can be one item selected from the menu or multiple items selected from the menu" + }, + { + "name": "onOpenChange", + "type": "(open: boolean) => void", + "description": "Function that gets called when the menu is opened or closed" + }, + { + "name": "onSelectedChange", + "type": "(item: T | T[]) => void", + "description": "The function that is called when an item in the list is selected or deselected" + }, + { + "name": "customScrollContainerRef", + "type": "React.MutableRefObject", + "description": "If the menu is rendered in a scrolling element other than the `Autocomplete.Overlay` component, pass the ref of that element to `customScrollContainerRef` to ensure the container automatically scrolls when the user highlights an item in the menu that is outside the scroll container" + } + ] + } + ] + }, + "avatar": { + "id": "avatar", + "name": "Avatar", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-avatar--default", + "code": "() => " + } + ], + "props": [ + { + "name": "alt", + "type": "string", + "defaultValue": "''", + "description": "Provide alt text when the avatar is used without a name next to it." + }, + { + "name": "size", + "type": "number", + "defaultValue": "20", + "description": "The size of the avatar in pixels." + }, + { + "name": "square", + "type": "boolean", + "defaultValue": "false", + "description": "If true, the avatar will be square instead of circular." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "avatar_pair": { + "id": "avatar_pair", + "name": "AvatarPair", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-avatarpair--default", + "code": "() => (\n \n \n \n \n)" + } + ], + "props": [ + { + "name": "children", + "type": "Avatar[]", + "defaultValue": "", + "description": "" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "avatar_stack": { + "id": "avatar_stack", + "name": "AvatarStack", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-avatarstack--default", + "code": "() => (\n \n \n \n \n \n \n)" + } + ], + "props": [ + { + "name": "alignRight", + "type": "boolean", + "defaultValue": "false", + "description": "Align the avatars to the right" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "blankslate": { + "id": "blankslate", + "name": "Blankslate", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-blankslate--default", + "code": "() => (\n \n \n \n \n Welcome to the mona wiki!\n \n Wikis provide a place in your repository to lay out the roadmap of your\n project, show the current status, and document software better, together.\n \n \n Create the first page\n \n \n Learn more about wikis\n \n \n)" + } + ], + "props": [ + { + "name": "border", + "type": "boolean", + "description": "" + }, + { + "name": "narrow", + "type": "boolean", + "description": "" + }, + { + "name": "spacious", + "type": "boolean", + "description": "" + } + ], + "subcomponents": [ + { + "name": "Blankslate.Visual", + "props": [] + }, + { + "name": "Blankslate.Heading", + "props": [ + { + "name": "as", + "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'" + } + ] + }, + { + "name": "Blankslate.Description", + "props": [] + }, + { + "name": "Blankslate.PrimaryAction", + "props": [ + { + "name": "href", + "type": "string" + } + ] + }, + { + "name": "Blankslate.SecondaryAction", + "props": [ + { + "name": "href", + "type": "string" + } + ] + } + ] + }, + "box": { + "id": "box", + "name": "Box", + "status": "beta", + "a11yReviewed": false, + "stories": [ + { + "id": "components-box--default", + "code": "() => Default Box" + } + ], + "props": [ + { + "name": "ref", + "type": "React.RefObject" + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "\"div\"" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "branch_name": { + "id": "branch_name", + "name": "BranchName", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-branchname--default", + "code": "() => branch_name" + } + ], + "props": [ + { + "name": "ref", + "type": "React.RefObject" + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "\"a\"" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "breadcrumbs": { + "id": "breadcrumbs", + "name": "Breadcrumbs", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-breadcrumbs--default", + "code": "() => (\n \n Home\n About\n \n Team\n \n \n)" + } + ], + "props": [ + { + "name": "children", + "type": "Breadcrumbs.Item[]", + "defaultValue": "", + "description": "" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [ + { + "name": "Breadcrumbs.Item", + "props": [ + { + "name": "selected", + "type": "boolean", + "defaultValue": "false", + "description": "" + }, + { + "name": "ref", + "type": "React.RefObject" + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "\"a\"" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "passthrough": { + "element": "a", + "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes" + } + } + ] + }, + "button": { + "id": "button", + "name": "Button", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-button--default", + "code": "() => " + } + ], + "props": [ + { + "name": "children", + "required": true, + "type": "React.ReactNode", + "description": "The content of the button." + }, + { + "name": "variant", + "type": "| 'default'\n| 'primary'\n| 'danger'\n| 'outline'\n| 'invisible'", + "defaultValue": "'default'", + "description": "Change the visual style of the button." + }, + { + "name": "size", + "type": "| 'small'\n| 'medium'\n| 'large'", + "defaultValue": "'medium'" + }, + { + "name": "leadingIcon", + "type": "React.ComponentType", + "description": "An icon to display before the button text." + }, + { + "name": "trailingIcon", + "type": "React.ComponentType", + "description": "An icon to display after the button text." + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "'button'" + }, + { + "name": "sx", + "type": "SystemStyleObject" + }, + { + "name": "ref", + "type": "React.RefObject" + } + ], + "passthrough": { + "element": "button", + "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes" + }, + "subcomponents": [ + { + "name": "Button.Counter", + "props": [ + { + "name": "children", + "required": true, + "type": "number", + "description": "The counter value." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + } + ] + }, + "icon_button": { + "id": "icon_button", + "name": "IconButton", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-iconbutton--default", + "code": "() => " + } + ], + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "required": true, + "description": "This will be the Button description." + }, + { + "name": "variant", + "type": "'default' | 'primary' | 'danger' | 'outline' | 'invisible'", + "defaultValue": "", + "description": "Changes the look and feel of the button which is different for each variant" + }, + { + "name": "size", + "type": "'small' | 'medium' | 'large'", + "defaultValue": "", + "description": "Changes the size of the icon button component" + }, + { + "name": "icon", + "type": "Component", + "defaultValue": "", + "description": "provide an octicon. It will be placed in the center of the button" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "button_group": { + "id": "button_group", + "name": "ButtonGroup", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-buttongroup--default", + "code": "() => (\n \n \n \n \n \n)" + } + ], + "props": [ + { + "name": "sx", + "type": "SystemStyleObject" + }, + { + "name": "ref", + "type": "React.RefObject" + } + ], + "subcomponents": [] + }, + "checkbox": { + "id": "checkbox", + "name": "Checkbox", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-checkbox--default", + "code": "() => (\n \n \n \n Default label\n \n \n)" + } + ], + "props": [ + { + "name": "checked", + "type": "boolean", + "defaultValue": "", + "description": "Modifies true/false value of the native checkbox" + }, + { + "name": "defaultChecked", + "type": "boolean", + "defaultValue": "", + "description": "Checks the input by default in uncontrolled mode" + }, + { + "name": "disabled", + "type": "boolean", + "defaultValue": "", + "description": "Modifies the native disabled state of the native checkbox" + }, + { + "name": "indeterminate", + "type": "boolean", + "defaultValue": "false", + "description": "Applies an [ indeterminate state ](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-indeterminate) to the checkbox" + }, + { + "name": "onChange", + "type": "(event: React.ChangeEvent) => void", + "defaultValue": "", + "description": "A callback function that is triggered when the checked state has been changed" + }, + { + "name": "validationStatus", + "type": "'error' | 'success' | 'warning'", + "defaultValue": "", + "description": "Only used to inform ARIA attributes.
Individual checkboxes do not have validation styles." + }, + { + "name": "value", + "type": "string", + "defaultValue": "", + "description": "A unique value that is never shown to the user.
Used during form submission and to identify which checkbox inputs are selected." + }, + { + "name": "ref", + "type": "React.RefObject" + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "\"input\"" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "checkbox_group": { + "id": "checkbox_group", + "name": "CheckboxGroup", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-checkboxgroup--default", + "code": "() => (\n \n Choices\n \n \n Choice one\n \n \n \n Choice two\n \n \n \n Choice three\n \n \n)" + } + ], + "props": [ + { + "name": "aria-labelledby", + "type": "string", + "defaultValue": "", + "description": "Used when associating the input group with a label other than CheckboxGroup.Label" + }, + { + "name": "children", + "type": "CheckboxGroup.Label | CheckboxGroup.Caption | CheckboxGroup.Validation | FormControl", + "defaultValue": "", + "required": true, + "description": "" + }, + { + "name": "disabled", + "type": "boolean", + "defaultValue": "false", + "description": "Whether the input group allows user input" + }, + { + "name": "id", + "type": "string", + "defaultValue": "a generated string", + "description": " The unique identifier for this input group. Used to associate the label, validation text, and caption text.
You may want a custom ID to make it easier to select elements in integration tests. " + }, + { + "name": "onChange", + "type": "(selected: string[], e?: ChangeEvent) => void", + "defaultValue": "", + "description": "An onChange handler that gets called when the selection changes" + }, + { + "name": "required", + "type": "boolean", + "defaultValue": "false", + "description": "If true, the user must make a selection before the owning form can be submitted" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [ + { + "name": "CheckboxGroup.Label", + "props": [ + { + "name": "visuallyHidden", + "type": "boolean", + "defaultValue": "false", + "description": "If true, the fieldset legend will be visually hidden" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "CheckboxGroup.Description", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "description": "The caption content" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "CheckboxGroup.Validation", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "description": "The validation message" + }, + { + "name": "variant", + "type": "'error' | 'success' | 'warning'", + "defaultValue": "", + "required": true, + "description": "Changes the visual style to match the validation status" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + } + ] + }, + "circle_badge": { + "id": "circle_badge", + "name": "CircleBadge", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-circlebadge--default", + "code": "() => (\n \n \n \n)" + } + ], + "props": [ + { + "name": "variant", + "type": "'small' | 'medium' | 'large'", + "defaultValue": "'medium'", + "description": "Creates a smaller or larger badge. Has no effect if the `size` prop is set" + }, + { + "name": "size", + "type": "number", + "defaultValue": "", + "description": "Sets the size of the badge in pixels. Overrides the `variant` prop when set" + }, + { + "name": "inline", + "type": "boolean", + "defaultValue": "false", + "description": "Styles the badge to `display: inline`" + }, + { + "name": "ref", + "type": "React.RefObject" + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "\"div\"" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [ + { + "name": "CircleBadge.Icon", + "props": [ + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "Octicon" + } + ], + "passthrough": { + "element": "Octicon", + "url": "/Octicon" + } + } + ] + }, + "circle_octicon": { + "id": "circle_octicon", + "name": "CircleOcticon", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-circleocticon--default", + "code": "() => (\n \n)" + } + ], + "props": [ + { + "name": "icon", + "type": "Octicon" + }, + { + "name": "size", + "defaultValue": "32", + "type": "number", + "description": "Set the width and height of the icon in pixels." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "counter_label": { + "id": "counter_label", + "name": "CounterLabel", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-counterlabel--default", + "code": "() => 12" + } + ], + "props": [ + { + "name": "scheme", + "type": "'primary' | 'secondary'", + "defaultValue": "", + "description": "Pass in 'primary' for a darker background and inverse text, or 'secondary' for a lighter background and primary text. Omitting the scheme prop renders the default counter scheme" + } + ], + "subcomponents": [] + }, + "data_table": { + "id": "data_table", + "name": "DataTable", + "status": "draft", + "a11yReviewed": false, + "stories": [ + { + "id": "components-datatable--default", + "code": "() => (\n \n \n Repositories\n \n \n A subtitle could appear here to give extra context to the data.\n \n {\n return \n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return \n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n \n {row.securityFeatures.dependabot.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n \n {row.securityFeatures.codeScanning.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n ]}\n />\n \n)" + }, + { + "id": "components-datatable-features--with-title", + "code": "() => (\n \n \n Repositories\n \n {\n return \n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return \n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n \n {row.securityFeatures.dependabot.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n \n {row.securityFeatures.codeScanning.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n ]}\n />\n \n)" + }, + { + "id": "components-datatable-features--with-title-and-subtitle", + "code": "() => (\n \n \n Repositories\n \n \n A subtitle could appear here to give extra context to the data.\n \n {\n return \n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return \n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n \n {row.securityFeatures.dependabot.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n \n {row.securityFeatures.codeScanning.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n ]}\n />\n \n)" + }, + { + "id": "components-datatable-features--with-sorting", + "code": "() => {\n const rows = Array.from(data).sort((a, b) => {\n return b.updatedAt - a.updatedAt\n })\n return (\n \n \n Repositories\n \n \n A subtitle could appear here to give extra context to the data.\n \n {\n return \n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n sortBy: 'datetime',\n renderCell: (row) => {\n return \n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n \n {row.securityFeatures.dependabot.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n \n {row.securityFeatures.codeScanning.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n ]}\n initialSortColumn=\"updatedAt\"\n initialSortDirection=\"DESC\"\n />\n \n )\n}" + }, + { + "id": "components-datatable-features--with-actions", + "code": "() => (\n \n \n Repositories\n \n \n \n \n \n \n \n A subtitle could appear here to give extra context to the data.\n \n {\n return \n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return \n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n \n {row.securityFeatures.dependabot.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n \n {row.securityFeatures.codeScanning.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n ]}\n />\n \n)" + }, + { + "id": "components-datatable-features--with-action", + "code": "() => (\n \n \n Repositories\n \n \n \n \n \n \n A subtitle could appear here to give extra context to the data.\n \n {\n return \n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return \n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n \n {row.securityFeatures.dependabot.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n \n {row.securityFeatures.codeScanning.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n ]}\n />\n \n)" + }, + { + "id": "components-datatable-features--with-row-action", + "code": "() => (\n \n \n Repositories\n \n \n A subtitle could appear here to give extra context to the data.\n \n {\n return \n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return \n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n \n {row.securityFeatures.dependabot.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n \n {row.securityFeatures.codeScanning.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n id: 'actions',\n header: () => Actions,\n renderCell: (row) => {\n return (\n {\n action('Download')(row)\n }}\n />\n )\n },\n },\n ]}\n />\n \n)" + }, + { + "id": "components-datatable-features--with-row-actions", + "code": "() => (\n \n \n Repositories\n \n \n A subtitle could appear here to give extra context to the data.\n \n {\n return \n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return \n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n \n {row.securityFeatures.dependabot.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n \n {row.securityFeatures.codeScanning.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n id: 'actions',\n header: () => Actions,\n renderCell: (row) => {\n return (\n <>\n {\n action('Edit')(row)\n }}\n />\n {\n action('Delete')(row)\n }}\n />\n \n )\n },\n },\n ]}\n />\n \n)" + }, + { + "id": "components-datatable-features--with-row-action-menu", + "code": "() => (\n \n \n Repositories\n \n \n A subtitle could appear here to give extra context to the data.\n \n {\n return \n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return \n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n \n {row.securityFeatures.dependabot.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n \n {row.securityFeatures.codeScanning.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n id: 'actions',\n header: () => Actions,\n renderCell: (row) => {\n return (\n \n \n \n \n \n \n {\n action('Copy')(row)\n }}\n >\n Copy row\n \n Edit row\n Export row as CSV\n \n \n Delete row\n \n \n \n \n )\n },\n },\n ]}\n />\n \n)" + }, + { + "id": "components-datatable-features--with-custom-heading", + "code": "() => (\n <>\n \n Security coverage\n \n

\n Organization members can only see data for the most recently-updated\n repositories. To see all repositories, talk to your organization\n administrator about becoming a security manager.\n

\n \n {\n return \n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return \n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n \n {row.securityFeatures.dependabot.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n \n {row.securityFeatures.codeScanning.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n ]}\n />\n \n \n)" + }, + { + "id": "components-datatable-features--with-no-content", + "code": "() => {\n const exampleEmptyData: Array = []\n return exampleEmptyData.length === 0 ? (\n \n \n \n \n Blankslate heading\n \n Use it to provide information when no dynamic content exists.\n \n \n Primary action\n \n \n Secondary action link\n \n \n ) : (\n \n \n Repositories\n \n \n A subtitle could appear here to give extra context to the data.\n \n {\n return \n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return \n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n \n {row.securityFeatures.dependabot.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n \n {row.securityFeatures.codeScanning.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n ]}\n />\n \n )\n}" + }, + { + "id": "components-datatable-features--with-loading", + "code": "() => {\n const [loading] = React.useState(true)\n return (\n \n \n Repositories\n \n \n A subtitle could appear here to give extra context to the data.\n \n {loading ? (\n \n ) : (\n \n )}\n \n )\n}" + }, + { + "id": "components-datatable-features--with-pagination", + "code": "() => {\n const pageSize = 10\n const [pageIndex, setPageIndex] = React.useState(0)\n const start = pageIndex * pageSize\n const end = start + pageSize\n const rows = repos.slice(start, end)\n return (\n \n \n Repositories\n \n \n A subtitle could appear here to give extra context to the data.\n \n {\n return \n },\n },\n {\n header: 'Updated',\n field: 'updatedAt',\n renderCell: (row) => {\n return \n },\n },\n {\n header: 'Dependabot',\n field: 'securityFeatures.dependabot',\n renderCell: (row) => {\n return row.securityFeatures.dependabot.length > 0 ? (\n \n {row.securityFeatures.dependabot.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n {\n header: 'Code scanning',\n field: 'securityFeatures.codeScanning',\n renderCell: (row) => {\n return row.securityFeatures.codeScanning.length > 0 ? (\n \n {row.securityFeatures.codeScanning.map((feature) => {\n return \n })}\n \n ) : null\n },\n },\n ]}\n />\n {\n setPageIndex(pageIndex)\n }}\n />\n \n )\n}" + } + ], + "props": [ + { + "name": "aria-describedby", + "type": "string", + "description": "Provide an id to an element which uniquely describes this table" + }, + { + "name": "aria-labelledby", + "type": "string", + "description": "Provide an id to an element which uniquely labels this table" + }, + { + "name": "data", + "type": "Array", + "description": "Provide a collection of the rows which will be rendered inside of the table" + }, + { + "name": "columns", + "type": "Array>", + "description": "Provide the columns for the table and the fields in `data` to which they correspond" + }, + { + "name": "cellPadding", + "type": "'condensed' | 'normal' | 'spacious'", + "description": "Specify the amount of space that should be available around the contents of a cell" + } + ], + "subcomponents": [ + { + "name": "Table", + "props": [ + { + "name": "aria-describedby", + "type": "string", + "description": "Provide an id to an element which uniquely describes this table" + }, + { + "name": "aria-labelledby", + "type": "string", + "description": "Provide an id to an element which uniquely labels this table" + }, + { + "name": "children", + "type": "React.ReactNode" + }, + { + "name": "cellPadding", + "type": "'condensed' | 'normal' | 'spacious'", + "description": "Specify the amount of space that should be available around the contents of a cell" + } + ] + }, + { + "name": "Table.Head", + "props": [ + { + "name": "children", + "type": "React.ReactNode" + } + ] + }, + { + "name": "Table.Body", + "props": [ + { + "name": "children", + "type": "React.ReactNode" + } + ] + }, + { + "name": "Table.Row", + "props": [ + { + "name": "children", + "type": "React.ReactNode" + } + ] + }, + { + "name": "Table.Header", + "props": [ + { + "name": "children", + "type": "React.ReactNode" + } + ] + }, + { + "name": "Table.Cell", + "props": [ + { + "name": "children", + "type": "React.ReactNode" + }, + { + "name": "scope", + "type": "'row'", + "description": "Provide the scope for a table cell, useful for defining a row header using `scope=\"row\"`" + } + ] + }, + { + "name": "Table.Container", + "props": [ + { + "name": "children", + "type": "React.ReactNode" + } + ] + }, + { + "name": "Table.Title", + "props": [ + { + "name": "children", + "type": "React.ReactNode" + }, + { + "name": "id", + "type": "string", + "required": true + } + ] + }, + { + "name": "Table.Subtitle", + "props": [ + { + "name": "children", + "type": "React.ReactNode" + }, + { + "name": "id", + "type": "string", + "required": true + } + ] + }, + { + "name": "Table.Skeleton", + "props": [ + { + "name": "cellPadding", + "type": "'condensed' | 'normal' | 'spacious'", + "description": "Specify the amount of space that should be available around the contents of a cell" + }, + { + "name": "columns", + "type": "Array>" + }, + { + "name": "rows", + "type": "number", + "description": "Optionally specify the number of rows which should be included in the skeleton state of the component" + } + ] + }, + { + "name": "Table.Pagination", + "props": [ + { + "name": "aria-label", + "type": "string", + "required": true + }, + { + "name": "defaultPageIndex", + "type": "string" + }, + { + "name": "id", + "type": "string" + }, + { + "name": "onChange", + "type": "({ pageIndex }: { pageIndex: number }) => void" + }, + { + "name": "pageSize", + "type": "number" + }, + { + "name": "totalCount", + "type": "number", + "required": true + } + ] + }, + { + "name": "Table.ErrorDialog", + "props": [ + { + "name": "children", + "required": true, + "type": "React.ReactNode", + "description": "The content of the dialog. This is usually a message explaining the error." + }, + { + "name": "title", + "type": "string", + "defaultValue": "'Error'", + "description": "The title of the dialog. This is usually a short description of the error." + }, + { + "name": "onRetry", + "type": "() => void", + "description": "Event handler called when the user clicks the retry button." + }, + { + "name": "onDismiss", + "type": "() => void", + "description": "Event handler called when the dialog is dismissed." + } + ] + } + ] + }, + "details": { + "id": "details", + "name": "Details", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-details--default", + "code": "() => {\n const { getDetailsProps } = useDetails({\n closeOnOutsideClick: true,\n })\n return (\n
\n \n This is some content\n
\n )\n}" + } + ], + "props": [ + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "drafts_dialog": { + "id": "drafts_dialog", + "name": "Dialog", + "status": "draft", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "title", + "type": "React.ReactNode", + "description": "Title of the Dialog. Also serves as the aria-label for this Dialog." + }, + { + "name": "subtitle", + "type": "React.ReactNode", + "description": "The Dialog's subtitle. Optional. Rendered below the title in smaller type with less contrast. Also serves as the aria-describedby for this Dialog." + }, + { + "name": "renderHeader", + "type": "React.FunctionComponent>", + "description": "Provide a custom renderer for the dialog header. This content is rendered directly into the dialog body area, full bleed from edge to edge, top to the start of the body element. Warning: using a custom renderer may violate Primer UX principles." + }, + { + "name": "renderBody", + "type": "React.FunctionComponent>", + "description": "Provide a custom render function for the dialog body. This content is rendered directly into the dialog body area, full bleed from edge to edge, header to footer. Warning: using a custom renderer may violate Primer UX principles." + }, + { + "name": "renderFooter", + "type": "React.FunctionComponent>", + "description": "Provide a custom render function for the dialog footer. This content is rendered directly into the dialog footer area, full bleed from edge to edge, end of the body element to bottom. Warning: using a custom renderer may violate Primer UX principles." + }, + { + "name": "footerButtons", + "type": "DialogButtonProps[]", + "description": "Specifies the buttons to be rendered in the Dialog footer." + }, + { + "name": "onClose", + "type": "(gesture: 'close-button' | 'escape') => void", + "description": "This method is invoked when a gesture to close the dialog is used (either an Escape key press or clicking the 'X' in the top-right corner). The gesture argument indicates the gesture that was used to close the dialog (either 'close-button' or 'escape')." + }, + { + "name": "role", + "type": "'dialog' | 'alertdialog'", + "description": "The ARIA role to assign to this dialog." + }, + { + "name": "width", + "type": "'small' | 'medium' | 'large' | 'xlarge'" + }, + { + "name": "height", + "type": "'small' | 'large' | 'auto'" + } + ], + "subcomponents": [] + }, + "filter_list": { + "id": "filter_list", + "name": "FilterList", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-filterlist--default", + "code": "() => {\n const [selectedIndex, setSelectedIndex] = useState(0)\n return (\n \n setSelectedIndex(0)}\n count={32}\n >\n First Filter\n \n setSelectedIndex(1)}\n count={16}\n >\n Second Filter\n \n setSelectedIndex(2)}\n >\n Third Filter\n \n \n )\n}" + } + ], + "props": [ + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [ + { + "name": "FilterList.Item", + "props": [ + { + "name": "count", + "type": "number", + "description": "Number to be displayed in the list item" + }, + { + "name": "selected", + "type": "boolean", + "description": "Whether the list item is selected or not" + }, + { + "name": "small", + "type": "boolean", + "defaultValue": "false", + "description": "Whether the list item is small or not" + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "'a'" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + } + ] + }, + "filtered_search": { + "id": "filtered_search", + "name": "FilteredSearch", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-filteredsearch--default", + "code": "() => (\n \n \n Filter\n \n \n Item 1\n Item 2\n Item 3\n \n \n \n \n \n)" + } + ], + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "description": "FilteredSearch is expected to contain an `ActionMenu` followed by a `TextInput`." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "flash": { + "id": "flash", + "name": "Flash", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-flash--default", + "code": "() => Default" + } + ], + "props": [ + { + "name": "full", + "type": "boolean", + "defaultValue": "false", + "description": "Creates a full width Flash component" + }, + { + "name": "variant", + "type": "'default' | 'success' | 'warning' | 'danger'", + "defaultValue": "'default'", + "description": "Sets the background color and border" + }, + { + "name": "ref", + "type": "React.RefObject" + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "\"div\"" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "form_control": { + "id": "form_control", + "name": "FormControl", + "status": "alpha", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "children", + "type": "FormControl.Label | FormControl.Caption | FormControl.Validation | Autocomplete | TextInput | TextInputWithTokens | Select", + "defaultValue": "", + "required": true, + "description": "" + }, + { + "name": "disabled", + "type": "boolean", + "defaultValue": "false", + "description": "Whether the control allows user input" + }, + { + "name": "id", + "type": "string", + "defaultValue": "a generated string", + "description": "The unique identifier for this control. Used to associate the label, validation text, and caption text" + }, + { + "name": "required", + "type": "boolean", + "defaultValue": "false", + "description": "If true, the user must specify a value for the input before the owning form can be submitted" + }, + { + "name": "sx", + "type": "SystemStyleObject" + }, + { + "name": "ref", + "type": "React.RefObject" + } + ], + "subcomponents": [ + { + "name": "FormControl.Label", + "props": [ + { + "name": "visuallyHidden", + "type": "boolean", + "defaultValue": "false", + "description": "Whether the label should be visually hidden" + }, + { + "name": "as", + "type": "'label' | 'legend' | 'span'", + "defaultValue": "'label'", + "description": "The label element can be changed to a 'legend' when it's being used to label a fieldset, or a 'span' when it's being used to label an element that is not a form input. For example: when using a FormControl to render a labeled SegementedControl, the label should be a 'span'" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "FormControl.Caption", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "description": "The content (usually just text) that is rendered to give contextual info about the field" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "FormControl.Validation", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "description": "The content (usually just text) that is rendered to give contextual info about the validation result for the field" + }, + { + "name": "variant", + "type": "'error' | 'success' | 'warning'", + "defaultValue": "", + "required": true, + "description": "Changes the visual style to match the validation status" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "FormControl.LeadingVisual", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "description": "The visual to render before the choice input's label" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + } + ] + }, + "header": { + "id": "header", + "name": "Header", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-header--default", + "code": "() => (\n
\n \n \n \n GitHub\n \n \n Menu\n \n \n \n
\n)" + } + ], + "props": [ + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [ + { + "name": "Header.Item", + "props": [ + { + "name": "full", + "type": "string", + "defaultValue": "", + "description": "Stretches item to fill the available space" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "Header.Link", + "props": [ + { + "name": "href", + "type": "string", + "defaultValue": "", + "description": "URL to be used for the Link" + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "\"a\"" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "passthrough": { + "element": "a", + "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes" + } + } + ] + }, + "heading": { + "id": "heading", + "name": "Heading", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-heading--default", + "code": "() => Default H2 Heading" + } + ], + "props": [ + { + "name": "sx", + "type": "SystemStyleObject" + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "\"h2\"" + } + ] + }, + "drafts_hidden": { + "id": "drafts_hidden", + "name": "Hidden", + "status": "draft", + "a11yReviewed": false, + "stories": [ + { + "id": "components-hidden--default", + "code": "() => (\n <>\n \n The below content is visible when the viewport is regular or wide but\n hidden when narrow:\n \n \n This is the said content and it is visible when the viewport is regular or\n wide but hidden when narrow\n \n \n)" + } + ], + "props": [ + { + "name": "when", + "type": "'narrow' | 'wide' | 'regular' | Array<'narrow' | 'regular' | 'wide'>", + "defaultValue": "", + "description": "In which viewport(s) the children are going to be hidden" + } + ], + "subcomponents": [] + }, + "label": { + "id": "label", + "name": "Label", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-label--default", + "code": "() => " + } + ], + "props": [ + { + "name": "variant", + "type": "| 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'attention' | 'severe' | 'danger' | 'done' | 'sponsors'", + "defaultValue": "'default'", + "description": "The color of the label" + }, + { + "name": "size", + "type": "'small' | 'large'", + "defaultValue": "'small'", + "description": "How large the label is rendered" + } + ], + "subcomponents": [] + }, + "label_group": { + "id": "label_group", + "name": "LabelGroup", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-labelgroup--default", + "code": "() => (\n \n \n \n \n \n)" + } + ], + "props": [ + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "link": { + "id": "link", + "name": "Link", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-link--default", + "code": "() => Link" + } + ], + "props": [ + { + "name": "href", + "type": "string", + "defaultValue": "", + "description": "URL to be used for the Link. (The `href` is passed to the underlying `` element. If `as` is specified, the link behavior may need different props)." + }, + { + "name": "muted", + "type": "boolean", + "defaultValue": "false", + "description": "Uses a less prominent shade for Link color, and the default link shade on hover" + }, + { + "name": "underline", + "type": "boolean", + "defaultValue": "false", + "description": "Adds underline to the Link" + }, + { + "name": "hoverColor", + "type": "string", + "defaultValue": "", + "description": "Color used when hovering over link" + }, + { + "name": "ref", + "type": "React.RefObject" + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "\"a\"" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "nav_list": { + "id": "nav_list", + "name": "NavList", + "status": "alpha", + "a11yReviewed": false, + "stories": [], + "props": [ + { + "name": "aria-label", + "type": "string", + "defaultValue": "", + "description": "" + }, + { + "name": "aria-labelledby", + "type": "string", + "defaultValue": "", + "description": "" + }, + { + "name": "ref", + "type": "React.RefObject" + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "\"nav\"" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [ + { + "name": "NavList.Item", + "props": [ + { + "name": "href", + "type": "string", + "defaultValue": "", + "description": "The URL that the item navigates to. `href` is passed to the underlying `` element. If `as` is specified, the component may need different props. If the item contains a sub-nav, the item is rendered as a `\n \n \n)" + } + ], + "props": [ + { + "name": "as", + "type": "string", + "defaultValue": "div", + "description": "Sets the underlying HTML tag for the component" + }, + { + "name": "caret", + "type": "| 'top' | 'bottom' | 'left' | 'right' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top' ", + "defaultValue": "'top'", + "description": "Controls the position of the caret" + }, + { + "name": "open", + "type": "boolean", + "defaultValue": "false", + "description": "Controls the visibility of the popover." + }, + { + "name": "relative", + "type": "boolean", + "defaultValue": "false", + "description": "Set to true to render the popover using relative positioning. " + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [ + { + "name": "Popover.Content", + "props": [ + { + "name": "as", + "type": "string", + "defaultValue": "div", + "description": "Sets the underlying HTML tag for the component" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + } + ] + }, + "portal": { + "id": "portal", + "name": "Portal", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-portal--default", + "code": "() => (\n <>\n Root position\n \n Outer container\n \n Inner container\n \n Portaled content rendered at <BaseStyles> root.\n \n \n \n \n)" + } + ], + "props": [ + { + "name": "onMount", + "type": "function", + "defaultValue": "", + "description": "Called when this portal is added to the DOM" + }, + { + "name": "containerName", + "type": "string", + "defaultValue": "", + "description": "Renders the portal children into the container registered with the given name. If omitted, children are rendered into the default portal root." + } + ], + "subcomponents": [] + }, + "progress_bar": { + "id": "progress_bar", + "name": "ProgressBar", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-progressbar--default", + "code": "() => " + } + ], + "props": [ + { + "name": "progress", + "type": "number", + "defaultValue": "0", + "description": "Used to set the size of the green bar" + }, + { + "name": "barSize", + "type": "| 'small' | 'large' | 'default'", + "defaultValue": "'default'", + "description": "Controls the height of the progress bar. If omitted, height is set to the default height." + }, + { + "name": "inline", + "type": "boolean", + "defaultValue": "false", + "description": "Styles the progress bar inline" + }, + { + "name": "bg", + "type": "string", + "defaultValue": "'bg.successInverse'", + "description": "Set the progress bar color" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "radio": { + "id": "radio", + "name": "Radio", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-radio--default", + "code": "() => (\n \n \n \n Label\n \n \n)" + } + ], + "props": [ + { + "name": "value", + "type": "string", + "defaultValue": "", + "required": true, + "description": "A unique value that is never shown to the user" + }, + { + "name": "name", + "type": "string", + "defaultValue": "", + "description": "Required for grouping multiple radios" + }, + { + "name": "checked", + "type": "boolean", + "defaultValue": "", + "description": "Modifies true/false value of the native radio" + }, + { + "name": "defaultChecked", + "type": "boolean", + "defaultValue": "", + "description": "Selects the radio by default in uncontrolled mode" + }, + { + "name": "onChange", + "type": "(event: React.ChangeEvent) => void", + "defaultValue": "", + "description": "A callback function that is triggered when the input state has been changed" + }, + { + "name": "disabled", + "type": "boolean", + "defaultValue": "", + "description": "Modifies the native disabled state of the native checkbox" + }, + { + "name": "ref", + "type": "React.RefObject" + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "\"input\"" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "radio_group": { + "id": "radio_group", + "name": "RadioGroup", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-radiogroup--default", + "code": "() => (\n \n Choices\n \n \n Choice one\n \n \n \n Choice two\n \n \n \n Choice three\n \n \n)" + } + ], + "props": [ + { + "name": "aria-labelledby", + "type": "string", + "defaultValue": "", + "description": "Used when associating the input group with a label other than RadioGroup.Label" + }, + { + "name": "children", + "type": "RadioGroup.Label | RadioGroup.Caption | RadioGroup.Validation | FormControl", + "defaultValue": "", + "required": true, + "description": "" + }, + { + "name": "disabled", + "type": "boolean", + "defaultValue": "false", + "description": "Whether the input group allows user input" + }, + { + "name": "id", + "type": "string", + "defaultValue": "A generated string", + "description": " The unique identifier for this input group. Used to associate the label, validation text, and caption text.
You may want a custom ID to make it easier to select elements in integration tests. " + }, + { + "name": "name", + "type": "string", + "defaultValue": "", + "required": true, + "description": "The name used to identify this group of radios" + }, + { + "name": "onChange", + "type": "(selected: string | null, e?: ChangeEvent) => void", + "defaultValue": "", + "description": "An onChange handler that gets called when the selection changes" + }, + { + "name": "required", + "type": "boolean", + "defaultValue": "false", + "description": "If true, the user must make a selection before the owning form can be submitted" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [ + { + "name": "RadioGroup.Label", + "props": [ + { + "name": "visuallyHidden", + "type": "boolean", + "defaultValue": "false", + "description": "If true, the fieldset legend will be visually hidden" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "RadioGroup.Description", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "description": "The caption content" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "RadioGroup.Validation", + "props": [ + { + "name": "children", + "type": "React.ReactNode", + "defaultValue": "", + "description": "The validation message" + }, + { + "name": "variant", + "type": "'error' | 'success' | 'warning'", + "defaultValue": "", + "required": true, + "description": "Changes the visual style to match the validation status" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + } + ] + }, + "relative_time": { + "id": "relative_time", + "name": "RelativeTime", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-relativetime--default", + "code": "() => " + } + ], + "props": [ + { + "name": "datetime", + "type": "string", + "defaultValue": "", + "required": true, + "description": "An ISO8601 time representing the time" + }, + { + "name": "date", + "type": "string", + "defaultValue": "", + "description": "Instead of passing the `datetime`, it is possible to pass a full `Date` object into the `date` prop" + }, + { + "name": "format", + "type": "'auto' | 'micro' | 'elapsed'", + "defaultValue": "'auto'", + "description": "The format with which to display the time" + }, + { + "name": "tense", + "type": "'auto' | 'past' | 'future'", + "defaultValue": "'auto'", + "description": "The tense to use when displaying a relative time" + }, + { + "name": "precision", + "type": "'year' | 'month' | 'day' | 'hour' | 'minute' | 'second'", + "defaultValue": "'second'", + "description": "The precision to use when displaying an elapsed time" + }, + { + "name": "threshold", + "type": "string", + "defaultValue": "'P30D'", + "description": "The threshold (ISO8601 duration) to display relative dates within" + }, + { + "name": "prefix", + "type": "string", + "defaultValue": "'on'", + "description": "The prefix to use when displaying a localised (non relative) date" + }, + { + "name": "second", + "type": "'numeric' | '2-digit'", + "defaultValue": "", + "description": "The format with which to render seconds" + }, + { + "name": "minute", + "type": "'numeric' | '2-digit'", + "defaultValue": "", + "description": "The format with which to render minutes" + }, + { + "name": "hour", + "type": "'numeric' | '2-digit'", + "defaultValue": "", + "description": "The format with which to render hours" + }, + { + "name": "weekday", + "type": "'short' | 'long' | 'narrow'", + "defaultValue": "", + "description": "The format with which to render weekdays" + }, + { + "name": "day", + "type": "'numeric' | '2-digit'", + "defaultValue": "", + "description": "The format with which to render days" + }, + { + "name": "month", + "type": "'numeric' | '2-digit' | 'short' | 'long' | 'narrow'", + "defaultValue": "'numeric'", + "description": "The format with which to render months" + }, + { + "name": "year", + "type": "'numeric' | '2-digit'", + "defaultValue": "", + "description": "The format with which to render years" + }, + { + "name": "timeZoneName", + "type": "'long' | 'short' | 'shortOffset' | 'longOffset' | 'shortGeneric' | 'longGeneric'", + "defaultValue": "", + "description": "The format with which to render the time zone" + }, + { + "name": "ref", + "type": "React.RefObject" + }, + { + "name": "as", + "type": "React.ElementType", + "defaultValue": "\"relative-time\"" + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "segmented_control": { + "id": "segmented_control", + "name": "SegmentedControl", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-segmentedcontrol--default", + "code": "() => (\n \n Preview\n Raw\n Blame\n \n)" + } + ], + "props": [ + { + "name": "aria-label", + "type": "string", + "defaultValue": "", + "description": "" + }, + { + "name": "aria-labelledby", + "type": "string", + "defaultValue": "", + "description": "" + }, + { + "name": "aria-describedby", + "type": "string", + "defaultValue": "", + "description": "" + }, + { + "name": "fullWidth", + "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }", + "defaultValue": "", + "description": "Whether the control fills the width of its parent" + }, + { + "name": "onChange", + "type": "(selectedIndex?: number) => void", + "defaultValue": "", + "description": "The handler that gets called when a segment is selected" + }, + { + "name": "variant", + "type": "| 'default' | { narrow?: 'hideLabels' | 'dropdown' | 'default' regular?: 'hideLabels' | 'dropdown' | 'default' wide?: 'hideLabels' | 'dropdown' | 'default' }", + "defaultValue": "'default'", + "description": "Configure alternative ways to render the control when it gets rendered in tight spaces" + }, + { + "name": "sx", + "type": "SystemStyleObject" + }, + { + "name": "ref", + "type": "React.RefObject" + } + ], + "subcomponents": [ + { + "name": "SegmentedControl.Button", + "props": [ + { + "name": "leadingIcon", + "type": "Component", + "defaultValue": "", + "description": "The leading icon comes before item label" + }, + { + "name": "selected", + "type": "boolean", + "defaultValue": "", + "description": "Whether the segment is selected. This is used for controlled SegmentedControls, and needs to be updated using the onChange handler on SegmentedControl." + }, + { + "name": "defaultSelected", + "type": "boolean", + "defaultValue": "", + "description": "Whether the segment is selected. This is used for uncontrolled SegmentedControls to pick one SegmentedControlButton that is selected on the initial render." + }, + { + "name": "sx", + "type": "SystemStyleObject" + }, + { + "name": "ref", + "type": "React.RefObject" + } + ] + }, + { + "name": "SegmentedControl.IconButton", + "props": [ + { + "name": "aria-label", + "type": "string", + "defaultValue": "", + "required": true, + "description": "" + }, + { + "name": "icon", + "type": "Component", + "defaultValue": "", + "required": true, + "description": "The icon that represents the segmented control item" + }, + { + "name": "selected", + "type": "boolean", + "defaultValue": "", + "description": "Whether the segment is selected. This is used for controlled SegmentedControls, and needs to be updated using the onChange handler on SegmentedControl." + }, + { + "name": "selected", + "type": "'small' | 'medium'", + "defaultValue": "", + "description": "The size of the buttons" + }, + { + "name": "defaultSelected", + "type": "boolean", + "defaultValue": "", + "description": "Whether the segment is selected. This is used for uncontrolled SegmentedControls to pick one SegmentedControlButton that is selected on the initial render." + }, + { + "name": "sx", + "type": "SystemStyleObject" + }, + { + "name": "ref", + "type": "React.RefObject" + } + ] + } + ] + }, + "select": { + "id": "select", + "name": "Select", + "status": "alpha", + "a11yReviewed": true, + "stories": [ + { + "id": "components-select--default", + "code": "() => (\n \n \n Default label\n \n \n \n)" + } + ], + "props": [ + { + "name": "block", + "type": "boolean", + "defaultValue": "false", + "description": "Creates a full width input element" + }, + { + "name": "contrast", + "type": "boolean", + "defaultValue": "false", + "description": "Changes background color to a higher contrast color" + }, + { + "name": "placeholder", + "type": "string", + "defaultValue": "", + "description": "Placeholder text to show when no option is selected.
This option is hidden from the dropdown menu when the 'required' prop is set" + }, + { + "name": "size", + "type": "'small' | 'medium' | 'large'", + "defaultValue": "", + "description": "Creates a smaller or larger input than the default." + }, + { + "name": "validationStatus", + "type": "'error' | 'success' | 'warning'", + "defaultValue": "", + "description": "Style the input to match the status" + } + ], + "subcomponents": [] + }, + "select_panel": { + "id": "select_panel", + "name": "SelectPanel", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-selectpanel--default", + "code": "() => {\n const [selected, setSelected] = React.useState([\n items[0],\n items[1],\n ])\n const [filter, setFilter] = React.useState('')\n const filteredItems = items.filter((item) =>\n item.text.toLowerCase().startsWith(filter.toLowerCase()),\n )\n const [open, setOpen] = useState(false)\n return (\n <>\n

Multi Select Panel

\n (\n \n {children ?? 'Select Labels'}\n \n )}\n placeholderText=\"Filter labels\"\n open={open}\n onOpenChange={setOpen}\n items={filteredItems}\n selected={selected}\n onSelectedChange={setSelected}\n onFilterChange={setFilter}\n showItemDividers={true}\n overlayProps={{\n width: 'small',\n height: 'xsmall',\n }}\n />\n \n )\n}" + } + ], + "props": [ + { + "name": "title", + "type": "string | React.ReactElement", + "defaultValue": "\"Select an item\" or \"Select items\"", + "description": "A descriptive title for the panel" + }, + { + "name": "subtitle", + "type": "string | React.ReactElement", + "defaultValue": "", + "description": "When provided, a subtitle is displayed below the title" + }, + { + "name": "onOpenChange", + "type": "( open: boolean, gesture: | 'anchor-click' | 'anchor-key-press' | 'click-outside' | 'escape' | 'selection' ) => void", + "defaultValue": "", + "required": true, + "description": "" + }, + { + "name": "placeholder", + "type": "string", + "defaultValue": "", + "description": "" + }, + { + "name": "inputLabel", + "type": "string", + "defaultValue": "Same as placeholderText", + "description": "The aria-label for the filter input" + }, + { + "name": "overlayProps", + "type": "Partial", + "defaultValue": "", + "description": "See [Overlay props](/react/Overlay#props)." + }, + { + "name": "title", + "type": "string", + "defaultValue": "", + "description": "" + }, + { + "name": "inputLabel", + "type": "string", + "defaultValue": "", + "description": "" + }, + { + "name": "inputPlaceholder", + "type": "string", + "defaultValue": "", + "description": "" + }, + { + "name": "selected", + "type": "ItemInput | ItemInput[] | undefined", + "defaultValue": "", + "description": "Specify the selected item(s)" + }, + { + "name": "onSelectedChange", + "type": "(selected: ItemInput | ItemInput[]) => void", + "defaultValue": "", + "description": "Provide a callback called when the selected item(s) change" + } + ], + "subcomponents": [] + }, + "spinner": { + "id": "spinner", + "name": "Spinner", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-spinner--default", + "code": "() => " + } + ], + "props": [ + { + "name": "size", + "type": "'small' | 'medium' | 'large'", + "description": "Sets the width and height of the spinner." + } + ], + "subcomponents": [] + }, + "split_page_layout": { + "id": "split_page_layout", + "name": "SplitPageLayout", + "status": "alpha", + "a11yReviewed": true, + "stories": [ + { + "id": "components-splitpagelayout--default", + "code": "() => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n)" + } + ], + "props": [ + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [ + { + "name": "SplitPageLayout.Header", + "props": [ + { + "name": "padding", + "type": "| 'none' | 'condensed' | 'normal'", + "defaultValue": "'normal'", + "description": "The amount of padding inside the header." + }, + { + "name": "divider", + "type": "| 'none' | 'line' | { narrow?: | 'none' | 'line' | 'filled' regular?: | 'none' | 'line' wide?: | 'none' | 'line' }", + "defaultValue": "'line'", + "description": "" + }, + { + "name": "hidden", + "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }", + "defaultValue": "false", + "description": "Whether the header is hidden." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "SplitPageLayout.Content", + "props": [ + { + "name": "width", + "type": "| 'full' | 'medium' | 'large' | 'xlarge'", + "defaultValue": "'large'", + "description": "The maximum width of the content region." + }, + { + "name": "padding", + "type": "| 'none' | 'condensed' | 'normal'", + "defaultValue": "'normal'", + "description": "The amount of padding inside the content." + }, + { + "name": "hidden", + "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }", + "defaultValue": "false", + "description": "Whether the content is hidden." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "SplitPageLayout.Pane", + "props": [ + { + "name": "position", + "type": "| 'start' | 'end' | { narrow?: | 'start' | 'end' regular?: | 'start' | 'end' wide?: | 'start' | 'end' }", + "defaultValue": "'start'", + "description": "" + }, + { + "name": "width", + "type": "| 'small' | 'medium' | 'large'", + "defaultValue": "'medium'", + "description": "The width of the pane." + }, + { + "name": "minWidth", + "type": "number", + "defaultValue": "256", + "description": "The minimum width of the pane." + }, + { + "name": "resizable", + "type": "boolean", + "defaultValue": "false", + "description": "When true, the pane may be resized by the user." + }, + { + "name": "widthStorageKey", + "type": "string", + "defaultValue": "'paneWidth'", + "description": "Provide a key used by localStorage to persist the size of the pane on the client." + }, + { + "name": "sticky", + "type": "boolean", + "defaultValue": "true", + "description": "Whether the pane should stick to the top of the screen while the content scrolls." + }, + { + "name": "offsetHeader", + "type": "number | string", + "defaultValue": "0", + "description": "Use offsetHeader along with the sticky prop to push the sticky pane down to make room for a sticky header if necessary. Use the type `string` to specify the height with a unit i.e. 5rem; otherwise the type `number` will be taken as px." + }, + { + "name": "padding", + "type": "| 'none' | 'condensed' | 'normal'", + "defaultValue": "'normal'", + "description": "The amount of padding inside the pane." + }, + { + "name": "divider", + "type": "| 'none' | 'line' | { narrow?: | 'none' | 'line' | 'filled' regular?: | 'none' | 'line' wide?: | 'none' | 'line' }", + "defaultValue": "'line'", + "description": "" + }, + { + "name": "hidden", + "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }", + "defaultValue": "false", + "description": "Whether the pane is hidden." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + }, + { + "name": "SplitPageLayout.Footer", + "props": [ + { + "name": "padding", + "type": "| 'none' | 'condensed' | 'normal'", + "defaultValue": "'normal'", + "description": "The amount of padding inside the footer." + }, + { + "name": "divider", + "type": "| 'none' | 'line' | { narrow?: | 'none' | 'line' | 'filled' regular?: | 'none' | 'line' wide?: | 'none' | 'line' }", + "defaultValue": "'line'", + "description": "" + }, + { + "name": "hidden", + "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }", + "defaultValue": "false", + "description": "Whether the footer is hidden." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + } + ] + }, + "state_label": { + "id": "state_label", + "name": "StateLabel", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-statelabel--default", + "code": "() => Open" + } + ], + "props": [ + { + "name": "variant", + "type": "'small' | 'normal'", + "defaultValue": "'normal'" + }, + { + "name": "status", + "type": "'issueOpened' | 'issueClosed' | 'issueClosedNotPlanned' | 'pullOpened' | 'pullClosed' | 'pullMerged' | 'draft' | 'issueDraft'", + "required": true + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [] + }, + "sub_nav": { + "id": "sub_nav", + "name": "SubNav", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-subnav--default", + "code": "() => (\n \n \n \n Home\n \n Documentation\n Support\n \n \n)" + } + ], + "props": [ + { + "name": "actions", + "type": "React.ReactNode", + "description": "Place another element, such as a button, to the opposite side of the navigation items." + }, + { + "name": "align", + "type": "'right'", + "description": "Use `right` to have navigation items aligned right." + }, + { + "name": "full", + "type": "boolean", + "description": "Used to make navigation fill the width of the container." + }, + { + "name": "aria-label", + "type": "string", + "description": "Used to set the `aria-label` on the top level `