Skip to content
Snippets Groups Projects
Unverified Commit 15c3a40d authored by Maz Ameli's avatar Maz Ameli Committed by GitHub
Browse files

Reduce tabs font size down to 14px (#15955) 

* reduce tabs font size down to 14px

* tweak admin tabs padding

* update snapshots
parent 754ecb8e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/metabase/admin/permissions/components/PermissionsTabs.jsx
+ 1
− 1
View file @ 15c3a40d
......@@ -15,7 +15,7 @@ const PermissionsTabs = ({ tab, onChangeTab }) => (
]}
onChange={onChangeTab}
underlined
py={1}
py={2}
/>
</div>
);
......
frontend/src/metabase/components/Radio.jsx
+ 1
− 2
View file @ 15c3a40d
......@@ -134,8 +134,7 @@ BaseItem.defaultProps = {
// NORMAL
const NormalList = styled(BaseList).attrs({
className: props =>
cx(props.className, { "h3 text-bold": !props.showButtons }), // TODO: better way to merge classname?
className: props => cx(props.className, { "text-bold": !props.showButtons }), // TODO: better way to merge classname?
})``;
const NormalItem = styled(BaseItem)`
color: ${props => (props.selected ? color("brand") : null)};
......
frontend/test/metabase/internal/__snapshots__/components.unit.spec.js.snap
+ 411
− 2
View file @ 15c3a40d
......@@ -447,6 +447,73 @@ exports[`CheckBox should render "Yellow" correctly 1`] = `
</div>
`;
exports[`ClampedText should render "Default" correctly 1`] = `
<div
className="clamped-text"
>
<div
className="clamped-text--clamp ClampedText__ClampedDiv-sc-1i5vub8-0 kpOVj"
>
<div
className="clamped-text--text"
>
Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Cras sit amet sagittis dui. Morbi in odio laoreet, finibus erat vitae, sagittis dui. Ut at mauris eget ligula volutpat pellentesque. Integer non faucibus urna. Maecenas faucibus ornare gravida. Aliquam orci tortor, ullamcorper et vehicula accumsan, malesuada in ipsum. Nullam auctor, justo et mattis fringilla, enim ipsum aliquet nunc, quis posuere odio erat in nulla. Suspendisse elementum, est et rutrum volutpat, purus mi placerat odio, sit amet blandit nulla diam at lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies placerat mollis. Curabitur vestibulum semper turpis, id cursus ex dignissim id. Cras efficitur sed ligula ac dictum. Curabitur hendrerit metus eget vestibulum bibendum. Cras nulla arcu, condimentum in rhoncus eu, interdum ut sapien. Cras sed molestie tellus, quis aliquet nunc. Nulla nec est eu est condimentum facilisis sit amet et ex.
</div>
</div>
<div
className="clamped-text--footer"
/>
</div>
`;
exports[`ClampedText should render "No 'See more' button when all text visible" correctly 1`] = `
Array [
<strong>
A single line of text:
</strong>,
<div
className="clamped-text"
>
<div
className="clamped-text--clamp ClampedText__ClampedDiv-sc-1i5vub8-0 kpOVj"
>
<div
className="clamped-text--text"
>
foo
</div>
</div>
<div
className="clamped-text--footer"
/>
</div>,
<br />,
<strong>
Many lines of text, but an unset \`visibleLines\` prop:
</strong>,
<div
className="clamped-text"
>
<div
className="clamped-text--clamp ClampedText__ClampedDiv-sc-1i5vub8-0 MvTAX"
>
<div
className="clamped-text--text"
>
Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Cras sit amet sagittis dui. Morbi in odio laoreet, finibus erat vitae, sagittis dui. Ut at mauris eget ligula volutpat pellentesque. Integer non faucibus urna. Maecenas faucibus ornare gravida. Aliquam orci tortor, ullamcorper et vehicula accumsan, malesuada in ipsum. Nullam auctor, justo et mattis fringilla, enim ipsum aliquet nunc, quis posuere odio erat in nulla. Suspendisse elementum, est et rutrum volutpat, purus mi placerat odio, sit amet blandit nulla diam at lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies placerat mollis. Curabitur vestibulum semper turpis, id cursus ex dignissim id. Cras efficitur sed ligula ac dictum. Curabitur hendrerit metus eget vestibulum bibendum. Cras nulla arcu, condimentum in rhoncus eu, interdum ut sapien. Cras sed molestie tellus, quis aliquet nunc. Nulla nec est eu est condimentum facilisis sit amet et ex.
</div>
</div>
<div
className="clamped-text--footer"
/>
</div>,
]
`;
exports[`CollapseSection should render "Collapsed by default" correctly 1`] = `
<div
aria-expanded={false}
......@@ -1073,7 +1140,7 @@ exports[`Radio should render "bubble" correctly 1`] = `
exports[`Radio should render "default" correctly 1`] = `
<ul
className="Radio__NormalList-sc-1y1p5xd-2 h3 text-bold cakGpL Radio__BaseList-sc-1y1p5xd-0 kGqskW"
className="Radio__NormalList-sc-1y1p5xd-2 text-bold cakGpL Radio__BaseList-sc-1y1p5xd-0 kGqskW"
>
<li
aria-selected={true}
......@@ -1173,7 +1240,7 @@ exports[`Radio should render "show buttons" correctly 1`] = `
exports[`Radio should render "underlined" correctly 1`] = `
<ul
className="Radio__UnderlinedList-sc-1y1p5xd-4 yPTIp Radio__NormalList-sc-1y1p5xd-2 Radio__UnderlinedList-sc-1y1p5xd-4 yPTIp h3 text-bold cakGpL Radio__BaseList-sc-1y1p5xd-0 kGqskW"
className="Radio__UnderlinedList-sc-1y1p5xd-4 yPTIp Radio__NormalList-sc-1y1p5xd-2 Radio__UnderlinedList-sc-1y1p5xd-4 yPTIp text-bold cakGpL Radio__BaseList-sc-1y1p5xd-0 kGqskW"
>
<li
aria-selected={true}
......@@ -1659,6 +1726,348 @@ exports[`StackedCheckBox should render "Off - Default" correctly 1`] = `
</div>
`;
exports[`Timeline should render "Constrained width" correctly 1`] = `
<div
className="Timelineinfo__Container-g32h45-0 hGzZmq"
>
<div
className="Timeline__TimelineContainer-sc-1c86koa-0 cNPqnV"
>
<div
className="Timeline__Border-sc-1c86koa-2 kmWXSN"
/>
<div
className="flex align-start justify-start mb2 Timeline__TimelineItem-sc-1c86koa-1 foqzPx"
>
<svg
aria-label="verified icon"
className="Icon Icon-verified text-light Icon-sc-1x67v3y-1 hFNRPZ"
dangerouslySetInnerHTML={
Object {
"__html": "<path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M32 16.64a6.397 6.397 0 0 0-3.15-5.514 6.4 6.4 0 0 0-7.42-8.115A6.396 6.396 0 0 0 16 0a6.396 6.396 0 0 0-5.43 3.01 6.4 6.4 0 0 0-7.42 8.115A6.397 6.397 0 0 0 0 16.64c0 2.25 1.162 4.23 2.919 5.371a6.4 6.4 0 0 0 7.652 6.979A6.396 6.396 0 0 0 16 32a6.396 6.396 0 0 0 5.429-3.01 6.4 6.4 0 0 0 7.652-6.979A6.395 6.395 0 0 0 32 16.64z\\" fill=\\"#D3E7F8\\"/><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M8.32 16.852l2.392-2.485 3.649 3.769 7.312-7.576 2.4 2.584-9.71 10.02-6.043-6.312z\\" fill=\\"#509EE3\\"/>",
}
}
fill="currentcolor"
height={20}
role="img"
viewBox="0 0 32 32"
width={20}
/>
<div
className="ml1"
>
<div
className="text-bold"
>
John Someone verified this
</div>
<div
className="text-medium text-small"
>
a day ago
</div>
<div>
idk lol
</div>
</div>
</div>
<div
className="flex align-start justify-start mb2 Timeline__TimelineItem-sc-1c86koa-1 foqzPx"
>
<svg
aria-label="pencil icon"
className="Icon Icon-pencil text-light Icon-sc-1x67v3y-1 hFNRPZ"
fill="currentcolor"
height={20}
role="img"
viewBox="0 0 32 32"
width={20}
>
<path
d="M21.187 4.359L24.71.835c1.363-1.362 3.912-1.022 5.694.76 1.783 1.783 2.123 4.332.761 5.695l-3.523 3.523-6.455-6.454zM19.425 6.12L1.455 24.091C.091 25.453-.47 30.625.452 31.547c.922.922 6.094.361 7.456-1.001l17.97-17.971-6.454-6.455z"
/>
</svg>
<div
className="ml1"
>
<div
className="text-bold"
>
Foo edited this
</div>
<div
className="text-medium text-small"
>
7 days ago
</div>
<div>
Did a thing.
</div>
</div>
</div>
<div
className="flex align-start justify-start mb2 Timeline__TimelineItem-sc-1c86koa-1 foqzPx"
>
<svg
aria-label="warning_colorized icon"
className="Icon Icon-warning_colorized text-light Icon-sc-1x67v3y-1 hFNRPZ"
dangerouslySetInnerHTML={
Object {
"__html": "<path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M11.764 4.36c1.957-3.146 6.535-3.146 8.492 0l11.002 17.687c2.072 3.33-.323 7.64-4.246 7.64H5.008c-3.922 0-6.317-4.31-4.246-7.64L11.765 4.359zm6.414 19.002v.019c0 .309-.059.601-.175.874-.117.272-.28.509-.488.709a2.269 2.269 0 0 1-.723.465 2.336 2.336 0 0 1-.887.168c-.322 0-.623-.056-.898-.168a2.179 2.179 0 0 1-1.2-1.174 2.199 2.199 0 0 1-.175-.874c0-.31.059-.601.176-.87.116-.268.276-.501.48-.7a2.279 2.279 0 0 1 1.617-.646c.316 0 .614.058.89.174.273.116.513.272.72.47a2.153 2.153 0 0 1 .663 1.535v.018zm-.32-15.083v5.735c0 .711-.042 1.416-.127 2.115a31.535 31.535 0 0 1-.334 2.124l-.041.214h-2.834l-.04-.214a31.537 31.537 0 0 1-.335-2.124c-.085-.699-.127-1.404-.127-2.115V8.28h3.838z\\" fill=\\"#F2A86F\\"/>",
}
}
fill="currentcolor"
height={20}
role="img"
viewBox="0 0 32 32"
width={20}
/>
<div
className="ml1"
>
<div
className="text-bold"
>
Someone McSomeone thinks something looks wrong
</div>
<div
className="text-medium text-small"
>
2 months ago
</div>
<div>
Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct.
Uh oh that's not correct.
Uh oh that's not correct.
Uh oh that's not correct.
Uh oh that's not correct.
Uh oh that's not correct.
Uh oh that's not correct.
Uh oh that's not correct.
Uh oh that's not correct.
Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not
</div>
</div>
</div>
<div
className="flex align-start justify-start mb2 Timeline__TimelineItem-sc-1c86koa-1 foqzPx"
>
<svg
aria-label="clarification icon"
className="Icon Icon-clarification text-light Icon-sc-1x67v3y-1 hFNRPZ"
dangerouslySetInnerHTML={
Object {
"__html": "<rect width=\\"32\\" height=\\"32\\" rx=\\"16\\" fill=\\"#E1D9E8\\"/><path d=\\"M11.2 8.307a9.244 9.244 0 0 1 1.024-.742c.375-.23.777-.431 1.203-.602.427-.179.883-.316 1.37-.41a7.894 7.894 0 0 1 1.6-.153c.802 0 1.523.107 2.163.32.649.213 1.199.52 1.651.922.452.392.798.87 1.037 1.433.247.555.371 1.174.371 1.856 0 .649-.09 1.212-.269 1.69-.179.47-.405.879-.678 1.229-.273.35-.576.652-.909.908a40.2 40.2 0 0 1-.934.717c-.29.214-.546.427-.768.64a1.46 1.46 0 0 0-.41.717l-.358 1.792h-2.714l-.281-2.06c-.069-.419-.026-.782.128-1.089.153-.316.362-.597.627-.845.273-.256.576-.495.909-.716.332-.23.644-.474.934-.73a4.12 4.12 0 0 0 .73-.87c.204-.325.307-.709.307-1.152 0-.512-.17-.918-.512-1.216-.333-.308-.794-.461-1.383-.461-.452 0-.832.047-1.139.14-.298.094-.559.201-.78.32-.214.112-.402.214-.564.308a.963.963 0 0 1-.486.14.881.881 0 0 1-.82-.473L11.2 8.307zm2.355 14.938c0-.307.056-.593.167-.858.119-.264.277-.495.473-.691.205-.196.444-.35.717-.46.273-.12.572-.18.896-.18.316 0 .61.06.883.18.273.11.512.264.717.46.205.196.363.427.474.691.119.265.179.55.179.858 0 .307-.06.597-.18.87a2.038 2.038 0 0 1-.473.691c-.205.197-.444.35-.717.461a2.323 2.323 0 0 1-.883.167c-.324 0-.623-.056-.896-.167a2.245 2.245 0 0 1-.717-.46 2.31 2.31 0 0 1-.473-.692 2.289 2.289 0 0 1-.167-.87z\\" fill=\\"#A989C5\\"/>",
}
}
fill="currentcolor"
height={20}
role="img"
viewBox="0 0 32 32"
width={20}
/>
<div
className="ml1"
>
<div
className="text-bold"
>
Someone is confused
</div>
<div
className="text-medium text-small"
>
a year ago
</div>
<div>
Something something something something something something something something something something something something?
</div>
</div>
</div>
</div>
</div>
`;
exports[`Timeline should render "Optional footer" correctly 1`] = `
<div
className="Timeline__TimelineContainer-sc-1c86koa-0 cNPqnV"
>
<div
className="Timeline__Border-sc-1c86koa-2 kmWXSN"
/>
<div
className="flex align-start justify-start mb2 Timeline__TimelineItem-sc-1c86koa-1 foqzPx"
>
<svg
aria-label="verified icon"
className="Icon Icon-verified text-light Icon-sc-1x67v3y-1 hFNRPZ"
dangerouslySetInnerHTML={
Object {
"__html": "<path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M32 16.64a6.397 6.397 0 0 0-3.15-5.514 6.4 6.4 0 0 0-7.42-8.115A6.396 6.396 0 0 0 16 0a6.396 6.396 0 0 0-5.43 3.01 6.4 6.4 0 0 0-7.42 8.115A6.397 6.397 0 0 0 0 16.64c0 2.25 1.162 4.23 2.919 5.371a6.4 6.4 0 0 0 7.652 6.979A6.396 6.396 0 0 0 16 32a6.396 6.396 0 0 0 5.429-3.01 6.4 6.4 0 0 0 7.652-6.979A6.395 6.395 0 0 0 32 16.64z\\" fill=\\"#D3E7F8\\"/><path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M8.32 16.852l2.392-2.485 3.649 3.769 7.312-7.576 2.4 2.584-9.71 10.02-6.043-6.312z\\" fill=\\"#509EE3\\"/>",
}
}
fill="currentcolor"
height={20}
role="img"
viewBox="0 0 32 32"
width={20}
/>
<div
className="ml1"
>
<div
className="text-bold"
>
John Someone verified this
</div>
<div
className="text-medium text-small"
>
a day ago
</div>
<div>
idk lol
</div>
<div>
<a
className="text-underline"
href="/_internal/components/timeline"
>
5 comments
</a>
</div>
</div>
</div>
<div
className="flex align-start justify-start mb2 Timeline__TimelineItem-sc-1c86koa-1 foqzPx"
>
<svg
aria-label="pencil icon"
className="Icon Icon-pencil text-light Icon-sc-1x67v3y-1 hFNRPZ"
fill="currentcolor"
height={20}
role="img"
viewBox="0 0 32 32"
width={20}
>
<path
d="M21.187 4.359L24.71.835c1.363-1.362 3.912-1.022 5.694.76 1.783 1.783 2.123 4.332.761 5.695l-3.523 3.523-6.455-6.454zM19.425 6.12L1.455 24.091C.091 25.453-.47 30.625.452 31.547c.922.922 6.094.361 7.456-1.001l17.97-17.971-6.454-6.455z"
/>
</svg>
<div
className="ml1"
>
<div
className="text-bold"
>
Foo edited this
</div>
<div
className="text-medium text-small"
>
7 days ago
</div>
<div>
Did a thing.
</div>
<div>
</div>
</div>
</div>
<div
className="flex align-start justify-start mb2 Timeline__TimelineItem-sc-1c86koa-1 foqzPx"
>
<svg
aria-label="warning_colorized icon"
className="Icon Icon-warning_colorized text-light Icon-sc-1x67v3y-1 hFNRPZ"
dangerouslySetInnerHTML={
Object {
"__html": "<path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M11.764 4.36c1.957-3.146 6.535-3.146 8.492 0l11.002 17.687c2.072 3.33-.323 7.64-4.246 7.64H5.008c-3.922 0-6.317-4.31-4.246-7.64L11.765 4.359zm6.414 19.002v.019c0 .309-.059.601-.175.874-.117.272-.28.509-.488.709a2.269 2.269 0 0 1-.723.465 2.336 2.336 0 0 1-.887.168c-.322 0-.623-.056-.898-.168a2.179 2.179 0 0 1-1.2-1.174 2.199 2.199 0 0 1-.175-.874c0-.31.059-.601.176-.87.116-.268.276-.501.48-.7a2.279 2.279 0 0 1 1.617-.646c.316 0 .614.058.89.174.273.116.513.272.72.47a2.153 2.153 0 0 1 .663 1.535v.018zm-.32-15.083v5.735c0 .711-.042 1.416-.127 2.115a31.535 31.535 0 0 1-.334 2.124l-.041.214h-2.834l-.04-.214a31.537 31.537 0 0 1-.335-2.124c-.085-.699-.127-1.404-.127-2.115V8.28h3.838z\\" fill=\\"#F2A86F\\"/>",
}
}
fill="currentcolor"
height={20}
role="img"
viewBox="0 0 32 32"
width={20}
/>
<div
className="ml1"
>
<div
className="text-bold"
>
Someone McSomeone thinks something looks wrong
</div>
<div
className="text-medium text-small"
>
2 months ago
</div>
<div>
Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct.
Uh oh that's not correct.
Uh oh that's not correct.
Uh oh that's not correct.
Uh oh that's not correct.
Uh oh that's not correct.
Uh oh that's not correct.
Uh oh that's not correct.
Uh oh that's not correct.
Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not correct. Uh oh that's not
</div>
<div>
</div>
</div>
</div>
<div
className="flex align-start justify-start mb2 Timeline__TimelineItem-sc-1c86koa-1 foqzPx"
>
<svg
aria-label="clarification icon"
className="Icon Icon-clarification text-light Icon-sc-1x67v3y-1 hFNRPZ"
dangerouslySetInnerHTML={
Object {
"__html": "<rect width=\\"32\\" height=\\"32\\" rx=\\"16\\" fill=\\"#E1D9E8\\"/><path d=\\"M11.2 8.307a9.244 9.244 0 0 1 1.024-.742c.375-.23.777-.431 1.203-.602.427-.179.883-.316 1.37-.41a7.894 7.894 0 0 1 1.6-.153c.802 0 1.523.107 2.163.32.649.213 1.199.52 1.651.922.452.392.798.87 1.037 1.433.247.555.371 1.174.371 1.856 0 .649-.09 1.212-.269 1.69-.179.47-.405.879-.678 1.229-.273.35-.576.652-.909.908a40.2 40.2 0 0 1-.934.717c-.29.214-.546.427-.768.64a1.46 1.46 0 0 0-.41.717l-.358 1.792h-2.714l-.281-2.06c-.069-.419-.026-.782.128-1.089.153-.316.362-.597.627-.845.273-.256.576-.495.909-.716.332-.23.644-.474.934-.73a4.12 4.12 0 0 0 .73-.87c.204-.325.307-.709.307-1.152 0-.512-.17-.918-.512-1.216-.333-.308-.794-.461-1.383-.461-.452 0-.832.047-1.139.14-.298.094-.559.201-.78.32-.214.112-.402.214-.564.308a.963.963 0 0 1-.486.14.881.881 0 0 1-.82-.473L11.2 8.307zm2.355 14.938c0-.307.056-.593.167-.858.119-.264.277-.495.473-.691.205-.196.444-.35.717-.46.273-.12.572-.18.896-.18.316 0 .61.06.883.18.273.11.512.264.717.46.205.196.363.427.474.691.119.265.179.55.179.858 0 .307-.06.597-.18.87a2.038 2.038 0 0 1-.473.691c-.205.197-.444.35-.717.461a2.323 2.323 0 0 1-.883.167c-.324 0-.623-.056-.896-.167a2.245 2.245 0 0 1-.717-.46 2.31 2.31 0 0 1-.473-.692 2.289 2.289 0 0 1-.167-.87z\\" fill=\\"#A989C5\\"/>",
}
}
fill="currentcolor"
height={20}
role="img"
viewBox="0 0 32 32"
width={20}
/>
<div
className="ml1"
>
<div
className="text-bold"
>
Someone is confused
</div>
<div
className="text-medium text-small"
>
a year ago
</div>
<div>
Something something something something something something something something something something something something?
</div>
<div>
<a
className="text-underline"
href="/_internal/components/timeline"
>
123 comments
</a>
</div>
</div>
</div>
</div>
`;
exports[`Toggle should render "off" correctly 1`] = `
<a
className="no-decoration"
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment