Skip to content

Commit

Permalink
Tidying CircularOptionPicker.Option (#54903)
Browse files Browse the repository at this point in the history
Tidying `CircularOptionPicker.Option`
  • Loading branch information
Andrew Hayward authored Sep 28, 2023
1 parent 626e1ef commit 1fb1343
Showing 4 changed files with 14 additions and 14 deletions.
Original file line number Diff line number Diff line change
@@ -218,7 +218,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
<button
aria-label="Color: red"
aria-selected="true"
class="components-button components-circular-option-picker__option is-pressed"
class="components-button components-circular-option-picker__option"
id="components-circular-option-picker-0-0"
role="option"
style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"
3 changes: 2 additions & 1 deletion packages/components/src/button/style.scss
Original file line number Diff line number Diff line change
@@ -309,7 +309,8 @@

// Toggled style.
&[aria-pressed="true"],
&[aria-pressed="mixed"] {
&[aria-pressed="mixed"],
&[aria-selected="true"] {
color: $components-color-foreground-inverted;
background: $components-color-foreground;

Original file line number Diff line number Diff line change
@@ -34,7 +34,14 @@ function UnforwardedOptionAsButton(
},
forwardedRef: ForwardedRef< any >
) {
return <Button { ...props } ref={ forwardedRef }></Button>;
const { isPressed, ...additionalProps } = props;
return (
<Button
{ ...additionalProps }
aria-pressed={ isPressed }
ref={ forwardedRef }
></Button>
);
}

const OptionAsButton = forwardRef( UnforwardedOptionAsButton );
@@ -48,7 +55,7 @@ function UnforwardedOptionAsOption(
},
forwardedRef: ForwardedRef< any >
) {
const { id, className, isSelected, context, ...additionalProps } = props;
const { id, isSelected, context, ...additionalProps } = props;
const { isComposite, ..._compositeState } = context;
const compositeState =
_compositeState as CircularOptionPickerCompositeState;
@@ -73,15 +80,6 @@ function UnforwardedOptionAsOption(
{ ...compositeState }
as={ Button }
id={ id }
// Ideally we'd let the underlying `Button` component
// handle this by passing `isPressed` as a prop.
// Unfortunately doing so also sets `aria-pressed` as
// an attribute on the element, which is incompatible
// with `role="option"`, and there is no way at this
// point to override that behaviour.
className={ classnames( className, {
'is-pressed': isSelected,
} ) }
role="option"
aria-selected={ !! isSelected }
ref={ forwardedRef }
3 changes: 2 additions & 1 deletion packages/components/src/circular-option-picker/style.scss
Original file line number Diff line number Diff line change
@@ -83,7 +83,8 @@ $color-palette-circle-spacing: 12px;
box-shadow: inset 0 0 0 ($color-palette-circle-size * 0.5) !important;
}

&.is-pressed {
&[aria-pressed="true"],
&[aria-selected="true"] {
box-shadow: inset 0 0 0 4px;
position: relative;
z-index: z-index(".components-circular-option-picker__option.is-pressed");

0 comments on commit 1fb1343

Please sign in to comment.