@lotics/ui 1.3.1 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -30,6 +30,7 @@
     "./menu_list_item": "./src/menu_list_item.tsx",
     "./pressable_highlight": "./src/pressable_highlight.tsx",
     "./icon_button": "./src/icon_button.tsx",
+    "./info_popover": "./src/info_popover.tsx",
     "./badge": "./src/badge.tsx",
     "./divider": "./src/divider.tsx",
     "./spacer": "./src/spacer.tsx",

package/src/icon_button.tsx

@@ -13,6 +13,8 @@ export interface IconButtonProps {
   iconColor?: string;
   tooltip?: string;
   tooltipSide?: TooltipSide;
+  /** Accessible name for the button. Falls back to `tooltip` when omitted. */
+  accessibilityLabel?: string;
   onPress?: (event: GestureResponderEvent) => void;
   style?: StyleProp<ViewStyle>;
   disabled?: boolean;
@@ -28,6 +30,7 @@ export function IconButton(props: IconButtonProps) {
     color = "none",
     tooltip,
     tooltipSide,
+    accessibilityLabel,
     disabled,
     style,
   } = props;
@@ -45,6 +48,8 @@ export function IconButton(props: IconButtonProps) {
       testID={testID}
       tooltip={tooltip}
       tooltipSide={tooltipSide}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? tooltip}
       style={[styles.button, styles[color], disabled && styles.disabled, style]}
       onPress={handlePress}
       disabled={disabled}

package/src/info_popover.tsx

@@ -0,0 +1,49 @@
+import { StyleSheet } from "react-native";
+import { Popover, PopoverTrigger, PopoverContent } from "./popover";
+import type { PopoverSide, PopoverAlign } from "./popover";
+import { IconButton } from "./icon_button";
+import { Text } from "./text";
+import { colors } from "./colors";
+
+export interface InfoPopoverProps {
+  /** Explanatory text shown when the popover opens. */
+  text: string;
+  /** Accessible name for the trigger button. */
+  accessibilityLabel?: string;
+  /** Popover placement relative to the trigger. */
+  side?: PopoverSide;
+  /** Popover alignment along the trigger edge. */
+  align?: PopoverAlign;
+}
+
+/**
+ * A "?" icon button that opens a popover explaining something — a metric, a
+ * field, a setting. The middle ground between Tooltip (a short hover label)
+ * and composing Popover directly (rich, interactive content): a labeled,
+ * keyboard-accessible help affordance for a sentence or two of text.
+ */
+export function InfoPopover(props: InfoPopoverProps) {
+  const { text, accessibilityLabel = "More information", side = "bottom", align = "end" } = props;
+  return (
+    <Popover side={side} align={align}>
+      <PopoverTrigger>
+        <IconButton
+          icon="message-circle-question-mark"
+          iconColor={colors.zinc[500]}
+          accessibilityLabel={accessibilityLabel}
+        />
+      </PopoverTrigger>
+      <PopoverContent style={styles.content} disableBodyScroll>
+        <Text size="sm" color="muted">
+          {text}
+        </Text>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    width: 280,
+  },
+});