@tcn/ui 0.12.2 → 0.12.4

package/src/surfaces/pop_confirm/pop_confirm.stories.tsx

@@ -2,25 +2,35 @@ import { useRef, useState } from 'react';
 import { Button } from '../../actions/index.js';
 import { Footer, Header, Section, VBody } from '../../layouts/index.js';
 import { HStack } from '../../stacks/h_stack.js';
-import { PopConfirm as PopConfirmComponent } from './pop_confirm.js';
+import { PopConfirm, type PopConfirmProps } from './pop_confirm.js';
 import { BodyText, Title } from '../../typography/index.js';
 import { VStack } from '../../stacks/v_stack.js';
 import { Spacer } from '../../stacks/spacer.js';
+import { PopperDismissal } from '../../overlay/popper/base/dismissal_decorator.js';
+import {
+  tetheredArgs,
+  tetheredArgTypes,
+} from '../../overlay/tethered/__stories__/shared/base_story_config.js';
 
 export default {
   title: 'Surfaces/Pop Confirm',
-  component: PopConfirmComponent,
+  component: PopConfirm,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
-        component: 'A tooltip component that displays a tooltip when hovered.',
+        component:
+          'A confirmation popover triggered by a button. Supports different dismissal behaviors: click away, mouse leave, and scroll away.',
       },
     },
   },
+  args: tetheredArgs,
+  argTypes: tetheredArgTypes,
 };
 
-export const DefaultPopConfirm = () => {
+export const DefaultPopConfirm = (
+  args: Omit<PopConfirmProps, 'anchorElement' | 'open' | 'onDismissal'>
+) => {
   const anchorRef = useRef<HTMLButtonElement>(null);
   const [open, setOpen] = useState(false);
 
@@ -42,11 +52,14 @@ export const DefaultPopConfirm = () => {
         <Button ref={anchorRef} onClick={prompt}>
           Click to Confirm
         </Button>
-        <PopConfirmComponent
+        <PopConfirm
           height={'200px'}
           open={open}
           onDismissal={cancel}
           anchorElement={anchorRef}
+          // PopperDismissal.CLICK_AWAY is the default dismissal behavior but shown here for demonstration purposes
+          dismissals={[PopperDismissal.CLICK_AWAY]}
+          {...args}
         >
           <Header>
             <Title>Confirmation Title</Title>
@@ -65,8 +78,195 @@ export const DefaultPopConfirm = () => {
               Confirm
             </Button>
           </Footer>
-        </PopConfirmComponent>
+        </PopConfirm>
       </HStack>
     </VStack>
   );
 };
+
+DefaultPopConfirm.parameters = {
+  docs: {
+    description: {
+      story:
+        'Closes only when clicking outside the popover. Clicking inside (title, body, or buttons) keeps it open.',
+    },
+  },
+};
+
+export const ManualCloseOnly = () => {
+  const anchorRef = useRef<HTMLButtonElement>(null);
+  const [open, setOpen] = useState(false);
+
+  return (
+    <VStack hAlign="center" vAlign="center" height="100%" width="100%">
+      <HStack hAlign="center" vAlign="center">
+        <Button ref={anchorRef} onClick={() => setOpen(true)}>
+          Open
+        </Button>
+        <PopConfirm
+          height={'200px'}
+          open={open}
+          onDismissal={() => setOpen(false)}
+          anchorElement={anchorRef}
+          dismissals={[]}
+        >
+          <Header>
+            <Title>Must confirm or cancel</Title>
+          </Header>
+          <VBody>
+            <Section>
+              <BodyText>
+                No automatic dismissal. The popover stays open until you click Cancel or
+                Confirm. Clicking or scrolling outside does nothing.
+              </BodyText>
+            </Section>
+          </VBody>
+          <Footer>
+            <Spacer />
+            <Button hierarchy="secondary" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button hierarchy="primary" onClick={() => setOpen(false)}>
+              Confirm
+            </Button>
+          </Footer>
+        </PopConfirm>
+      </HStack>
+    </VStack>
+  );
+};
+
+ManualCloseOnly.parameters = {
+  docs: {
+    description: {
+      story:
+        'No dismissal behaviors. The popover only closes when the user clicks Cancel or Confirm—clicking outside, scrolling, or moving the pointer away has no effect.',
+    },
+  },
+};
+
+export const MouseLeaveOnly = () => {
+  const anchorRef = useRef<HTMLButtonElement>(null);
+  const [open, setOpen] = useState(false);
+
+  return (
+    <VStack hAlign="center" vAlign="center" height="100%" width="100%">
+      <HStack hAlign="center" vAlign="center">
+        <Button ref={anchorRef} onMouseEnter={() => setOpen(true)}>
+          Hover to confirm
+        </Button>
+        <PopConfirm
+          height={'200px'}
+          open={open}
+          onDismissal={() => setOpen(false)}
+          anchorElement={anchorRef}
+          dismissals={[PopperDismissal.MOUSE_LEAVE]}
+        >
+          <Header>
+            <Title>Confirm action</Title>
+          </Header>
+          <VBody>
+            <Section>
+              <BodyText>
+                Closes when the pointer leaves the popover and trigger area.
+              </BodyText>
+            </Section>
+          </VBody>
+          <Footer>
+            <Spacer />
+            <Button hierarchy="secondary" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button hierarchy="primary" onClick={() => setOpen(false)}>
+              OK
+            </Button>
+          </Footer>
+        </PopConfirm>
+      </HStack>
+    </VStack>
+  );
+};
+
+MouseLeaveOnly.parameters = {
+  docs: {
+    description: {
+      story:
+        'Closes when the mouse leaves the region (popover + trigger). No click-away or scroll-away. Suited to hover-triggered flows.',
+    },
+  },
+};
+
+export const ClickAwayAndScrollAway = () => {
+  const anchorRef = useRef<HTMLButtonElement>(null);
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div
+      style={{
+        height: '320px',
+        overflow: 'auto',
+        padding: '16px',
+        boxSizing: 'border-box',
+      }}
+    >
+      <VStack gap="24px" padding="16px" style={{ minHeight: '600px' }}>
+        <Section>
+          <BodyText>
+            Scroll down to find the button and open the popover. Then scroll this
+            container—the popover will close when you scroll away.
+          </BodyText>
+        </Section>
+        <Spacer />
+        <HStack hAlign="center" vAlign="center">
+          <Button ref={anchorRef} onClick={() => setOpen(true)}>
+            Open
+          </Button>
+          <PopConfirm
+            height={'200px'}
+            open={open}
+            onDismissal={() => setOpen(false)}
+            anchorElement={anchorRef}
+            dismissals={[PopperDismissal.CLICK_AWAY, PopperDismissal.SCROLL_AWAY]}
+          >
+            <Header>
+              <Title>Scroll or click away</Title>
+            </Header>
+            <VBody>
+              <Section>
+                <BodyText>
+                  Closes when you click outside or when you scroll outside the popover.
+                  Scroll the container above or below to see it close.
+                </BodyText>
+              </Section>
+            </VBody>
+            <Footer>
+              <Spacer />
+              <Button hierarchy="secondary" onClick={() => setOpen(false)}>
+                Cancel
+              </Button>
+              <Button hierarchy="primary" onClick={() => setOpen(false)}>
+                Confirm
+              </Button>
+            </Footer>
+          </PopConfirm>
+        </HStack>
+        <Spacer />
+        <Section>
+          <BodyText>
+            More content below. After opening the popover, scroll up or down within this
+            panel—the popover dismisses because the scroll happened outside of it.
+          </BodyText>
+        </Section>
+      </VStack>
+    </div>
+  );
+};
+
+ClickAwayAndScrollAway.parameters = {
+  docs: {
+    description: {
+      story:
+        'Closes on outside click or when scrolling outside the popover. This story uses a scrollable container—open the popover, then scroll the panel; the popover dismisses because the scroll happened outside it.',
+    },
+  },
+};

package/src/surfaces/pop_confirm/pop_confirm.tsx

@@ -14,7 +14,7 @@ export const PopConfirm = React.forwardRef<HTMLDivElement, PopConfirmProps>(
     {
       children,
       className,
-      precision = 'low',
+      precision = 'high',
       dismissals = [PopperDismissal.CLICK_AWAY],
       ...props
     },

package/src/surfaces/tooltip/__stories__/tooltip.stories.tsx

@@ -0,0 +1,136 @@
+import { StyleBox } from '../../../stacks/story_components/style_box.js';
+import { ZStack } from '../../../stacks/z_stack.js';
+import { Tooltip as TooltipComponent, type TooltipProps } from '../tooltip.js';
+import {
+  tetheredArgs,
+  tetheredArgTypes,
+} from '../../../overlay/tethered/__stories__/shared/base_story_config.js';
+import { BodyText, Title } from '../../../typography/index.js';
+import { VStack } from '../../../stacks/v_stack.js';
+import styles from './tooltip_stories.module.css';
+
+export default {
+  title: 'Surfaces/Tooltip',
+  component: TooltipComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A tooltip component that displays a tooltip when hovered.',
+      },
+    },
+  },
+  argTypes: tetheredArgTypes,
+  args: tetheredArgs,
+};
+
+type TooltipStoryProps = TooltipProps & {
+  label: string;
+};
+export const DefaultTooltip = ({
+  label = 'Tooltip content',
+  precision = 'high',
+  ...args
+}: TooltipStoryProps) => {
+  return (
+    <ZStack width="100%" minWidth="400px" minHeight="300px">
+      <TooltipComponent label={label} precision={precision} {...args}>
+        <StyleBox
+          backgroundColor="red"
+          padding="8px"
+          borderRadius={'8px'}
+          width="200px"
+          height="100px"
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+        >
+          Hover to open
+        </StyleBox>
+      </TooltipComponent>
+    </ZStack>
+  );
+};
+
+export const CustomTooltip = ({
+  label = 'Tooltip content',
+  precision = 'high',
+  ...args
+}: TooltipStoryProps) => {
+  return (
+    <ZStack width="100%" minWidth="400px" minHeight="400px">
+      <TooltipComponent
+        className={styles.tooltip}
+        label={
+          <VStack
+            className={styles.label}
+            vAlign="center"
+            hAlign="center"
+            width="200px"
+            height="100px"
+          >
+            <Title>{label}</Title>
+            <BodyText>Custom Tooltip Content</BodyText>
+          </VStack>
+        }
+        precision={precision}
+        {...args}
+      >
+        <StyleBox
+          backgroundColor="red"
+          padding="8px"
+          borderRadius={'8px'}
+          width="200px"
+          height="100px"
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+        >
+          Hover to open
+        </StyleBox>
+      </TooltipComponent>
+    </ZStack>
+  );
+};
+
+export const CustomTooltipLabel = ({
+  label = 'Tooltip content',
+  precision = 'high',
+  ...args
+}: TooltipStoryProps) => {
+  return (
+    <ZStack width="100%" minWidth="400px" minHeight="400px">
+      <TooltipComponent
+        label={
+          <VStack
+            className="tcn-tooltip-label"
+            vAlign="center"
+            hAlign="center"
+            width="200px"
+            height="100px"
+          >
+            <BodyText>✨ Can have custom children and styles</BodyText>
+            <BodyText>
+              ✨ But still inherits the themes tooltip label container styles
+            </BodyText>
+          </VStack>
+        }
+        precision={precision}
+        {...args}
+      >
+        <StyleBox
+          backgroundColor="red"
+          padding="8px"
+          borderRadius={'8px'}
+          width="200px"
+          height="100px"
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+        >
+          Hover to open
+        </StyleBox>
+      </TooltipComponent>
+    </ZStack>
+  );
+};

package/src/surfaces/tooltip/__stories__/tooltip_stories.module.css

@@ -0,0 +1,14 @@
+.tooltip {
+  --custom-color: #e5735c;
+  color: #561a0b;
+
+  :global(.tcn-tethered-origin-indicator) {
+    border-top-color: var(--custom-color);
+  }
+
+  .label {
+    background-color: var(--custom-color);
+    border-radius: 8px;
+    gap: 8px;
+  }
+}

package/src/surfaces/tooltip/tooltip.tsx

@@ -22,7 +22,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(function T
     verticalOrigin = 'bottom',
     horizontalAnchor = 'center',
     horizontalOrigin = 'center',
-    precision = 'low', // TODO: Fix caret styles and set to high
+    precision = 'high',
     label,
     ...props
   },
@@ -54,7 +54,11 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(function T
         className={clsx(className, styles.tooltip, 'tcn-surface', 'tcn-tooltip')}
         {...props}
       >
-        {label}
+        {typeof label === 'string' ? (
+          <span className="tcn-tooltip-label">{label}</span>
+        ) : (
+          label
+        )}
       </PreviewPopper>
     </>
   );

package/src/themes/stories/button_showcase.tsx

@@ -1,14 +1,7 @@
-import { useState } from 'react';
 import { CrossIcon } from '@tcn/icons/cross_icon.js';
 import { PhoneIcon } from '@tcn/icons/phone_icon.js';
 import { BluetoothIcon } from '@tcn/icons/bluetooth_icon.js';
-import {
-  Button,
-  ButtonGroup,
-  SelectGroup,
-  SingleSelectGroup,
-  SlimButton,
-} from '../../actions/index.js';
+import { Button, ButtonGroup } from '../../actions/index.js';
 import { HStack } from '../../stacks/h_stack.js';
 import { VStack } from '../../stacks/v_stack.js';
 import { Spacer } from '../../stacks/spacer.js';
@@ -17,12 +10,6 @@ import { FieldSet } from '../../form/field_set/field_set.js';
 import { BodyText } from '../../typography/index.js';
 
 export function ButtonShowcase() {
-  const [singleSelectedOptions, setSingleSelectedOptions] = useState<string>('option1');
-  const [multiselectOptions, setMultiselectOptions] = useState<string[]>([
-    'option1',
-    'option2',
-  ]);
-
   return (
     <FieldSet legend="Button Showcase">
       {/* Basic Buttons */}
@@ -57,60 +44,41 @@ export function ButtonShowcase() {
         </VStack>
       </Field>
 
-      {/* Select Groups */}
-      <Field label="Select Groups">
-        <VStack width="400px" gap="20px" hAlign="center">
-          <SingleSelectGroup
-            value={singleSelectedOptions}
-            onChange={setSingleSelectedOptions}
-          >
-            <option value="option1">Option 1</option>
-            <option value="option2">Option 2</option>
-            <option value="option3">Option 3</option>
-          </SingleSelectGroup>
-          <SelectGroup value={multiselectOptions} onChange={setMultiselectOptions}>
-            <option value="option1">Option 1</option>
-            <option value="option2">Option 2</option>
-            <option value="option3">Option 3</option>
-          </SelectGroup>
-        </VStack>
-      </Field>
-
       {/* Slim Buttons */}
       <Field label="Slim Buttons">
         <VStack width="400px" gap="20px" hAlign="center">
           <HStack gap="8px" hAlign="center">
-            <SlimButton size="sm" hierarchy="primary">
+            <Button utility size="sm" hierarchy="primary">
               <CrossIcon size="sm" />
-            </SlimButton>
-            <SlimButton size="md" hierarchy="primary">
+            </Button>
+            <Button utility size="md" hierarchy="primary">
               <CrossIcon size="md" />
-            </SlimButton>
-            <SlimButton size="lg" hierarchy="primary">
+            </Button>
+            <Button utility size="lg" hierarchy="primary">
               <CrossIcon size="lg" />
-            </SlimButton>
+            </Button>
           </HStack>
           <HStack gap="8px" hAlign="center">
-            <SlimButton size="sm" hierarchy="secondary">
+            <Button utility size="sm" hierarchy="secondary">
               <PhoneIcon size="sm" />
-            </SlimButton>
-            <SlimButton size="md" hierarchy="secondary">
+            </Button>
+            <Button utility size="md" hierarchy="secondary">
               <PhoneIcon size="md" />
-            </SlimButton>
-            <SlimButton size="lg" hierarchy="secondary">
+            </Button>
+            <Button utility size="lg" hierarchy="secondary">
               <PhoneIcon size="lg" />
-            </SlimButton>
+            </Button>
           </HStack>
           <HStack gap="8px" hAlign="center">
-            <SlimButton size="sm" hierarchy="tertiary">
+            <Button utility size="sm" hierarchy="tertiary">
               <BluetoothIcon size="sm" />
-            </SlimButton>
-            <SlimButton size="md" hierarchy="tertiary">
+            </Button>
+            <Button utility size="md" hierarchy="tertiary">
               <BluetoothIcon size="md" />
-            </SlimButton>
-            <SlimButton size="lg" hierarchy="tertiary">
+            </Button>
+            <Button utility size="lg" hierarchy="tertiary">
               <BluetoothIcon size="lg" />
-            </SlimButton>
+            </Button>
           </HStack>
         </VStack>
       </Field>

package/src/themes/stylesheets/reset.css

@@ -91,17 +91,17 @@
     vertical-align: baseline;
   }
   /* HTML5 display-role reset for older browsers */
+  /* FIXME: sometimes reset breaks stacks display value (flex) */
+  /* header, section */
   article,
   aside,
   details,
   figcaption,
   figure,
   footer,
-  header,
   hgroup,
   menu,
-  nav,
-  section {
+  nav {
     display: block;
   }
   body {