expose Skeleton publicly

.changeset/afraid-singers-kick.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': minor
+---
+
+Added support for `<div class="iui-skeleton"></div>` to be used without the `iui-text-block` class.

.changeset/empty-laws-chew.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+Added a new `Skeleton` component.

packages/itwinui-css/src/text/skeleton.scss

@@ -2,7 +2,9 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 
 @mixin iui-text-skeleton {
-  display: inline-block;
+  &.iui-text-block {
+    display: inline-block;
+  }
   user-select: none;
   color: transparent;
   border-radius: var(--iui-border-radius-1);
@@ -16,6 +18,8 @@
     var(--iui-color-icon-muted)
   );
   background-size: 200% 100%;
+  min-block-size: 1em;
+  min-block-size: 1lh;
 
   @media (forced-colors: active) {
     forced-color-adjust: none;

packages/itwinui-react/src/core/Typography/Skeleton.test.tsx

@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { render } from '@testing-library/react';
+
+import { Skeleton } from './Skeleton.js';
+
+it('should work', () => {
+  const { container } = render(<Skeleton />);
+  const skeleton = container.querySelector('div') as HTMLElement;
+  expect(skeleton).toHaveClass('iui-skeleton');
+});

packages/itwinui-react/src/core/Typography/Skeleton.tsx

@@ -0,0 +1,32 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 cx from 'classnames';
+import { Box, ShadowRoot } from '../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
+
+/**
+ * A placeholder to be displayed while the content is loading.
+ */
+export const Skeleton = React.forwardRef((props, forwardedRef) => {
+  return (
+    <Box
+      as='div'
+      ref={forwardedRef}
+      {...props}
+      className={cx('iui-skeleton', props?.className)}
+    >
+      <ShadowRoot>
+        <div aria-hidden {...{ inert: '' }}>
+          <slot />
+        </div>
+        <VisuallyHidden>Loading.</VisuallyHidden>
+      </ShadowRoot>
+
+      {props.children}
+    </Box>
+  );
+}) as PolymorphicForwardRefComponent<'div'>;

packages/itwinui-react/src/core/Typography/Text.tsx

@@ -29,6 +29,8 @@ type TextProps = {
   /**
    * Use it if you are still loading the content.
    * @default false
+   *
+   * @deprecated Use the `Skeleton` component instead
    */
   isSkeleton?: boolean;
 };

packages/itwinui-react/src/index.ts

@@ -213,3 +213,5 @@ export { Flex } from './core/Flex/Flex.js';
 export { Popover } from './core/Popover/Popover.js';
 
 export { Divider } from './core/Divider/Divider.js';
+
+export { Skeleton } from './core/Typography/Skeleton.js';