Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Updated spectrum with full component list #1034

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Updated spectrum with full component list #1034

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
331 changes: 252 additions & 79 deletions site/src/sources/spectrum.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,100 +6,273 @@
"by": "Adobe",
"components": [
{
"name": "Menu",
"url": "https://react-spectrum.adobe.com/react-spectrum/Menu.html",
"concepts": [
{
"name": "basic",
"image": "spectrum-menu-basic.png"
},
{
"name": "section",
"image": "spectrum-menu-section.png"
},
{
"name": "selection",
"image": "spectrum-menu-selection.png"
}
]
},
{
"name": "Combobox",
"openUIName": "Select",
"name": "Action bar",
"definition": "Action bars are used for single and bulk selection patterns, when a user needs to perform actions on either a single or multiple items at the same time.",
"url": "https://spectrum.adobe.com/page/action-bar/"
},
{
"name": "Action button",
"definition": "Action buttons allow users to perform an action or mark a selection. They're used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren't meant to draw a lot of attention.",
"url": "https://spectrum.adobe.com/page/action-button/"
},
{
"name": "Action group",
"definition": "An action group is a grouping of action buttons that are related to each other.",
"url": "https://spectrum.adobe.com/page/action-group/"
},
{
"name": "Alert banner",
"definition": "Alert banners show pressing and high-signal messages, such as system alerts. They're meant to be noticed and prompt users to take action.",
"url": "https://spectrum.adobe.com/page/alert-banner/"
},
{
"name": "Alert dialog",
"definition": "Alert dialogs display important information that users need to acknowledge. They appear over the interface and block further interactions until an action is selected.",
"url": "https://spectrum.adobe.com/page/alert-dialog/"
},
{
"name": "Avatar",
"definition": "An avatar is a thumbnail representation of an entity, such as a user or an organization.",
"url": "https://spectrum.adobe.com/page/avatar/"
},
{
"name": "Badge",
"definition": "Similar to status lights, badges are for showing a small amount of color-categorized metadata. They're ideal for getting a user''s attention.",
"url": "https://spectrum.adobe.com/page/badge/"
},
{
"name": "Body",
"definition": "Body is a typography component primarily used within Spectrum components and for blocks of text.",
"url": "https://spectrum.adobe.com/page/body/"
},
{
"name": "Bottom navigation (Android)",
"definition": "Bottom navigation is a top-level navigation control for Android apps.",
"url": "https://spectrum.adobe.com/page/bottom-navigation-android/"
},
{
"name": "Breadcrumbs",
"openUIName": "Breadcrumb",
"definition": "Breadcrumbs show hierarchy and navigational context for a user’s location within an app.",
"url": "https://spectrum.adobe.com/page/breadcrumbs/"
},
{
"name": "Button",
"definition": "Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.",
"url": "https://spectrum.adobe.com/page/button/"
},
{
"name": "Button group",
"definition": "A button group is a grouping of buttons whose actions are related to each other.",
"url": "https://spectrum.adobe.com/page/button-group/"
},
{
"name": "Checkbox",
"definition": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
"url": "https://spectrum.adobe.com/page/checkbox/"
},
{
"name": "Checkbox group",
"definition": "A checkbox group is a grouping of checkboxes that are related to each other.",
"url": "https://spectrum.adobe.com/page/checkbox-group/"
},
{
"name": "Close button",
"definition": "The close button is used inside of other components, like a toast or an action bar, for closing or dismissing its parent component.",
"url": "https://spectrum.adobe.com/page/close-button/"
},
{
"name": "Code",
"definition": "Detail is a typography component used for disclosing extra information or smaller items in hierarchical relationships of text.",
"url": "https://spectrum.adobe.com/page/code/"
},
{
"name": "Color area",
"definition": "A color area allows users to visually select two properties of a color simultaneously. It's commonly used together with a color slider or color wheel.",
"url": "https://spectrum.adobe.com/page/color-area/"
},
{
"name": "Color loupe",
"definition": "A color loupe shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection.",
"url": "https://spectrum.adobe.com/page/color-loupe/"
},
{
"name": "Color slider",
"definition": "A color slider lets users visually change an individual channel of a color.",
"url": "https://spectrum.adobe.com/page/color-slider/"
},
{
"name": "Color wheel",
"definition": "A color wheel lets users visually change an individual channel of a color on a circular track.",
"url": "https://spectrum.adobe.com/page/color-wheel/"
},
{
"name": "Combo box",
"definition": "Combo boxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.",
"url": "https://spectrum.adobe.com/page/combo-box/"
},
{
"name": "Combobox",
"openUIName": "Combobox",
"definition": "Combo boxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.",
"url": "https://spectrum.adobe.com/page/combo-box/",
"concepts": [
{
"name": "borderless",
"image": "/combobox/spectrum-borderless.png"
},
{
"name": "autocomplete-list",
"image": "/combobox/spectrum-autocomplete-list.png"
},
{
"name": "autocomplete-inline",
"image": "/combobox/spectrum-autocomplete-inline.png"
},
{
"name": "label-position",
"image": "/combobox/spectrum-label-position.png"
},
{
"name": "required",
"image": "/combobox/spectrum-required.png"
},
{
"name": "disabled",
"image": "/combobox/spectrum-disabled.png"
},
{
"name": "error",
"image": "/combobox/spectrum-error.png"
},
{
"name": "internationalisation",
"image": "/combobox/spectrum-internationalisation.png"
},
{
"name": "truncate",
"image": "/combobox/spectrum-truncate.png"
}
]
"name": "Contextual help",
"definition": "Contextual help shows a user extra information about the state of either an adjacent component or an entire view. It explains a high-level topic about an experience and can point users to more information elsewhere.",
"url": "https://spectrum.adobe.com/page/contextual-help/"
},
{
"name": "Detail",
"definition": "Detail is a typography component used for disclosing extra information or smaller items in hierarchical relationships of text.",
"url": "https://spectrum.adobe.com/page/detail/"
},
{
"name": "Divider",
"definition": "Dividers bring clarity to a layout by grouping and dividing content in close proximity. They can also be used to establish rhythm and hierarchy.",
"url": "https://spectrum.adobe.com/page/divider/"
},
{
"name": "Field label",
"definition": "Field labels give context to the information that a user needs to input. They're commonly used in forms.",
"url": "https://spectrum.adobe.com/page/field-label/"
},
{
"name": "Heading",
"definition": "Heading is a typography component used to create various levels of hierarchies between text.",
"url": "https://spectrum.adobe.com/page/heading/"
},
{
"name": "Help text",
"definition": "Help text provides either an informative description or an error message that gives more context about what a user needs to input. It’s commonly used in forms.",
"url": "https://spectrum.adobe.com/page/help-text/"
},
{
"name": "In-line alert",
"definition": "In-line alerts display a non-modal message associated with objects in a view. These are often used in form validation, providing a place to aggregate feedback related to multiple fields.",
"url": "https://spectrum.adobe.com/page/in-line-alert/"
},
{
"name": "Link",
"definition": "Links allow users to navigate to a different location. They can be presented inside a paragraph or as standalone text.",
"url": "https://spectrum.adobe.com/page/link/"
},
{
"name": "Menu",
"definition": "Menus help users take actions, choose from a list of options, configure settings, and more. They can be placed in a transient container, like a popover or tray.",
"url": "https://spectrum.adobe.com/page/menu/"
},
{
"name": "Meter",
"definition": "Meters are visual representations of a quantity or an achievement. Their progress is determined by user actions, rather than system actions.",
"url": "https://spectrum.adobe.com/page/meter/"
},
{
"name": "Picker",
"openUIName": "Select",
"definition": "Pickers allow users to choose from a list of options in a limited space. The list of options can change based on the context.",
"definition": "Pickers (sometimes known as \"dropdowns\" or \"selects\") allow users to choose from a list of options in a limited space. The list of options can change based on the context.",
"url": "https://spectrum.adobe.com/page/picker/"
},
{
"name": "Responsive Grid",
"definition": "A responsive grid allows a layout to change dynamically based on the size of the screen. This also guarantees consistent layouts across Adobe’s products.",
"url": "https://spectrum.adobe.com/page/responsive-grid/"
"name": "Popover",
"definition": "Popovers are containers used to display transient content such as menus, options, additional actions, and more. They visually stand out through stroke and drop shadow and float on top of the interface.",
"url": "https://spectrum.adobe.com/page/popover/"
},
{
"name": "Progress bar",
"definition": "Progress bars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way. They can represent either determinate or indeterminate progress.",
"url": "https://spectrum.adobe.com/page/progress-bar/"
},
{
"name": "Progress circle",
"definition": "Progress circles show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. They can represent determinate or indeterminate progress.",
"url": "https://spectrum.adobe.com/page/progress-circle/"
},
{
"name": "Radio Group",
"definition": "A radio group is a grouping of radio buttons that are related to each other.",
"url": "https://spectrum.adobe.com/page/radio-group/"
},
{
"name": "Rating",
"definition": "The rating component lets users apply a rating to an item or experience, such as an image, a forum post, an item for sale in a marketplace, and more.",
"url": "https://spectrum.adobe.com/page/rating/"
},
{
"name": "Scroll-zoom bar",
"definition": "Primarily for usage in timelines, a scroll-zoom bar lets a user scroll or zoom with the same control.",
"url": "https://spectrum.adobe.com/page/scroll-zoom-bar/"
},
{
"name": "Side navigation",
"definition": "Side navigation lets users navigate the entire content of a product or a section. These can be used for a single level or a multi-level navigation.",
"url": "https://spectrum.adobe.com/page/side-navigation/"
},
{
"name": "Slider",
"definition": "Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.",
"url": "https://spectrum.adobe.com/page/slider/"
},
{
"name": "Status light",
"definition": "Status lights describe the condition of an entity. They can be used to convey semantic meaning, such as statuses and categories.",
"url": "https://spectrum.adobe.com/page/status-light/"
},
{
"name": "Swatch",
"definition": "A swatch shows a small sample of a fill — such as a color, gradient, texture, or material — that is intended to be applied to an object.",
"url": "https://spectrum.adobe.com/page/swatch/"
},
{
"name": "Swatch group",
"definition": "A swatch group is a grouping of swatches that are related to each other.",
"url": "https://spectrum.adobe.com/page/swatch-group/"
},
{
"name": "Switch",
"definition": "Switches allow users to turn an individual option on or off. They are usually used to activate or deactivate a specific setting.",
"url": "https://spectrum.adobe.com/page/switch/"
},
{
"name": "Tab bar (iOS)",
"definition": "Tab bar is a top-level navigation control for iOS apps.",
"url": "https://spectrum.adobe.com/page/tab-bar-ios/"
},
{
"name": "Tabs",
"definition": "Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.",
"url": "https://spectrum.adobe.com/page/tabs/"
},
{
"name": "Tag",
"definition": "Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request.",
"url": "https://spectrum.adobe.com/page/tag/"
},
{
"name": "Text area",
"openUIName": "InputText",
"definition": "A text area lets a user input a longer amount of text than a standard text field. It can include all of the standard validation options supported by the text field component.",
"url": "https://spectrum.adobe.com/page/text-area/"
},
{
"name": "Text field",
"openUIName": "InputText",
"definition": "A responsive grid allows a layout to change dynamically based on the size of the screen. This also guarantees consistent layouts across Adobe’s products.",
"url": "https://opensource.adobe.com/spectrum-css/textfield.html",
"concepts": [
{
"name": "basic"
},
{
"name": "disabled"
},
{
"name": "readonly"
}
]
"definition": "Text fields allow users to input custom text entries with a keyboard. Various options can be shown with the field to communicate the input requirements.",
"url": "https://spectrum.adobe.com/page/text-field/"
},
{
"name": "Toast",
"definition": "Toasts display brief, temporary notifications. They're meant to be noticed without disrupting a user's experience or requiring an action to be taken.",
"url": "https://spectrum.adobe.com/page/toast/"
},
{
"name": "Tooltip",
"definition": "Tooltips show contextual help or information about specific components when a user hovers or focuses on them.",
"url": "https://spectrum.adobe.com/page/tooltip/"
},
{
"name": "Tray",
"definition": "Trays are containers that display transient content such as menus, options, additional actions, and more. They only exist on mobile experiences and are used for exposing types of content that may be too overwhelming for popovers.",
"url": "https://spectrum.adobe.com/page/tray/"
},
{
"name": "Tree view",
"definition": "A tree view provides users with a way to navigate nested hierarchical information.",
"url": "https://spectrum.adobe.com/page/tree-view/"
}
]
}