From c692265249268d9b82db52468393b4aa5ff6d203 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 25 Dec 2022 13:51:11 +0100
Subject: [PATCH] Convert (legacy?) IconButton to tsx, remove unused
 code/styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/icon-button.js         | 188 ------------------
 app/soapbox/components/icon-button.tsx        | 100 ++++++++++
 .../compose/components/text-icon-button.tsx   |  36 ----
 app/styles/ui.scss                            |  81 --------
 4 files changed, 100 insertions(+), 305 deletions(-)
 delete mode 100644 app/soapbox/components/icon-button.js
 create mode 100644 app/soapbox/components/icon-button.tsx
 delete mode 100644 app/soapbox/features/compose/components/text-icon-button.tsx

diff --git a/app/soapbox/components/icon-button.js b/app/soapbox/components/icon-button.js
deleted file mode 100644
index bdfe157a6..000000000
--- a/app/soapbox/components/icon-button.js
+++ /dev/null
@@ -1,188 +0,0 @@
-import classNames from 'clsx';
-import PropTypes from 'prop-types';
-import React from 'react';
-import spring from 'react-motion/lib/spring';
-
-import Icon from 'soapbox/components/icon';
-import emojify from 'soapbox/features/emoji/emoji';
-
-import Motion from '../features/ui/util/optional-motion';
-
-export default class IconButton extends React.PureComponent {
-
-  static propTypes = {
-    className: PropTypes.string,
-    iconClassName: PropTypes.string,
-    title: PropTypes.string.isRequired,
-    icon: PropTypes.string,
-    src: PropTypes.string,
-    onClick: PropTypes.func,
-    onMouseDown: PropTypes.func,
-    onKeyUp: PropTypes.func,
-    onKeyDown: PropTypes.func,
-    onKeyPress: PropTypes.func,
-    onMouseEnter: PropTypes.func,
-    onMouseLeave: PropTypes.func,
-    size: PropTypes.number,
-    active: PropTypes.bool,
-    pressed: PropTypes.bool,
-    expanded: PropTypes.bool,
-    style: PropTypes.object,
-    activeStyle: PropTypes.object,
-    disabled: PropTypes.bool,
-    inverted: PropTypes.bool,
-    animate: PropTypes.bool,
-    overlay: PropTypes.bool,
-    tabIndex: PropTypes.string,
-    text: PropTypes.string,
-    emoji: PropTypes.string,
-    type: PropTypes.string,
-  };
-
-  static defaultProps = {
-    size: 18,
-    active: false,
-    disabled: false,
-    animate: false,
-    overlay: false,
-    tabIndex: '0',
-    onKeyUp: () => {},
-    onKeyDown: () => {},
-    onClick: () => {},
-    onMouseEnter: () => {},
-    onMouseLeave: () => {},
-    type: 'button',
-  };
-
-  handleClick = (e) =>  {
-    e.preventDefault();
-
-    if (!this.props.disabled) {
-      this.props.onClick(e);
-    }
-  }
-
-  handleMouseDown = (e) => {
-    if (!this.props.disabled && this.props.onMouseDown) {
-      this.props.onMouseDown(e);
-    }
-  }
-
-  handleKeyDown = (e) => {
-    if (!this.props.disabled && this.props.onKeyDown) {
-      this.props.onKeyDown(e);
-    }
-  }
-
-  handleKeyUp = (e) => {
-    if (!this.props.disabled && this.props.onKeyUp) {
-      this.props.onKeyUp(e);
-    }
-  }
-
-  handleKeyPress = (e) => {
-    if (this.props.onKeyPress && !this.props.disabled) {
-      this.props.onKeyPress(e);
-    }
-  }
-
-  render() {
-    const style = {
-      fontSize: `${this.props.size}px`,
-      width: `${this.props.size * 1.28571429}px`,
-      height: `${this.props.size * 1.28571429}px`,
-      lineHeight: `${this.props.size}px`,
-      ...this.props.style,
-      ...(this.props.active ? this.props.activeStyle : {}),
-    };
-
-    const {
-      active,
-      animate,
-      className,
-      iconClassName,
-      disabled,
-      expanded,
-      icon,
-      src,
-      inverted,
-      overlay,
-      pressed,
-      tabIndex,
-      title,
-      text,
-      emoji,
-      type,
-    } = this.props;
-
-    const classes = classNames(className, 'icon-button', {
-      active,
-      disabled,
-      inverted,
-      overlayed: overlay,
-    });
-
-    if (!animate) {
-      // Perf optimization: avoid unnecessary <Motion> components unless
-      // we actually need to animate.
-      return (
-        <button
-          aria-label={title}
-          aria-pressed={pressed}
-          aria-expanded={expanded}
-          title={title}
-          className={classes}
-          onClick={this.handleClick}
-          onMouseDown={this.handleMouseDown}
-          onKeyDown={this.handleKeyDown}
-          onKeyUp={this.handleKeyUp}
-          onKeyPress={this.handleKeyPress}
-          onMouseEnter={this.props.onMouseEnter}
-          onMouseLeave={this.props.onMouseLeave}
-          tabIndex={tabIndex}
-          disabled={disabled}
-          type={type}
-        >
-          <div style={src ? {} : style}>
-            {emoji
-              ? <div className='icon-button__emoji' dangerouslySetInnerHTML={{ __html: emojify(emoji) }} aria-hidden='true' />
-              : <Icon className={iconClassName} id={icon} src={src} fixedWidth aria-hidden='true' />}
-          </div>
-          {text && <span className='icon-button__text'>{text}</span>}
-        </button>
-      );
-    }
-
-    return (
-      <Motion defaultStyle={{ rotate: active ? -360 : 0 }} style={{ rotate: animate ? spring(active ? -360 : 0, { stiffness: 120, damping: 7 }) : 0 }}>
-        {({ rotate }) => (
-          <button
-            aria-label={title}
-            aria-pressed={pressed}
-            aria-expanded={expanded}
-            title={title}
-            className={classes}
-            onClick={this.handleClick}
-            onMouseDown={this.handleMouseDown}
-            onKeyDown={this.handleKeyDown}
-            onKeyUp={this.handleKeyUp}
-            onKeyPress={this.handleKeyPress}
-            onMouseEnter={this.props.onMouseEnter}
-            onMouseLeave={this.props.onMouseLeave}
-            tabIndex={tabIndex}
-            disabled={disabled}
-            type={type}
-          >
-            <div style={src ? {} : style}>
-              {emoji
-                ? <div className='icon-button__emoji' style={{ transform: `rotate(${rotate}deg)` }} dangerouslySetInnerHTML={{ __html: emojify(emoji) }} aria-hidden='true' />
-                : <Icon className={iconClassName} id={icon} src={src} style={{ transform: `rotate(${rotate}deg)` }} fixedWidth aria-hidden='true' />}
-            </div>
-            {text && <span className='icon-button__text'>{text}</span>}
-          </button>
-        )}
-      </Motion>
-    );
-  }
-
-}
diff --git a/app/soapbox/components/icon-button.tsx b/app/soapbox/components/icon-button.tsx
new file mode 100644
index 000000000..6a7dea4f7
--- /dev/null
+++ b/app/soapbox/components/icon-button.tsx
@@ -0,0 +1,100 @@
+import classNames from 'clsx';
+import React from 'react';
+
+import Icon from 'soapbox/components/icon';
+
+interface IIconButton extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'disabled' | 'onClick' | 'onKeyDown' | 'onKeyPress' | 'onKeyUp' | 'onMouseDown' | 'onMouseEnter' | 'onMouseLeave' | 'tabIndex' | 'title'> {
+  active?: boolean
+  expanded?: boolean
+  iconClassName?: string
+  pressed?: boolean
+  size?: number
+  src: string
+  text: React.ReactNode
+}
+
+const IconButton: React.FC<IIconButton> = ({
+  active,
+  className,
+  disabled,
+  expanded,
+  iconClassName,
+  onClick,
+  onKeyDown,
+  onKeyUp,
+  onKeyPress,
+  onMouseDown,
+  onMouseEnter,
+  onMouseLeave,
+  pressed,
+  size = 18,
+  src,
+  tabIndex = 0,
+  text,
+  title,
+}) => {
+
+  const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) =>  {
+    e.preventDefault();
+
+    if (!disabled && onClick) {
+      onClick(e);
+    }
+  };
+
+  const handleMouseDown: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    if (!disabled && onMouseDown) {
+      onMouseDown(e);
+    }
+  };
+
+  const handleKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
+    if (!disabled && onKeyDown) {
+      onKeyDown(e);
+    }
+  };
+
+  const handleKeyUp: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
+    if (!disabled && onKeyUp) {
+      onKeyUp(e);
+    }
+  };
+
+  const handleKeyPress: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
+    if (onKeyPress && !disabled) {
+      onKeyPress(e);
+    }
+  };
+
+  const classes = classNames(className, 'icon-button', {
+    active,
+    disabled,
+  });
+
+  return (
+    <button
+      aria-label={title}
+      aria-pressed={pressed}
+      aria-expanded={expanded}
+      title={title}
+      className={classes}
+      onClick={handleClick}
+      onMouseDown={handleMouseDown}
+      onKeyDown={handleKeyDown}
+      onKeyUp={handleKeyUp}
+      onKeyPress={handleKeyPress}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      tabIndex={tabIndex}
+      disabled={disabled}
+      type='button'
+    >
+      <div>
+        <Icon className={iconClassName} src={src} fixedWidth aria-hidden='true' />
+      </div>
+      {text && <span className='icon-button__text'>{text}</span>}
+    </button>
+  );
+};
+
+export default IconButton;
diff --git a/app/soapbox/features/compose/components/text-icon-button.tsx b/app/soapbox/features/compose/components/text-icon-button.tsx
deleted file mode 100644
index fd49d4ed0..000000000
--- a/app/soapbox/features/compose/components/text-icon-button.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-
-interface ITextIconButton {
-  label: string,
-  title: string,
-  active: boolean,
-  onClick: () => void,
-  ariaControls: string,
-  unavailable: boolean,
-}
-
-const TextIconButton: React.FC<ITextIconButton> = ({
-  label,
-  title,
-  active,
-  ariaControls,
-  unavailable,
-  onClick,
-}) => {
-  const handleClick: React.MouseEventHandler = (e) => {
-    e.preventDefault();
-    onClick();
-  };
-
-  if (unavailable) {
-    return null;
-  }
-
-  return (
-    <button title={title} aria-label={title} className={`text-icon-button ${active ? 'active' : ''}`} aria-expanded={active} onClick={handleClick} aria-controls={ariaControls}>
-      {label}
-    </button>
-  );
-};
-
-export default TextIconButton;
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index 92ffc77e2..b00155253 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -44,87 +44,6 @@
   &:active {
     outline: 0 !important;
   }
-
-  &.inverted {
-    color: var(--primary-text-color--faint);
-    opacity: 1;
-
-    &:hover,
-    &:active,
-    &:focus {
-      color: var(--primary-text-color);
-    }
-
-    &.disabled {
-      color: var(--primary-text-color--faint);
-    }
-
-    &.active {
-      color: var(--highlight-text-color);
-
-      &.disabled {
-        color: var(--highlight-text-color);
-      }
-    }
-  }
-
-  &.overlayed {
-    box-sizing: content-box;
-    background: var(--foreground-color);
-    color: var(--primary-text-color--faint);
-    border-radius: 6px;
-    padding: 2px;
-    opacity: 1;
-
-    > div {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    &:hover {
-      background: var(--background-color);
-    }
-  }
-}
-
-.text-icon-button {
-  color: var(--primary-text-color--faint);
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-  font-weight: 600;
-  font-size: 11px;
-  padding: 0 3px;
-  line-height: 27px;
-  outline: 0;
-  transition: color 100ms ease-in;
-
-  &:hover,
-  &:active,
-  &:focus {
-    color: var(--primary-text-color);
-    transition: color 200ms ease-out;
-  }
-
-  &.disabled {
-    color: var(--primary-text-color--faint);
-    cursor: default;
-  }
-
-  &.active {
-    color: var(--highlight-text-color);
-  }
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &::-moz-focus-inner,
-  &:focus,
-  &:active {
-    outline: 0 !important;
-  }
 }
 
 .invisible {