kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-03-26 06:55:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: fieldset title/subtitle use block element (#510)

Browse Source 
* fix: fieldset title/subtitle use block element

* test: update test-snapshot
This commit is contained in:
izayl
2021-04-11 22:16:55 +08:00
committed by GitHub
parent 18c1afbc14
commit 66b0c891e8
3 changed files with 116 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
components/fieldset/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -25,19 +25,21 @@ initialize {
"type": "text",
},
],
"name": "h4",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": Node {
"attribs": Object {},
"children": Array [
Node {
"data": "
h4 {
div {
font-size: 1.25rem;
line-height: 1.5;
margin: 0;
display: inline-flex;
word-break: break-word;
font-weight: 600;
letter-spacing: -0.020625rem;
}
",
"next": null,
@@ -61,16 +63,17 @@ initialize {
"type": "text",
},
],
"name": "p",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": Node {
"attribs": Object {},
"children": Array [
Node {
"data": "
p {
div {
font-size: 0.875rem;
line-height: 1.6;
letter-spacing: -0.005625rem;
margin: 8pt 0;
}
",
@@ -151,12 +154,14 @@ initialize {
"children": Array [
Node {
"data": "
h4 {
div {
font-size: 1.25rem;
line-height: 1.5;
margin: 0;
display: inline-flex;
word-break: break-word;
font-weight: 600;
letter-spacing: -0.020625rem;
}
",
"next": null,
@@ -180,16 +185,17 @@ initialize {
"type": "text",
},
],
"name": "p",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": Node {
"attribs": Object {},
"children": Array [
Node {
"data": "
p {
div {
font-size: 0.875rem;
line-height: 1.6;
letter-spacing: -0.005625rem;
margin: 8pt 0;
}
",
@@ -263,7 +269,7 @@ initialize {
"type": "text",
},
],
"name": "h4",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": [Circular],
"parent": [Circular],
@@ -293,16 +299,17 @@ initialize {
"type": "text",
},
],
"name": "p",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": Node {
"attribs": Object {},
"children": Array [
Node {
"data": "
p {
div {
font-size: 0.875rem;
line-height: 1.6;
letter-spacing: -0.005625rem;
margin: 8pt 0;
}
",
@@ -358,12 +365,14 @@ initialize {
"children": Array [
Node {
"data": "
h4 {
div {
font-size: 1.25rem;
line-height: 1.5;
margin: 0;
display: inline-flex;
word-break: break-word;
font-weight: 600;
letter-spacing: -0.020625rem;
}
",
"next": null,
@@ -389,7 +398,7 @@ initialize {
"type": "text",
},
],
"name": "h4",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": [Circular],
"parent": [Circular],
@@ -419,9 +428,10 @@ initialize {
"children": Array [
Node {
"data": "
p {
div {
font-size: 0.875rem;
line-height: 1.6;
letter-spacing: -0.005625rem;
margin: 8pt 0;
}
",
@@ -479,7 +489,7 @@ initialize {
"type": "text",
},
],
"name": "p",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": [Circular],
"parent": [Circular],
@@ -488,12 +498,14 @@ initialize {
"children": Array [
Node {
"data": "
h4 {
div {
font-size: 1.25rem;
line-height: 1.5;
margin: 0;
display: inline-flex;
word-break: break-word;
font-weight: 600;
letter-spacing: -0.020625rem;
}
",
"next": null,
@@ -519,7 +531,7 @@ initialize {
"type": "text",
},
],
"name": "h4",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": [Circular],
"parent": [Circular],
@@ -580,9 +592,10 @@ initialize {
"children": Array [
Node {
"data": "
p {
div {
font-size: 0.875rem;
line-height: 1.6;
letter-spacing: -0.005625rem;
margin: 8pt 0;
}
",
@@ -609,7 +622,7 @@ initialize {
"type": "text",
},
],
"name": "p",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": [Circular],
"parent": [Circular],
@@ -618,12 +631,14 @@ initialize {
"children": Array [
Node {
"data": "
h4 {
div {
font-size: 1.25rem;
line-height: 1.5;
margin: 0;
display: inline-flex;
word-break: break-word;
font-weight: 600;
letter-spacing: -0.020625rem;
}
",
"next": null,
@@ -649,7 +664,7 @@ initialize {
"type": "text",
},
],
"name": "h4",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": [Circular],
"parent": [Circular],
@@ -2336,19 +2351,21 @@ initialize {
"type": "text",
},
],
"name": "h4",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": Node {
"attribs": Object {},
"children": Array [
Node {
"data": "
h4 {
div {
font-size: 1.25rem;
line-height: 1.5;
margin: 0;
display: inline-flex;
word-break: break-word;
font-weight: 600;
letter-spacing: -0.020625rem;
}
",
"next": null,
@@ -2372,16 +2389,17 @@ initialize {
"type": "text",
},
],
"name": "p",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": Node {
"attribs": Object {},
"children": Array [
Node {
"data": "
p {
div {
font-size: 0.875rem;
line-height: 1.6;
letter-spacing: -0.005625rem;
margin: 8pt 0;
}
",
@@ -2462,12 +2480,14 @@ initialize {
"children": Array [
Node {
"data": "
h4 {
div {
font-size: 1.25rem;
line-height: 1.5;
margin: 0;
display: inline-flex;
word-break: break-word;
font-weight: 600;
letter-spacing: -0.020625rem;
}
",
"next": null,
@@ -2491,16 +2511,17 @@ initialize {
"type": "text",
},
],
"name": "p",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": Node {
"attribs": Object {},
"children": Array [
Node {
"data": "
p {
div {
font-size: 0.875rem;
line-height: 1.6;
letter-spacing: -0.005625rem;
margin: 8pt 0;
}
",
@@ -2574,7 +2595,7 @@ initialize {
"type": "text",
},
],
"name": "h4",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": [Circular],
"parent": [Circular],
@@ -2604,16 +2625,17 @@ initialize {
"type": "text",
},
],
"name": "p",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": Node {
"attribs": Object {},
"children": Array [
Node {
"data": "
p {
div {
font-size: 0.875rem;
line-height: 1.6;
letter-spacing: -0.005625rem;
margin: 8pt 0;
}
",
@@ -2669,12 +2691,14 @@ initialize {
"children": Array [
Node {
"data": "
h4 {
div {
font-size: 1.25rem;
line-height: 1.5;
margin: 0;
display: inline-flex;
word-break: break-word;
font-weight: 600;
letter-spacing: -0.020625rem;
}
",
"next": null,
@@ -2700,7 +2724,7 @@ initialize {
"type": "text",
},
],
"name": "h4",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": [Circular],
"parent": [Circular],
@@ -2730,9 +2754,10 @@ initialize {
"children": Array [
Node {
"data": "
p {
div {
font-size: 0.875rem;
line-height: 1.6;
letter-spacing: -0.005625rem;
margin: 8pt 0;
}
",
@@ -2790,7 +2815,7 @@ initialize {
"type": "text",
},
],
"name": "p",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": [Circular],
"parent": [Circular],
@@ -2799,12 +2824,14 @@ initialize {
"children": Array [
Node {
"data": "
h4 {
div {
font-size: 1.25rem;
line-height: 1.5;
margin: 0;
display: inline-flex;
word-break: break-word;
font-weight: 600;
letter-spacing: -0.020625rem;
}
",
"next": null,
@@ -2830,7 +2857,7 @@ initialize {
"type": "text",
},
],
"name": "h4",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": [Circular],
"parent": [Circular],
@@ -2891,9 +2918,10 @@ initialize {
"children": Array [
Node {
"data": "
p {
div {
font-size: 0.875rem;
line-height: 1.6;
letter-spacing: -0.005625rem;
margin: 8pt 0;
}
",
@@ -2920,7 +2948,7 @@ initialize {
"type": "text",
},
],
"name": "p",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": [Circular],
"parent": [Circular],
@@ -2929,12 +2957,14 @@ initialize {
"children": Array [
Node {
"data": "
h4 {
div {
font-size: 1.25rem;
line-height: 1.5;
margin: 0;
display: inline-flex;
word-break: break-word;
font-weight: 600;
letter-spacing: -0.020625rem;
}
",
"next": null,
@@ -2960,7 +2990,7 @@ initialize {
"type": "text",
},
],
"name": "h4",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": [Circular],
"parent": [Circular],
@@ -3836,19 +3866,21 @@ initialize {
"type": "text",
},
],
"name": "h4",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": Node {
"attribs": Object {},
"children": Array [
Node {
"data": "
h4 {
div {
font-size: 1.25rem;
line-height: 1.5;
margin: 0;
display: inline-flex;
word-break: break-word;
font-weight: 600;
letter-spacing: -0.020625rem;
}
",
"next": null,
@@ -3872,16 +3904,17 @@ initialize {
"type": "text",
},
],
"name": "p",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": Node {
"attribs": Object {},
"children": Array [
Node {
"data": "
p {
div {
font-size: 0.875rem;
line-height: 1.6;
letter-spacing: -0.005625rem;
margin: 8pt 0;
}
",
@@ -3962,12 +3995,14 @@ initialize {
"children": Array [
Node {
"data": "
h4 {
div {
font-size: 1.25rem;
line-height: 1.5;
margin: 0;
display: inline-flex;
word-break: break-word;
font-weight: 600;
letter-spacing: -0.020625rem;
}
",
"next": null,
@@ -3991,16 +4026,17 @@ initialize {
"type": "text",
},
],
"name": "p",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": Node {
"attribs": Object {},
"children": Array [
Node {
"data": "
p {
div {
font-size: 0.875rem;
line-height: 1.6;
letter-spacing: -0.005625rem;
margin: 8pt 0;
}
",
@@ -4074,7 +4110,7 @@ initialize {
"type": "text",
},
],
"name": "h4",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": [Circular],
"parent": [Circular],
@@ -4104,16 +4140,17 @@ initialize {
"type": "text",
},
],
"name": "p",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": Node {
"attribs": Object {},
"children": Array [
Node {
"data": "
p {
div {
font-size: 0.875rem;
line-height: 1.6;
letter-spacing: -0.005625rem;
margin: 8pt 0;
}
",
@@ -4169,12 +4206,14 @@ initialize {
"children": Array [
Node {
"data": "
h4 {
div {
font-size: 1.25rem;
line-height: 1.5;
margin: 0;
display: inline-flex;
word-break: break-word;
font-weight: 600;
letter-spacing: -0.020625rem;
}
",
"next": null,
@@ -4200,7 +4239,7 @@ initialize {
"type": "text",
},
],
"name": "h4",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": [Circular],
"parent": [Circular],
@@ -4230,9 +4269,10 @@ initialize {
"children": Array [
Node {
"data": "
p {
div {
font-size: 0.875rem;
line-height: 1.6;
letter-spacing: -0.005625rem;
margin: 8pt 0;
}
",
@@ -4290,7 +4330,7 @@ initialize {
"type": "text",
},
],
"name": "p",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": [Circular],
"parent": [Circular],
@@ -4299,12 +4339,14 @@ initialize {
"children": Array [
Node {
"data": "
h4 {
div {
font-size: 1.25rem;
line-height: 1.5;
margin: 0;
display: inline-flex;
word-break: break-word;
font-weight: 600;
letter-spacing: -0.020625rem;
}
",
"next": null,
@@ -4330,7 +4372,7 @@ initialize {
"type": "text",
},
],
"name": "h4",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": [Circular],
"parent": [Circular],
@@ -4391,9 +4433,10 @@ initialize {
"children": Array [
Node {
"data": "
p {
div {
font-size: 0.875rem;
line-height: 1.6;
letter-spacing: -0.005625rem;
margin: 8pt 0;
}
",
@@ -4420,7 +4463,7 @@ initialize {
"type": "text",
},
],
"name": "p",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": [Circular],
"parent": [Circular],
@@ -4429,12 +4472,14 @@ initialize {
"children": Array [
Node {
"data": "
h4 {
div {
font-size: 1.25rem;
line-height: 1.5;
margin: 0;
display: inline-flex;
word-break: break-word;
font-weight: 600;
letter-spacing: -0.020625rem;
}
",
"next": null,
@@ -4460,7 +4505,7 @@ initialize {
"type": "text",
},
],
"name": "h4",
"name": "div",
"namespace": "http://www.w3.org/1999/xhtml",
"next": [Circular],
"parent": [Circular],

9
components/fieldset/fieldset-subtitle.tsx
View File

@@ -10,7 +10,7 @@ const defaultProps = {
className: '',
}
type NativeAttrs = Omit<React.HTMLAttributes<HTMLHeadingElement>, keyof Props>
type NativeAttrs = Omit<React.HTMLAttributes<HTMLDivElement>, keyof Props>
export type FieldsetSubtitleProps = Props & typeof defaultProps & NativeAttrs
const FieldsetSubtitle: React.FC<FieldsetSubtitleProps> = ({
@@ -22,13 +22,14 @@ const FieldsetSubtitle: React.FC<FieldsetSubtitleProps> = ({
return (
<>
<p className={className} {...props}>
<div className={className} {...props}>
{children}
</p>
</div>
<style jsx>{`
p {
div {
font-size: 0.875rem;
line-height: 1.6;
letter-spacing: -0.005625rem;
margin: ${theme.layout.gapHalf} 0;
}
`}</style>

10
components/fieldset/fieldset-title.tsx
View File

@@ -9,7 +9,7 @@ const defaultProps = {
className: '',
}
type NativeAttrs = Omit<React.HTMLAttributes<HTMLHeadingElement>, keyof Props>
type NativeAttrs = Omit<React.HTMLAttributes<HTMLDivElement>, keyof Props>
export type FieldsetTitleProps = Props & typeof defaultProps & NativeAttrs
const FieldsetTitle: React.FC<FieldsetTitleProps> = ({
@@ -19,16 +19,18 @@ const FieldsetTitle: React.FC<FieldsetTitleProps> = ({
}) => {
return (
<>
<h4 className={className} {...props}>
<div className={className} {...props}>
{children}
</h4>
</div>
<style jsx>{`
h4 {
div {
font-size: 1.25rem;
line-height: 1.5;
margin: 0;
display: inline-flex;
word-break: break-word;
font-weight: 600;
letter-spacing: -0.020625rem;
}
`}</style>
</>