-
Notifications
You must be signed in to change notification settings - Fork 345
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a0954fb
commit 89be95b
Showing
7 changed files
with
182 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import React, { useState } from 'react'; | ||
| import { Flex, IconCompact, SelectList } from 'gestalt'; | ||
|
|
||
| export default function Example() { | ||
| const compactIconsList = IconCompact.icons; | ||
| const [selectedValue, setSelectedValue] = useState(compactIconsList[0]); | ||
|
|
||
| return ( | ||
| <Flex alignItems="center" height="100%" justifyContent="center" width="100%"> | ||
| <Flex alignItems="center" direction="row" gap={4}> | ||
| <SelectList | ||
| id="select-list-example" | ||
| onChange={({ value }) => { | ||
| setSelectedValue(value); | ||
| }} | ||
| > | ||
| {compactIconsList.map((value) => ( | ||
| <SelectList.Option key={value} label={value} value={value} /> | ||
| ))} | ||
| </SelectList> | ||
|
|
||
| <IconCompact accessibilityLabel="Add a new item" color="default" icon={selectedValue} /> | ||
| </Flex> | ||
| </Flex> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import InternalIcon from './Icon/InternalIcon'; | ||
| import compactIconsVR from './icons-vr-theme/compact/index'; | ||
|
|
||
| export type IconColor = | ||
| | 'default' | ||
| | 'disabled' | ||
| | 'subtle' | ||
| | 'success' | ||
| | 'error' | ||
| | 'warning' | ||
| | 'info' | ||
| | 'recommendation' | ||
| | 'inverse' | ||
| | 'shopping' | ||
| | 'brandPrimary' | ||
| | 'light' | ||
| | 'dark'; | ||
|
|
||
| type Props = { | ||
| /** | ||
| * Label for screen readers to announce Icon. This populates the `aria-label` attribute. If the label is hidden, use an empty string for the label (`accessibilityLabel=""`) to set `aria-hidden`. | ||
| * | ||
| * See the [Accessibility guidelines](https://gestalt.pinterest.systems/web/icon#Accessibility) for details on proper usage. | ||
| */ | ||
| accessibilityLabel: string; | ||
| /** | ||
| * The colors available to apply to Icon. | ||
| * | ||
| * See the [color variant](https://gestalt.pinterest.systems/web/icon#Colors) to learn more. | ||
| */ | ||
| color?: IconColor; | ||
| /** | ||
| * Available for testing purposes, if needed. Consider [better queries](https://testing-library.com/docs/queries/about/#priority) before using this prop. | ||
| */ | ||
| dataTestId?: string; | ||
| /** | ||
| * SVG icon from the Gestalt icon library to use within Icon. | ||
| * | ||
| * See the [icon library](https://gestalt.pinterest.systems/foundations/iconography/library) to explore available options. | ||
| */ | ||
| icon?: keyof typeof compactIconsVR; | ||
| /** | ||
| * Defines a new icon different from the built-in Gestalt icons. | ||
| * | ||
| * See the [custom icon](https://gestalt.pinterest.systems/web/icon#Custom-icon) variant to learn more. | ||
| */ | ||
| dangerouslySetSvgPath?: { | ||
| __path: string; | ||
| }; | ||
| /** | ||
| * Properly positions Icon relative to an inline element, such as Text using the inline property. | ||
| */ | ||
| inline?: boolean; | ||
| /** | ||
| * Use a number for pixel sizes or a string for percentage based sizes. | ||
| * | ||
| * See the [size](https://gestalt.pinterest.systems/web/icon#Size) variant to learn more. | ||
| */ | ||
| size?: number | string; | ||
| }; | ||
|
|
||
| // @ts-expect-error - TS2322 - Type 'string[]' is not assignable to type 'readonly ("replace" | "search" | "link" | "text" | "dash" | "3D" | "3D-move" | "360" | "accessibility" | "ad" | "ad-group" | "add" | "add-circle" | "add-layout" | "add-pin" | "add-section" | ... 317 more ... | "wave")[]'. | ||
| const IconNames: ReadonlyArray<keyof typeof compactIconsVR> = Object.keys(compactIconsVR); | ||
|
|
||
| /** | ||
| * [Icons](https://gestalt.pinterest.systems/web/icon) are the symbolic representation of an action or information, providing visual context and improving usability. | ||
| * | ||
| * See the [Iconography and SVG guidelines](https://gestalt.pinterest.systems/foundations/iconography/library) to explore the full icon library. | ||
| * | ||
| *  | ||
| *  | ||
| * | ||
| */ | ||
|
|
||
| function IconCompact({ | ||
| accessibilityLabel, | ||
| color = 'subtle', | ||
| dangerouslySetSvgPath, | ||
| dataTestId, | ||
| icon, | ||
| inline = false, | ||
| size = 16, | ||
| }: Props) { | ||
| return ( | ||
| <InternalIcon | ||
| accessibilityLabel={accessibilityLabel} | ||
| color={color} | ||
| dangerouslySetSvgPath={dangerouslySetSvgPath} | ||
| dataTestId={dataTestId} | ||
| icon={icon} | ||
| inline={inline} | ||
| size={size} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| IconCompact.icons = IconNames; | ||
|
|
||
| IconCompact.displayName = 'IconCompact'; | ||
|
|
||
| export default IconCompact; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters