Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-20 00:08:02 +01:00
Code Issues Projects Releases Wiki Activity

feat: wrap buttons in a fieldset and add an explanatory legend. (#6289)

Browse Source 
This makes it more obvious to everyone what the buttons do.
This commit is contained in:
Thomas Heartman 2024-02-21 12:15:02 +08:00 committed by GitHub
parent e96f0c22af
commit ddae97080d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 33 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/src/component/application/ConnectedInstances/ConnectedInstances.tsx
View File

@ -40,7 +40,16 @@ const EnvironmentSelectionContainer = styled('div')(({ theme }) => ({
outlineOffset: theme.spacing(0.5), outlineOffset: theme.spacing(0.5),
}, },
input: { fieldset: {
border: 'none',
padding: 0,
margin: 0,
},
legend: {
marginBlockEnd: theme.spacing(3),
},
'.visually-hidden': {
border: 0, border: 0,
clip: 'rect(0 0 0 0)', clip: 'rect(0 0 0 0)',
height: 'auto', height: 'auto',
@ -99,21 +108,29 @@ export const ConnectedInstances = () => {
return ( return (
<Container> <Container>
<EnvironmentSelectionContainer> <EnvironmentSelectionContainer>
{allEnvironmentsSorted.map((env) => { <fieldset>
return ( <legend>
<label key={env}> Select which environment to display data for. Only
{env} environments that have received traffic for this
<input application will be shown here.
defaultChecked={currentEnvironment === env} </legend>
type='radio' {allEnvironmentsSorted.map((env) => {
name='active-environment' return (
onClick={() => { <label key={env}>
setCurrentEnvironment(env); {env}
}} <input
/> defaultChecked={currentEnvironment === env}
</label> className='visually-hidden'
); type='radio'
})} name='active-environment'
onClick={() => {
setCurrentEnvironment(env);
}}
/>
</label>
);
})}
</fieldset>
</EnvironmentSelectionContainer> </EnvironmentSelectionContainer>
<ConnectedInstancesTable <ConnectedInstancesTable
loading={false} loading={false}