diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx index 6570167..4d43af8 100644 --- a/src/Button/Button.stories.tsx +++ b/src/Button/Button.stories.tsx @@ -162,3 +162,11 @@ WithCustomStyles.args = { `, }, }; + +export const Test = () => ( + +
hi
+ + I am a tall box! +
+); diff --git a/src/Input/Input.stories.tsx b/src/Input/Input.stories.tsx index 0bc8591..4a8e988 100644 --- a/src/Input/Input.stories.tsx +++ b/src/Input/Input.stories.tsx @@ -13,7 +13,7 @@ export default { const ControlledInput = ({ value: valueInitial, ...props }: Omit) => { const [value, setValue] = useState(valueInitial); - return ; + return ; }; const baseStory = (args) => ; @@ -63,13 +63,13 @@ Error.args = { export const MultipleInputs = () => ( - + - + - + diff --git a/src/Input/__snapshots__/Input.spec.tsx.snap b/src/Input/__snapshots__/Input.spec.tsx.snap index c7e9d1e..b70131a 100644 --- a/src/Input/__snapshots__/Input.spec.tsx.snap +++ b/src/Input/__snapshots__/Input.spec.tsx.snap @@ -3,6 +3,7 @@ exports[`Render without value 1`] = ` .emotion-0 { box-sizing: border-box; + margin-bottom: clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem); } .emotion-1 { @@ -67,6 +68,7 @@ exports[`Render without value 1`] = ` exports[`Show error when an error message is given 1`] = ` .emotion-0 { box-sizing: border-box; + margin-bottom: clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem); } .emotion-1 { @@ -168,6 +170,7 @@ exports[`Show error when an error message is given 1`] = ` exports[`Show infotext when available 1`] = ` .emotion-0 { box-sizing: border-box; + margin-bottom: clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem); } .emotion-1 { @@ -263,6 +266,7 @@ exports[`Show infotext when available 1`] = ` exports[`Show label when available 1`] = ` .emotion-0 { box-sizing: border-box; + margin-bottom: clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem); } .emotion-1 { diff --git a/src/NativeSelect/__snapshots__/NativeSelect.spec.tsx.snap b/src/NativeSelect/__snapshots__/NativeSelect.spec.tsx.snap index af32374..47e4e48 100644 --- a/src/NativeSelect/__snapshots__/NativeSelect.spec.tsx.snap +++ b/src/NativeSelect/__snapshots__/NativeSelect.spec.tsx.snap @@ -3,6 +3,7 @@ exports[`Render without value 1`] = ` .emotion-0 { box-sizing: border-box; + margin-bottom: clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem); } .emotion-1 { @@ -111,6 +112,7 @@ exports[`Render without value 1`] = ` exports[`Show error when an error message is given 1`] = ` .emotion-0 { box-sizing: border-box; + margin-bottom: clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem); } .emotion-1 { @@ -256,6 +258,7 @@ exports[`Show error when an error message is given 1`] = ` exports[`Show infotext when available 1`] = ` .emotion-0 { box-sizing: border-box; + margin-bottom: clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem); } .emotion-1 { @@ -395,6 +398,7 @@ exports[`Show infotext when available 1`] = ` exports[`Show label when available 1`] = ` .emotion-0 { box-sizing: border-box; + margin-bottom: clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem); } .emotion-1 { diff --git a/src/SidebarNav/SidebarNavItem.tsx b/src/SidebarNav/SidebarNavItem.tsx index 2d10335..296dabf 100644 --- a/src/SidebarNav/SidebarNavItem.tsx +++ b/src/SidebarNav/SidebarNavItem.tsx @@ -14,6 +14,7 @@ export interface SidebarNavItemProps extends ButtonBaseProps { const SidebarNavItemWrapper = styled.li` ${buttonBaseStyles} display: flex; + cursor: pointer; margin: ${getComponentStyle('sidebarNav.item.marginY')} 0; ${getCustomStyles('sidebar.item.styles', 'root')} diff --git a/src/SidebarNav/__snapshots__/SidebarNav.spec.tsx.snap b/src/SidebarNav/__snapshots__/SidebarNav.spec.tsx.snap index 01168dc..bb670b5 100644 --- a/src/SidebarNav/__snapshots__/SidebarNav.spec.tsx.snap +++ b/src/SidebarNav/__snapshots__/SidebarNav.spec.tsx.snap @@ -33,6 +33,7 @@ exports[`Render multiple nav items 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + cursor: pointer; margin: clamp(0.5rem, 0.4285714285714286rem + 0.35714285714285715vw, 0.75rem) 0; } @@ -99,6 +100,7 @@ exports[`Render multiple nav items 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + cursor: pointer; margin: clamp(0.5rem, 0.4285714285714286rem + 0.35714285714285715vw, 0.75rem) 0; background-color: var(--pbl-theme-colors-brand-lightest); } @@ -196,6 +198,7 @@ exports[`Render one nav item 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + cursor: pointer; margin: clamp(0.5rem, 0.4285714285714286rem + 0.35714285714285715vw, 0.75rem) 0; background-color: var(--pbl-theme-colors-brand-lightest); } diff --git a/src/Table/__snapshots__/Table.spec.tsx.snap b/src/Table/__snapshots__/Table.spec.tsx.snap index 396d4bb..90c391a 100644 --- a/src/Table/__snapshots__/Table.spec.tsx.snap +++ b/src/Table/__snapshots__/Table.spec.tsx.snap @@ -371,327 +371,6 @@ tr:last-of-type>*>.emotion-16:after { `; -exports[`Simple Table story snapshot 1`] = ` -.emotion-0 { - box-sizing: border-box; - gap: clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem) clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem); - width: 80vw; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.emotion-1 { - width: 100%; - height: 1px; - border-collapse: collapse; - border: 0; -} - -.emotion-2 { - background-color: var(--pbl-theme-colors-gray-50); -} - -.emotion-4 { - padding: 0; - text-align: left; -} - -.emotion-4:first-of-type { - border-top-left-radius: 0.5rem; - border-bottom-left-radius: 0.5rem; -} - -.emotion-4:last-of-type { - border-top-right-radius: 0.5rem; - border-bottom-right-radius: 0.5rem; -} - -.emotion-5 { - padding: clamp(0.75rem, 0.6428571428571428rem + 0.5357142857142857vw, 1.125rem); - padding-bottom: calc(clamp(0.75rem, 0.6428571428571428rem + 0.5357142857142857vw, 1.125rem) + ); - position: relative; - height: 100%; - box-sizing: border-box; -} - -*>.emotion-5:after { - content: ''; - display: block; - position: absolute; - bottom: 0; - left: 0; - height: undefined; - width: 100%; - background: var(--pbl-theme-colors-gray-100); -} - -*:last-of-type>.emotion-5:after { - width: calc(100% - undefined); -} - -.emotion-5:first-of-type>.emotion-5:after { - left: undefined; - width: calc(100% - undefined); -} - -tr:last-of-type>*>.emotion-5:after { - content: none; -} - -.emotion-6 { - box-sizing: border-box; - font-family: var(--pbl-theme-typography-base-fontFamily); - font-size: var(--pbl-theme-typography-base-fontSize); - line-height: var(--pbl-theme-typography-base-lineHeight); - font-weight: var(--pbl-theme-typography-base-fontWeight); - margin-bottom: var(--pbl-theme-typography-base-marginBottom); - font-style: normal; - margin: 0; - font-family: var(--pbl-theme-typography-body-fontFamily); - font-size: var(--pbl-theme-typography-body-fontSize); - line-height: var(--pbl-theme-typography-body-lineHeight); - font-weight: var(--pbl-theme-typography-body-fontWeight); - margin-bottom: var(--pbl-theme-typography-body-marginBottom); - margin-bottom: 0; -} - -.emotion-15 { - padding: 0; -} - -.emotion-16 { - padding: clamp(0.75rem, 0.6428571428571428rem + 0.5357142857142857vw, 1.125rem); - padding-bottom: calc(clamp(0.75rem, 0.6428571428571428rem + 0.5357142857142857vw, 1.125rem) + 1px); - position: relative; - height: 100%; - box-sizing: border-box; -} - -*>.emotion-16:after { - content: ''; - display: block; - position: absolute; - bottom: 0; - left: 0; - height: 1px; - width: 100%; - background: var(--pbl-theme-colors-gray-100); -} - -*:last-of-type>.emotion-16:after { - width: calc(100% - clamp(0.125rem, 0.10714285714285715rem + 0.08928571428571429vw, 0.1875rem)); -} - -.emotion-16:first-of-type>.emotion-16:after { - left: clamp(0.125rem, 0.10714285714285715rem + 0.08928571428571429vw, 0.1875rem); - width: calc(100% - clamp(0.125rem, 0.10714285714285715rem + 0.08928571428571429vw, 0.1875rem)); -} - -tr:last-of-type>*>.emotion-16:after { - content: none; -} - -
- - - - - - - - - - - - - - - - - - - - - - - - - -
-
-

- Game -

-
-
-
-

- Year -

-
-
-
-

- Platform -

-
-
-
-

- Final Fantasy VI -

-
-
-
-

- 1994 -

-
-
-
-

- SNES -

-
-
-
-

- Metal Gear Solid -

-
-
-
-

- 1998 -

-
-
-
-

- PS1 -

-
-
-
-

- The Legend of Zelda: Ocarina of Time -

-
-
-
-

- 1998 -

-
-
-
-

- N64 -

-
-
-
-`; - exports[`Simple table story snapshot 1`] = ` .emotion-0 { box-sizing: border-box; diff --git a/src/TextArea/__snapshots__/TextArea.spec.tsx.snap b/src/TextArea/__snapshots__/TextArea.spec.tsx.snap index a211e54..22f242c 100644 --- a/src/TextArea/__snapshots__/TextArea.spec.tsx.snap +++ b/src/TextArea/__snapshots__/TextArea.spec.tsx.snap @@ -3,6 +3,7 @@ exports[`Render without value 1`] = ` .emotion-0 { box-sizing: border-box; + margin-bottom: clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem); } .emotion-1 { @@ -64,6 +65,7 @@ exports[`Render without value 1`] = ` exports[`Show error when an error message is given 1`] = ` .emotion-0 { box-sizing: border-box; + margin-bottom: clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem); } .emotion-1 { @@ -164,6 +166,7 @@ exports[`Show error when an error message is given 1`] = ` exports[`Show infotext when available 1`] = ` .emotion-0 { box-sizing: border-box; + margin-bottom: clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem); } .emotion-1 { @@ -258,6 +261,7 @@ exports[`Show infotext when available 1`] = ` exports[`Show label when available 1`] = ` .emotion-0 { box-sizing: border-box; + margin-bottom: clamp(1rem, 0.8571428571428572rem + 0.7142857142857143vw, 1.5rem); } .emotion-1 { diff --git a/src/shared/BaseInput.tsx b/src/shared/BaseInput.tsx index a32c46f..c27c88a 100644 --- a/src/shared/BaseInput.tsx +++ b/src/shared/BaseInput.tsx @@ -135,7 +135,7 @@ export function BaseInput

, E extends HTMLElement>( const getCustomStyles = useCustomStyles(`${name}.styles`, customStyles); return ( - + {label && (