Skip to content
This repository has been archived by the owner on Aug 21, 2023. It is now read-only.

Commit

Permalink
enables custom attrs on action button
Browse files Browse the repository at this point in the history
by using "buttonAttrs" on the action
  • Loading branch information
tinkertrain committed Feb 4, 2022
1 parent 3027183 commit 2a129b1
Show file tree
Hide file tree
Showing 2 changed files with 6 additions and 1 deletion.
1 change: 1 addition & 0 deletions src/components/EditableField/EditableField.Actions.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ export class EditableFieldActions extends React.Component {
onClick={event => {
this.handleActionClick({ action, event })
}}
{...action.buttonAttrs}
>
<Icon name={action.icon || ACTION_ICONS[action.name]} size="24" />
</FieldButtonUI>
Expand Down
6 changes: 5 additions & 1 deletion src/components/EditableField/EditableField.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,9 @@ A special type of inputs that allow you to edit it inline
- `"link"`: For url types, adds a button to open a new tab/window with the url
- By default `EditableField` incorporates one action: “delete”
- To override either of the predefined actions, pass them in the array using the same action name
- If the user doesnt want any action, she needs to explicitly pass `null`
- If the user doesn't want any action, she needs to explicitly pass `null`
- `icon` should be the name of an Icon that is present in HSDS
- Pass a `buttonAttrs` object to attach attributes directly on the html button (such as aria labels): `{ buttonAttrs: { 'aria-label': 'My important button' } }`

### onCommit

Expand Down Expand Up @@ -238,6 +239,9 @@ const ATLAS = {
callback(obj) {
console.log('HSDS: EditableFieldApp -> callback -> obj', obj)
},
buttonAttrs: {
'aria-label': 'some aria label',
},
}}
/>
</ContainerUI>
Expand Down

0 comments on commit 2a129b1

Please sign in to comment.