create FieldsetBase component (#2136)

.changeset/mean-hornets-attend.md

@@ -0,0 +1,10 @@
+---
+'@itwin/itwinui-css': major
+---
+
+Added a new `iui-fieldset-base` class that removes default `<fieldset>` styles. This class is now required when using `iui-fieldset`.
+
+```diff
+- <fieldset class="iui-fieldset">
++ <fieldset class="iui-fieldset-base iui-fieldset">
+```

apps/css-workshop/src/pages/fieldset.astro

@@ -21,7 +21,7 @@ import Icon_ from '../components/Icon.astro';
   <hr />
 
   <section id='demo-default'>
-    <fieldset class='iui-fieldset'>
+    <fieldset class='iui-fieldset-base iui-fieldset'>
       <legend>General settings</legend>
 
       <div class='iui-input-grid' data-iui-label-placement='inline'>
@@ -76,7 +76,7 @@ import Icon_ from '../components/Icon.astro';
 
     <br />
 
-    <fieldset class='iui-fieldset' disabled>
+    <fieldset class='iui-fieldset-base iui-fieldset' disabled>
       <legend>Advanced settings</legend>
 
       <label class='iui-input-grid' data-iui-label-placement='inline'>

packages/itwinui-css/src/fieldset/fieldset.scss

@@ -1,9 +1,13 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
-@use '../mixins';
+
+:where(.iui-fieldset-base) {
+  padding: 0;
+  margin: 0;
+  border: none;
+}
 
 .iui-fieldset {
-  @include mixins.iui-reset;
   padding: var(--iui-size-s);
   border-radius: var(--iui-border-radius-1);
   border: 1px solid var(--iui-color-border);

packages/itwinui-react/src/core/Fieldset/Fieldset.tsx

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Box } from '../../utils/index.js';
+import { FieldsetBase } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 
 import cx from 'classnames';
@@ -30,8 +30,7 @@ export const Fieldset = React.forwardRef((props, ref) => {
   const { children, className, disabled, legend, ...rest } = props;
 
   return (
-    <Box
-      as='fieldset'
+    <FieldsetBase
       className={cx('iui-fieldset', className)}
       disabled={disabled}
       ref={ref}
@@ -46,6 +45,6 @@ export const Fieldset = React.forwardRef((props, ref) => {
               : child,
           )
         : children}
-    </Box>
+    </FieldsetBase>
   );
 }) as PolymorphicForwardRefComponent<'fieldset', FieldsetProps>;

packages/itwinui-react/src/utils/components/FieldsetBase.tsx

@@ -0,0 +1,12 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { polymorphic } from '../functions/polymorphic.js';
+
+/**
+ * Thin wrapper over the `<fieldset>` element that removes its default styles.
+ *
+ * @private
+ */
+export const FieldsetBase = polymorphic.fieldset('iui-fieldset-base');

packages/itwinui-react/src/utils/components/index.ts

@@ -16,3 +16,4 @@ export * from './ButtonBase.js';
 export * from './Portal.js';
 export * from './ShadowRoot.js';
 export * from './LineClamp.js';
+export * from './FieldsetBase.js';