feat(elements): introduce a loading-spinner-container shadow part

teamhanko · Nov 9, 2023 · 9dfcfbb · 9dfcfbb
1 parent 8f5fa52
commit 9dfcfbb
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/frontend/elements/README.md b/frontend/elements/README.md
@@ -440,6 +440,7 @@ The following parts are available:
 - `divider-text` - the divider text
 - `divider-line` - the line before and after the `divider-text`
 - `form-item` - the container of a form item, e.g. an input field or a button
+- `loading-spinner-container` - a container that wraps texts or icons to be replaced by a loading spinner.
 
 #### Examples
 

diff --git a/frontend/elements/src/components/icons/LoadingSpinner.tsx b/frontend/elements/src/components/icons/LoadingSpinner.tsx
@@ -19,18 +19,21 @@ const LoadingSpinner = ({
   secondary,
   hasIcon,
 }: Props) => {
+  const partName = "loading-spinner-container";
+
   return (
     <Fragment>
       {isLoading ? (
-        <div className={styles.loadingSpinnerWrapper}>
+        <div className={styles.loadingSpinnerWrapper} part={partName}>
           <Icon name={"spinner"} secondary={secondary} />
         </div>
       ) : isSuccess ? (
-        <div className={styles.loadingSpinnerWrapper}>
+        <div className={styles.loadingSpinnerWrapper} part={partName}>
           <Icon name={"checkmark"} secondary={secondary} fadeOut={fadeOut} />
         </div>
       ) : (
         <div
+          part={partName}
           className={
             hasIcon
               ? styles.loadingSpinnerWrapperIcon