mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-06 00:07:44 +01:00
c7bb6c5179
This change prevents long project names from blowing the form out of
proportion.
To do so, it:
1. sets `whitespace: no-wrap` on the button labels. Judging by the other
styles, this was the intention all along, but it didn't really come up
until now.
2. It also sets the label width for projects to 30ch,so that you'll get
to see quite a bit of the project name before it gets cut off.
It would be possible to set a dynamic width for this button based on the
longest project name, but I'm not sure it adds much value, so I'm
leaning towards keeping it simple.
Here's what the dynamic width would look like:
``` tsx
const projectButtonLabelWidth = useMemo(() => {
const longestProjectName = projects.reduce(
(prev: number, type: { name: string }) =>
prev >= type.name.length ? prev : type.name.length,
0,
);
return `${Math.min(longestProjectName, 30)}ch`;
}, [projects]);
```
What it looks like:
|
||
|---|---|---|
| .. | ||
| AnimateOnMount | ||
| Announcer | ||
| ApiError | ||
| ApiTokenTable | ||
| AutocompleteBox | ||
| Badge | ||
| BatchSelectionActionsBar | ||
| BreadcrumbNav | ||
| CheckmarkBadge | ||
| Codebox | ||
| ConditionallyRender | ||
| ConstraintAccordion | ||
| CreateButton | ||
| DateTimePicker | ||
| DialogFormTemplate | ||
| Dialogue | ||
| DividerText | ||
| DropdownMenu | ||
| EnterpriseBadge | ||
| EnvironmentIcon | ||
| ExperimentalFeedback | ||
| FavoriteIconButton | ||
| FeatureArchiveDialog | ||
| FeatureStaleDialog | ||
| FeatureStatusChip | ||
| Feedback | ||
| FilterDateItem | ||
| FormSwitch | ||
| FormTemplate | ||
| GeneralSelect | ||
| Gradient | ||
| GridCol | ||
| GridRow | ||
| GuidanceIndicator | ||
| HelpIcon | ||
| Highlighter | ||
| HtmlTooltip | ||
| Input | ||
| InputCaption | ||
| InputListField | ||
| InstanceStatus | ||
| ItemList | ||
| Limit | ||
| Loader | ||
| LoginRedirect | ||
| MainHeader | ||
| Markdown | ||
| MultiActionButton | ||
| MultipleRoleSelect | ||
| NewConstraintAccordion | ||
| NoItems | ||
| NotFound | ||
| Notifications | ||
| OperatorUpgradeAlert | ||
| PageContent | ||
| PageHeader | ||
| PasswordField | ||
| PercentageCircle | ||
| PermissionButton | ||
| PermissionGuard | ||
| PermissionHOC | ||
| PermissionIconButton | ||
| PermissionSwitch | ||
| PremiumFeature | ||
| PrettifyLargeNumber | ||
| Proclamation | ||
| ProjectIcon | ||
| ProjectSelect | ||
| ProtectedRoute | ||
| ReactJSONEditor | ||
| ResponsiveButton | ||
| RoleBadge | ||
| RoleDescription | ||
| RoleSelect | ||
| ScreenReaderOnly | ||
| ScrollTop | ||
| Search | ||
| SegmentItem | ||
| SidebarModal | ||
| SidePanelList | ||
| SkipNavLink | ||
| StaleDataNotification | ||
| Sticky | ||
| StrategyItemContainer | ||
| StrategySeparator | ||
| StrategyVariantsUpgradeAlert | ||
| StringTruncator | ||
| Table | ||
| TabNav | ||
| ThemeMode | ||
| ToastRenderer | ||
| TooltipLink | ||
| TooltipResolver | ||
| UpdateButton | ||
| UserAvatar | ||
| VariantInfoAlert | ||
| VerticalTabs | ||
| common.module.scss | ||
| flags.ts | ||
| index.jsx | ||
| select.tsx | ||
| util.test.ts | ||
| util.ts | ||