Text is clipped by the ListItem

[Bikeman868]

Text is clipped by the ListItem

[psychobolt]

The contentContainer's purpose is to help center the content for the Slice. Unfortunately, it doesn't help calculate its CSS layout space. If you want specific text responsiveness, you will have to set your own in the slice's content manually e.g.

const theme = {
  slice: {
    content: css`
      width: calc(50% - 80px); /* estimated width, (probably better to set it individually for your child component) */
      /* wrap or clamp text styles... */
    `,
  }
};

[Bikeman868]

This is kind of tricky because the horizontal space available is different for every slice. As the number of slices increases, the horizontal space available for the top and bottom slices becomes almost unusable.

In my case the text on the Pie slices is data from the database, so I can't hand optimize each slice, I need to calculate the values somehow.

For icons and short static phrases, I think your current solution looks great. For my application I think that ideally I should have two groups of slices, one on the left side and one on the right side with no slices that are near vertical. I think I can do this by adding dummy slices that are made invisible via CSS, but they would still be clickable.

Can you think of any features that could be added to make my use case work a little better?

Even a simple change like being able to control the overflow on the li element would help. Right now it is set to hidden but visible would work better for me.

[psychobolt]

1. The overflow css can already be controlled by overriding the style in the theme object:

const theme = {
  pieMenu: {
    container: css`
      overflow: visible;
    `,
    item: css`
      overflow: visible;
    `,
    },
  },
};

Turning off the clipping also affects the slice's background and highlight. However, maybe you don't need the background or highlighting per slice. e.g.:

const theme = {
  pieMenu: {
    container: css`
      overflow: visible;
    `,
    item: css`
      overflow: visible;
    `,
    },
  },
  slice: {
    container: css`
      background: none;
      
      &:hover {
        background: none;
      }
    `;
  }
};

2. Calculating the vertical and horizontal dimensions of the content will be difficult to get perfect, but possible. In theory radius size should be determined, based on some average criteria e.g. calculatedWidth for max-height or calculatedHeight for max-width of each Slice's content. This will need to be calculated on post-render.

3. Another approach could be to choose to stick labels over the slice's content. This would avoid having labels as part of the child, but you would be managing positions/styles on your own e.g.:

import React from 'react';
import PieMenu, { Slice } from 'react-pie-menu';
import styled from 'styled-component';
import { layout , position } from 'styled-system';

const WidgetContainer = styled.div`
  position: relative;
  ${layout}
`;

const Label = styled.div`
  position: absolute;
  ${position}
`;

export default ({ data, radius }) => {
  const refs = data.map(() => React.createRef(null));
  const [mounted, setMount] = React.useState(null);
  React.useEffect(() => setMount(true), []);
  return (
    <WidgetContainer width={radius} height={radius}>
      <PieMenu radius={radius}>
        {data.map((item, i) => (
          <Slice><i ref={refs[i]} className={item.icon} /></Slice>
        )}
      </PieMenu>
     {mounted && data.map((item, i) => {
       const { left, right } = calculate(refs[i]); /* e.g. calculate where to position around the icon */
       return <Label left={left} top={top}>{item.label}</Label>
      }}
    </WidgetContainer >
  );
};

[Bikeman868]

I didn't realize that I can have item in my theme. This will already improve the situation.
Thank you for all of your suggestions.