diff --git a/src/components.d.ts b/src/components.d.ts index 04a927412..12eae918c 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -47,14 +47,38 @@ export namespace Components { "value": string; } interface FwDatepicker { + /** + * Selected Date will be retured in the given date format + */ "dateFormat": string; - "dateValue": any; - "endDate": any; - "maxDate": any; - "minDate": any; + /** + * From date that is selected in the date range picker mode + */ + "fromDate": string; + /** + * Maximum date that are allowed to select in the calender + */ + "maxDate": string; + /** + * Minimum date that are allowed to select in the calender + */ + "minDate": string; + /** + * Shows single date or date range picker based on mode + */ "mode": string; + /** + * Placeholder to display in the input field + */ "placeholder": string; - "startDate": any; + /** + * To date that is selected in the date range picker mode + */ + "toDate": string; + /** + * Value selected in the single date picker mode + */ + "value": any; } interface FwIcon { /** @@ -591,15 +615,42 @@ declare namespace LocalJSX { "value"?: string; } interface FwDatepicker { + /** + * Selected Date will be retured in the given date format + */ "dateFormat"?: string; - "dateValue"?: any; - "endDate"?: any; - "maxDate"?: any; - "minDate"?: any; + /** + * From date that is selected in the date range picker mode + */ + "fromDate"?: string; + /** + * Maximum date that are allowed to select in the calender + */ + "maxDate"?: string; + /** + * Minimum date that are allowed to select in the calender + */ + "minDate"?: string; + /** + * Shows single date or date range picker based on mode + */ "mode"?: string; + /** + * Triggered when the update button clicked + */ "onFwChange"?: (event: CustomEvent) => void; + /** + * Placeholder to display in the input field + */ "placeholder"?: string; - "startDate"?: any; + /** + * To date that is selected in the date range picker mode + */ + "toDate"?: string; + /** + * Value selected in the single date picker mode + */ + "value"?: any; } interface FwIcon { /** diff --git a/src/components/datepicker/datepicker.scss b/src/components/datepicker/datepicker.scss index 0899f5a1d..9c9d18efa 100644 --- a/src/components/datepicker/datepicker.scss +++ b/src/components/datepicker/datepicker.scss @@ -1,20 +1,10 @@ -.MyDatePicker { - position: relative; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; -} - -.MyDatePicker * { - /* Chrome/Safari/Opera */ - -webkit-user-select: none; - - /* Firefox */ - -moz-user-select: none; +@import "../../styles/freshworks"; - /* Edge */ - -ms-user-select: none; - - /* Non-prefixed version, currently */ - user-select: none; +.date-picker { + position: relative; + * { + user-select: none; + } } .mdp-container, @@ -25,7 +15,7 @@ top: 40px; width: 300px; min-height: 336px; - background: #fff; + background: var(--color-milk); box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.2); border-radius: 5px; overflow: hidden; @@ -41,8 +31,8 @@ top: 344px; width: 317px; padding: 8px; - background: #f5f7f9; - border-top: 1px solid #ebeff3; + background: var(--color-smoke-25); + border-top: 1px solid var(--color-smoke-50); margin-top: 15.5px; box-shadow: 4px 9px 20px rgba(0, 0, 0, 0.2); border-radius: 0 0 5px 5px; @@ -78,7 +68,7 @@ .mdpc-body-right { float: right; - border-left: 1px solid #e4f2fd; + border-left: 1px solid var(--color-smoke-50); padding-left: 10px; } } @@ -101,7 +91,7 @@ .mdpchb-inner:hover { cursor: pointer; - background: #ebeff3; + background: var(--color-smoke-50); } .mdpchb-inner { @@ -128,8 +118,8 @@ float: left; width: 6px; height: 6px; - border-left: 2px solid #888; - border-bottom: 2px solid #888; + border-left: 2px solid var(--color-smoke-300); + border-bottom: 2px solid var(--color-smoke-300); position: absolute; } @@ -185,19 +175,25 @@ float: left; height: 30px; font-size: 16px; - color: #666; + color: var(--color-smoke-700); text-align: center; - margin-top: 16px; + margin-top: 6px; + width: 90px; } .mdpchc-month { float: left; height: 15px; font-size: 16px; - color: #666; + color: var(--color-smoke-700); text-align: center; - margin-top: 16px; + margin-top: 6px; margin-right: 10px; + width: 90px; + + fw-select .input-container-inner input { + width: 98%; + } } /** @@ -207,15 +203,12 @@ .c-day-container, .cc-body, .cc-head, -.cc-month, .cch-name, .cdc-day, .cdc-day span { position: relative; display: block; float: left; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; } @@ -224,14 +217,6 @@ height: 100%; } -.cc-month { - height: 30px; - width: 100%; - font-size: 16px; - line-height: 30px; - color: #666; -} - .cc-head { height: 30px; width: 100%; @@ -242,7 +227,7 @@ height: 30px; line-height: 30px; font-weight: 700; - color: #666; + color: var(--color-smoke-700); font-size: 13px; text-align: center; } @@ -263,13 +248,13 @@ height: 100%; font-size: 12px; font-weight: 300; - color: #444; + color: var(--color-smoke-700); text-align: center; } .cdc-day span:hover { cursor: pointer; - background: #ebeff3; + background: var(--color-smoke-50); } .cdc-day span { @@ -290,22 +275,22 @@ pointer-events: none; } -.dateinput { +.date-input { width: 210px; } .c-day-container.disabled .cdc-day span { - color: #ddd; - background: #fff !important; + color: var(--color-smoke-100); + background: var(--color-milk) !important; } -.c-day-container.highlight .cdc-day span { - border: 1px solid #d2dae0; +.c-day-container.highlight:not(.disabled) .cdc-day span { + border: 1px solid var(--color-smoke-100); } -.c-day-container.highlight-blue .cdc-day span { - background: #2e5dc5; - color: #fdfefe; +.c-day-container.highlight-blue:not(.disabled) .cdc-day span { + background: var(--color-azure-800); + color: var(--color-smoke-25); } .c-day-container.start-day { diff --git a/src/components/datepicker/datepicker.tsx b/src/components/datepicker/datepicker.tsx index 39077f59d..b262e81f7 100644 --- a/src/components/datepicker/datepicker.tsx +++ b/src/components/datepicker/datepicker.tsx @@ -1,34 +1,92 @@ -import { Component, Event, EventEmitter, Listen, Prop, State, h } from '@stencil/core'; +import { + Component, + Event, + EventEmitter, + Listen, + Prop, + State, + h +} from '@stencil/core'; import moment from 'moment-mini'; -const weekDay = ['S', 'M', 'T', 'W', 'T', 'F', 'S']; +const weekDay = [ + 'S', + 'M', + 'T', + 'W', + 'T', + 'F', + 'S' +]; +const monthArr = [ + 'Jan', + 'Feb', + 'Mar', + 'Apr', + 'May', + 'June', + 'July', + 'Aug', + 'Sep', + 'Oct', + 'Nov', + 'Dec' +]; -@Component({ - tag: 'fw-datepicker', - styleUrl: 'datepicker.scss', - shadow: true, -}) +@Component({tag: 'fw-datepicker', styleUrl: 'datepicker.scss', shadow: true}) export class Datepicker { - @State() showDatePicker: boolean; - @State() year: number; - @State() monthDetails: any; - @State() nextMonthDetails: any; - @State() month: number; - @State() todayTimestamp: any; - @State() selectedDay: any; - @State() startDateFormatted: any; - @State() endDateFormatted: any; - @State() dateHovered: any; - - @Prop() mode: string; - @Prop() minDate: any; - @Prop() maxDate: any; - @Prop() startDate: any; - @Prop() endDate: any; - @Prop() dateFormat: string; - @Prop() dateValue: any; - @Prop() placeholder: string; + @State()showDatePicker: boolean; + @State()year: string; + @State()toYear: string; + @State()monthDetails: any; + @State()nextMonthDetails: any; + @State()month: number; + @State()todayTimestamp: any; + @State()selectedDay: any; + @State()startDate: any; + @State()endDate: any; + @State()startDateFormatted: any; + @State()endDateFormatted: any; + @State()dateHovered: any; + @State()supportedYears: any; + @State()toMonth: number; + + /** + * Shows single date or date range picker based on mode + */ + @Prop() mode: string = 'single date'; + /** + * Minimum date that are allowed to select in the calender + */ + @Prop() minDate: string; + /** + * Maximum date that are allowed to select in the calender + */ + @Prop() maxDate: string; + /** + * From date that is selected in the date range picker mode + */ + @Prop({ mutable: true }) fromDate: string; + /** + * To date that is selected in the date range picker mode + */ + @Prop({ mutable: true }) toDate: string; + /** + * Selected Date will be retured in the given date format + */ + @Prop() dateFormat: string = 'DD-MM-YYYY'; + /** + * Value selected in the single date picker mode + */ + @Prop({ mutable: true }) value: any; + /** + * Placeholder to display in the input field + */ + @Prop() placeholder: string; + /** + * Triggered when the update button clicked + */ @Event() fwChange: EventEmitter; @Listen('fwFocus') @@ -43,59 +101,129 @@ export class Datepicker { if (isUpdateRange) { this.startDateFormatted = moment(this.startDate).format(this.dateFormat); this.endDateFormatted = moment(this.endDate).format(this.dateFormat); - this.dateValue = this.startDateFormatted + ' to ' + this.endDateFormatted; - this.fwChange.emit({ - fromDate: this.startDateFormatted, - toDate: this.endDateFormatted, - }); + this.value = this.startDateFormatted + ' To ' + this.endDateFormatted; + this.fromDate = this.startDateFormatted; + this.toDate = this.endDateFormatted; + this.fwChange.emit({fromDate: this.startDateFormatted, toDate: this.endDateFormatted}); } else if (isUpdateDate) { - this.dateValue = moment(this.selectedDay).format(this.dateFormat); - this.fwChange.emit(this.dateValue); + this.value = moment(this.selectedDay).format(this.dateFormat); + this.fwChange.emit(this.value); } this.showDatePicker = false; } - componentWillLoad() { - this.year = moment().year(); - this.month = moment().month(); + /* Listener to handle Month Year dropdown changes + */ + @Listen('fwChange') + handleMonthYearDropDownSelection(e) { + const newValue = e.detail && e.detail.value; + if(!newValue) { + return; + } + if(this.mode === 'range') { + this.handleDateRangeDropDownUpdate(e, newValue); + this.nextMonthDetails = this.getMonthDetails(this.toYear, this.toMonth); + } else { + this.handleSingleDateDropDownUpdate(e, newValue) + } this.monthDetails = this.getMonthDetails(this.year, this.month); - this.nextMonthDetails = this.month === 11 ? this.getMonthDetails(this.year + 1, 0) : this.getMonthDetails(this.year, this.month + 1); - this.todayTimestamp = moment().startOf('date').valueOf(); - this.dateFormat = this.dateFormat || 'DD-MM-YYYY'; - this.placeholder = this.placeholder || (this.mode === 'range' ? 'Select Date Range' : 'Select Date'); } - getMonthStr = month => { - if (month > 11) { - month = 0; + handleSingleDateDropDownUpdate(e, newValue) { + const isMonthUpdate = e.composedPath()[0].classList.value.includes('single-month-selector'); + const isYearUpdate = e.composedPath()[0].classList.value.includes('single-year-selector'); + + if (isMonthUpdate) { + this.month = monthArr.indexOf(newValue); + } else if (isYearUpdate) { + this.year = newValue; } - month = (month + 1).toString(); - return moment(month).format('MMMM'); } - getNextMonthYear = () => { - return this.month === 11 ? this.year + 1 : this.year; + handleDateRangeDropDownUpdate(e, newValue) { + const isFromMonthUpdate = e.composedPath()[0].classList.value.includes('from-month-selector'); + const isFromYearUpdate = e.composedPath()[0].classList.value.includes('from-year-selector'); + const isToMonthUpdate = e.composedPath()[0].classList.value.includes('to-month-selector'); + const isToYearUpdate = e.composedPath()[0].classList.value.includes('to-year-selector'); + + if (isFromMonthUpdate) { + this.month = monthArr.indexOf(newValue); + if (this.month === 11) { + this.toMonth = 0; + this.toYear = this.yearCalculation(this.year, 1); + } else { + this.toMonth = this.month + 1; + } + } + else if (isFromYearUpdate) { + this.year = newValue; + this.toYear = this.year; + } + else if (isToMonthUpdate) { + this.toMonth = monthArr.indexOf(newValue); + if (this.toMonth === 0) { + this.month = 11; + this.year = this.yearCalculation(this.toYear, -1); + } else { + this.month = this.toMonth - 1; + } + } + else if (isToYearUpdate) { + this.toYear = newValue; + this.year = this.toYear; + } } + yearCalculation(year, offset) { + const resultYear = Number(year) + offset; + return resultYear.toString(); + } + + getSupportedYears = () => { + let yearsArr = []; + let year = 1970; + while (year < 2050) { + yearsArr.push(year.toString()); + year++; + } + return yearsArr; + } + + componentWillLoad() { + this.year = moment().year().toString(); + this.month = moment().month(); + this.toMonth = this.month === 11 ? 0 : this.month+1; + this.toYear = this.toMonth === 0 ? this.yearCalculation(this.year, 1) : this.year; + this.monthDetails = this.getMonthDetails(this.year, this.month); + this.nextMonthDetails = this.month === 11 + ? this.getMonthDetails(this.yearCalculation(this.year, 1), 0) + : this.getMonthDetails(this.year, this.month + 1); + this.todayTimestamp = moment().startOf('date').valueOf(); + this.placeholder = this.placeholder || ( + this.mode === 'range' + ? 'Select Date Range' + : 'Select Date'); + this.supportedYears = this.getSupportedYears(); + } + + getDayDetails = args => { const date = args.index - args.firstDay; const day = args.index % 7; let prevMonth = args.month - 1; - let prevYear = args.year; + let prevYear = Number(args.year); if (prevMonth < 0) { prevMonth = 11; prevYear--; } const prevMonthNumberOfDays = moment([prevYear, prevMonth]).daysInMonth() || 0; - const _date = (date < 0 ? prevMonthNumberOfDays + date : date % args.numberOfDays) + 1; + const _date = ( + date < 0 + ? prevMonthNumberOfDays + date + : date % args.numberOfDays) + 1; const month = this._getValidDateInMonth(date, args); const timestamp = moment([args.year, args.month, _date]).valueOf(); - return { - date: _date, - day, - month, - timestamp, - }; + return {date: _date, day, month, timestamp}; } private _getValidDateInMonth(date, args) { if (this.minDate && this.maxDate) { @@ -105,12 +233,22 @@ export class Datepicker { const dateFormat = this.dateFormat || 'DD-MM-YYYY'; const minDate = moment(this.minDate, dateFormat); const maxDate = moment(this.maxDate, dateFormat); - const argDate = moment([args.year, args.month, date + 1]); + const argDate = moment([ + args.year, args.month, date + 1 + ]); const isValid = minDate.valueOf() <= argDate.valueOf() && argDate.valueOf() <= maxDate.valueOf(); - return !isValid ? -1 : date >= args.numberOfDays ? 1 : 0; + return !isValid + ? -1 + : date >= args.numberOfDays + ? 1 + : 0; } - return date < 0 ? -1 : date >= args.numberOfDays ? 1 : 0; + return date < 0 + ? -1 + : date >= args.numberOfDays + ? 1 + : 0; } private getMonthDetails = (year, month) => { @@ -124,13 +262,7 @@ export class Datepicker { for (let row = 0; row < rows; row++) { for (let col = 0; col < cols; col++) { - currentDay = this.getDayDetails({ - index, - numberOfDays, - firstDay, - year, - month, - }); + currentDay = this.getDayDetails({index, numberOfDays, firstDay, year, month}); monthArray.push(currentDay); index++; } @@ -139,7 +271,7 @@ export class Datepicker { } setMonth = offset => { - let year = this.year; + let year = Number(this.year); let month = this.month + offset; if (month === -1) { month = 11; @@ -148,17 +280,21 @@ export class Datepicker { month = 0; year++; } - this.year = year; + this.year = year.toString(); this.month = month; + this.toMonth = this.month === 11 ? 0 : this.month+1; + this.toYear = this.toMonth === 0 ? this.yearCalculation(this.year, 1) : this.year; this.monthDetails = this.getMonthDetails(year, month); - this.nextMonthDetails = this.month === 11 ? this.getMonthDetails(this.year + 1, 0) : this.getMonthDetails(this.year, this.month + 1); + this.nextMonthDetails = this.month === 11 + ? this.getMonthDetails(this.yearCalculation(this.year, 1), 0) + : this.getMonthDetails(this.year, this.month + 1); } isCurrentDay = day => { return day.timestamp === this.todayTimestamp; } - isSelectedDay = ({ timestamp }) => { + isSelectedDay = ({timestamp}) => { return timestamp === this.selectedDay || timestamp === this.startDate || timestamp === this.endDate; } @@ -168,23 +304,22 @@ export class Datepicker { } } - isInRange = ({ timestamp }) => { - const { endDate } = this; - const { startDate } = this; + isInRange = ({timestamp}) => { + const {endDate} = this; + const {startDate} = this; return startDate && endDate && ((timestamp >= startDate && timestamp <= endDate)); } - isHoverInRange({ timestamp }) { + isHoverInRange({timestamp}) { - const { startDate } = this; - const { dateHovered } = this; + const {startDate} = this; + const {dateHovered} = this; - return startDate && dateHovered && ((timestamp <= dateHovered && timestamp >= startDate) - || (timestamp >= dateHovered && timestamp <= startDate)); + return startDate && dateHovered && ((timestamp <= dateHovered && timestamp >= startDate) || (timestamp >= dateHovered && timestamp <= startDate)); } - onDateClick = ({ timestamp }) => { + onDateClick = ({timestamp}) => { if (this.showSingleDatePicker()) { this.selectedDay = timestamp; } else if (this.showDateRangePicker()) { @@ -240,27 +375,22 @@ export class Datepicker { private renderCalendar(monthDetails) { const days = monthDetails.map((day, index) => { - return ( -
-
- this.onDateClick(day)} onMouseOver={() => this.handleDateHover(day)}> - {day.date} - -
+ return (
+
+ this.onDateClick(day)} onMouseOver={() => this.handleDateHover(day)}> + {day.date} +
- ); +
); }); - return ( -
-
- {weekDay.map((day, index) =>
{day}
)} -
-
- {days} -
+ return (
+
+ {weekDay.map((day, index) =>
{day}
)} +
+
+ {days}
- ); +
); } private showSingleDatePicker() { return this.showDatePicker && this.mode !== 'range'; @@ -269,18 +399,13 @@ export class Datepicker { return this.showDatePicker && this.mode === 'range'; } render() { - return ( -
- - - {this.showSingleDatePicker() ? ( -
+ return (
+ + { + this.showSingleDatePicker() + ? (
- {/*Head section*/} + {/* Head section */}
this.setMonth(-1)}> @@ -288,8 +413,27 @@ export class Datepicker {
- {this.getMonthStr(this.month)} - {this.year} + + + { + monthArr.map((month, i) => + {month} + ) + } + + + + + + + { + this.supportedYears.map((year, i) => + {year} + ) + } + + +
this.setMonth(1)}> @@ -297,23 +441,28 @@ export class Datepicker {
- {/*Body Section*/} + {/* Body Section */}
{this.renderCalendar(this.monthDetails)}
- {/*Footer Section*/} + {/* Footer Section */}
- Update - Cancel + + Update + + + Cancel
-
- ) : ''} +
) + : '' + } - {this.showDateRangePicker() ? ( -
+ { + this.showDateRangePicker() + ? (
- {/*Head section*/} + {/* Head section */}
this.setMonth(-1)}> @@ -321,8 +470,27 @@ export class Datepicker {
- {this.getMonthStr(this.month)} - {this.year} + + + { + monthArr.map((month, i) => + + {month} + + ) + } + + + + { + this.supportedYears.map((year, i) => + + {year} + + ) + } + +
this.setMonth(1)}> @@ -330,11 +498,30 @@ export class Datepicker {
- {this.getNextMonthYear()} - {this.getMonthStr(this.month + 1)} + + + { + this.supportedYears.map((year, i) => + + {year} + + ) + } + + + + + { + monthArr.map((month, i) => + + {month} + ) + } + +
- {/*Body Section*/} + {/* Body Section */}
{this.renderCalendar(this.monthDetails)} @@ -344,15 +531,18 @@ export class Datepicker {
- {/*Footer Section*/} + {/* Footer Section */}
- Update - Cancel + + Update + + + Cancel
-
- ) : ''} +
) + : '' + } -
- ); +
); } } diff --git a/src/components/datepicker/readme.md b/src/components/datepicker/readme.md index 73eee76f1..d503fc5f3 100644 --- a/src/components/datepicker/readme.md +++ b/src/components/datepicker/readme.md @@ -7,23 +7,23 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | ------------- | ----------- | -------- | ----------- | -| `dateFormat` | `date-format` | | `string` | `undefined` | -| `dateValue` | `date-value` | | `any` | `undefined` | -| `endDate` | `end-date` | | `any` | `undefined` | -| `maxDate` | `max-date` | | `any` | `undefined` | -| `minDate` | `min-date` | | `any` | `undefined` | -| `mode` | `mode` | | `string` | `undefined` | -| `placeholder` | `placeholder` | | `string` | `undefined` | -| `startDate` | `start-date` | | `any` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------- | ------------- | -------------------------------------------------------- | -------- | --------------- | +| `dateFormat` | `date-format` | Selected Date will be retured in the given date format | `string` | `'DD-MM-YYYY'` | +| `fromDate` | `from-date` | From date that is selected in the date range picker mode | `string` | `undefined` | +| `maxDate` | `max-date` | Maximum date that are allowed to select in the calender | `string` | `undefined` | +| `minDate` | `min-date` | Minimum date that are allowed to select in the calender | `string` | `undefined` | +| `mode` | `mode` | Shows single date or date range picker based on mode | `string` | `'single date'` | +| `placeholder` | `placeholder` | Placeholder to display in the input field | `string` | `undefined` | +| `toDate` | `to-date` | To date that is selected in the date range picker mode | `string` | `undefined` | +| `value` | `value` | Value selected in the single date picker mode | `any` | `undefined` | ## Events -| Event | Description | Type | -| ---------- | ----------- | ------------------ | -| `fwChange` | | `CustomEvent` | +| Event | Description | Type | +| ---------- | ---------------------------------------- | ------------------ | +| `fwChange` | Triggered when the update button clicked | `CustomEvent` | ## Dependencies @@ -31,14 +31,20 @@ ### Depends on - [fw-input](../input) +- [fw-select](../select) +- [fw-select-option](../select-option) - [fw-button](../button) ### Graph ```mermaid graph TD; fw-datepicker --> fw-input + fw-datepicker --> fw-select + fw-datepicker --> fw-select-option fw-datepicker --> fw-button fw-input --> fw-icon + fw-select --> fw-tag + fw-select --> fw-select-option style fw-datepicker fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md index 0a46fd764..a4c834a6a 100644 --- a/src/components/icon/readme.md +++ b/src/components/icon/readme.md @@ -24,13 +24,6 @@ The following are the icons supported: | `size` | `size` | Size of the icon, specified in number of pixels. | `number` | `12` | -## CSS Custom Properties - -| Name | Description | -| -------------- | ----------------- | -| `--icon-color` | Color of the icon | - - ## Dependencies ### Used by diff --git a/src/components/select-option/readme.md b/src/components/select-option/readme.md index 9540914c0..2eff68205 100644 --- a/src/components/select-option/readme.md +++ b/src/components/select-option/readme.md @@ -35,12 +35,14 @@ fw-select-option provides child elements for fw-select, to populate the Select c ### Used by + - [fw-datepicker](../datepicker) - [fw-select](../select) - [fw-timepicker](../timepicker) ### Graph ```mermaid graph TD; + fw-datepicker --> fw-select-option fw-select --> fw-select-option fw-timepicker --> fw-select-option style fw-select-option fill:#f9f,stroke:#333,stroke-width:4px diff --git a/src/components/select/readme.md b/src/components/select/readme.md index e00c80bd4..37ab8be93 100644 --- a/src/components/select/readme.md +++ b/src/components/select/readme.md @@ -61,18 +61,11 @@ Type: `Promise` -## CSS Custom Properties - -| Name | Description | -| -------------- | -------------------------------------- | -| `--max-height` | Maximum height of the select component | -| `--min-height` | Minimum height of the select component | - - ## Dependencies ### Used by + - [fw-datepicker](../datepicker) - [fw-timepicker](../timepicker) ### Depends on @@ -85,6 +78,7 @@ Type: `Promise` graph TD; fw-select --> fw-tag fw-select --> fw-select-option + fw-datepicker --> fw-select fw-timepicker --> fw-select style fw-select fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/src/components/select/select.scss b/src/components/select/select.scss index e24020c46..dfa3a54fb 100644 --- a/src/components/select/select.scss +++ b/src/components/select/select.scss @@ -67,6 +67,7 @@ label { letter-spacing: 0; line-height: 1.4; background-color: var(--input-bg); + width: 98%; &:focus { border: none; diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx index d7d32d099..25d0eab2a 100644 --- a/src/components/select/select.tsx +++ b/src/components/select/select.tsx @@ -101,6 +101,7 @@ export class Select { private innerOnBlur = (e: Event) => { this.closeDropdown(); + this.hasFocus = false; this.fwBlur.emit(e); } @@ -217,6 +218,9 @@ export class Select { } componentDidLoad() { + if(this.value) { + this.selectInput.value = this.value; + } this.renderInput(); } diff --git a/src/components/spinner/readme.md b/src/components/spinner/readme.md index 30d360321..ecf76b113 100644 --- a/src/components/spinner/readme.md +++ b/src/components/spinner/readme.md @@ -21,13 +21,6 @@ fw-spinner displays a continuous loader on the user interface, to indicate that | `size` | `size` | Size of the loader. | `"default" or "large" or "medium" or "small"` | `'default'` | -## CSS Custom Properties - -| Name | Description | -| ----------------- | -------------------- | -| `--spinner-color` | Color of the spinner | - - ---------------------------------------------- Built with ❤ at Freshworks diff --git a/src/components/tabs/readme.md b/src/components/tabs/readme.md index 3dc18ff27..77ba78f16 100644 --- a/src/components/tabs/readme.md +++ b/src/components/tabs/readme.md @@ -35,13 +35,6 @@ fw-tabs displays a series of tabs on the user interface and enables tab-style na -## CSS Custom Properties - -| Name | Description | -| ------------------------ | ------------------------------ | -| `--tab-header-font-size` | tab-header font size in pixels | - - ---------------------------------------------- Built with ❤ at Freshworks