feat: rename is* props (#8332)

* feat: renamed isDisabled to disabled * feat: rename isReadOnly to readOnly * chore: rename isRequired to required * chore: rename isInvalid to invalid * feat: rename isChecked to checked * feat: rename isIndeterminate to indeterminate * feat: rename isFocusable to focusable * feat: rename isFocused to focused * feat: renamed isOpen to open, defaultIsOpen to defaultOpen, isLazy to lazyMount * feat: rename isExpanded to isOpen in AccordionItem api * feat: rename isAttached to attached
chakra-ui · Mar 15, 2024 · a1aaaec · a1aaaec
1 parent 71c0244
commit a1aaaec
Show file tree

Hide file tree

Showing 137 changed files with 1,030 additions and 1,054 deletions.
diff --git a/packages/components/src/accordion/accordion-content.tsx b/packages/components/src/accordion/accordion-content.tsx
@@ -46,7 +46,7 @@ export const AccordionContent = forwardRef<AccordionContentProps, "div">(
 
     if (!rootApi.reduceMotion) {
       return (
-        <Collapse in={api.isOpen} {...motionProps}>
+        <Collapse in={api.open} {...motionProps}>
           {child}
         </Collapse>
       )

diff --git a/packages/components/src/accordion/accordion-icon.tsx b/packages/components/src/accordion/accordion-icon.tsx
@@ -16,15 +16,15 @@ export type AccordionIconProps = PropsOf<typeof Icon>
  */
 
 export function AccordionIcon(props: AccordionIconProps) {
-  const { isOpen, isDisabled } = useAccordionItemContext()
+  const { open, disabled } = useAccordionItemContext()
   const { reduceMotion } = useAccordionContext()
 
   const _className = cx("chakra-accordion__icon", props.className)
   const styles = useAccordionStyles()
 
   const iconStyles = defineStyle({
-    opacity: isDisabled ? 0.4 : 1,
-    transform: isOpen ? "rotate(-180deg)" : undefined,
+    opacity: disabled ? 0.4 : 1,
+    transform: open ? "rotate(-180deg)" : undefined,
     transition: reduceMotion ? undefined : "transform 0.2s",
     transformOrigin: "center",
     ...styles.icon,

diff --git a/packages/components/src/accordion/accordion-item.tsx b/packages/components/src/accordion/accordion-item.tsx
@@ -9,7 +9,7 @@ import { splitAccordionItemProps } from "./accordion-props"
 import { UseAccordionItemProps, useAccordionItem } from "./use-accordion"
 
 interface AccordionItemState {
-  isExpanded: boolean
+  isOpen: boolean
   isDisabled: boolean
 }
 
@@ -37,8 +37,9 @@ export const AccordionItem = forwardRef<AccordionItemProps, "div">(
     const styles = useAccordionStyles()
 
     const itemState = {
-      isExpanded: !!itemApi.isOpen,
-      isDisabled: !!itemApi.isDisabled,
+      isOpen: !!itemApi.open,
+      isDisabled: !!itemApi.disabled,
+      isFocused: !!itemApi.focused,
     }
 
     return (

diff --git a/packages/components/src/accordion/accordion-props.ts b/packages/components/src/accordion/accordion-props.ts
@@ -2,9 +2,9 @@ import { createProps, createSplitProps } from "@chakra-ui/utils"
 import { UseAccordionItemProps, UseAccordionProps } from "./use-accordion"
 
 const accordionItemProps = createProps<UseAccordionItemProps>()([
-  "isDisabled",
+  "disabled",
   "id",
-  "isFocusable",
+  "focusable",
   "value",
 ])
 

diff --git a/packages/components/src/accordion/accordion.stories.tsx b/packages/components/src/accordion/accordion.stories.tsx
@@ -240,14 +240,14 @@ export function WithSearchFilter() {
 }
 
 export const FocusBug = () => {
-  const { isOpen, onOpen, onClose } = useDisclosure()
+  const { open, onOpen, onClose } = useDisclosure()
 
   return (
     <Box textAlign="center" fontSize="xl">
       <Button colorScheme="teal" onClick={onOpen}>
         Open
       </Button>
-      <Drawer.Root isOpen={isOpen} placement="right" onClose={onClose}>
+      <Drawer.Root open={open} placement="right" onClose={onClose}>
         <Drawer.Overlay />
         <Drawer.Positioner>
           <Drawer.Content>
@@ -317,20 +317,20 @@ export const FocusBug = () => {
 
 export const WithDisabledItem = () => {
   return (
-    <Accordion.Root value={["1"]}>
-      <Accordion.Item value="1" isDisabled>
+    <Accordion.Root defaultValue={["1"]}>
+      <Accordion.Item value="1" disabled>
         <Accordion.Trigger>Button 1</Accordion.Trigger>
         <Accordion.Content>One Content</Accordion.Content>
       </Accordion.Item>
-      <Accordion.Item value="2" isDisabled>
+      <Accordion.Item value="2" disabled>
         <Accordion.Trigger>Button 2</Accordion.Trigger>
         <Accordion.Content>Two Content</Accordion.Content>
       </Accordion.Item>
       <Accordion.Item value="3">
         <Accordion.Trigger>Button 3</Accordion.Trigger>
         <Accordion.Content>Three Content</Accordion.Content>
       </Accordion.Item>
-      <Accordion.Item value="4" isDisabled>
+      <Accordion.Item value="4" disabled>
         <Accordion.Trigger>Button 4</Accordion.Trigger>
         <Accordion.Content>Four Content</Accordion.Content>
       </Accordion.Item>
@@ -341,3 +341,39 @@ export const WithDisabledItem = () => {
     </Accordion.Root>
   )
 }
+
+export const ItemApi = () => (
+  <Accordion.Root>
+    <Accordion.Item>
+      {({ isOpen }) => (
+        <>
+          <h2>
+            <Accordion.Trigger>
+              <chakra.div flex="1" textAlign="left">
+                Section 1 title {isOpen ? "open" : "closed"}
+              </chakra.div>
+              <Accordion.Icon />
+            </Accordion.Trigger>
+          </h2>
+          <Accordion.Content>Panel 1</Accordion.Content>
+        </>
+      )}
+    </Accordion.Item>
+
+    <Accordion.Item>
+      {({ isOpen }) => (
+        <>
+          <h2>
+            <Accordion.Trigger>
+              <chakra.div flex="1" textAlign="left">
+                Section 2 title {isOpen ? "open" : "closed"}
+              </chakra.div>
+              <Accordion.Icon />
+            </Accordion.Trigger>
+          </h2>
+          <Accordion.Content>Panel 2</Accordion.Content>
+        </>
+      )}
+    </Accordion.Item>
+  </Accordion.Root>
+)
diff --git a/packages/components/src/accordion/use-accordion-item-state.ts b/packages/components/src/accordion/use-accordion-item-state.ts
@@ -4,6 +4,6 @@ import { useAccordionItemContext } from "./accordion-context"
  * React hook to get the state and actions of an accordion item
  */
 export function useAccordionItemState() {
-  const { isOpen, isDisabled, onClose, onOpen } = useAccordionItemContext()
-  return { isOpen, onClose, isDisabled, onOpen }
+  const { open, disabled, onClose, onOpen } = useAccordionItemContext()
+  return { open, onClose, disabled, onOpen }
 }
diff --git a/packages/components/src/accordion/use-accordion.ts b/packages/components/src/accordion/use-accordion.ts
@@ -86,36 +86,36 @@ export function useAccordion(props: UseAccordionProps) {
   })
 
   /**
-   * Gets the `isOpen` and `onChange` props for a child accordion item based on
+   * Gets the `open` and `onChange` props for a child accordion item based on
    * the child's index.
    *
    * @param itemValue {string} The value of the child accordion item
    */
   const getAccordionItemProps = (itemValue: string | null) => {
-    let isOpen = false
+    let open = false
 
     if (itemValue) {
-      isOpen = value.includes(itemValue)
+      open = value.includes(itemValue)
     }
 
-    const onChange = (isOpen: boolean) => {
+    const onChange = (open: boolean) => {
       if (itemValue === null) return
 
       if (multiple) {
         //
-        const nextState = isOpen
+        const nextState = open
           ? value.concat(itemValue)
           : value.filter((i) => i !== itemValue)
 
         setValue(nextState)
-      } else if (isOpen) {
+      } else if (open) {
         setValue([itemValue])
       } else if (collapsible) {
         setValue([])
       }
     }
 
-    return { isOpen, onChange }
+    return { open, onChange }
   }
 
   return {
@@ -142,13 +142,13 @@ export interface UseAccordionItemProps {
    *
    * @default false
    */
-  isDisabled?: boolean
+  disabled?: boolean
   /**
    * If `true`, the accordion item will be focusable.
    *
    * @default false
    */
-  isFocusable?: boolean
+  focusable?: boolean
   /**
    * The unique id of the accordion item.
    */
@@ -174,8 +174,8 @@ function makeId(type: string, id: string, value: string) {
  * for an accordion item and its children
  */
 export function useAccordionItem(props: UseAccordionItemProps) {
-  const { isDisabled, isFocusable, value } = props
-  const { getAccordionItemProps, setFocusedId, rootRef, id } =
+  const { disabled, focusable, value } = props
+  const { getAccordionItemProps, setFocusedId, focusedId, rootRef, id } =
     useAccordionContext()
 
   /**
@@ -191,9 +191,9 @@ export function useAccordionItem(props: UseAccordionItemProps) {
 
   focusableNotDisabledWarning(props)
 
-  const { isOpen, onChange } = getAccordionItemProps(uid)
+  const { open, onChange } = getAccordionItemProps(uid)
 
-  warnIfOpenAndDisabled({ isOpen, isDisabled })
+  warnIfOpenAndDisabled({ open, disabled })
 
   const onOpen = () => {
     onChange?.(true)
@@ -207,9 +207,9 @@ export function useAccordionItem(props: UseAccordionItemProps) {
    * Toggle the visibility of the accordion item
    */
   const onClick = useCallback(() => {
-    onChange?.(!isOpen)
+    onChange?.(!open)
     setFocusedId(buttonId)
-  }, [isOpen, onChange, setFocusedId, buttonId])
+  }, [open, onChange, setFocusedId, buttonId])
 
   /**
    * Manage keyboard navigation between accordion items.
@@ -264,15 +264,15 @@ export function useAccordionItem(props: UseAccordionItemProps) {
         type: "button",
         ref: mergeRefs(buttonRef, ref),
         id: buttonId,
-        disabled: !!isDisabled,
-        "aria-expanded": !!isOpen,
+        disabled: !!disabled,
+        "aria-expanded": !!open,
         "aria-controls": panelId,
         onClick: callAllHandlers(props.onClick, onClick),
         onFocus: callAllHandlers(props.onFocus, onFocus),
         onKeyDown: callAllHandlers(props.onKeyDown, onKeyDown),
       }
     },
-    [buttonId, isDisabled, isOpen, onClick, onFocus, onKeyDown, panelId],
+    [buttonId, disabled, open, onClick, onFocus, onKeyDown, panelId],
   )
 
   const getContentProps = useCallback(
@@ -286,16 +286,17 @@ export function useAccordionItem(props: UseAccordionItemProps) {
         role: "region",
         id: panelId,
         "aria-labelledby": buttonId,
-        hidden: !isOpen,
+        hidden: !open,
       }
     },
-    [buttonId, isOpen, panelId],
+    [buttonId, open, panelId],
   )
 
   return {
-    isOpen,
-    isDisabled,
-    isFocusable,
+    open,
+    disabled,
+    focusable,
+    focused: focusedId === buttonId,
     onOpen,
     onClose,
     getTriggerProps,
@@ -328,18 +329,15 @@ function multipleAndcollapsibleWarning(props: UseAccordionProps) {
 
 function focusableNotDisabledWarning(props: UseAccordionItemProps) {
   warn({
-    condition: !!(props.isFocusable && !props.isDisabled),
-    message: `Using only 'isFocusable', this prop is reserved for situations where you pass 'isDisabled' but you still want the element to receive focus (A11y). Either remove it or pass 'isDisabled' as well.
+    condition: !!(props.focusable && !props.disabled),
+    message: `Using only 'focusable', this prop is reserved for situations where you pass 'disabled' but you still want the element to receive focus (A11y). Either remove it or pass 'disabled' as well.
     `,
   })
 }
 
-function warnIfOpenAndDisabled(props: {
-  isOpen: boolean
-  isDisabled?: boolean
-}) {
+function warnIfOpenAndDisabled(props: { open: boolean; disabled?: boolean }) {
   warn({
-    condition: props.isOpen && !!props.isDisabled,
+    condition: props.open && !!props.disabled,
     message: "Cannot open a disabled accordion item",
   })
 }
diff --git a/packages/components/src/button/button-context.ts b/packages/components/src/button/button-context.ts
@@ -5,7 +5,7 @@ export interface ButtonGroupContext extends ThemingProps<"Button"> {
   /**
    * @default false
    */
-  isDisabled?: boolean
+  disabled?: boolean
 }
 
 export const [ButtonGroupProvider, useButtonGroup] =

diff --git a/packages/components/src/button/button-group.test.tsx b/packages/components/src/button/button-group.test.tsx
@@ -23,7 +23,7 @@ test("Should apply spacing", () => {
 })
 test("Should flush button", () => {
   const { getByText } = render(
-    <ButtonGroup isAttached>
+    <ButtonGroup attached>
       <Button>Button 1</Button>
       <Button>Button 2</Button>
       <Button>Button 3</Button>
@@ -48,7 +48,7 @@ test("Should flush button", () => {
 
 test("Should flush outline button", () => {
   const { getByText } = render(
-    <ButtonGroup isAttached variant="outline">
+    <ButtonGroup attached variant="outline">
       <Button>Button 1</Button>
       <Button>Button 2</Button>
       <Button>Button 3</Button>
@@ -71,7 +71,7 @@ test("Should flush outline button", () => {
 
 test("Should flush vertical button", () => {
   const { getByText } = render(
-    <ButtonGroup isAttached orientation="vertical" variant="outline">
+    <ButtonGroup attached orientation="vertical" variant="outline">
       <Button>Button 1</Button>
       <Button>Button 2</Button>
       <Button>Button 3</Button>

diff --git a/packages/components/src/button/button-group.tsx b/packages/components/src/button/button-group.tsx
@@ -42,22 +42,22 @@ export const ButtonGroup = forwardRef<ButtonGroupProps, "div">(
       variant,
       className,
       spacing = "0.5rem",
-      isAttached,
-      isDisabled,
+      attached,
+      disabled,
       orientation = "horizontal",
       ...rest
     } = props
 
     const _className = cx("chakra-button__group", className)
 
     const context: ButtonGroupContext = useMemo(
-      () => ({ size, colorScheme, variant, isDisabled }),
-      [size, colorScheme, variant, isDisabled],
+      () => ({ size, colorScheme, variant, disabled }),
+      [size, colorScheme, variant, disabled],
     )
 
     let groupStyles = defineStyle({
       display: "inline-flex",
-      ...(isAttached
+      ...(attached
         ? attachedStyles[orientation]
         : gapStyles[orientation](spacing)),
     })
@@ -71,7 +71,7 @@ export const ButtonGroup = forwardRef<ButtonGroupProps, "div">(
           role="group"
           __css={groupStyles}
           className={_className}
-          data-attached={isAttached ? "" : undefined}
+          data-attached={attached ? "" : undefined}
           data-orientation={orientation}
           flexDir={isVertical ? "column" : undefined}
           {...rest}