Skip to content

Fix hover styles #820

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dannify merged 3 commits into from
Jul 22, 2020
Merged

Fix hover styles #820

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3d30c35
Fix hover styles
snowystinger Jul 22, 2020
123701f
Merge branch 'main' into fix-hover-styles
snowystinger Jul 22, 2020
e847b98
Merge branch 'main' into fix-hover-styles
snowystinger Jul 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/@adobe/spectrum-css-temp/components/button/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,9 @@ governing permissions and limitations under the License.
max-block-size: 100%;
flex-shrink: 0;
order: 0; /* always be before the label, regardless of DOM order */

transition: background var(--spectrum-global-animation-duration-100) ease-out,
color var(--spectrum-global-animation-duration-100) ease-out;
}

}
Expand Down
5 changes: 4 additions & 1 deletion packages/@adobe/spectrum-css-temp/components/textfield/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,8 @@ governing permissions and limitations under the License.
line-height: var(--spectrum-textfield-text-line-height);
text-overflow: ellipsis;

transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out, box-shadow var(--spectrum-global-animation-duration-100) ease-in-out;
transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out,
box-shadow var(--spectrum-global-animation-duration-100) ease-in-out;

outline: none;

Expand Down Expand Up @@ -188,6 +189,7 @@ governing permissions and limitations under the License.
position: absolute;
padding-inline-end: calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) / 2);
pointer-events: all;
transition: color var(--spectrum-global-animation-duration-100) ease-in-out;

.spectrum-Textfield--quiet & {
padding-inline-end: 0;
Expand Down Expand Up @@ -215,6 +217,7 @@ governing permissions and limitations under the License.
width: var(--spectrum-icon-info-medium-width);
inset-inline-start: var(--spectrum-global-dimension-size-100);
top: var(--spectrum-global-dimension-size-85);
transition: color var(--spectrum-global-animation-duration-100) ease-in-out;
}

/* styles the textfield properly if the left icon is provided */
Expand Down
8 changes: 5 additions & 3 deletions packages/@react-spectrum/actiongroup/src/ActionGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {classNames, unwrapDOMRef, useDOMRef, useStyleProps} from '@react-spectru
import {DOMProps, DOMRef, Node, StyleProps} from '@react-types/shared';
import {ListState, useListState} from '@react-stately/list';
import {mergeProps} from '@react-aria/utils';
import {PressResponder} from '@react-aria/interactions';
import {PressResponder, useHover} from '@react-aria/interactions';
import {Provider} from '@react-spectrum/provider';
import React, {forwardRef, Key, ReactElement, useRef} from 'react';
import {SpectrumActionGroupProps} from '@react-types/actiongroup';
Expand Down Expand Up @@ -100,6 +100,7 @@ function ActionGroupItem<T>({item, state, isDisabled, isEmphasized, onAction}: A
let {buttonProps} = useActionGroupItem({key: item.key}, state, unwrapDOMRef(ref));
isDisabled = isDisabled || state.disabledKeys.has(item.key);
let isSelected = state.selectionManager.isSelected(item.key);
let {hoverProps, isHovered} = useHover({isDisabled});

if (onAction && !isDisabled) {
buttonProps = mergeProps(buttonProps, {
Expand All @@ -110,15 +111,16 @@ function ActionGroupItem<T>({item, state, isDisabled, isEmphasized, onAction}: A
let button = (
// Use a PressResponder to send DOM props through.
// ActionButton doesn't allow overriding the role by default.
<PressResponder {...buttonProps}>
<PressResponder {...mergeProps(buttonProps, hoverProps)}>
<ActionButton
ref={ref}
UNSAFE_className={
classNames(
styles,
'spectrum-ActionGroup-item',
{
'is-selected': isSelected
'is-selected': isSelected,
'is-hovered': isHovered
},
classNames(
buttonStyles,
Expand Down