@charcoal-ui/react 6.1.0-beta.5 → 6.1.0

package/src/components/Notification/Snackbar/__snapshots__/index.css.snap

@@ -1,19 +1,18 @@
-.charcoal-snackbar-region {
+.charcoal-notification-region {
   --charcoal-snackbar-offset: 16px;
 }
 
 .charcoal-snackbar-region[data-position='top'] {
   --charcoal-snackbar-enter-offset: calc(-1 * var(--charcoal-space-30));
-  top: calc(
-      env(safe-area-inset-top, 0px) + max(var(--charcoal-snackbar-offset), 16px)
-    );
+  position: sticky;
+  top: calc(env(safe-area-inset-top, 0px) + var(--charcoal-snackbar-offset));
 }
 
 .charcoal-snackbar-region[data-position='bottom'] {
   --charcoal-snackbar-enter-offset: var(--charcoal-space-30);
+  position: fixed;
   bottom: calc(
-      env(safe-area-inset-bottom, 0px) +
-        max(var(--charcoal-snackbar-offset), 16px)
+      env(safe-area-inset-bottom, 0px) + var(--charcoal-snackbar-offset)
     );
 }
 

package/src/components/Notification/Snackbar/index.css

@@ -1,20 +1,21 @@
-.charcoal-snackbar-region {
+.charcoal-notification-region {
   --charcoal-snackbar-offset: 16px;
+}
 
+.charcoal-snackbar-region {
   &[data-position='top'] {
     --charcoal-snackbar-enter-offset: calc(-1 * var(--charcoal-space-30));
 
-    top: calc(
-      env(safe-area-inset-top, 0px) + max(var(--charcoal-snackbar-offset), 16px)
-    );
+    position: sticky;
+    top: calc(env(safe-area-inset-top, 0px) + var(--charcoal-snackbar-offset));
   }
 
   &[data-position='bottom'] {
     --charcoal-snackbar-enter-offset: var(--charcoal-space-30);
 
+    position: fixed;
     bottom: calc(
-      env(safe-area-inset-bottom, 0px) +
-        max(var(--charcoal-snackbar-offset), 16px)
+      env(safe-area-inset-bottom, 0px) + var(--charcoal-snackbar-offset)
     );
   }
 }

package/src/components/Notification/Snackbar/index.story.tsx

@@ -34,7 +34,6 @@ export default {
   args: {
     message: '保存しました',
     position: 'bottom',
-    offset: 16,
     duration: 5000,
     order: 'queue',
     dim: false,
@@ -50,6 +49,10 @@ export default {
       control: { type: 'number', min: 0, step: 1 },
       table: { category: 'Hook', defaultValue: { summary: '16' } },
     },
+    headerOffset: {
+      control: { type: 'number', min: 0, step: 1 },
+      table: { category: 'Hook', defaultValue: { summary: '0' } },
+    },
     duration: {
       control: { type: 'number', min: 0, step: 500 },
       description: '表示時間（ミリ秒）',

package/src/components/Notification/Snackbar/index.test.tsx

@@ -288,7 +288,7 @@ describe('Snackbar', () => {
       action: <button type="button">取り消す</button>,
     })
 
-    expect(screen.getByRole('region')).toHaveAttribute(
+    expect(document.querySelector('.charcoal-snackbar-region')).toHaveAttribute(
       'data-position',
       'bottom',
     )
@@ -299,7 +299,10 @@ describe('Snackbar', () => {
 
     show('保存しました')
 
-    expect(screen.getByRole('region')).toHaveAttribute('data-position', 'top')
+    expect(document.querySelector('.charcoal-snackbar-region')).toHaveAttribute(
+      'data-position',
+      'top',
+    )
   })
 
   it('supports a custom z-index and portal container', () => {

package/src/components/Notification/Snackbar/index.tsx

@@ -17,6 +17,7 @@ export type SnackbarRootAttributes = {
 export type ShowSnackbarOptions = {
   action?: ReactNode
   onClose?: (reason: SnackbarCloseReason) => void
+  /** スナックバー自体にdata属性を渡せる */
   rootAttributes?: SnackbarRootAttributes
 }
 

package/src/components/Notification/Toast/__snapshots__/index.css.snap

@@ -1,18 +1,18 @@
-.charcoal-toast-region {
+.charcoal-notification-region {
   --charcoal-toast-offset: 16px;
 }
 
 .charcoal-toast-region[data-position='top'] {
+  position: sticky;
   --charcoal-toast-enter-offset: calc(-1 * var(--charcoal-space-30));
-  top: calc(
-      env(safe-area-inset-top, 0px) + max(var(--charcoal-toast-offset), 16px)
-    );
+  top: calc(env(safe-area-inset-top, 0px) + var(--charcoal-toast-offset));
 }
 
 .charcoal-toast-region[data-position='bottom'] {
+  position: fixed;
   --charcoal-toast-enter-offset: var(--charcoal-space-30);
   bottom: calc(
-      env(safe-area-inset-bottom, 0px) + max(var(--charcoal-toast-offset), 16px)
+      env(safe-area-inset-bottom, 0px) + var(--charcoal-toast-offset)
     );
 }
 

package/src/components/Notification/Toast/index.css

@@ -1,19 +1,21 @@
-.charcoal-toast-region {
+.charcoal-notification-region {
   --charcoal-toast-offset: 16px;
+}
 
+.charcoal-toast-region {
   &[data-position='top'] {
+    position: sticky;
     --charcoal-toast-enter-offset: calc(-1 * var(--charcoal-space-30));
 
-    top: calc(
-      env(safe-area-inset-top, 0px) + max(var(--charcoal-toast-offset), 16px)
-    );
+    top: calc(env(safe-area-inset-top, 0px) + var(--charcoal-toast-offset));
   }
 
   &[data-position='bottom'] {
+    position: fixed;
     --charcoal-toast-enter-offset: var(--charcoal-space-30);
 
     bottom: calc(
-      env(safe-area-inset-bottom, 0px) + max(var(--charcoal-toast-offset), 16px)
+      env(safe-area-inset-bottom, 0px) + var(--charcoal-toast-offset)
     );
   }
 }

package/src/components/Notification/Toast/index.story.tsx

@@ -34,7 +34,6 @@ export default {
   args: {
     message: '保存しました',
     position: 'top',
-    offset: 16,
     duration: 5000,
     order: 'queue',
     zIndex: 20,
@@ -50,6 +49,10 @@ export default {
       control: { type: 'number', min: 0, step: 1 },
       table: { category: 'Hook', defaultValue: { summary: '16' } },
     },
+    headerOffset: {
+      control: { type: 'number', min: 0, step: 1 },
+      table: { category: 'Hook', defaultValue: { summary: '0' } },
+    },
     duration: {
       control: { type: 'number', min: 0, step: 500 },
       description: '表示時間（ミリ秒）',

package/src/components/Notification/Toast/index.test.tsx

@@ -177,7 +177,10 @@ describe('Toast', () => {
 
     show('保存しました', { type: 'success' })
 
-    expect(screen.getByRole('region')).toHaveAttribute('data-position', 'top')
+    expect(document.querySelector('.charcoal-toast-region')).toHaveAttribute(
+      'data-position',
+      'top',
+    )
   })
 
   it('places a toast at the bottom when requested', () => {
@@ -185,7 +188,7 @@ describe('Toast', () => {
 
     show('保存しました', { type: 'success' })
 
-    expect(screen.getByRole('region')).toHaveAttribute(
+    expect(document.querySelector('.charcoal-toast-region')).toHaveAttribute(
       'data-position',
       'bottom',
     )

package/src/components/Notification/__snapshots__/layout.css.snap

@@ -1,11 +1,15 @@
 .charcoal-notification-region {
-  position: fixed;
   left: 0;
   right: 0;
-  display: grid;
-  justify-content: center;
-  pointer-events: none;
   box-sizing: border-box;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  pointer-events: none;
+  top: 0;
 }
 
 .charcoal-notification {

package/src/components/Notification/layout.css

@@ -1,11 +1,15 @@
 .charcoal-notification-region {
-  position: fixed;
   left: 0;
   right: 0;
-  display: grid;
-  justify-content: center;
-  pointer-events: none;
   box-sizing: border-box;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  pointer-events: none;
+  top: 0;
 }
 
 .charcoal-notification {

package/src/components/Notification/types.ts

@@ -9,6 +9,11 @@ export type UseNotificationOptions = {
    * @default 16
    */
   offset?: number
+  /**
+   * スクロールに追従しないヘッダーの高さを指定する
+   * @default 0
+   */
+  headerOffset?: number
   /**
    * 通知を表示する時間（ミリ秒）。負の値は 0、数値でない値は 5000 として扱う
    * @default 5000

package/src/components/TextField/index.tsx

@@ -26,7 +26,6 @@ export type TextFieldProps = {
   requiredText?: string
   disabled?: boolean
   subLabel?: React.ReactNode
-  rdfaPrefix?: string
 
   getCount?: (value: string) => number
 } & Omit<React.ComponentPropsWithoutRef<'input'>, 'prefix' | 'onChange'>