fix: revert selected files, no need to add tooltips on svg buttons

This commit is contained in:
Mauricio Navarro Miranda 2020-08-20 03:22:32 -05:00 committed by Josh Harvey
parent 653f939856
commit e7805040f0
7 changed files with 47 additions and 134 deletions

View file

@ -10,7 +10,6 @@ import React, { useEffect, useState, memo } from 'react'
import { Button, IconButton } from 'src/components/buttons'
import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
import Tooltip from './Tooltip'
import { TextInput } from './inputs'
import { H4, P } from './typography'
@ -42,16 +41,13 @@ export const DialogTitle = ({ children, onClose }) => {
<div className={classes.wrapper}>
{children}
{onClose && (
<Tooltip
<IconButton
size={16}
aria-label="close"
className={classes.closeButton}
enableOver
element={
<IconButton size={16} aria-label="close" onClick={onClose}>
<CloseIcon />
</IconButton>
}>
<P>Close</P>
</Tooltip>
onClick={onClose}>
<CloseIcon />
</IconButton>
)}
</div>
)

View file

@ -3,11 +3,9 @@ import classnames from 'classnames'
import React from 'react'
import { IconButton } from 'src/components/buttons'
import { H1, H4, P } from 'src/components/typography'
import { H1, H4 } from 'src/components/typography'
import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
import Tooltip from './Tooltip'
const styles = {
modal: {
display: 'flex',
@ -76,16 +74,12 @@ const Modal = ({
<Paper className={classnames(classes.wrapper, className)}>
<div className={classes.header}>
{title && <TitleCase className={classes.title}>{title}</TitleCase>}
<Tooltip
enableOver
<IconButton
size={closeSize}
className={classes.button}
element={
<IconButton size={closeSize} onClick={() => handleClose()}>
<CloseIcon />
</IconButton>
}>
<P>Close</P>
</Tooltip>
onClick={() => handleClose()}>
<CloseIcon />
</IconButton>
</div>
<div className={classes.content}>{children}</div>
</Paper>

View file

@ -2,16 +2,14 @@ import { makeStyles } from '@material-ui/core/styles'
import classnames from 'classnames'
import React, { useState, memo } from 'react'
import { Link, IconButton } from 'src/components/buttons'
import { Link } from 'src/components/buttons'
import { RadioGroup } from 'src/components/inputs'
import { Table, TableBody, TableRow, TableCell } from 'src/components/table'
import BooleanCell from 'src/components/tables/BooleanCell'
import { H4, P } from 'src/components/typography'
import { H4 } from 'src/components/typography'
import { ReactComponent as EditIconDisabled } from 'src/styling/icons/action/edit/disabled.svg'
import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
import Tooltip from '../Tooltip'
import { booleanPropertiesTableStyles } from './BooleanPropertiesTable.styles'
const useStyles = makeStyles(booleanPropertiesTableStyles)
@ -71,25 +69,11 @@ const BooleanPropertiesTable = memo(
</Link>
</div>
) : (
<>
{disabled && (
<IconButton disabled>
<EditIconDisabled />
</IconButton>
)}
{!disabled && (
<Tooltip
enableOver
element={
<IconButton onClick={() => setEditing(true)}>
<EditIcon />
</IconButton>
}>
<P>Configure the following properties as desired</P>
</Tooltip>
)}
</>
<div className={classes.transparentButton}>
<button disabled={disabled} onClick={() => setEditing(true)}>
{disabled ? <EditIconDisabled /> : <EditIcon />}
</button>
</div>
)}
</div>
<Table className={classes.fillColumn}>

View file

@ -3,11 +3,10 @@ import { Field, useFormikContext } from 'formik'
import * as R from 'ramda'
import React, { useContext } from 'react'
import Tooltip from 'src/components/Tooltip'
import { Link, IconButton } from 'src/components/buttons'
import { Td, Tr } from 'src/components/fake-table/Table'
import { Switch } from 'src/components/inputs'
import { TL2, P } from 'src/components/typography'
import { TL2 } from 'src/components/typography'
import { ReactComponent as DisabledDeleteIcon } from 'src/styling/icons/action/delete/disabled.svg'
import { ReactComponent as DeleteIcon } from 'src/styling/icons/action/delete/enabled.svg'
import { ReactComponent as DisabledEditIcon } from 'src/styling/icons/action/edit/disabled.svg'
@ -55,46 +54,19 @@ const ActionCol = ({ disabled, editing }) => {
)}
{!editing && enableEdit && (
<Td textAlign="center" width={editWidth}>
{!disableEdit && (
<Tooltip
enableOver
element={
<IconButton
className={classes.editButton}
onClick={() => onEdit && onEdit(values.id)}>
<EditIcon />
</IconButton>
}>
<P>Modify row contents</P>
</Tooltip>
)}
{disableEdit && (
<IconButton disabled className={classes.editButton}>
<DisabledEditIcon />
</IconButton>
)}
<IconButton
disabled={disableEdit}
className={classes.editButton}
onClick={() => onEdit && onEdit(values.id)}>
{disableEdit ? <DisabledEditIcon /> : <EditIcon />}
</IconButton>
</Td>
)}
{!editing && enableDelete && (
<Td textAlign="center" width={deleteWidth}>
{!disabled && (
<Tooltip
enableOver
element={
<IconButton onClick={() => onDelete(values.id)}>
<DeleteIcon />
</IconButton>
}>
<P>Delete row</P>
</Tooltip>
)}
{disabled && (
<IconButton disabled>
<DisabledDeleteIcon />
</IconButton>
)}
<IconButton disabled={disabled} onClick={() => onDelete(values.id)}>
{disabled ? <DisabledDeleteIcon /> : <DeleteIcon />}
</IconButton>
</Td>
)}
{!editing && enableToggle && (

View file

@ -2,7 +2,6 @@ import { makeStyles } from '@material-ui/core'
import classnames from 'classnames'
import React from 'react'
import Tooltip from 'src/components/Tooltip'
import { IconButton } from 'src/components/buttons'
import {
Table,
@ -14,8 +13,6 @@ import {
} from 'src/components/fake-table/Table'
import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/white.svg'
import { P } from '../typography'
import styles from './SingleRowTable.styles'
const useStyles = makeStyles(styles)
@ -26,8 +23,7 @@ const SingleRowTable = ({
title,
items,
onEdit,
className,
editMessage
className
}) => {
const classes = useStyles({ width, height })
@ -37,15 +33,9 @@ const SingleRowTable = ({
<THead>
<Th className={classes.head}>
{title}
<Tooltip
enableOver
element={
<IconButton onClick={onEdit} className={classes.button}>
<EditIcon />
</IconButton>
}>
<P>{editMessage}</P>
</Tooltip>
<IconButton onClick={onEdit} className={classes.button}>
<EditIcon />
</IconButton>
</Th>
</THead>
<TBody>

View file

@ -1,9 +1,8 @@
import { makeStyles } from '@material-ui/core'
import React from 'react'
import Tooltip from 'src/components/Tooltip'
import { Link, IconButton } from 'src/components/buttons'
import { H4, P } from 'src/components/typography'
import { H4 } from 'src/components/typography'
import { ReactComponent as DisabledEditIcon } from 'src/styling/icons/action/edit/disabled.svg'
import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
@ -17,27 +16,14 @@ const Header = ({ title, editing, disabled, setEditing }) => {
return (
<div className={classes.header}>
<H4 className={classes.title}>{title}</H4>
{!editing && !disabled && (
<Tooltip
enableOver
element={
<IconButton
className={classes.button}
onClick={() => setEditing(true)}>
<EditIcon />
</IconButton>
}>
<P>Modify value</P>
</Tooltip>
)}
{!editing && disabled && (
<IconButton disabled className={classes.button}>
<DisabledEditIcon />
{!editing && (
<IconButton
onClick={() => setEditing(true)}
className={classes.button}
disabled={disabled}>
{disabled ? <DisabledEditIcon /> : <EditIcon />}
</IconButton>
)}
{editing && (
<div className={classes.editingButtons}>
<Link color="primary" type="submit">

View file

@ -9,8 +9,7 @@ import React, { useState } from 'react'
import * as Yup from 'yup'
import ErrorMessage from 'src/components/ErrorMessage'
import Tooltip from 'src/components/Tooltip'
import { Link, IconButton } from 'src/components/buttons'
import { Link } from 'src/components/buttons'
import Switch from 'src/components/inputs/base/Switch'
import { TextInput, NumberInput } from 'src/components/inputs/formik'
import {
@ -232,15 +231,11 @@ const ContactInfo = () => {
<div className={classes.header}>
<Info2>Info card</Info2>
{!editing && (
<Tooltip
enableOver
element={
<IconButton onClick={() => setEditing(true)}>
<EditIcon />
</IconButton>
}>
<P>Configure info card settings</P>
</Tooltip>
<div className={classes.transparentButton}>
<button onClick={() => setEditing(true)}>
<EditIcon />
</button>
</div>
)}
</div>
<Formik
@ -310,11 +305,7 @@ const ContactInfo = () => {
</Formik>
</div>
<div className={classnames(classes.section, classes.infoMessage)}>
<Tooltip width={304} enableOver element={<WarningIcon />}>
Sharing your information with your customers through your machines
allows them to contact you in case there's a problem with a machine in
your network or a transaction.
</Tooltip>
<WarningIcon />
<Label1>
Sharing your information with your customers through your machines
allows them to contact you in case there's a problem with a machine in