go.chromium.org/luci@v0.0.0-20240309015107-7cdc2e660f33/analysis/frontend/ui/src/components/grid_label/grid_label.tsx (about)

     1  // Copyright 2022 The LUCI Authors.
     2  //
     3  // Licensed under the Apache License, Version 2.0 (the "License");
     4  // you may not use this file except in compliance with the License.
     5  // You may obtain a copy of the License at
     6  //
     7  //      http://www.apache.org/licenses/LICENSE-2.0
     8  //
     9  // Unless required by applicable law or agreed to in writing, software
    10  // distributed under the License is distributed on an "AS IS" BASIS,
    11  // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    12  // See the License for the specific language governing permissions and
    13  // limitations under the License.
    14  
    15  import Box from '@mui/material/Box';
    16  import Grid from '@mui/material/Grid';
    17  
    18  interface Props {
    19      text?: string;
    20      children?: React.ReactNode,
    21      xs?: number;
    22      lg?: number;
    23      testid?: string;
    24  }
    25  
    26  const GridLabel = ({
    27    text,
    28    children,
    29    xs = 2,
    30    lg = xs,
    31    testid,
    32  }: Props) => {
    33    return (
    34      <Grid item xs={xs} lg={lg} data-testid={testid}>
    35        <Box
    36          sx={{
    37            display: 'inline-block',
    38            wordBreak: 'break-all',
    39            overflowWrap: 'break-word',
    40          }}
    41          paddingTop={1}>
    42          {text}
    43        </Box>
    44        {children}
    45      </Grid>
    46    );
    47  };
    48  
    49  export default GridLabel;