Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(PPDSC-2077): add grid-auto props and stylePreset overrides to GridLayout #447

Merged
merged 10 commits into from
Nov 2, 2022
Merged

feat(PPDSC-2077): add grid-auto props and stylePreset overrides to GridLayout #447

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
2f57ae5
fix(PPDSC-2077): remove getStylePreset
Xin00163 Nov 1, 2022
933a631
Merge branch 'main' into feat/PPDSC-2077-add-grid-auto-and-stylePrese…
Xin00163 Nov 1, 2022
a741d24
fix(PPDSC-2077): add tsconfig.eslint.json to integration tests
Xin00163 Nov 1, 2022
1e4612f
fix(PPDSC-2077): integrationt tests
Xin00163 Nov 1, 2022
1c05440
fix(PPDSC-2077): tsconfig build failure
Xin00163 Nov 1, 2022
e878b66
fix(PPDSC-2077): build
Xin00163 Nov 1, 2022
3d41cec
fix(PPDSC-2077): build
Xin00163 Nov 1, 2022
f6fa0c6
fix(PPDSC-2077): remove mapTemplate
Xin00163 Nov 2, 2022
47e802c
fix(PPDSC-2077): revert changes
Xin00163 Nov 2, 2022
6ad310c
fix(PPDSC-2077): resolve conflicts and remove stylePreset
Xin00163 Nov 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions .circleci/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1031,21 +1031,22 @@ jobs:
- run:
name: Install yalc and create-next-app
command: |
yarn global add yalc && yarn add create-next-app@latest
yarn global add yalc
evgenitsn marked this conversation as resolved.
Show resolved Hide resolved
- run:
name: Yalc publish and run create-nextjs-app
command: |
cd dist
yalc publish
cd ..
npx create-next-app@latest newskit-integration-test
yarn create next-app newskit-integration-test
evgenitsn marked this conversation as resolved.
Show resolved Hide resolved
- run:
name: Prepare the NextJs app
command: |
echo "Adding nedded files into the NextJs app"

cp ./scripts/templates-integration-test/index.txt ./newskit-integration-test/pages/index.js
cp ./scripts/templates-integration-test/cypress.json ./newskit-integration-test/
cp ./scripts/templates-integration-test/next.config.js ./newskit-integration-test/
mkdir -p ./newskit-integration-test/cypress/integration
cp ./scripts/templates-integration-test/theme-checker.spec.js ./newskit-integration-test/cypress/integration

Expand Down
5 changes: 5 additions & 0 deletions scripts/templates-integration-test/next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
module.exports = {
evgenitsn marked this conversation as resolved.
Show resolved Hide resolved
eslint: {
ignoreDuringBuilds: true,
},
};
126 changes: 126 additions & 0 deletions site/pages/components/grid-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,71 @@ const GridLayoutComponent = (layoutProps: LayoutProps) => (
},
],
},
{
name: 'autoFlow',
propName: 'autoFlow',
options: [
{
label: 'row',
value: 'row',
isDefault: true,
},
{
label: 'column',
value: 'column',
},
{
label: 'dense',
value: 'dense',
},
],
},
{
name: 'autoColumns',
propName: 'autoColumns',
options: [
{
label: 'none',
value: '',
isDefault: true,
},
{
label: 'auto',
value: 'auto',
},
{
label: '100px',
value: '100px',
},
{
label: 'minmax(100px, auto)',
value: 'minmax(100px, auto)',
},
],
},
{
name: 'autoRows',
propName: 'autoRows',
options: [
{
label: 'none',
value: '',
isDefault: true,
},
{
label: 'auto',
value: 'auto',
},
{
label: '10%',
value: '10%',
},
{
label: 'minmax(20px, auto)',
value: 'minmax(20px, auto)',
},
],
},
{
name: 'rowGap',
propName: 'rowGap',
Expand Down Expand Up @@ -458,6 +523,60 @@ const GridLayoutComponent = (layoutProps: LayoutProps) => (
),
required: null,
},
{
name: 'autoFlow',
type: 'MQ<string>',
description: (
<>
Controls how the auto-placement algorithm works, specifying
exactly how auto-placed items get flowed into the grid, using
the <InlineCode>grid-auto-flow</InlineCode>{' '}
<Link
href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow"
target="_blank"
>
css property.
</Link>
</>
),
required: null,
},
{
name: 'autoRows',
type: 'MQ<string>',
description: (
<>
Specifies the size of an implicitly-created grid row track or
pattern of tracks, using the{' '}
<InlineCode>grid-auto-rows</InlineCode>{' '}
<Link
href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows"
target="_blank"
>
css property.
</Link>
</>
),
required: null,
},
{
name: 'autoColumns',
type: 'MQ<string>',
description: (
<>
Specifies the size of an implicitly-created grid column track
or pattern of tracks, using the{' '}
<InlineCode>grid-auto-columns</InlineCode>{' '}
<Link
href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns"
target="_blank"
>
css property.
</Link>
</>
),
required: null,
},
{
name: 'justifyContent',
type: 'MQ<string>',
Expand Down Expand Up @@ -608,6 +727,13 @@ const GridLayoutComponent = (layoutProps: LayoutProps) => (
description:
'If provided, this overrides the maxHeight of the Grid.',
},
{
attribute: 'stylePreset',
type: 'MQ<string>',
default: '',
description:
'If provided, this overrides the stylePreset of the Grid.',
},
],
},
{
Expand Down
2 changes: 0 additions & 2 deletions src/audio-player-composable/components/volume-control/styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import {GridLayout} from '../../../grid-layout';
import {
getResponsiveSize,
getStylePreset,
styled,
getResponsiveSpace,
} from '../../../utils/style';
Expand Down Expand Up @@ -52,7 +51,6 @@ export const StyledVolumeSliderPopupContainer = styled.div<
export const StyledGridLayout = styled(GridLayout)<
Pick<AudioPlayerVolumeControlProps, 'overrides'>
>`
${getStylePreset(`audioPlayerVolumeControl`, '')};
${getResponsiveSpace(
'columnGap',
`audioPlayerVolumeControl.spaceBetween`,
Expand Down
149 changes: 149 additions & 0 deletions src/grid-layout/__tests__/__snapshots__/grid-layout.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -453,6 +453,155 @@ exports[`GridLayout renders GridLayout with overrides 1`] = `
</DocumentFragment>
`;

exports[`GridLayout renders GridLayout with stylePreset overrides 1`] = `
<DocumentFragment>
.emotion-0 {
display: grid;
background-color: pink;
color: red;
}

<div
class="emotion-0"
>
<div
class="emotion-1"
>
TEST
</div>
<div
class="emotion-1"
>
TEST
</div>
<div
class="emotion-1"
>
TEST
</div>
<div
class="emotion-1"
>
TEST
</div>
</div>
</DocumentFragment>
`;

exports[`GridLayout renders a grid with autoColumns 1`] = `
<DocumentFragment>
.emotion-0 {
display: grid;
row-gap: 20px;
-webkit-column-gap: 20px;
column-gap: 20px;
grid-template-areas: "a a";
grid-auto-columns: 100px;
}

<div
class="emotion-0"
>
<div
class="emotion-1"
>
TEST
</div>
<div
class="emotion-1"
>
TEST
</div>
<div
class="emotion-1"
>
TEST
</div>
<div
class="emotion-1"
>
TEST
</div>
</div>
</DocumentFragment>
`;

exports[`GridLayout renders a grid with autoFlow 1`] = `
<DocumentFragment>
.emotion-0 {
display: grid;
row-gap: 20px;
-webkit-column-gap: 20px;
column-gap: 20px;
grid-template-columns: repeat(3, 60px);
grid-auto-flow: column;
}

<div
class="emotion-0"
>
<div
class="emotion-1"
>
TEST
</div>
<div
class="emotion-1"
>
TEST
</div>
<div
class="emotion-1"
>
TEST
</div>
<div
class="emotion-1"
>
TEST
</div>
</div>
</DocumentFragment>
`;

exports[`GridLayout renders a grid with autoRows 1`] = `
<DocumentFragment>
.emotion-0 {
display: grid;
row-gap: 20px;
-webkit-column-gap: 20px;
column-gap: 20px;
grid-template-areas: "a a";
grid-auto-rows: 100px;
}

<div
class="emotion-0"
>
<div
class="emotion-1"
>
TEST
</div>
<div
class="emotion-1"
>
TEST
</div>
<div
class="emotion-1"
>
TEST
</div>
<div
class="emotion-1"
>
TEST
</div>
</div>
</DocumentFragment>
`;

exports[`GridLayout renders a grid with rowGap and columnGap 1`] = `
<DocumentFragment>
.emotion-0 {
Expand Down
Loading