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