Remove extra focus outline for SpeciesFacesPicker

Before the tooltips, I thought the focus state wasn't clear enough at a glance, so I added an extra focus outline to the species faces picker area. Now, I think it's clear enough with the species name tooltip popping up!
This commit is contained in:
Emi Matchu 2021-02-02 16:31:55 -08:00
parent e788040315
commit adecb4167b

View file

@ -718,20 +718,22 @@ function ItemPageOutfitPreview({ itemId }) {
</Box>
</Box>
</VStack>
<SpeciesFacesPicker
selectedSpeciesId={petState.speciesId}
compatibleBodies={compatibleBodies}
couldProbablyModelMoreData={couldProbablyModelMoreData}
onChange={({ speciesId, colorId }) =>
setPetState({
speciesId,
colorId,
pose: idealPose,
appearanceId: null,
})
}
isLoading={loading}
/>
<Box maxWidth="400px">
<SpeciesFacesPicker
selectedSpeciesId={petState.speciesId}
compatibleBodies={compatibleBodies}
couldProbablyModelMoreData={couldProbablyModelMoreData}
onChange={({ speciesId, colorId }) =>
setPetState({
speciesId,
colorId,
pose: idealPose,
appearanceId: null,
})
}
isLoading={loading}
/>
</Box>
</Stack>
);
}
@ -801,19 +803,8 @@ function SpeciesFacesPicker({
a.speciesName.localeCompare(b.speciesName)
);
const focusBorderColorValue = useToken("colors", "blue.100");
return (
<Box
_focusWithin={{
boxShadow: `${focusBorderColorValue} 0 0 1px 2px`,
}}
maxWidth="400px"
boxSizing="content-box"
padding="2"
borderRadius="md"
transition="all 0.2s"
>
<>
<Wrap
spacing="0"
justify="center"
@ -851,7 +842,7 @@ function SpeciesFacesPicker({
}
`}
/>
</Box>
</>
);
}
@ -910,7 +901,7 @@ function SpeciesFaceOption({
<Tooltip
label={tooltipLabel}
placement="top"
gutter={-12}
gutter={-10}
// We track hover and focus state manually for the tooltip, so that
// keyboard nav to switch between options causes the tooltip to
// follow. (By default, the tooltip appears on the first tab focus,