Skip to content

Commit

Permalink
add prop to readme and fix styles
Browse files Browse the repository at this point in the history
  • Loading branch information
ntsekouras committed Mar 29, 2022
1 parent d0af32d commit 1abe5f5
Showing 2 changed files with 15 additions and 6 deletions.
Original file line number Diff line number Diff line change
@@ -18,7 +18,11 @@ import {
function Example() {
return (
<ToggleGroupControl label="my label" value="vertical" isBlock>
<ToggleGroupControlOption value="horizontal" label="Horizontal" showTooltip={ true } />
<ToggleGroupControlOption
value="horizontal"
label="Horizontal"
showTooltip={ true }
/>
<ToggleGroupControlOption value="vertical" label="Vertical" />
</ToggleGroupControl>
);
@@ -31,17 +35,22 @@ function Example() {

Label for the option. If needed, the `aria-label` prop can be used in addition to specify a different label for assistive technologies.

- Required: Yes
- Required: Yes

### `value`: `string | number`

The value of the `ToggleGroupControlOption`.

- Required: Yes
- Required: Yes

### `icon`: `WPComponent`

Icon for the option. If `icon` is provided it will be used instead of the `label` and will show a tooltip automatically.

- Required: No

### `showTooltip`: `boolean`

Whether to show a tooltip when hovering over the option. The tooltip will attempt to use the `aria-label` prop text first, then the `label` prop text if no `aria-label` prop is found.

- Required: No

- Required: No
Original file line number Diff line number Diff line change
@@ -27,6 +27,7 @@ export const buttonView = css`
border: none;
border-radius: ${ CONFIG.controlBorderRadius };
color: ${ COLORS.gray[ 700 ] };
fill: currentColor;
cursor: pointer;
display: flex;
font-family: inherit;
@@ -55,7 +56,6 @@ export const buttonView = css`

export const buttonActive = css`
color: ${ COLORS.white };
fill: ${ COLORS.white };
background-color: ${ COLORS.gray[ 900 ] };
`;

0 comments on commit 1abe5f5

Please sign in to comment.