diff --git a/src/components/Hoverable/HoverablePropTypes.js b/src/components/Hoverable/HoverablePropTypes.js
index ee2f24646b4a..07b8a8741efb 100644
--- a/src/components/Hoverable/HoverablePropTypes.js
+++ b/src/components/Hoverable/HoverablePropTypes.js
@@ -1,6 +1,9 @@
import PropTypes from 'prop-types';
const propTypes = {
+ /** Whether to disable additional wrapper around the children. It will only work for single native(View|Text) child. */
+ absolute: PropTypes.bool,
+
/** Children to wrap with Hoverable. */
children: PropTypes.oneOfType([
PropTypes.node,
@@ -22,6 +25,7 @@ const propTypes = {
};
const defaultProps = {
+ absolute: false,
containerStyles: [],
onHoverIn: () => {},
onHoverOut: () => {},
diff --git a/src/components/Hoverable/index.js b/src/components/Hoverable/index.js
index 8326140417e0..9052639be6d8 100644
--- a/src/components/Hoverable/index.js
+++ b/src/components/Hoverable/index.js
@@ -78,6 +78,21 @@ class Hoverable extends Component {
}
render() {
+ if (this.props.absolute && React.isValidElement(this.props.children)) {
+ return React.cloneElement(React.Children.only(this.props.children), {
+ ref: (el) => {
+ this.wrapperView = el;
+
+ // Call the original ref, if any
+ const {ref} = this.props.children;
+ if (_.isFunction(ref)) {
+ ref(el);
+ }
+ },
+ onMouseEnter: () => this.setIsHovered(true),
+ onMouseLeave: () => this.setIsHovered(false),
+ });
+ }
return (
this.wrapperView = el}
+ style={this.props.containerStyles}
+ >
+ {this.props.children}
+
+ );
+
+ if (this.props.absolute && React.isValidElement(this.props.children)) {
+ child = React.cloneElement(React.Children.only(this.props.children), {
+ ref: (el) => {
+ // Keep your own reference
+ this.wrapperView = el;
+
+ // Call the original ref, if any
+ const {ref} = this.props.children;
+ if (typeof ref === 'function') {
+ ref(el);
+ }
+ },
+ });
+ }
return (
<>
{this.state.isRendered && (
- this.tooltip = el}
- shiftHorizontal={_.result(this.props, 'shiftHorizontal')}
- shiftVertical={_.result(this.props, 'shiftVertical')}
- measureTooltip={this.measureTooltip}
- text={this.props.text}
- />
+ this.tooltip = el}
+ shiftHorizontal={_.result(this.props, 'shiftHorizontal')}
+ shiftVertical={_.result(this.props, 'shiftVertical')}
+ measureTooltip={this.measureTooltip}
+ text={this.props.text}
+ />
)}
- this.wrapperView = el}
- style={this.props.containerStyles}
- >
- {this.props.children}
-
+ {child}
>
);
diff --git a/src/languages/en.js b/src/languages/en.js
index bc1f6071476b..03d143abfbd2 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -584,6 +584,7 @@ export default {
common: {
card: 'Expensify Card',
workspace: 'Workspace',
+ edit: 'Edit workspace',
},
new: {
newWorkspace: 'New workspace',
@@ -619,7 +620,6 @@ export default {
welcomeNote: ({workspaceName}) => `You have been invited to the ${workspaceName} workspace! Download the Expensify mobile app to start tracking your expenses.`,
},
editor: {
- title: 'Edit workspace',
nameInputLabel: 'Name',
nameInputHelpText: 'This is the name you will see on your workspace.',
save: 'Save',
diff --git a/src/languages/es.js b/src/languages/es.js
index 57956c923a3c..ebd772102e76 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -586,6 +586,7 @@ export default {
common: {
card: 'Tarjeta Expensify',
workspace: 'Espacio de trabajo',
+ edit: 'Editar espacio de trabajo',
},
new: {
newWorkspace: 'Nuevo espacio de trabajo',
@@ -621,7 +622,6 @@ export default {
welcomeNote: ({workspaceName}) => `¡Has sido invitado a la ${workspaceName} Espacio de trabajo! Descargue la aplicación móvil Expensify para comenzar a rastrear sus gastos.`,
},
editor: {
- title: 'Editar espacio de trabajo',
nameInputLabel: 'Nombre',
nameInputHelpText: 'Este es el nombre que verás en tu espacio de trabajo.',
save: 'Guardar',
diff --git a/src/pages/workspace/WorkspaceEditorPage.js b/src/pages/workspace/WorkspaceEditorPage.js
index bc4a6091de71..c5f3f77b1967 100644
--- a/src/pages/workspace/WorkspaceEditorPage.js
+++ b/src/pages/workspace/WorkspaceEditorPage.js
@@ -100,7 +100,7 @@ class WorkspaceEditorPage extends React.Component {
return (
diff --git a/src/pages/workspace/WorkspaceSidebar.js b/src/pages/workspace/WorkspaceSidebar.js
index 477a8e8ac5db..821e20acb06e 100644
--- a/src/pages/workspace/WorkspaceSidebar.js
+++ b/src/pages/workspace/WorkspaceSidebar.js
@@ -13,6 +13,7 @@ import {
Users,
ExpensifyCard,
Workspace,
+ Pencil,
} from '../../components/Icon/Expensicons';
import ScreenWrapper from '../../components/ScreenWrapper';
import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
@@ -26,6 +27,7 @@ import ONYXKEYS from '../../ONYXKEYS';
import Avatar from '../../components/Avatar';
import CONST from '../../CONST';
import Tooltip from '../../components/Tooltip';
+import variables from '../../styles/variables';
const propTypes = {
/** Policy for the current route */
@@ -125,6 +127,16 @@ const WorkspaceSidebar = ({
fill={themedefault.iconSuccessFill}
/>
)}
+
+
+
+
+