Commit 97e7d67a authored by Lyza Danger Gardner's avatar Lyza Danger Gardner Committed by Lyza Gardner

Replace .InputButton custom pattern with TextInputWithButton

The general pattern for an input next to an icon-only button has been
added to the pattern library in the frontend-shared package and is
implemented by the TextInputWithButton component. We don't need custom
treatment in this project anymore.
parent 81df42f9
......@@ -126,33 +126,6 @@ export default function ButtonPatterns() {
</Library.Demo>
</Library.Example>
</Library.Pattern>
<Library.Pattern title="InputButton">
<p>
Customizes <code>IconButton</code> styling to make the button part of
a composite pattern with an input field to the left.
</p>
<Library.Example title="Basic usage">
<Library.Demo withSource>
<IconButton
className="InputButton"
title="Copy version details"
icon="copy"
/>
</Library.Demo>
</Library.Example>
<Library.Example title="Small size">
<Library.Demo withSource>
<IconButton
className="InputButton"
title="Copy version details"
icon="copy"
size="small"
/>
</Library.Demo>
</Library.Example>
</Library.Pattern>
</Library.Page>
);
}
import {
IconButton,
SvgIcon,
TextInput,
TextInputWithButton,
useElementShouldClose,
} from '@hypothesis/frontend-shared';
import { useEffect, useRef, useState } from 'preact/hooks';
......@@ -136,22 +138,22 @@ function AnnotationShareControl({
</div>
</div>
<div className="annotation-share-panel__content">
<div className="u-layout-row">
<input
<div className="u-layout-row annotation-share-panel__inputs">
<TextInputWithButton>
<TextInput
aria-label="Use this URL to share this annotation"
className="annotation-share-panel__form-input"
type="text"
value={shareUri}
readOnly
ref={inputRef}
inputRef={inputRef}
/>
<IconButton
className="InputButton"
icon="copy"
title="Copy share link to clipboard"
onClick={copyShareLink}
size="small"
variant="dark"
/>
</TextInputWithButton>
</div>
{inContextAvailable ? (
<div className="annotation-share-panel__details">
......
import { IconButton, Spinner, SvgIcon } from '@hypothesis/frontend-shared';
import {
IconButton,
Spinner,
SvgIcon,
TextInput,
TextInputWithButton,
} from '@hypothesis/frontend-shared';
import { useStoreProxy } from '../store/use-store';
import { pageSharingLink } from '../helpers/annotation-sharing';
......@@ -69,19 +75,20 @@ function ShareAnnotationsPanel({ toastMessenger }) {
)}
</div>
<div className="u-layout-row">
<input
<TextInputWithButton>
<TextInput
aria-label="Use this URL to share these annotations"
className="ShareAnnotationsPanel__form-input"
type="text"
value={shareURI}
readOnly
/>
<IconButton
className="InputButton"
icon="copy"
onClick={copyShareLink}
title="Copy share link"
variant="dark"
/>
</TextInputWithButton>
</div>
<p>
{notNull(focusedGroup).type === 'private' ? (
......
@use 'sass:map';
// Button styling for the sidebar extending common button-component styles
@use '@hypothesis/frontend-shared/styles/components/buttons';
@use '../variables' as var;
// Similar to `.LinkButton`, with inline layout (so button can be used
......@@ -34,31 +31,3 @@
min-height: auto;
}
}
// This is for styling an icon-only button that sits to the right of a
// text input field. It is really part of a composite pattern that includes
// both the input and the buttons. At some point this pattern should be
// consolidated.
$input-button-colors: map.merge(
buttons.colors-for('IconButton'),
(
'background': var.$grey-1,
'hover-background': var.$grey-2,
)
);
.InputButton {
$-options: (
'colormap': $input-button-colors,
'withVariants': false,
);
@include buttons.IconButton($-options) {
border: 1px solid var.$grey-3;
border-radius: 0; // Turn off border-radius to align with <input> edges
border-left: 0; // Avoid double border with the <input>
padding: var.$layout-space--xsmall var.$layout-space--small;
&--small {
padding: var.$layout-space--xxsmall var.$layout-space--xsmall;
}
}
}
......@@ -34,8 +34,9 @@
border-bottom: none;
}
&__form-input {
@include forms.form-input--with-button($compact: true);
&__inputs {
@include utils.font--small;
width: 100%;
}
&__details {
......
......@@ -11,16 +11,4 @@
color: var.$color-text;
font-weight: 500;
}
&__form-input {
@include forms.form-input--with-button;
}
// FIXME: Centralize styling of different sizes of Spinner in a reusable
// class or mixin.
// Spinner uses `em`-sizing; make the font-size of the containing element
// larger to make spinner larger
&__spinner {
font-size: (var.$layout-space * 2);
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment