search

trendmicro-frontend / tonic-ui

Tonic UI is a UI component library for React, built with Emotion and Styled System. It is designed to be easy to use and easy to customize.
https://trendmicro-frontend.github.io/tonic-ui
MIT License
125 stars 28 forks source link

[Docs] Correct the margin of text labels in the `Input` example #856

Closed cheton closed 3 months ago

cheton commented 3 months ago

image

cheton commented 3 months ago

Affected pages:

./drawer/usage.js:      <TextLabel display="flex" alignItems="center" mb="3x">
./icon/index.page.mdx:> <TextLabel><Flex alignItems="center" columnGap="2x" mb="1x"><AlertIcon /> IMPORTANT NOTICE</Flex></TextLabel>
./input/sizes.js:      <TextLabel mb="1x" size="sm">Label:</TextLabel>
./input/sizes.js:      <TextLabel mb="1x" size="md">Label:</TextLabel>
./input/sizes.js:      <TextLabel mb="1x" size="lg">Label:</TextLabel>
./input/basic.js:    <TextLabel mb="1x">Label:</TextLabel>
./input/attribute-list.js:      <TextLabel htmlFor="browser-choice" mr="2x">
./table/column-ordering-dnd.js:                  <TextLabel minWidth={100}>
./table/usage.js:        <TextLabel display="flex" alignItems="center" mb="3x">
./modal/usage.js:      <TextLabel display="flex" alignItems="center" mb="3x">
./date-pickers/date-pickers.js:    <Box mb="1x"><TextLabel>Date Picker</TextLabel></Box>
./date-pickers/native-pickers.js:      <TextLabel mb="1x">date</TextLabel>
./date-pickers/native-pickers.js:      <TextLabel mb="1x">time</TextLabel>
./date-pickers/native-pickers.js:      <TextLabel mb="1x">datetime-local</TextLabel>
./date-pickers/native-pickers.js:      <TextLabel mb="1x">month</TextLabel>
./date-pickers/native-pickers.js:      <TextLabel mb="1x">week</TextLabel>
./menu/dropdown.js:      <TextLabel mr="2x">
./menu/multiselect.js:        <TextLabel mr="2x">
./menu/multiselect.js:        <TextLabel mr="2x">
./menu/multiselect.js:      <TextLabel mr="2x">
./select/basic.js:    <TextLabel mb="1x">Label:</TextLabel>
./textarea/basic.js:    <TextLabel mb="1x">Label:</TextLabel>
cheton commented 3 months ago

Both Text and TextLabel components should include the display: block CSS property. https://github.com/trendmicro-frontend/tonic-ui/pull/501/files