sp-infield-button

NPM 1.6.0

View Storybook

Overview

API

Changelog

Description

When composing complex form fields, an <sp-infield-button> can visually associate button functionality with other form fields to delivery enhanced capabilities to your visitors.

Usage

yarn add @spectrum-web-components/infield-button

Import the side effectful registration of <sp-infield-button> via:

import '@spectrum-web-components/infield-button/sp-infield-button.js';

When looking to leverage the InfieldButton base class as a type and/or for extension purposes, do so via:

import { InfieldButton } from '@spectrum-web-components/infield-button';

Sizes

Small

Medium

<sp-infield-button label="Add" size="m">
    <sp-icon-add></sp-icon-add>
</sp-infield-button>

Large

Extra Large

Inline buttons

Use the inline attribute to describe whether the <sp-infield-button> should be visually at the start or end of the field is associated to:

inline="start"

<sp-infield-button inline="start" label="Add">
    <sp-icon-add></sp-icon-add>
</sp-infield-button>

inline="end"

<sp-infield-button inline="end" label="Add">
    <sp-icon-add></sp-icon-add>
</sp-infield-button>

Stacked buttons

The block attribute can be used to create a vertial stack of buttons. You can place buttons visually on the stack with the start or end values:

<sp-infield-button block="start" label="Increment">
    <sp-icon-add size="xxs"></sp-icon-add>
</sp-infield-button>
<sp-infield-button block="end" label="Decrement">
    <sp-icon-remove size="xxs"></sp-icon-remove>
</sp-infield-button>

Disabled

An <sp-infield-button> with the disabled attribute will become non-interactive and dimmed:

<sp-infield-button disabled inline="start" label="Add">
    <sp-icon-add></sp-icon-add>
</sp-infield-button>

Quiet

An <sp-infield-button> with the quiet attribute will feature a diminished visual presence:

<sp-infield-button inline="start" label="Add" quiet>
    <sp-icon-add></sp-icon-add>
</sp-infield-button>

Attributes and Properties

Property

Attribute

Type

Default

Description

active

boolean

false

disabled

boolean

false

Disable this control. It will not receive focus or events

download

string | undefined

Causes the browser to treat the linked URL as a download.

href

string | undefined

The URL that the hyperlink points to.

label

string | undefined

An accessible label that describes the component. It will be applied to aria-label, but not visually rendered.

referrerpolicy

| 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url' | undefined

How much of the referrer to send when following the link.

rel

string | undefined

The relationship of the linked URL as space-separated link types.

tabIndex

number

The tab index to apply to this control. See general documentation about the tabindex HTML property

target

'_blank' | '_parent' | '_self' | '_top' | undefined

Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).

type

'button' | 'submit' | 'reset'

'button'

The default behavior of the button. Possible values are: `button` (default), `submit`, and `reset`.

Slots

Name

Description

default slot

text content to be displayed in the Button element

icon

icon element(s) to display at the start of the button

Patch Changes

#5157 9e15a66 Thanks @TarunAdobe! - # Release Note

Infield Button
Section titled Infield Button
6.1.2
Section titled 6.1.2
- #3615 f09c84a Thanks @Rajdeepc! - ### Infield button fast follows
  - Updated infield button disabled border color to use -spectrum-gray-300 for spectrum-two theme and -spectrum-gray-200 for other themes.
6.1.1
Section titled 6.1.1
📝 #3536 f77aa72 Thanks @marissahuysentruyt!
- S2 Foundations fixes
  - Adjusts the background-color of the infield button components within stepper to use gray-100 as opposed to gray-25.
    - This corresponds to the background-color updates picker has for S2.
  - Corrects the border color for the default picker for S2 foundations, using gray-500 (instead of gray-800) to align with other field/form components.
  - Refactors the &.is-keyboardFocused&.is-placeholder selector to &.is-keyboardFocused.spectrum-Picker-label.is-placeholder to avoid unexpectedly targeting the nested placeholder class.
6.1.0
Section titled 6.1.0
📝 #3541 1a3245c Thanks @castastrophe!

Dependency alignment across the project.
- Updated dependencies [205182b, 1a3245c]:
  - @spectrum-css/icon@9.1.0
  - @spectrum-css/tokens@16.0.1
Number Field
Section titled Number Field
Bump @spectrum-css/stepper to 7.1.3

7.1.3
Section titled 7.1.3
- #3621 3aec28a Thanks @marissahuysentruyt!
  - Updates -spectrum-stepper-buttons-border-color-keyboard-focus from gray-900 to gray-800 to match the rest of the border color on keyboardFocus.
7.1.2
Section titled 7.1.2
📝 #3594 6200a63 Thanks @TarunAdobe!
- Updates Stepper's key-focus border color (-spectrum-stepper-border-color-keyboard-focus) to -spectrum-gray-800.
7.1.1
Section titled 7.1.1
📝 #3536 f77aa72 Thanks @marissahuysentruyt!
- S2 Foundations fixes
  - Adjusts the background-color of the infield button components within stepper to use gray-100 as opposed to gray-25.
    - This corresponds to the background-color updates picker has for S2.
  - Corrects the border color for the default picker for S2 foundations, using gray-500 (instead of gray-800) to align with other field/form components.
  - Refactors the &.is-keyboardFocused&.is-placeholder selector to &.is-keyboardFocused.spectrum-Picker-label.is-placeholder to avoid unexpectedly targeting the nested placeholder class.
7.1.0
Section titled 7.1.0
📝 #3541 1a3245c Thanks @castastrophe!

Dependency alignment across the project.
- Updated dependencies [205182b, 9b108f7, 1a3245c]:
  - @spectrum-css/actionbutton@8.0.0
  - @spectrum-css/icon@9.1.0
  - @spectrum-css/infieldbutton@7.0.0
  - @spectrum-css/textfield@9.0.0
  - @spectrum-css/tokens@16.0.1
Textfield
Section titled Textfield
8.1.1
Section titled 8.1.1
📝 #3575 2e17d10 Thanks @TarunAdobe!
- Updated border color on keyboard focus state for textfield in spectrum-two theme.
8.1.0
Section titled 8.1.0
📝 #3539 9b108f7 Thanks @rise-erpelding!
- Updates invalid icon spacing to be vertically centered for S2.
📝 #3541 1a3245c Thanks @castastrophe!
- Dependency alignment across the project.
Set component peerDependencies as optional to reduce console warnings on downstream projects.
- Updated dependencies [205182b, 1a3245c]:
  - @spectrum-css/helptext@8.0.0
  - @spectrum-css/tokens@16.0.1
Search
Section titled Search
8.1.2
Section titled 8.1.2
- #3658 e9fde67 Thanks @rise-erpelding! - Change S2 theme border color to gray-800 on keyfocus per design request in order to align with text field.
8.1.1
Section titled 8.1.1
📝 #3593 d829abb Thanks @TarunAdobe!

Updated --spectrum-search-background-color-disabled to --spectrum-gray-25 and --spectrum-search-border-color-disabled to --spectrum-gray-300 for the S2 foundations contexts.

Also defines disabled quiet border and background colors (--system-search-quiet-background-color-disabled and --system-search-quiet-border-color-disabled) in order to maintain disabled quiet styling.

8.1.0
Section titled 8.1.0
📝 #3541 1a3245c Thanks @castastrophe!

Dependency alignment across the project.
- Updated dependencies [205182b, 9b108f7, 1a3245c]:
  - @spectrum-css/clearbutton@8.0.0
  - @spectrum-css/icon@9.1.0
  - @spectrum-css/textfield@9.0.0
  - @spectrum-css/tokens@16.0.1
Updated dependencies [00eb0a8]:
- @spectrum-web-components/button@1.6.0
- @spectrum-web-components/base@1.6.0

1.5.0

Patch Changes

Updated dependencies [4e06533]:
- @spectrum-web-components/button@1.5.0
- @spectrum-web-components/base@1.5.0

1.4.0

Patch Changes

Updated dependencies []:
- @spectrum-web-components/button@1.4.0
- @spectrum-web-components/base@1.4.0

1.3.0

Patch Changes

Updated dependencies []:
- @spectrum-web-components/button@1.3.0
- @spectrum-web-components/base@1.3.0

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.