website: Fieldset (#1168)

apps/website/src/examples/Fieldset.disabled.tsx

@@ -0,0 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { Fieldset, LabeledInput, Flex } from '@itwin/itwinui-react';
+
+export default () => {
+  return (
+    <Fieldset
+      legend='Disabled Fieldset'
+      disabled
+      style={{ display: 'flex', flexDirection: 'column', gap: 11 }}
+    >
+      <LabeledInput label='Full Name' placeholder='Enter full name' />
+      <LabeledInput label='Address' placeholder='Enter address' />
+    </Fieldset>
+  );
+};

apps/website/src/examples/Fieldset.main.tsx

@@ -3,11 +3,9 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Fieldset, LabeledSelect, InputGroup, Radio, ToggleSwitch } from '@itwin/itwinui-react';
+import { Fieldset, InputGroup, Radio, ToggleSwitch } from '@itwin/itwinui-react';
 
 export default () => {
-  const [value, setValue] = React.useState<number | undefined>(undefined);
-
   return (
     <Fieldset
       legend='General Settings'

apps/website/src/examples/index.tsx

@@ -76,6 +76,7 @@ export { default as DropdownMenuMainExample } from './DropdownMenu.main';
 export { default as ExpandableBlockMainExample } from './ExpandableBlock.main';
 
 export { default as FieldsetMainExample } from './Fieldset.main';
+export { default as FieldsetDisabledExample } from './Fieldset.disabled';
 
 export { default as FileUploadMainExample } from './FileUpload.main';
 

apps/website/src/pages/docs/fieldset.mdx

@@ -14,15 +14,23 @@ import * as AllExamples from '~/examples';
 
 <p>{frontmatter.description}</p>
 
-<Placeholder componentPageName='input-fieldset' />
-
 <LiveExample src='Fieldset.main.tsx'>
   <AllExamples.FieldsetMainExample client:load />
 </LiveExample>
 
 The fieldset is a container meant to group components that apply to a common target. They are also useful in forms where interactive elements require to be split into categories.
 Fieldsets are flexible and can contain a wide variety of components.
 
+## Usage
+
+- Components should be stacked, and not displayed side to side, unless necessary.
+- Disabled and active components can co-exist within a fieldset in active state.
+- If all components inside a fieldset are disabled, the fieldset as a whole should be disabled.
+
+<LiveExample src='Fieldset.disabled.tsx'>
+  <AllExamples.FieldsetDisabledExample client:load />
+</LiveExample>
+
 ## Props
 
 <PropsTable path={frontmatter.propsPath} />