- Content in block!
- Content in block!
- Content in block!
+ Content in block!
);
};
diff --git a/apps/website/src/examples/ExpandableBlock.small.tsx b/apps/website/src/examples/ExpandableBlock.small.tsx
new file mode 100644
index 00000000000..c0a827263a8
--- /dev/null
+++ b/apps/website/src/examples/ExpandableBlock.small.tsx
@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { ExpandableBlock } from '@itwin/itwinui-react';
+
+export default () => {
+ return (
+
+
+ Content in block!
+
+
+ );
+};
diff --git a/apps/website/src/examples/ExpandableBlock.status.tsx b/apps/website/src/examples/ExpandableBlock.status.tsx
new file mode 100644
index 00000000000..06e838381e1
--- /dev/null
+++ b/apps/website/src/examples/ExpandableBlock.status.tsx
@@ -0,0 +1,29 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { ExpandableBlock } from '@itwin/itwinui-react';
+import { SvgSmileyHappy } from '@itwin/itwinui-icons-react';
+
+export default () => {
+ return (
+
+
+ Content in block!
+
+
+ Content in block!
+
+
+ Content in block!
+
+
+ Content in block!
+
+ } title='Happy block'>
+ Content in block!
+
+
+ );
+};
diff --git a/apps/website/src/examples/ExpandableBlock.withcaption.tsx b/apps/website/src/examples/ExpandableBlock.withcaption.tsx
new file mode 100644
index 00000000000..d5ab5c10ab5
--- /dev/null
+++ b/apps/website/src/examples/ExpandableBlock.withcaption.tsx
@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { ExpandableBlock } from '@itwin/itwinui-react';
+
+export default () => {
+ return (
+
+
+ Content in block!
+
+
+ );
+};
diff --git a/apps/website/src/examples/index.tsx b/apps/website/src/examples/index.tsx
index fbf66364358..e75101d8850 100644
--- a/apps/website/src/examples/index.tsx
+++ b/apps/website/src/examples/index.tsx
@@ -85,6 +85,12 @@ export { default as DropdownButtonMainExample } from './DropdownButton.main';
export { default as DropdownMenuMainExample } from './DropdownMenu.main';
export { default as ExpandableBlockMainExample } from './ExpandableBlock.main';
+export { default as ExpandableBlockWithCaptionExample } from './ExpandableBlock.withcaption';
+export { default as ExpandableBlockAccordionExample } from './ExpandableBlock.accordion';
+export { default as ExpandableBlockStatusExample } from './ExpandableBlock.status';
+export { default as ExpandableBlockSmallExample } from './ExpandableBlock.small';
+export { default as ExpandableBlockBorderlessExample } from './ExpandableBlock.borderless';
+export { default as ExpandableBlockFormExample } from './ExpandableBlock.form';
export { default as FieldsetMainExample } from './Fieldset.main';
export { default as FieldsetDisabledExample } from './Fieldset.disabled';
diff --git a/apps/website/src/pages/docs/expandableblock.mdx b/apps/website/src/pages/docs/expandableblock.mdx
index f01fff81f87..a4b856e74be 100644
--- a/apps/website/src/pages/docs/expandableblock.mdx
+++ b/apps/website/src/pages/docs/expandableblock.mdx
@@ -9,74 +9,96 @@ group: core
import PropsTable from '~/components/PropsTable.astro';
import LiveExample from '~/components/LiveExample.astro';
-import Placeholder from '~/components/Placeholder.astro';
+import RelatedComponents from '~/components/RelatedComponents.astro';
import * as AllExamples from '~/examples';
{frontmatter.description}
-
-
-Expandable blocks, called expandable rows when inside a table, are used to progressively disclose information. Read this article to learn more about progressive disclosure. Expandable blocks and rows should not be used with flattened hierarchy or information panels. This type of navigation allows the user to see content inside a parent row or block.
+The expandable block has a label reflecting its content. On click, it expands to reveal more content.
-## Appearance
+## Variants
-### Expandable rows
+### With caption
-Expandable rows resemble normal table rows that can be expanded to reveal nested data. An expandable row could optionally be selectable. Because expandable rows are part of a table, the rows must sort based on the table column sort applied. This means expandable rows can not re-arranged, the user must interact with the table header to re-arrange.
+Users can optionally display descriptor text underneath the title.
-Expandable rows should not be confused with a tree hierarchy. Unlike trees, they follow a single branch pattern. If you have trouble telling the two apart, the Expandable block VS Hierarchy tree section explains what makes them different.
+
+
+
-There can be several child elements nested in an expandable row. These indented elements all coexist on the same level without further indentation. If you require more levels, a tree hierarchy is a better pattern for this interaction.
+### Accordion
-The child elements don’t reflect the column titles. They are expected to retain the same properties as the parent row (in the example below, the owner). It’s unnecessary to repeat the properties for the child items because of this, so do not include them in the expanded row area.
+Expandable blocks can also stack on top of each other in an accordion to make large sets of information easier to read.
-Child items are not interchangeable between rows, e.g. you cannot drag a child item from row A and drag it in row B like you would move files to a folder.
+
+
+
-### Expandable blocks
+### With status
-The main block has a label reflecting its content. On click, it expands to reveal more content.
+An expandable block could display status, an icon, or other helpful information at a glance right aligned within the block header.
-An expandable block could display status, a total count, or other helpful information at a glance right aligned within the block header. You may also optionally display descriptor text underneath the title.
+
+
+
-Expandable blocks don’t always need to be sorted alphabetically, unlike an expandable row which would be sorted based on the table column sort. You may optionally allow expandable blocks to be re-ordered by the user.
+### Small
-The visual appearance of an expandable block is different from an expandable row. An expandable block can not be selected / checked like an expandable row can, therefore it is visually styled differently.
+A small expandable block is achieved by using the `size` prop.
-## Usage
+
+
+
-### Expandable rows
+### Borderless
-Expandable rows are used in tables. The layout inside expanded rows varies according to requirements. Child rows can be selectable and be an entry point to more content (ex.: downloadable files), or only contain metadata about the parent file. If at least one row within a table is expandable, all rows should follow the same pattern. Avoid mixing regular table rows with expandable rows.
+The borderless expandable block is useful in tighter areas where using a default expandable block would visibly cause too many blocks. The borderless expandable block is achieved by using the `styleType` prop.
-### Expandable blocks
+
+
+
+
+## Usage
+
+Expandable blocks are used to progressively disclose information. [Read this article to learn more about progressive disclosure.](https://www.nngroup.com/articles/progressive-disclosure/) Expandable blocks should not be used with flattened hierarchy or information panels. [Table](table) rows can also expand similarly to expandable block
+
+### Forms
Expandable blocks are used in pages to divide up content in sections, in forms for example. If each section has many fields, using expandable blocks will help alleviate the UI and prevent the user from scrolling endlessly to get to the section they are looking for.
-Expanded block containing form elements within an interface.
+
+
+
-### Expandable blocks VS hierarchy tree
+### Expandable blocks vs hierarchy tree
-While these two patterns may appear similar, they both fulfill a different role and are not interchangeable. Here are some tips to determine if an expandable block or row is what you need.
+While these two patterns may appear similar, they both fulfill a different role and are not interchangeable. Here are some tips to determine if an expandable block is what you need.
-Use an expandable rows/blocks when:
+Use an expandable block when:
-- You need a row in a table to display additional metadata that doesn’t align with the column content;
-- You have a page with different sections all containing user-generated content that would benefit from being split up;
-- There is only one level of indentation possible at all times;
-- The content you want to be expandable varies from simple list items to more complex form components (such as text fields, buttons, etc.).
+- You have a page with different sections all containing user-generated content that would benefit from being split up
+- There is only one level of indentation possible at all times
+- The content you want to be expandable varies from simple list items to more complex form components (such as text fields, buttons, etc.)
-Use a hierarchy tree when:
+Use a [hierarchy tree](tree) when:
-- You require a pattern that works with several levels of data (folder drilling);
-- There are only list items in the pattern;
-- The hierarchy is not necessarily linear and may branch out.
+- You require a pattern that works with several levels of data (folder drilling)
+- There are only list items in the pattern
+- The hierarchy is not necessarily linear and may branch out
## Props
-## Related resources
+## Related components
+
+