Patternfly Logo

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.

Introduction

Inline edit is a utilitarian component that has two core elements, .pf-c-inline-edit__value and .pf-c-inline-edit__input and is based on a simple concept. When value is visible, input is hidden, and vice versa.

Generic groups

.pf-c-inline-edit__groups provide basic layout support and have several available modifiers (.pf-m-action-group, .pf-m-icon-group).

Actions

Actions (.pf-c-inline-edit__action) are hidden by default and exposed when a region of .pf-c-inline-edit becomes active. The default visibility of an action or action group can be inversed by adding .pf-m-enable-editable. .pf-m-enable-editable flags an element or group of elements as the controlling agents for enabling editable content and therefore is visible by default and hidden when inline editing is enabled.

Examples

Inline edit toggle can be placed anywhere within .pf-c-inline-edit. It initiates the editability of elements. When an element becomes editable, toggle is hidden.

Inline edit toggle

Inline edit value can be placed anywhere within .pf-c-inline-edit. It is visible by default and hidden when inline edit becomes editable.

Inline edit value

Static value

Inline edit action-group contains save and cancel actions and is only visible when inline edit is editable.

Inline edit action group

Inline edit action group icon buttons

Single inline edit (default)

Static value

Single inline edit (active)

Static value

Single inline edit with label (default)

Static value

State valid

Static value

State invalid

Static value

Inline edit table row

This is the table caption
Text input Disabled text input Checkboxes Radios Number
Text input description content
Text input disabled, description content
Check 1, Check 2
Radio 1, Radio 2
2
Text input description content
Text input disabled, description content
Check 1, Check 2
Radio 1, Radio 2
2

Documentation

Accessibility

All accessibility requirements for inputs apply to elements within inline edit.

AttributeApplied toOutcome
id[labelling element]Provides a reference for toggle button and/or editable content.
aria-label="descriptive text".pf-c-inline-edit__toggle > buttonProvides an accessible description for toggle button. Required
aria-labelledby="[labelling element] [toggle button id]".pf-c-inline-edit__toggle > buttonProvides an accessible description for toggle button. Required
aria-label="descriptive text"[radio button group]Provides an accessible description for radio groups. Required
role="radiogroup"[radio button group]Provides an accessible role for radio buttons groups. Required

Usage

ClassApplied toOutcome
.pf-c-inline-edit<form>, <div>Initiates the inline edit component. Required
.pf-c-inline-edit__value*Initiates an inline edit value. Required
.pf-c-inline-edit__input*Initiates an inline edit input. Required
.pf-c-inline-edit__label*Initiates an inline edit label.
.pf-c-inline-edit__action*Initiates an inline edit action (visible when inline edit region is active). Required
.pf-m-inline-editable.pf-c-inline-edit, .pf-c-inline-edit [block level element]Modifies an inline edit region for editable state.
.pf-m-action-group.pf-c-inline-edit__groupModifies group for action group.
.pf-m-icon-group.pf-c-inline-edit__groupModifies an action group item spacing.
.pf-m-column.pf-c-inline-edit__groupModifies an action group flex direction.
.pf-m-footer.pf-c-inline-edit__groupModifies an inline edit group margin-top.
.pf-m-bold.pf-c-inline-edit__labelModifies an inline edit label's font-weight.
.pf-m-valid.pf-c-inline-edit__actionModifies the action button state.
.pf-m-enable-editable.pf-c-inline-edit__actionExposes an inline edit action by default.

CSS variables

.pf-c-inline-edit--pf-c-inline-edit__group--item--MarginRight
0.5rem
.pf-c-inline-edit--pf-c-inline-edit__action--c-button--m-valid--m-plain--Color
#06c
.pf-c-inline-edit--pf-c-inline-edit__action--c-button--m-valid--m-plain--hover--Color
#004080
.pf-c-inline-edit--pf-c-inline-edit__action--m-icon-group--item--MarginRight
0
.pf-c-inline-edit--pf-c-inline-edit__group--m-footer--MarginTop
2rem
.pf-c-inline-edit--pf-c-inline-edit__label--m-bold--FontWeight
700
.pf-c-inline-edit__group.pf-m-icon-group--pf-c-inline-edit__group--item--MarginRight
0
.pf-c-inline-edit__group.pf-m-column--pf-c-inline-edit__group--item--MarginRight
0
.pf-c-inline-edit__group > :last-child--pf-c-inline-edit__group--item--MarginRight
0
.pf-c-inline-edit__action.pf-m-valid .pf-c-button.pf-m-plain--pf-c-button--m-plain--Color
#06c
.pf-c-inline-edit__action.pf-m-valid .pf-c-button.pf-m-plain:hover--pf-c-button--m-plain--Color
#004080

View source on GitHub