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(date-picker): add pf-date-picker #2599

Draft
wants to merge 19 commits into
base: main
Choose a base branch
from
+2,418 −2
Draft

feat(date-picker): add pf-date-picker #2599

Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
ad5106e
feat: add pf-date-picker
Sep 25, 2023
2b0ff7d
chore: added date picker component
Sep 27, 2023
690a889
Merge branch 'main' into feature/pf-date-picker
ArathyKumar Nov 9, 2023
832d1f6
Merge branch 'main' into feature/pf-date-picker
Mar 27, 2024
549822b
fix: code updated to work with pf-3
Mar 28, 2024
36f9aca
Merge branch 'patternfly:main' into feature/pf-date-picker
ArathyKumar Mar 28, 2024
08820f3
fix: translation and popover fixes updated
Mar 28, 2024
19e0e11
chore: split large demo files to individual files
Mar 28, 2024
1ae65c5
fix: css fixes
Mar 28, 2024
52456d7
fix: button css fix on focus
Mar 28, 2024
0c94f75
chore: component image added
Mar 28, 2024
dde0275
fix: removed the date-picker child components from package.json
Apr 20, 2024
988447d
fix: added constants in the helper file
Apr 20, 2024
412b41d
fix: removed the constructor
Apr 20, 2024
543394f
fix: changed the format of DOM properties from camelCase to dash-case
Apr 22, 2024
80615e4
Merge remote-tracking branch 'origin/main' into feature/pf-date-picker
Jun 29, 2024
c04282e
chore: readme updated
Jun 29, 2024
9580ff1
fix: changed extend composedevent to event
Jun 29, 2024
e9e9833
fix: added ecmascript private variables
Jun 29, 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
Prev Previous commit
Next Next commit
fix: css fixes
Arathy Kumar committed Mar 28, 2024
commit 1ae65c5f42fcbf35bdcc18614367d666de3905dd
10 changes: 6 additions & 4 deletions elements/pf-date-picker/pf-calendar.css
View file
Original file line number Diff line number Diff line change
@@ -18,19 +18,21 @@
justify-content: center;
}

pf-button::part(button):focus, pf-button::part(button):focus-visible {
pf-button:focus, pf-button:focus-visible {
border: 2px solid var(--rh-color-accent-base-on-light, #0066cc);
outline: none;
}

pf-button.calendar-date-button::part(button) {
pf-button.calendar-date-button {
--pf-c-button--BorderRadius:50%;
width: 37px;
height: 37px;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
box-sizing: border-box;
}

pf-button.calendar-date-button.isToday {
@@ -52,15 +54,15 @@ pf-button.calendar-date-button.previous-next-date {
--pf-c-button--m-plain--Color: #6A6E73;
}

pf-button.calendar-date-button.selected-date::part(button) {
pf-button.calendar-date-button.selected-date {
--pf-c-button--m-plain--BackgroundColor: var(--rh-color-accent-base-on-light, #0066cc);
--pf-c-button--m-plain--Color: var(--rh-color-white, #ffffff);
--pf-c-button--m-plain--hover--Color: var(--rh-color-white, #ffffff);
--pf-c-button--m-plain--hover--BackgroundColor: var(--rh-color-interactive-blue-darkest, #004080);
--pf-c-button--m-plain--focus--BackgroundColor: var(--rh-color-interactive-blue-darkest, #004080);
}

pf-button.calendar-date-button.selected-date::part(button):focus {
pf-button.calendar-date-button.selected-date:focus {
box-shadow: 0 0 0.3125rem var(--rh-color-accent-base-on-light, #0066cc);
background: var(--rh-color-interactive-blue-darkest, #004080);
border: none;
17 changes: 9 additions & 8 deletions elements/pf-date-picker/pf-date-picker.css
View file
Original file line number Diff line number Diff line change
@@ -124,11 +124,6 @@
display: none;
}

:host .date-picker-toggle-container pf-button::part(button) {
padding: 9px 12px 3px;
height: 36px;
}

.date-picker-container pf-popover::part(content) {
min-width: 330px;
}
@@ -137,14 +132,20 @@
pointer-events: none;
}

pf-button::part(button):focus, pf-button::part(button):focus-visible {
pf-button:focus, pf-button:focus-visible {
outline: var(--rh-color-accent-base-on-light, #0066cc) auto 2px;
}

:host .date-picker-toggle-container pf-button.date-picker-calendar-icon::part(button):focus {
:host .date-picker-toggle-container pf-button.date-picker-calendar-icon {
height: 36px;
padding: 8px 12px;
box-sizing: border-box;
}

:host .date-picker-toggle-container pf-button.date-picker-calendar-icon:focus {
outline: none;
}

:host .date-picker-toggle-container pf-button.date-picker-calendar-icon::part(button):focus-visible {
:host .date-picker-toggle-container pf-button.date-picker-calendar-icon:focus-visible {
outline: var(--rh-color-accent-base-on-light, #0066cc) auto 2px;
}
32 changes: 12 additions & 20 deletions elements/pf-date-picker/pf-month-select.css
View file
Original file line number Diff line number Diff line change
@@ -8,35 +8,26 @@
width: 140px;
}

pf-button#date-picker-month-select::part(button) {
pf-button#date-picker-month-select {
width: 140px;
background: transparent;
font-family: var(--rh-font-family-body-text, RedHatText, "Red Hat Text", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif);
text-align: left;
}

pf-button#date-picker-month-select:before {
content: "";
position: absolute;
top: 1px;
right: 0;
width: 36px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
justify-content: space-between;
position: relative;
box-sizing: border-box;
height: 36px;
}

.date-month-select-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 16px;
left: 92px;
width: 36px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
}

div#date-picker-month-select-popup {
@@ -61,22 +52,23 @@ div#date-picker-month-select-popup pf-button {
--pf-c-button--m-plain--Color: var(--rh-color-canvas-black, #151515);
--pf-c-button--m-plain--hover--BackgroundColor: var(--rh-color-blue-50, #e7f1fa);

width: 100%;
width: 140px;
margin-bottom: .125rem;
}

div#date-picker-month-select-popup pf-button::part(button) {
div#date-picker-month-select-popup pf-button {
background: var(--rh-color-white, #ffffff);
text-align: left;
font-family: var(--rh-font-family-body-text, RedHatText, "Red Hat Text", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif);
width: 100%;
width: 140px;
border-radius: 0;
box-sizing: border-box;
}

div#date-picker-month-select-popup pf-button::part(button):hover {
div#date-picker-month-select-popup pf-button:hover {
background:#f0f0f0;
}

pf-button::part(button):focus, pf-button::part(button):focus-visible {
pf-button:focus, pf-button:focus-visible {
outline: var(--rh-color-accent-base-on-light, #0066cc) auto 2px;
}
2 changes: 1 addition & 1 deletion elements/pf-date-picker/pf-month-select.ts
View file
Original file line number Diff line number Diff line change
@@ -56,7 +56,7 @@ export class PfMonthSelect extends LitElement {
<div @keydown=${this.#onMonthSelectKeydown} class="month-select-container">
<div part="toggle">
<pf-button variant="control" label="Toggle options list" part="toggle-button" aria-expanded=${ifDefined(this.isMonthExpanded || undefined)} @click=${this.#showMonthSelect} class="month-select-input" id="date-picker-month-select" type="button">
${this.currentMonthName} <pf-icon class="date-month-select-icon" icon="caret-down" size="md"></pf-icon>
<span>${this.currentMonthName}</span> <pf-icon class="date-month-select-icon" icon="caret-down" size="md"></pf-icon>
</pf-button>
</div>
<div part="menu" ?hidden=${!this.isMonthExpanded} id="date-picker-month-select-popup">
6 changes: 4 additions & 2 deletions elements/pf-date-picker/pf-next-button.css
View file
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
display: block;
}

.date-previous-next-button::part(button) {
.date-previous-next-button {
--pf-c-button--m-plain--Color: #6a6e73;

width: 36px;
@@ -12,8 +12,10 @@
justify-content: center;
background: var(--rh-color-white, #ffffff);
border: none;
line-height: 0.5rem;
box-sizing: border-box;
}

pf-button::part(button):focus, pf-button::part(button):focus-visible {
pf-button:focus, pf-button:focus-visible {
outline: var(--rh-color-accent-base-on-light, #0066cc) auto 2px;
}
6 changes: 4 additions & 2 deletions elements/pf-date-picker/pf-previous-button.css
View file
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
display: block;
}

.date-previous-next-button::part(button) {
.date-previous-next-button {
--pf-c-button--m-plain--Color: #6a6e73;

width: 36px;
@@ -12,8 +12,10 @@
justify-content: center;
background: var(--rh-color-white, #ffffff);
border: none;
line-height: 0.5rem;
box-sizing: border-box;
}

pf-button::part(button):focus, pf-button::part(button):focus-visible {
pf-button:focus, pf-button:focus-visible {
outline: var(--rh-color-accent-base-on-light, #0066cc) auto 2px;
}
4 changes: 2 additions & 2 deletions elements/pf-dropdown/pf-dropdown.css
View file
Original file line number Diff line number Diff line change
@@ -80,14 +80,14 @@ pf-dropdown-menu,
display: block !important;
}

pf-button.disabled::part(button),
pf-button.disabled,
:host([disabled]) ::slotted([slot="trigger"]) {
color: var(---pf-c-dropdown__menu-item--disabled--Color, #6a6e73) !important;
background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
}

pf-button::part(button) {
pf-button {
display: flex;
align-items: center;
justify-content: space-between;