Browse Source
* Rename ToolIcon to ToolButton It makes more semantic sense * Label and keyboard shortcuts announcement * Refactor common props for ToolButton * Better doc outline and form controls * Adjust color picker * Styling fixes Co-authored-by: Christopher Chedeau <vjeuxx@gmail.com>pull/556/head
Guillermo Peralta Scura
6 years ago
committed by
Christopher Chedeau
11 changed files with 177 additions and 107 deletions
@ -0,0 +1,62 @@
@@ -0,0 +1,62 @@
|
||||
import "./ToolIcon.scss"; |
||||
|
||||
import React from "react"; |
||||
|
||||
type ToolIconSize = "s" | "m"; |
||||
|
||||
type ToolButtonBaseProps = { |
||||
icon: React.ReactNode; |
||||
"aria-label": string; |
||||
"aria-keyshortcuts"?: string; |
||||
title?: string; |
||||
name?: string; |
||||
id?: string; |
||||
size?: ToolIconSize; |
||||
}; |
||||
|
||||
type ToolButtonProps = |
||||
| (ToolButtonBaseProps & { type: "button"; onClick?(): void }) |
||||
| (ToolButtonBaseProps & { |
||||
type: "radio"; |
||||
|
||||
checked: boolean; |
||||
onChange?(): void; |
||||
}); |
||||
|
||||
const DEFAULT_SIZE: ToolIconSize = "m"; |
||||
|
||||
export function ToolButton(props: ToolButtonProps) { |
||||
const sizeCn = `ToolIcon_size_${props.size || DEFAULT_SIZE}`; |
||||
|
||||
if (props.type === "button") |
||||
return ( |
||||
<button |
||||
className={`ToolIcon_type_button ToolIcon ${sizeCn}`} |
||||
title={props.title} |
||||
aria-label={props["aria-label"]} |
||||
type="button" |
||||
onClick={props.onClick} |
||||
> |
||||
<div className="ToolIcon__icon" aria-hidden="true"> |
||||
{props.icon} |
||||
</div> |
||||
</button> |
||||
); |
||||
|
||||
return ( |
||||
<label className="ToolIcon"> |
||||
<input |
||||
className={`ToolIcon_type_radio ${sizeCn}`} |
||||
type="radio" |
||||
name={props.name} |
||||
title={props.title} |
||||
aria-label={props["aria-label"]} |
||||
aria-keyshortcuts={props["aria-keyshortcuts"]} |
||||
id={props.id} |
||||
onChange={props.onChange} |
||||
checked={props.checked} |
||||
/> |
||||
<div className="ToolIcon__icon">{props.icon}</div> |
||||
</label> |
||||
); |
||||
} |
||||
@ -1,61 +0,0 @@
@@ -1,61 +0,0 @@
|
||||
import "./ToolIcon.scss"; |
||||
|
||||
import React from "react"; |
||||
|
||||
type ToolIconSize = "s" | "m"; |
||||
|
||||
type ToolIconProps = |
||||
| { |
||||
type: "button"; |
||||
icon: React.ReactNode; |
||||
"aria-label": string; |
||||
title?: string; |
||||
name?: string; |
||||
id?: string; |
||||
onClick?(): void; |
||||
size?: ToolIconSize; |
||||
} |
||||
| { |
||||
type: "radio"; |
||||
icon: React.ReactNode; |
||||
title?: string; |
||||
name?: string; |
||||
id?: string; |
||||
checked: boolean; |
||||
onChange?(): void; |
||||
size?: ToolIconSize; |
||||
}; |
||||
|
||||
const DEFAULT_SIZE: ToolIconSize = "m"; |
||||
|
||||
export function ToolIcon(props: ToolIconProps) { |
||||
const sizeCn = `ToolIcon_size_${props.size || DEFAULT_SIZE}`; |
||||
|
||||
if (props.type === "button") |
||||
return ( |
||||
<label className={`ToolIcon ${sizeCn}`} title={props.title}> |
||||
<button |
||||
className="ToolIcon_type_button" |
||||
aria-label={props["aria-label"]} |
||||
type="button" |
||||
onClick={props.onClick} |
||||
> |
||||
<div className="ToolIcon__icon">{props.icon}</div> |
||||
</button> |
||||
</label> |
||||
); |
||||
|
||||
return ( |
||||
<label className={`ToolIcon ${sizeCn}`} title={props.title}> |
||||
<input |
||||
className="ToolIcon_type_radio" |
||||
type="radio" |
||||
name={props.name} |
||||
id={props.id} |
||||
onChange={props.onChange} |
||||
checked={props.checked} |
||||
/> |
||||
<div className="ToolIcon__icon">{props.icon}</div> |
||||
</label> |
||||
); |
||||
} |
||||
Loading…
Reference in new issue