diff --git a/.github/workflows/analyze-dependents.yml b/.github/workflows/analyze-dependents.yml index e1f5d88bc5..793802254f 100644 --- a/.github/workflows/analyze-dependents.yml +++ b/.github/workflows/analyze-dependents.yml @@ -263,6 +263,7 @@ jobs: id: cpr uses: peter-evans/create-pull-request@v7 with: + token: ${{ secrets.requirements_bot_github_token }} commit-message: "docs: update dependent-usage.json" title: "docs: update dependent-usage.json" body: "Contains automated changes to the dependent-usage.json file, which provides the data for Paragon Usage Insights." @@ -273,10 +274,10 @@ jobs: uses: hmarr/auto-approve-action@v4 with: pull-request-number: ${{ steps.cpr.outputs.pull-request-number }} - github-token: ${{ secrets.requirements_bot_github_token }} + github-token: ${{ secrets.GITHUB_TOKEN }} - name: Auto-merge pull request for dependent project usages uses: pascalgn/automerge-action@v0.16.4 env: - GITHUB_TOKEN: ${{ secrets.requirements_bot_github_token }} + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} MERGE_METHOD: squash MERGE_RETRY_SLEEP: 240000 diff --git a/package-lock.json b/package-lock.json index b4161d8188..0c5afc03c0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14815,7 +14815,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001687", + "version": "1.0.30001696", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001696.tgz", + "integrity": "sha512-pDCPkvzfa39ehJtJ+OwGT/2yvT2SbjfHhiIW2LWOAcMQ7BzwxT/XuyUp4OTOd0XFWA6BKw0JalnBHgSi5DGJBQ==", "funding": [ { "type": "opencollective", @@ -14829,8 +14831,7 @@ "type": "github", "url": "https://github.com/sponsors/ai" } - ], - "license": "CC-BY-4.0" + ] }, "node_modules/capital-case": { "version": "1.0.4", diff --git a/www/src/pages/foundations/elevation.tsx b/www/src/pages/foundations/elevation.tsx index a9170576a6..0340b96652 100644 --- a/www/src/pages/foundations/elevation.tsx +++ b/www/src/pages/foundations/elevation.tsx @@ -395,14 +395,14 @@ export default function ElevationPage({ pageContext }) {

Example variables usage

Variables are available with following pattern:

- {'$box-shadow-{direction}-{level}'} + {'var(--pgn-elevation-box-shadow-{direction}-{level})'}

For example:

- $box-shadow-right-2 + var(--pgn-elevation-box-shadow-right-2) - $box-shadow-up-3 + var(--pgn-elevation-box-shadow-up-3)
diff --git a/www/src/pages/foundations/responsive.tsx b/www/src/pages/foundations/responsive.tsx index 4131cf5724..8e9e9ecd57 100644 --- a/www/src/pages/foundations/responsive.tsx +++ b/www/src/pages/foundations/responsive.tsx @@ -18,11 +18,34 @@ const BREAKPOINT_DESCRIPTIONS = { extraExtraLarge: { name: 'Extra extra large', identifier: 'xxl' }, }; +const customBreakpoints = [ + { name: '--pgn-size-breakpoint-min-width-xs', property: 'min-width', value: '0px' }, + { name: '--pgn-size-breakpoint-max-width-xs', property: 'max-width', value: '576px' }, + { name: '--pgn-size-breakpoint-min-width-sm', property: 'min-width', value: '576px' }, + { name: '--pgn-size-breakpoint-max-width-sm', property: 'max-width', value: '768px' }, + { name: '--pgn-size-breakpoint-min-width-md', property: 'min-width', value: '768px' }, + { name: '--pgn-size-breakpoint-max-width-md', property: 'max-width', value: '992px' }, + { name: '--pgn-size-breakpoint-min-width-lg', property: 'min-width', value: '992px' }, + { name: '--pgn-size-breakpoint-max-width-lg', property: 'max-width', value: '1200px' }, + { name: '--pgn-size-breakpoint-min-width-xl', property: 'min-width', value: '1200px' }, + { name: '--pgn-size-breakpoint-max-width-xl', property: 'max-width', value: '1400px' }, + { name: '--pgn-size-breakpoint-min-width-xxl', property: 'min-width', value: '1400px' }, +]; + const getBreakpointDescription = (breakpoint) => BREAKPOINT_DESCRIPTIONS[breakpoint] || {}; function IdentifierCell({ row }) { return {row.values.identifier}; } + +function PropertyCell({ row }) { + return {row.values.property}; +} + +function ValueCell({ row }) { + return {row.values.value}; +} + function MinWidthCell({ row }) { if (row.values.identifier === 'xs') { return ( @@ -45,6 +68,7 @@ function MinWidthCell({ row }) { } return {row.values.minWidth ? `${row.values.minWidth}px` : '-'}; } + function MaxWidthCell({ row }) { return {row.values.maxWidth ? `${row.values.maxWidth}px` : '-'}; } @@ -83,7 +107,8 @@ function Responsive({ pageContext }) { > -

Basic usage

+

SCSS variables

+

Basic usage

To access or change the breakpoints in the scss use $grid-breakpoints variable.

@@ -99,6 +124,57 @@ function Responsive({ pageContext }) { {'@include media-breakpoint-up(map.get($grid-breakpoints, \'lg\')) { // styles here }'} + +

CSS Custom Media Breakpoints

+

+ Media breakpoints in CSS are defined using the following variables. +

+

Available Breakpoints

+ + + + +

Basic Usage

+

+ The structure of a breakpoint variable is: +

+ + {'--pgn-size-breakpoint-{width_type}-{class_infix}'} + +

+ Explanation of the variable components: +

+

+ +

+ Example for applying styles when the screen width is narrower than the md breakpoint: +

+ + {'@media (--pgn-size-breakpoint-max-width-md) { // styles here }'} + + +

+ For applying styles when the screen width is wider than the md breakpoint: +

+ + {'@media (--pgn-size-breakpoint-min-width-md) { // styles here }'} + ); @@ -116,6 +192,8 @@ const cellPropTypes = { identifier: PropTypes.string, minWidth: PropTypes.number, maxWidth: PropTypes.number, + property: PropTypes.string, + value: PropTypes.string, }), }), }; @@ -132,4 +210,10 @@ IdentifierCell.defaultProps = cellDefaultProps; MinWidthCell.defaultProps = cellDefaultProps; MaxWidthCell.defaultProps = cellDefaultProps; +PropertyCell.propTypes = cellPropTypes; +ValueCell.propTypes = cellPropTypes; + +PropertyCell.defaultProps = cellDefaultProps; +ValueCell.defaultProps = cellDefaultProps; + export default Responsive;