@patternfly/react-docs 7.6.0-prerelease.8 → 7.6.0-prerelease.9

package/patternfly-docs/generated/components/chip/react-deprecated.js

@@ -1,323 +0,0 @@
-import React from 'react';
-import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
-import { Fragment, useState } from 'react';
-const pageData = {
-  "id": "Chip",
-  "section": "components",
-  "subsection": "",
-  "deprecated": true,
-  "template": false,
-  "beta": false,
-  "demo": false,
-  "newImplementationLink": false,
-  "source": "react-deprecated",
-  "tabName": null,
-  "slug": "/components/chip/react-deprecated",
-  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/deprecated/components/Chip/examples/Chip.md",
-  "relPath": "packages/react-core/src/deprecated/components/Chip/examples/Chip.md",
-  "propComponents": [
-    {
-      "name": "Chip",
-      "description": "",
-      "props": [
-        {
-          "name": "badge",
-          "type": "React.ReactNode",
-          "description": "Badge to add to the chip. The badge will be rendered after the chip text."
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the label."
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the label.",
-          "defaultValue": "''"
-        },
-        {
-          "name": "closeBtn",
-          "type": "React.ReactNode",
-          "description": "Node for custom close button."
-        },
-        {
-          "name": "closeBtnAriaLabel",
-          "type": "string",
-          "description": "Aria label for close button"
-        },
-        {
-          "name": "closeBtnProps",
-          "type": "any",
-          "description": "Additional properties for the default close button."
-        },
-        {
-          "name": "color",
-          "type": "'blue' | 'teal' | 'green' | 'orange' | 'purple' | 'red' | 'orangered' | 'grey' | 'yellow' | LabelColor",
-          "description": "Color of the label."
-        },
-        {
-          "name": "component",
-          "type": "React.ReactNode",
-          "description": "Component that will be used for chip. It is recommended that <button> or <li>  are used when the chip is an overflow chip.",
-          "deprecated": true
-        },
-        {
-          "name": "editableProps",
-          "type": "any",
-          "description": "Additional props passed to the editable label text div. Optionally passing onInput and onBlur callbacks will allow finer custom text input control."
-        },
-        {
-          "name": "href",
-          "type": "string",
-          "description": "Href for a label that is a link. If present, the label will change to an anchor element. This should not be passed in if the onClick prop is also passed in."
-        },
-        {
-          "name": "icon",
-          "type": "React.ReactNode",
-          "description": "Icon added to the left of the label text. Overrides the icon set by the status property."
-        },
-        {
-          "name": "isClickable",
-          "type": "boolean",
-          "description": "Flag indicating the label is clickable. This flag will automatically be set if a href is passed, or if an onClick handler is passed and the label is not an overflow or add variant. This should be manually set when using the render prop."
-        },
-        {
-          "name": "isCompact",
-          "type": "boolean",
-          "description": "Flag indicating the label is compact."
-        },
-        {
-          "name": "isDisabled",
-          "type": "boolean",
-          "description": "Flag indicating the label is disabled. Works only on clickable labels, so either href or onClick props must be passed in."
-        },
-        {
-          "name": "isEditable",
-          "type": "boolean",
-          "description": "Flag indicating the label is editable."
-        },
-        {
-          "name": "isOverflowChip",
-          "type": "boolean",
-          "description": "Flag indicating if the chip is an overflow chip",
-          "defaultValue": "false"
-        },
-        {
-          "name": "isReadOnly",
-          "type": "boolean",
-          "description": "Flag indicating if chip is read only",
-          "defaultValue": "false"
-        },
-        {
-          "name": "onClick",
-          "type": "(event: React.MouseEvent) => void",
-          "description": "Callback for when the label is clicked. This should not be passed in if the href or isEditable props are also passed in.",
-          "defaultValue": "(_e: React.MouseEvent) => undefined as any"
-        },
-        {
-          "name": "onClose",
-          "type": "(event: React.MouseEvent) => void",
-          "description": "Close click callback for removable labels. If present, label will have a close button."
-        },
-        {
-          "name": "onEditCancel",
-          "type": "(event: KeyboardEvent, previousText: string) => void",
-          "description": "Callback when an editable label cancels an edit."
-        },
-        {
-          "name": "onEditComplete",
-          "type": "(event: MouseEvent | KeyboardEvent, newText: string) => void",
-          "description": "Callback when an editable label completes an edit."
-        },
-        {
-          "name": "ouiaId",
-          "type": "number | string",
-          "description": "Value to overwrite the randomly generated data-ouia-component-id."
-        },
-        {
-          "name": "ouiaSafe",
-          "type": "boolean",
-          "description": ""
-        },
-        {
-          "name": "render",
-          "type": "({\n  className,\n  content,\n  componentRef\n}: {\n  className: string;\n  content: React.ReactNode;\n  componentRef: any;\n}) => React.ReactNode",
-          "description": "Forwards the label content and className to rendered function.  Use this prop for react router support."
-        },
-        {
-          "name": "status",
-          "type": "'success' | 'warning' | 'danger' | 'info' | 'custom'",
-          "description": "Status of the label with a respective icon and color. Overrides the color set by the color property."
-        },
-        {
-          "name": "textMaxWidth",
-          "type": "string",
-          "description": "The max width of the label before it is truncated. Can be any valid CSS unit, such as '100%', '100px', or '16ch'.",
-          "defaultValue": "'16ch'"
-        },
-        {
-          "name": "tooltipPosition",
-          "type": "| TooltipPosition\n| 'auto'\n| 'top'\n| 'bottom'\n| 'left'\n| 'right'\n| 'top-start'\n| 'top-end'\n| 'bottom-start'\n| 'bottom-end'\n| 'left-start'\n| 'left-end'\n| 'right-start'\n| 'right-end'",
-          "description": "Position of the tooltip which is displayed if text is truncated",
-          "defaultValue": "'top'"
-        },
-        {
-          "name": "variant",
-          "type": "'outline' | 'filled' | 'overflow' | 'add'",
-          "description": "Variant of the label."
-        }
-      ]
-    },
-    {
-      "name": "ChipGroup",
-      "description": "",
-      "props": [
-        {
-          "name": "aria-label",
-          "type": "string",
-          "description": "Aria label for chip group that does not have a category name",
-          "defaultValue": "'Chip group category'"
-        },
-        {
-          "name": "categoryName",
-          "type": "string",
-          "description": "Category name text for the chip group category.  If this prop is supplied the chip group with have a label and category styling applied",
-          "defaultValue": "''"
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the chip group. Should be <Chip> elements."
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the chip item"
-        },
-        {
-          "name": "closeBtnAriaLabel",
-          "type": "string",
-          "description": "Aria label for close button",
-          "defaultValue": "'Close chip group'"
-        },
-        {
-          "name": "collapsedText",
-          "type": "string",
-          "description": "Customizable template string. Use variable \"${remaining}\" for the overflow chip count.",
-          "defaultValue": "'${remaining} more'"
-        },
-        {
-          "name": "defaultIsOpen",
-          "type": "boolean",
-          "description": "Flag for having the chip group default to expanded",
-          "defaultValue": "false"
-        },
-        {
-          "name": "expandedText",
-          "type": "string",
-          "description": "Customizable \"Show Less\" text string",
-          "defaultValue": "'Show Less'"
-        },
-        {
-          "name": "isClosable",
-          "type": "boolean",
-          "description": "Flag if chip group can be closed",
-          "defaultValue": "false"
-        },
-        {
-          "name": "numChips",
-          "type": "number",
-          "description": "Set number of chips to show before overflow",
-          "defaultValue": "3"
-        },
-        {
-          "name": "onClick",
-          "type": "(event: React.MouseEvent) => void",
-          "description": "Function that is called when clicking on the chip group close button or on an overflow chip"
-        },
-        {
-          "name": "onOverflowChipClick",
-          "type": "(event: React.MouseEvent) => void",
-          "description": "Function that is called when clicking on the overflow (expand/collapse) chip button",
-          "deprecated": true
-        },
-        {
-          "name": "ouiaId",
-          "type": "number | string",
-          "description": "Value to overwrite the randomly generated data-ouia-component-id."
-        },
-        {
-          "name": "ouiaSafe",
-          "type": "boolean",
-          "description": ""
-        },
-        {
-          "name": "tooltipPosition",
-          "type": "| TooltipPosition\n| 'auto'\n| 'top'\n| 'bottom'\n| 'left'\n| 'right'\n| 'top-start'\n| 'top-end'\n| 'bottom-start'\n| 'bottom-end'\n| 'left-start'\n| 'left-end'\n| 'right-start'\n| 'right-end'",
-          "description": "Position of the tooltip which is displayed if the category name text is longer",
-          "defaultValue": "'top'"
-        }
-      ]
-    }
-  ],
-  "cssPrefix": [
-    "pf-v6-c-chip",
-    "pf-v6-c-chip-group"
-  ],
-  "examples": [
-    "Chip variants",
-    "Chip groups",
-    "Chip groups with categories",
-    "Chip groups with removable categories"
-  ]
-};
-pageData.liveContext = {
-  Fragment,
-  useState
-};
-pageData.examples = {
-  'Chip variants': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Badge } from '@patternfly/react-core';\nimport { Chip } from '@patternfly/react-core/deprecated';\n\nexport const ChipDefault: React.FunctionComponent = () => {\n  const [chips, setChips] = useState({\n    chip: {\n      name: 'Chip 1'\n    },\n    longchip: {\n      name: 'Really long chip that goes on and on'\n    },\n    badgechip: {\n      name: 'Chip',\n      isRead: true,\n      count: 7\n    },\n    readonlychip: {\n      name: 'Read-only chip'\n    },\n    overflowchip: {\n      name: 'Overflow chip'\n    }\n  });\n\n  const deleteItem = (id: string) => {\n    setChips({ ...chips, [id]: null });\n  };\n\n  const { chip, longchip, badgechip, readonlychip, overflowchip } = chips;\n  return (\n    <Fragment>\n      {chip && (\n        <Fragment>\n          <Chip key=\"chip1\" onClick={() => deleteItem('chip')}>\n            {chip.name}\n          </Chip>\n          <br /> <br />\n        </Fragment>\n      )}\n      {longchip && (\n        <Fragment>\n          <Chip key=\"chip2\" onClick={() => deleteItem('longchip')}>\n            {longchip.name}\n          </Chip>\n          <br /> <br />\n        </Fragment>\n      )}\n      {badgechip && (\n        <Fragment>\n          <Chip\n            key=\"chip3\"\n            onClick={() => deleteItem('badgechip')}\n            badge={<Badge isRead={badgechip.isRead}>{badgechip.count}</Badge>}\n          >\n            {badgechip.name}\n          </Chip>\n          <br /> <br />\n        </Fragment>\n      )}\n      <Chip key=\"chip4\" onClick={() => deleteItem('readonlychip')} isReadOnly>\n        {readonlychip.name}\n      </Chip>\n      <br /> <br />\n      {overflowchip && (\n        <Chip key=\"chip5\" component=\"button\" onClick={() => deleteItem('overflowchip')} isOverflowChip>\n          {overflowchip.name}\n        </Chip>\n      )}\n    </Fragment>\n  );\n};\n","title":"Chip variants","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Chips can be removable or read-only. The Overflow chip is a special chip that is used to expand or collapse the content of a chip group.`}
-      </p>
-    </Example>,
-  'Chip groups': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Chip, ChipGroup } from '@patternfly/react-core/deprecated';\n\nexport const ChipGroupInline: React.FunctionComponent = () => {\n  const [chips, setChips] = useState([\n    'Chip one',\n    'Really long chip that goes on and on',\n    'Chip three',\n    'Chip four',\n    'Chip five'\n  ]);\n\n  const deleteItem = (id: string) => {\n    const copyOfChips = [...chips];\n    const filteredCopy = copyOfChips.filter((chip) => chip !== id);\n    setChips(filteredCopy);\n  };\n\n  return (\n    <ChipGroup>\n      {chips.map((currentChip) => (\n        <Chip key={currentChip} onClick={() => deleteItem(currentChip)}>\n          {currentChip}\n        </Chip>\n      ))}\n    </ChipGroup>\n  );\n};\n","title":"Chip groups","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`A chip group is a collection of chips that can be grouped by category and used to represent one or more values assigned to a single attribute. When the value of `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`numChips`}
-        </code>
-        {` is exceeded, additional chips will be hidden using an overflow chip.`}
-      </p>
-    </Example>,
-  'Chip groups with categories': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Chip, ChipGroup } from '@patternfly/react-core/deprecated';\n\nexport const ChipGroupWithCategories: React.FunctionComponent = () => {\n  const [chips, setChips] = useState([\n    'Chip one',\n    'Really long chip that goes on and on',\n    'Chip three',\n    'Chip four',\n    'Chip five'\n  ]);\n\n  const deleteItem = (id: string) => {\n    const copyOfChips = [...chips];\n    const filteredCopy = copyOfChips.filter((chip) => chip !== id);\n    setChips(filteredCopy);\n  };\n\n  return (\n    <ChipGroup categoryName=\"Category one\">\n      {chips.map((currentChip) => (\n        <Chip key={currentChip} onClick={() => deleteItem(currentChip)}>\n          {currentChip}\n        </Chip>\n      ))}\n    </ChipGroup>\n  );\n};\n","title":"Chip groups with categories","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Chip groups with removable categories': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Chip, ChipGroup } from '@patternfly/react-core/deprecated';\n\nexport const ChipGroupRemovableCategories: React.FunctionComponent = () => {\n  const [chipGroup1, setChipGroup1] = useState(['Chip one', 'Chip two', 'Chip three']);\n  const [chipGroup2, setChipGroup2] = useState(['Chip one', 'Chip two', 'Chip three', 'Chip four']);\n\n  const deleteItem = (id: string, group: string[]) => {\n    const copyOfChips = [...group];\n    const filteredCopy = copyOfChips.filter((chip) => chip !== id);\n\n    if (group === chipGroup1) {\n      setChipGroup1(filteredCopy);\n    } else {\n      setChipGroup2(filteredCopy);\n    }\n  };\n\n  const deleteCategory = (group: string[]) => {\n    if (group === chipGroup1) {\n      setChipGroup1([]);\n    } else {\n      setChipGroup2([]);\n    }\n  };\n\n  return (\n    <Fragment>\n      <ChipGroup categoryName=\"Category one\" isClosable onClick={() => deleteCategory(chipGroup1)}>\n        {chipGroup1.map((currentChip) => (\n          <Chip key={currentChip} onClick={() => deleteItem(currentChip, chipGroup1)}>\n            {currentChip}\n          </Chip>\n        ))}\n      </ChipGroup>\n      <br /> <br />\n      <ChipGroup categoryName=\"Category two has a very long name\" isClosable onClick={() => deleteCategory(chipGroup2)}>\n        {chipGroup2.map((currentChip) => (\n          <Chip key={currentChip} onClick={() => deleteItem(currentChip, chipGroup2)}>\n            {currentChip}\n          </Chip>\n        ))}\n      </ChipGroup>\n    </Fragment>\n  );\n};\n","title":"Chip groups with removable categories","lang":"ts","className":""}}>
-      
-    </Example>
-};
-
-const Component = () => (
-  <React.Fragment>
-    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
-      {`Examples`}
-    </AutoLinkHeader>
-    {React.createElement(pageData.examples["Chip variants"])}
-    {React.createElement(pageData.examples["Chip groups"])}
-    {React.createElement(pageData.examples["Chip groups with categories"])}
-    {React.createElement(pageData.examples["Chip groups with removable categories"])}
-  </React.Fragment>
-);
-Component.displayName = 'ComponentsChipReactDeprecatedDocs';
-Component.pageData = pageData;
-
-export default Component;