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

Jump to bottom

GI folder: Updating breakpoint prefixes w/ new names #32243

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+16 −16
Open

GI folder: Updating breakpoint prefixes w/ new names #32243

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9141798
Replacing small-screen breakpoint prefix with mobile-lg
GovCIOLiz Oct 2, 2024
50aa50d
Replacing breakpoint prefixes with updates
GovCIOLiz Oct 2, 2024
14d2aaf
Merge branch 'main' into vebt-ds
GovCIOLiz Oct 3, 2024
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
4 changes: 2 additions & 2 deletions src/applications/gi/components/GIBillHeaderInfo.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ export const renderPTag = (automatedTest = false) => {

export default function GIBillHeaderInfo() {
return (
<div className="row vads-u-padding-x--2p5 small-screen:vads-u-padding-x--0 vads-u-padding-bottom--2 small-screen:vads-u-padding-bottom--4">
<div className="row vads-u-padding-x--2p5 mobile-lg:vads-u-padding-x--0 vads-u-padding-bottom--2 mobile-lg:vads-u-padding-bottom--4">
<h1
className="vads-u-text-align--center mobile-lg:vads-u-text-align--left"
className="vads-u-text-align--center mobile:vads-u-text-align--left"
data-testid="comparison-tool-title"
>
GI Bill® Comparison Tool
Expand Down
2 changes: 1 addition & 1 deletion src/applications/gi/components/ServiceError.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';

export const ServiceError = () => (
<div className="row vads-u-padding-x--2p5 small-screen:vads-u-padding-x--0">
<div className="row vads-u-padding-x--2p5 mobile-lg:vads-u-padding-x--0">
<h3 data-testid="service-error-message"> We’ve run into a problem. </h3>

<div className="vads-u-padding-bottom--5">
Expand Down
2 changes: 1 addition & 1 deletion src/applications/gi/components/profile/CalculateYourBenefitsForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1215,7 +1215,7 @@ function CalculateYourBenefitsForm({
'estimate-your-benefits-form',
'medium-5',
'columns',
'small-screen:vads-u-padding-right--0',
'mobile-lg:vads-u-padding-right--0',
)}
>
<div>
Expand Down
2 changes: 1 addition & 1 deletion src/applications/gi/components/profile/schoolRatings/SchoolCategoryRating.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React, { useState } from 'react';
import RatingsAccordion from './RatingsAccordion';

const SchoolCategoryRating = ({ titleObj, questionsObj }) => {

Check warning on line 4 in src/applications/gi/components/profile/schoolRatings/SchoolCategoryRating.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/gi/components/profile/schoolRatings/SchoolCategoryRating.jsx:4:33:'titleObj' is missing in props validation

Check warning on line 4 in src/applications/gi/components/profile/schoolRatings/SchoolCategoryRating.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/gi/components/profile/schoolRatings/SchoolCategoryRating.jsx:4:43:'questionsObj' is missing in props validation

Check warning on line 4 in src/applications/gi/components/profile/schoolRatings/SchoolCategoryRating.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/gi/components/profile/schoolRatings/SchoolCategoryRating.jsx:4:33:'titleObj' is missing in props validation

Check warning on line 4 in src/applications/gi/components/profile/schoolRatings/SchoolCategoryRating.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/gi/components/profile/schoolRatings/SchoolCategoryRating.jsx:4:43:'questionsObj' is missing in props validation
const { heading } = titleObj;

Check warning on line 5 in src/applications/gi/components/profile/schoolRatings/SchoolCategoryRating.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/gi/components/profile/schoolRatings/SchoolCategoryRating.jsx:5:11:'titleObj.heading' is missing in props validation

Check warning on line 5 in src/applications/gi/components/profile/schoolRatings/SchoolCategoryRating.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/gi/components/profile/schoolRatings/SchoolCategoryRating.jsx:5:11:'titleObj.heading' is missing in props validation
const categoryRating = Object.values(titleObj)[1];

const [openNames, setOpenNames] = useState([]);
Expand All @@ -18,7 +18,7 @@
};

return (
<div className="medium-screen:vads-l-col--6 small-screen:vads-l-col--12 xsmall-screen:vads-l-col--12">
<div className="medium-screen:vads-l-col--6 mobile-lg:vads-l-col--12 mobile:vads-l-col--12">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @GovCIOLiz - It wasn't clear in my original announcement about breakpoint names and utilities, for that I apologize. The grid classes here, vads-l-col--12 and vads-l-col--6, are not actually utility classes and have not been converted to the new breakpoint names yet. Could you please revert these to small-screen and xsmall-screen? They should still work as intended because they're still getting imported from formation through core.scss.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll drop a message in vfs-frontend to communicate this.

<div className="vads-u-padding-left--0">
<RatingsAccordion
title={heading}
Expand Down
4 changes: 2 additions & 2 deletions src/applications/gi/containers/CalculateYourBenefits.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,13 @@
import LearnMoreLabel from '../components/LearnMoreLabel';

export function CalculateYourBenefits({
calculated,

Check warning on line 19 in src/applications/gi/containers/CalculateYourBenefits.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/gi/containers/CalculateYourBenefits.jsx:19:3:'calculated' is missing in props validation

Check warning on line 19 in src/applications/gi/containers/CalculateYourBenefits.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/gi/containers/CalculateYourBenefits.jsx:19:3:'calculated' is missing in props validation
calculator,

Check warning on line 20 in src/applications/gi/containers/CalculateYourBenefits.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/gi/containers/CalculateYourBenefits.jsx:20:3:'calculator' is missing in props validation

Check warning on line 20 in src/applications/gi/containers/CalculateYourBenefits.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/gi/containers/CalculateYourBenefits.jsx:20:3:'calculator' is missing in props validation
dispatchBeneficiaryZIPCodeChanged,

Check warning on line 21 in src/applications/gi/containers/CalculateYourBenefits.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/gi/containers/CalculateYourBenefits.jsx:21:3:'dispatchBeneficiaryZIPCodeChanged' is missing in props validation

Check warning on line 21 in src/applications/gi/containers/CalculateYourBenefits.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/gi/containers/CalculateYourBenefits.jsx:21:3:'dispatchBeneficiaryZIPCodeChanged' is missing in props validation
dispatchCalculatorInputChange,

Check warning on line 22 in src/applications/gi/containers/CalculateYourBenefits.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/gi/containers/CalculateYourBenefits.jsx:22:3:'dispatchCalculatorInputChange' is missing in props validation

Check warning on line 22 in src/applications/gi/containers/CalculateYourBenefits.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/gi/containers/CalculateYourBenefits.jsx:22:3:'dispatchCalculatorInputChange' is missing in props validation
dispatchEligibilityChange,

Check warning on line 23 in src/applications/gi/containers/CalculateYourBenefits.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/gi/containers/CalculateYourBenefits.jsx:23:3:'dispatchEligibilityChange' is missing in props validation

Check warning on line 23 in src/applications/gi/containers/CalculateYourBenefits.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/gi/containers/CalculateYourBenefits.jsx:23:3:'dispatchEligibilityChange' is missing in props validation
dispatchShowModal,

Check warning on line 24 in src/applications/gi/containers/CalculateYourBenefits.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/gi/containers/CalculateYourBenefits.jsx:24:3:'dispatchShowModal' is missing in props validation

Check warning on line 24 in src/applications/gi/containers/CalculateYourBenefits.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/gi/containers/CalculateYourBenefits.jsx:24:3:'dispatchShowModal' is missing in props validation
dispatchUpdateEstimatedBenefits,

Check warning on line 25 in src/applications/gi/containers/CalculateYourBenefits.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/gi/containers/CalculateYourBenefits.jsx:25:3:'dispatchUpdateEstimatedBenefits' is missing in props validation

Check warning on line 25 in src/applications/gi/containers/CalculateYourBenefits.jsx

View workflow job for this annotation

GitHub Actions / Linting (Files Changed) 

src/applications/gi/containers/CalculateYourBenefits.jsx:25:3:'dispatchUpdateEstimatedBenefits' is missing in props validation
eligibility,
estimatedBenefits,
gibctEybBottomSheet,
Expand Down Expand Up @@ -100,8 +100,8 @@
const spacerClassNames = classNames(
'medium-1',
'columns',
'small-screen:vads-u-margin-right--neg1',
'small-screen:vads-u-margin--0',
'mobile-lg:vads-u-margin-right--neg1',
'mobile-lg:vads-u-margin--0',
'vads-u-margin-top--1',
);

Expand Down
4 changes: 2 additions & 2 deletions src/applications/gi/containers/GiBillApp.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ export function GiBillApp({
<div>
<div>
{preview.display && <PreviewBanner version={preview.version} />}
<div className="large-screen:vads-u-padding-left--0 vads-u-padding-left--2">
<div className="desktop-lg:vads-u-padding-left--0 vads-u-padding-left--2">
<GiBillBreadcrumbs />
</div>
{constants.inProgress && (
Expand All @@ -100,7 +100,7 @@ export function GiBillApp({
)}
{!showDisclaimer && <div style={{ height: '12px' }}>&nbsp;</div>}
{showDisclaimer && (
<div className="row vads-u-padding--1p5 small-screen:vads-u-padding--0">
<div className="row vads-u-padding--1p5 mobile-lg:vads-u-padding--0">
<>
<AboutThisTool />
<Disclaimer />
Expand Down
2 changes: 1 addition & 1 deletion src/applications/gi/containers/SearchPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ export function SearchPage({
<GIBillHeaderInfo />
<span className="search-page">
<div className={searchPageClasses}>
<div className="column medium-screen:vads-u-padding-bottom--2 small-screen:vads-u-padding-bottom--0 vads-u-padding-x--0">
<div className="column medium-screen:vads-u-padding-bottom--2 mobile-lg:vads-u-padding-bottom--0 vads-u-padding-x--0">
{!smallScreen && (
<SearchTabs
onChange={tabChange}
Expand Down
8 changes: 4 additions & 4 deletions src/applications/gi/containers/VetTecEstimateYourBenefits.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export class VetTecEstimateYourBenefits extends React.Component {
}

housingAllowanceClassName =
'small-4 columns vads-u-text-align--right small-screen:vads-u-padding-left--7';
'small-4 columns vads-u-text-align--right mobile-lg:vads-u-padding-left--7';

renderLearnMoreLabel = ({ text, modal, ariaLabel }) => (
<LearnMoreLabel
Expand Down Expand Up @@ -94,7 +94,7 @@ export class VetTecEstimateYourBenefits extends React.Component {
</div>
</div>
<div className="vads-u-margin-left--2p5">
<div className="row vads-u-margin-top--0p5 small-screen:vads-u-padding-right--7">
<div className="row vads-u-margin-top--0p5 mobile-lg:vads-u-padding-right--7">
<div className="small-9 small-screen:small-9 columns">
<div>
Upon enrollment in program{' '}
Expand All @@ -108,7 +108,7 @@ export class VetTecEstimateYourBenefits extends React.Component {
</div>
</div>
</div>
<div className="row vads-u-margin-top--0p5 small-screen:vads-u-padding-right--7">
<div className="row vads-u-margin-top--0p5 mobile-lg:vads-u-padding-right--7">
<div className="small-9 small-screen:small-9 columns">
<div>
Upon completion of program{' '}
Expand All @@ -122,7 +122,7 @@ export class VetTecEstimateYourBenefits extends React.Component {
</div>
</div>
</div>
<div className="row vads-u-margin-top--0p5 small-screen:vads-u-padding-right--7">
<div className="row vads-u-margin-top--0p5 mobile-lg:vads-u-padding-right--7">
<div className="small-9 small-screen:small-9 columns">
<div>
Upon employment{' '}
Expand Down
2 changes: 1 addition & 1 deletion src/applications/gi/containers/search/NameSearchResults.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ export function NameSearchResults({
<div className="row vads-u-padding--0 vads-u-margin--0">
{smallScreen && <MobileFilterControls />}
<p
className="vads-u-padding-x--1p5 small-screen:vads-u-padding-x--0"
className="vads-u-padding-x--1p5 mobile-lg:vads-u-padding-x--0"
id="name-search-results-count"
>
Showing {count} search results for "<strong>{name}</strong>"
Expand Down
2 changes: 1 addition & 1 deletion src/applications/gi/containers/search/ResultCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ export function ResultCard({

const containerClasses = classNames({
'vads-u-margin-bottom--2': !location,
'small-screen:vads-u-margin-left--2p5': !location,
'mobile-lg:vads-u-margin-left--2p5': !location,
'vads-u-margin--0': location,
'vads-u-padding--0': location,
});
Expand Down
Loading